diff --git a/frontend/src/app/main/data/workspace/shape_layout.cljs b/frontend/src/app/main/data/workspace/shape_layout.cljs index 01f2fecb0..0bdc1e582 100644 --- a/frontend/src/app/main/data/workspace/shape_layout.cljs +++ b/frontend/src/app/main/data/workspace/shape_layout.cljs @@ -311,11 +311,13 @@ (update [_ state] (let [objects (wsh/lookup-page-objects state) shape (get objects (first ids)) - highlighted (when hover? - (->> (if (= type :row) - (ctl/shapes-by-row shape index) - (ctl/shapes-by-column shape index)) - (set)))] + + highlighted + (when hover? + (->> (if (= type :row) + (ctl/shapes-by-row shape index) + (ctl/shapes-by-column shape index)) + (set)))] (cond-> state hover? (update-in [:workspace-grid-edition (first ids) :hover-track] (fnil conj #{}) [type index]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs index b76d8efe2..c0bd4e527 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs @@ -53,6 +53,7 @@ selected? (contains? selected id) highlighted? (contains? highlighted id) + container? (or (cfh/frame-shape? item) (cfh/group-shape? item)) absolute? (ctl/layout-absolute? item) @@ -229,6 +230,7 @@ :id id :class (stl/css-case :layer-row true + :highlight highlighted? :component (some? (:component-id item)) :masked (:masked-group item) :selected selected? @@ -329,6 +331,7 @@ (when-let [item (get objects id)] [:& layer-item {:item item + :highlighted highlighted :selected selected :index index :objects objects diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss index 6a42cc6a5..a7fd62bac 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss @@ -139,6 +139,7 @@ } } } + &.highlight, &:hover { --context-hover-color: var(--layer-row-foreground-color-hover); --context-hover-opacity: $op-10; @@ -238,12 +239,14 @@ .element-children { background-color: transparent; color: var(--layer-row-foreground-color-selected); - &:hover { - background-color: var(--layer-row-background-color-selected); - } } + &.highlight, &:hover { background-color: var(--layer-row-background-color-selected); + + .element-children { + background-color: var(--layer-row-background-color-selected); + } } } &.type-comp { @@ -295,6 +298,7 @@ } } } + &.highlight, &:hover { .element-list-body { .button-content { @@ -376,6 +380,7 @@ } } } + &.highlight, &:hover { .element-list-body { .button-content { @@ -404,6 +409,7 @@ } } } + &.highlight, &:hover { .element-list-body { .button-content { @@ -437,6 +443,8 @@ } .parent-selected .layer-row { background-color: var(--layer-child-row-background-color); + + &.highlight, &:hover { background-color: var(--layer-row-background-color-hover); &.hidden { @@ -478,6 +486,7 @@ .element-children :global(.layer-row) { background-color: transparent; color: var(--layer-row-foreground-color-hover); + &.highlight, &:hover { background-color: var(--layer-row-background-color-hover); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index 04a5f04d9..94a8f9790 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -224,7 +224,7 @@ .track-info-dir-icon { border-radius: $br-8 0 0 $br-8; background-color: var(--input-background-color); - padding-left: $s-12; + padding: 0 $s-8; svg { @extend .button-icon;