diff --git a/CHANGES.md b/CHANGES.md index eeda0eb1f..4d16bb768 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -5,6 +5,7 @@ ### :boom: Breaking changes ### :sparkles: New features +- Set the artboard layer fixed at the top side of the layers [Taiga #2636](https://tree.taiga.io/project/penpot/us/2636) - Set an artboard as the file thumbnail [Taiga #1526](https://tree.taiga.io/project/penpot/us/1526) - Social login redesign [Taiga #2974](https://tree.taiga.io/project/penpot/task/2974) - Add border radius to our artboars [Taiga #2056](https://tree.taiga.io/project/penpot/us/2056) diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss index 666319fe6..432f8cfc8 100644 --- a/frontend/resources/styles/main/partials/sidebar-layers.scss +++ b/frontend/resources/styles/main/partials/sidebar-layers.scss @@ -108,6 +108,21 @@ } } +.element-list li.sticky { + > :first-child { + position: sticky; + top: 0px; + background-color: $color-gray-50; + z-index: 1; + &.selected { + background-color: #1f1f1f; + } + &:hover { + background-color: #31efb8; + } + } +} + .element-list li.component { .element-list-body { span.element-name { @@ -157,6 +172,10 @@ top: -1px; left: -4px; } + + &.sticky { + margin-top: 32px; + } } &:last-child { diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 73d7acaed..b361be875 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -99,8 +99,8 @@ disable-drag (mf/use-state false) expanded-iref (mf/use-memo - (mf/deps id) - (make-collapsed-iref id)) + (mf/deps id) + (make-collapsed-iref id)) expanded? (mf/deref expanded-iref) @@ -197,12 +197,13 @@ [:li {:on-context-menu on-context-menu :ref dref :class (dom/classnames - :component (not (nil? (:component-id item))) - :masked (:masked-group? item) - :dnd-over (= (:over dprops) :center) - :dnd-over-top (= (:over dprops) :top) - :dnd-over-bot (= (:over dprops) :bot) - :selected selected?)} + :component (not (nil? (:component-id item))) + :masked (:masked-group? item) + :dnd-over (= (:over dprops) :center) + :dnd-over-top (= (:over dprops) :top) + :dnd-over-bot (= (:over dprops) :bot) + :selected selected? + :type-frame (= :frame (:type item)))} [:div.element-list-body {:class (dom/classnames :selected selected? :icon-layer (= (:type item) :icon)) @@ -318,7 +319,22 @@ (let [page (mf/deref refs/workspace-page) focus (mf/deref refs/workspace-focus-selected) objects (hooks/with-focus-objects (:objects page) focus) - title (when (= 1 (count focus)) (get-in objects [(first focus) :name]))] + title (when (= 1 (count focus)) (get-in objects [(first focus) :name])) + + on-scroll + (fn [event] + (let [target (dom/get-target event) + target-top (:top (dom/get-bounding-rect target)) + frames (dom/get-elements-by-class "type-frame") + last-hidden-frame (->> frames + (filter #(< (- (:top (dom/get-bounding-rect %)) target-top) 0)) + last)] + (doseq [frame frames] + (dom/remove-class! frame "sticky")) + + (when last-hidden-frame + (dom/add-class! last-hidden-frame "sticky"))))] + [:div#layers.tool-window (if (d/not-empty? focus) [:div.tool-window-bar @@ -332,6 +348,6 @@ [:div.tool-window-bar [:span (:name page)]]) - [:div.tool-window-content + [:div.tool-window-content {:on-scroll on-scroll} [:& layers-tree-wrapper {:key (:id page) :objects objects}]]]))