Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-25 07:58:49 -05:00
Code Issues Activity

✨ Add icon to artboard thumbnail

Browse source
This commit is contained in:
Pablo Alba 2022-05-05 17:11:45 +02:00
parent fe6e62482a
commit d9a9eb3729
4 changed files with 49 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/images/icons/set-thumbnail.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<path d="M0 0h500v500H0Zm50 50v400h400V50Zm241.416 73.877c-5.652 0-10.234 4.582-10.234 10.234v71.637c0 5.652 4.582 10.234 10.234 10.234h71.638c5.652 0 10.234-4.582 10.234-10.234v-71.637c0-5.652-4.582-10.234-10.234-10.234zm-157.894 0c-5.652 0-10.234 4.582-10.234 10.234v71.637c0 5.652 4.582 10.234 10.234 10.234h71.637c5.652 0 10.234-4.582 10.234-10.234v-71.637c0-5.652-4.582-10.234-10.234-10.234zM291.416 281.77c-5.652 0-10.234 4.582-10.234 10.234v71.638c0 5.652 4.582 10.234 10.234 10.234h71.638c5.652 0 10.234-4.582 10.234-10.234v-71.638c0-5.652-4.582-10.234-10.234-10.234zm-157.894 0c-5.652 0-10.234 4.582-10.234 10.234v71.638c0 5.652 4.582 10.234 10.234 10.234h71.637c5.652 0 10.234-4.582 10.234-10.234v-71.638c0-5.652-4.582-10.234-10.234-10.234z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 826 B

4
frontend/resources/styles/main/partials/workspace.scss
View file

@ -316,6 +316,10 @@ $height-palette-max: 80px;
}
}
.workspace-frame-icon {
fill: $color-gray-40;
}
.workspace-frame-label {
fill: $color-gray-40;
font-size: $fs12;

1
frontend/src/app/main/ui/icons.cljs
View file

@ -138,6 +138,7 @@
(def ruler (icon-xref :ruler))
(def ruler-tool (icon-xref :ruler-tool))
(def search (icon-xref :search))
(def set-thumbnail (icon-xref :set-thumbnail))
(def shape-halign-center (icon-xref :shape-halign-center))
(def shape-halign-left (icon-xref :shape-halign-left))
(def shape-halign-right (icon-xref :shape-halign-right))

68
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View file

@ -108,19 +108,19 @@
on-double-click
(mf/use-callback
(mf/deps (:id frame))
(st/emitf (dw/go-to-layout :layers)
(dw/start-rename-shape (:id frame))))
(mf/deps (:id frame))
(st/emitf (dw/go-to-layout :layers)
(dw/start-rename-shape (:id frame))))
on-context-menu
(mf/use-callback
(mf/deps frame)
(fn [bevent]
(let [event (.-nativeEvent bevent)
position (dom/get-client-position event)]
(dom/prevent-default event)
(dom/stop-propagation event)
(st/emit! (dw/show-shape-context-menu {:position position :shape frame})))))
(mf/deps frame)
(fn [bevent]
(let [event (.-nativeEvent bevent)
position (dom/get-client-position event)]
(dom/prevent-default event)
(dom/stop-propagation event)
(st/emit! (dw/show-shape-context-menu {:position position :shape frame})))))
on-pointer-enter
(mf/use-callback
@ -132,24 +132,38 @@
(mf/use-callback
(mf/deps (:id frame) on-frame-leave)
(fn [_]
(on-frame-leave (:id frame))))]
(on-frame-leave (:id frame))))
text-pos-x (if (:use-for-thumbnail? frame) 15 0)]
[:text {:x 0
:y 0
:width width
:height 20
:class "workspace-frame-label"
:transform (str (when (and selected? modifiers)
(str (:displacement modifiers) " " ))
(text-transform label-pos zoom))
:style {:fill (when selected? "var(--color-primary-dark)")}
:visibility (if show-artboard-names? "visible" "hidden")
:on-mouse-down on-mouse-down
:on-double-click on-double-click
:on-context-menu on-context-menu
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave}
(:name frame)]))
[:*
(when (:use-for-thumbnail? frame)
[:g {:transform (str (when (and selected? modifiers)
(str (:displacement modifiers) " "))
(text-transform label-pos zoom))}
[:svg {:x 0
:y -9
:width 12
:height 12
:class "workspace-frame-icon"
:style {:fill (when selected? "var(--color-primary-dark)")}
:visibility (if show-artboard-names? "visible" "hidden")}
[:use {:xlinkHref "#icon-set-thumbnail"}]]])
[:text {:x text-pos-x
:y 0
:width width
:height 20
:class "workspace-frame-label"
:transform (str (when (and selected? modifiers)
(str (:displacement modifiers) " "))
(text-transform label-pos zoom))
:style {:fill (when selected? "var(--color-primary-dark)")}
:visibility (if show-artboard-names? "visible" "hidden")
:on-mouse-down on-mouse-down
:on-double-click on-double-click
:on-context-menu on-context-menu
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave}
(:name frame)]]))
(mf/defc frame-titles
{::mf/wrap-props false}