fix: LSDV-5145: Regions hover lock consistency (#1411)

* fix: lsdv-5145: regions hover lock consistancy

* fix the hover states for outliner item controls in new ui

---------

Co-authored-by: Brandon Martel <[email protected]>

Author: Travis1282

src/components/SidePanels/Components/LockButton.tsx

@@ -3,6 +3,7 @@ import { FC } from 'react';
 import { IconLockLocked, IconLockUnlocked } from '../../../assets/icons';
 import { ButtonProps } from '../../../common/Button/Button';
 import { RegionControlButton } from './RegionControlButton';
+import { FF_DEV_3873, isFF } from '../../../utils/feature-flags';
 
 export const LockButton: FC<{
   item: any,
@@ -18,9 +19,25 @@ export const LockButton: FC<{
   const isLocked = locked || item.isReadOnly() || annotation.isReadOnly();
   const isRegionReadonly = item.isReadOnly() && !locked;
 
-  return item && (hovered || item.isReadOnly() || locked) && (
-    <RegionControlButton disabled={isRegionReadonly} onClick={onClick} hotkey={hotkey} look={look} style={style}>
-      {isLocked ? <IconLockLocked/> : <IconLockUnlocked/>}
-    </RegionControlButton>
+  if (isFF(FF_DEV_3873)) {
+    const styles = {
+      ...style,
+      display: item.isReadOnly() || locked ? undefined : 'none',
+    };
+
+    return (
+      <RegionControlButton disabled={isRegionReadonly} onClick={onClick} hotkey={hotkey} look={look} style={styles}>
+        {isLocked ? <IconLockLocked /> : <IconLockUnlocked />}
+      </RegionControlButton>
+    );
+  }
+
+  return (
+    item &&
+    (hovered || item.isReadOnly() || locked) && (
+      <RegionControlButton disabled={isRegionReadonly} onClick={onClick} hotkey={hotkey} look={look} style={style}>
+        {isLocked ? <IconLockLocked /> : <IconLockUnlocked />}
+      </RegionControlButton>
+    )
   );
 });

src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx

@@ -157,7 +157,7 @@ const useDataTree = ({
         '--selection-color': color.alpha(0.1).css(),
       },
       className: rootClass.elem('node').mod(mods).toClassName(),
-      title: (data: any) => <RootTitle {...data}/>,
+      title: (data: any) => <RootTitle {...data} />,
     };
   }, [hovered, selectedKeys]);
 
@@ -442,7 +442,11 @@ const RegionControls: FC<RegionControlsProps> = observer(({
           />
         </Elem>
         <Elem name="control" mod={{ type: 'visibility' }}>
-          {(hovered || hidden) && (
+          {isFF(FF_DEV_3873) ? (
+            <RegionControlButton onClick={onToggleHidden} style={hidden ? undefined : ({ display: 'none' })}>
+              {hidden ? <IconEyeClosed/> : <IconEyeOpened/>}
+            </RegionControlButton>
+          ) : (hovered || hidden) && (
             <RegionControlButton onClick={onToggleHidden}>
               {hidden ? <IconEyeClosed/> : <IconEyeOpened/>}
             </RegionControlButton>

src/components/SidePanels/OutlinerPanel/TreeView.styl

@@ -18,10 +18,12 @@
       background-color var(--selection-color, rgba(#000, 0.04))
 
     &:hover .outliner-item__controls
-      display grid
+      display flex
 
-      &_newUI
-        display flex
+    &:hover .outliner-item__controls_newUI
+      .outliner-item__control_type_lock button,
+      .outliner-item__control_type_visibility button
+        display inline-flex !important
 
   &-switcher
     width 24px
@@ -136,17 +138,15 @@
       position initial
       justify-content space-between
 
-      .outliner-item__control_type_dirty
-        display none
-
-      .outliner-item__control_type_lock
-        display none
-
       .outliner-item__control_type_predict
         width 14px
 
       .outliner-item__control_type_score
         font-size 12px
+      
+      .outliner-item__control_type_predict:empty,
+      .outliner-item__control_type_score:empty
+        display none
 
     &_withControls
       grid-template-columns repeat(6, 32px)
@@ -170,10 +170,7 @@
         color $magic_color
 
   &:hover &__controls
-    display grid
-
-    &_newUI
-      display flex
+    display flex
 
     .outliner-item__control_type_lock
       display flex