feat: layers caret mark, row animations and settings strings

Author: devvaannsh

src/nls/root/strings.js

@@ -825,8 +825,9 @@ define({
     "LIVE_PREVIEW_LAYERS_EXPAND_LEVEL": "Expand to Level",
     "LIVE_PREVIEW_LAYERS_LEVEL": "Level {0}",
     "LIVE_PREVIEW_LAYERS_LEVEL_ALL": "All Levels",
+    "LIVE_PREVIEW_LAYERS_SETTINGS": "Settings",
     "LIVE_PREVIEW_LAYERS_SHOW_TEXT_NODES": "Show Text Nodes",
-    "LIVE_PREVIEW_LAYERS_HIDE_TEXT_NODES": "Hide Text Nodes",
+    "LIVE_PREVIEW_LAYERS_HIGHLIGHT_ON_HOVER": "Highlight on Hover in Preview",
     "LIVE_PREVIEW_LAYERS_MOVE_UP": "Move Up",
     "LIVE_PREVIEW_LAYERS_MOVE_DOWN": "Move Down",
     "LIVE_PREVIEW_LAYERS_DRAG_TO_MOVE": "Drag to move",

src/styles/Extn-LayersPanel.less

@@ -405,7 +405,7 @@
         font-size: @sidebar-content-font-size;
     }
 
-    .layers-tree.layers-kbd-nav .layers-node:hover:not(.layers-selected) {
+    .layers-tree.layers-kbd-nav .layers-node:hover:not(.layers-selected):not(.layers-cursor) {
         background: transparent;
     }
 
@@ -435,6 +435,25 @@
             background: @layers-row-select-bg;
             box-shadow: inset 2px 0 0 @layers-accent;
         }
+
+        &.layers-cursor {
+            background: @layers-hover-bg;
+            box-shadow: inset 2px 0 0 fade(@layers-accent, 70%);
+        }
+
+        &.layers-cursor-ancestor {
+            box-shadow: inset 2px 0 0 fade(@layers-accent, 35%);
+        }
+
+        &.layers-moving {
+            position: relative;
+            z-index: 1;
+            transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
+        }
+
+        &.layers-spring {
+            animation: layers-spring-row 600ms ease-in-out;
+        }
     }
 
     .layers-twisty {
@@ -507,6 +526,10 @@
         background: @layers-row-select-bg;
     }
 
+    .layers-node.layers-cursor .layers-node-actions {
+        background: @layers-row-hover-bg;
+    }
+
     .layers-node-action {
         .layers-icon-button();
 
@@ -868,9 +891,34 @@ body.layers-dnd-invalid {
     }
 }
 
+@keyframes layers-spring-row {
+    0%, 100% {
+        background-color: @layers-accent-soft;
+        box-shadow: inset 0 0 0 1px @layers-accent;
+    }
+
+    25%, 75% {
+        background-color: transparent;
+        box-shadow: inset 0 0 0 1px transparent;
+    }
+
+    50% {
+        background-color: @layers-accent-soft;
+        box-shadow: inset 0 0 0 1px @layers-accent;
+    }
+}
+
 @media (prefers-reduced-motion: reduce) {
     .layers-tab-container .layers-node.layers-flash {
         animation-duration: 1ms;
         background-color: fade(@layers-accent, 32%);
     }
+
+    .layers-tab-container .layers-node.layers-moving {
+        transition: none;
+    }
+
+    .layers-tab-container .layers-node.layers-spring {
+        animation: none;
+    }
 }