Skip to content

Commit 802d013

Browse files
waleedlatif1waleedlatif1
committed
improvement(sidebar): swap lock indicator with more button on hover
1 parent ef08edc commit 802d013

2 files changed

Lines changed: 80 additions & 72 deletions

File tree

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx‎

Lines changed: 47 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -514,33 +514,17 @@ export function FolderItem({
514514
)}
515515
aria-hidden='true'
516516
/>
517-
<span className='relative flex-shrink-0'>
518-
{isExpanded ? (
519-
<FolderOpen className='h-[16px] w-[16px] text-[var(--text-icon)]' aria-hidden='true' />
520-
) : (
521-
<Folder className='h-[16px] w-[16px] text-[var(--text-icon)]' aria-hidden='true' />
522-
)}
523-
{folder.locked && (
524-
<Tooltip.Root>
525-
<Tooltip.Trigger asChild>
526-
<button
527-
type='button'
528-
aria-label='Folder is locked'
529-
className='-right-[4px] -bottom-[4px] absolute flex h-[12px] w-[12px] items-center justify-center rounded-full bg-[var(--surface-1)] outline-none focus-visible:ring-1 focus-visible:ring-[var(--text-icon)]'
530-
onClick={(e) => e.preventDefault()}
531-
>
532-
<Lock
533-
className='pointer-events-none h-[10px] w-[10px] text-[var(--text-icon)]'
534-
aria-hidden='true'
535-
/>
536-
</button>
537-
</Tooltip.Trigger>
538-
<Tooltip.Content side='bottom'>
539-
<span>Locked</span>
540-
</Tooltip.Content>
541-
</Tooltip.Root>
542-
)}
543-
</span>
517+
{isExpanded ? (
518+
<FolderOpen
519+
className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]'
520+
aria-hidden='true'
521+
/>
522+
) : (
523+
<Folder
524+
className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]'
525+
aria-hidden='true'
526+
/>
527+
)}
544528
{isEditing ? (
545529
<input
546530
ref={inputRef}
@@ -570,19 +554,43 @@ export function FolderItem({
570554
{folder.name}
571555
</span>
572556
</div>
573-
<button
574-
type='button'
575-
aria-label='Folder options'
576-
onPointerDown={handleMorePointerDown}
577-
onClick={handleMoreClick}
578-
className={clsx(
579-
'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity',
580-
!isAnyDragActive && 'group-hover:opacity-100',
581-
isContextMenuOpen && 'opacity-100'
557+
<div className='relative h-[18px] w-[18px] flex-shrink-0'>
558+
{folder.locked && (
559+
<Tooltip.Root>
560+
<Tooltip.Trigger asChild>
561+
<span
562+
aria-label='Folder is locked'
563+
className={clsx(
564+
'absolute inset-0 flex items-center justify-center transition-opacity',
565+
!isAnyDragActive && 'group-hover:opacity-0',
566+
isContextMenuOpen && 'opacity-0'
567+
)}
568+
>
569+
<Lock
570+
className='h-[14px] w-[14px] text-[var(--text-icon)]'
571+
aria-hidden='true'
572+
/>
573+
</span>
574+
</Tooltip.Trigger>
575+
<Tooltip.Content side='bottom'>
576+
<span>Locked</span>
577+
</Tooltip.Content>
578+
</Tooltip.Root>
582579
)}
583-
>
584-
<MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-icon)]' />
585-
</button>
580+
<button
581+
type='button'
582+
aria-label='Folder options'
583+
onPointerDown={handleMorePointerDown}
584+
onClick={handleMoreClick}
585+
className={clsx(
586+
'absolute inset-0 flex items-center justify-center rounded-sm opacity-0 transition-opacity',
587+
!isAnyDragActive && 'group-hover:opacity-100',
588+
isContextMenuOpen && 'opacity-100'
589+
)}
590+
>
591+
<MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-icon)]' />
592+
</button>
593+
</div>
586594
</div>
587595
)}
588596
</div>

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -432,36 +432,14 @@ export function WorkflowItem({
432432
onClick={handleClick}
433433
onContextMenu={handleContextMenu}
434434
>
435-
<div className='relative flex-shrink-0'>
436-
<div
437-
className='h-[16px] w-[16px] rounded-sm border-[2.5px]'
438-
style={{
439-
backgroundColor: workflow.color,
440-
borderColor: workflowBorderColor(workflow.color),
441-
backgroundClip: 'padding-box',
442-
}}
443-
/>
444-
{workflow.locked && (
445-
<Tooltip.Root>
446-
<Tooltip.Trigger asChild>
447-
<button
448-
type='button'
449-
aria-label='Workflow is locked'
450-
className='-right-[4px] -bottom-[4px] absolute flex h-[12px] w-[12px] items-center justify-center rounded-full bg-[var(--surface-1)] outline-none focus-visible:ring-1 focus-visible:ring-[var(--text-icon)]'
451-
onClick={(e) => e.preventDefault()}
452-
>
453-
<Lock
454-
className='pointer-events-none h-[10px] w-[10px] text-[var(--text-icon)]'
455-
aria-hidden='true'
456-
/>
457-
</button>
458-
</Tooltip.Trigger>
459-
<Tooltip.Content side='bottom'>
460-
<span>Locked</span>
461-
</Tooltip.Content>
462-
</Tooltip.Root>
463-
)}
464-
</div>
435+
<div
436+
className='h-[16px] w-[16px] flex-shrink-0 rounded-sm border-[2.5px]'
437+
style={{
438+
backgroundColor: workflow.color,
439+
borderColor: workflowBorderColor(workflow.color),
440+
backgroundClip: 'padding-box',
441+
}}
442+
/>
465443
<div className='min-w-0 flex-1'>
466444
<div className='flex min-w-0 items-center gap-2'>
467445
{isEditing ? (
@@ -495,21 +473,43 @@ export function WorkflowItem({
495473
</div>
496474
</div>
497475
{!isEditing && (
498-
<>
476+
<div className='relative h-[18px] w-[18px] flex-shrink-0'>
477+
{workflow.locked && (
478+
<Tooltip.Root>
479+
<Tooltip.Trigger asChild>
480+
<span
481+
aria-label='Workflow is locked'
482+
className={clsx(
483+
'absolute inset-0 flex items-center justify-center transition-opacity',
484+
!isAnyDragActive && 'group-hover:opacity-0',
485+
isContextMenuOpen && 'opacity-0'
486+
)}
487+
>
488+
<Lock
489+
className='h-[14px] w-[14px] text-[var(--text-icon)]'
490+
aria-hidden='true'
491+
/>
492+
</span>
493+
</Tooltip.Trigger>
494+
<Tooltip.Content side='bottom'>
495+
<span>Locked</span>
496+
</Tooltip.Content>
497+
</Tooltip.Root>
498+
)}
499499
<button
500500
type='button'
501501
aria-label='Workflow options'
502502
onPointerDown={handleMorePointerDown}
503503
onClick={handleMoreClick}
504504
className={clsx(
505-
'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity',
505+
'absolute inset-0 flex items-center justify-center rounded-sm opacity-0 transition-opacity',
506506
!isAnyDragActive && 'group-hover:opacity-100',
507507
isContextMenuOpen && 'opacity-100'
508508
)}
509509
>
510510
<MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-icon)]' />
511511
</button>
512-
</>
512+
</div>
513513
)}
514514
</Link>
515515

0 commit comments

Comments
 (0)