Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 02:28:18 -05:00
Code Issues Activity

Merge pull request #1686 from penpot/artboard-fixed

Browse source 
✨ Set the artboard layer fixed at the top side of the layers
This commit is contained in:
Alejandro 2022-03-15 11:37:20 +01:00 • committed by GitHub
commit b0e2200166
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -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)

19
frontend/resources/styles/main/partials/sidebar-layers.scss
View file

@ -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 {

36
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View file

@ -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}]]]))