Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 06:02:32 -05:00
Code Issues Activity

re-use workspace context menu entry and fix double nested ul

Browse source
This commit is contained in:
Akshay Gupta 2024-05-15 14:40:46 +05:30
parent 316db61c8a
commit 5fa2048b23
2 changed files with 5 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
View file

@ -17,6 +17,7 @@
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i]
[app.main.ui.workspace.context-menu :refer [menu-entry prevent-default]]
[app.util.dom :as dom]
[app.util.timers :as timers]
[okulary.core :as l]
@ -25,101 +26,15 @@
(def tokens-menu-ref
(l/derived :token-context-menu refs/workspace-local))
(defn- prevent-default
[event]
(dom/prevent-default event)
(dom/stop-propagation event))
(mf/defc token-menu-entry
{::mf/props :obj}
[{:keys [title shortcut on-click on-pointer-enter on-pointer-leave
on-unmount children selected? icon disabled value]}]
(let [submenu-ref (mf/use-ref nil)
hovering? (mf/use-ref false)
on-pointer-enter
(mf/use-callback
(fn []
(mf/set-ref-val! hovering? true)
(let [submenu-node (mf/ref-val submenu-ref)]
(when (some? submenu-node)
(dom/set-css-property! submenu-node "display" "block")))
(when on-pointer-enter (on-pointer-enter))))
on-pointer-leave
(mf/use-callback
(fn []
(mf/set-ref-val! hovering? false)
(let [submenu-node (mf/ref-val submenu-ref)]
(when (some? submenu-node)
(timers/schedule
200
#(when-not (mf/ref-val hovering?)
(dom/set-css-property! submenu-node "display" "none")))))
(when on-pointer-leave (on-pointer-leave))))
set-dom-node
(mf/use-callback
(fn [dom]
(let [submenu-node (mf/ref-val submenu-ref)]
(when (and (some? dom) (some? submenu-node))
(dom/set-css-property! submenu-node "top" (str (.-offsetTop dom) "px"))))))]
(mf/use-effect
(mf/deps on-unmount)
(constantly on-unmount))
(if icon
[:li {:class (stl/css :icon-menu-item)
:disabled disabled
:data-value value
:ref set-dom-node
:on-click on-click
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave}
[:span
{:class (stl/css :icon-wrapper)}
(if selected? [:span {:class (stl/css :selected-icon)}
i/tick]
[:span {:class (stl/css :selected-icon)}])
[:span {:class (stl/css :shape-icon)} icon]]
[:span {:class (stl/css :title)} title]]
[:li {:class (stl/css :context-menu-item)
:disabled disabled
:ref set-dom-node
:data-value value
:on-click on-click
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave}
[:span {:class (stl/css :title)} title]
(when shortcut
[:span {:class (stl/css :shortcut)}
(for [[idx sc] (d/enumerate (scd/split-sc shortcut))]
[:span {:key (dm/str shortcut "-" idx)
:class (stl/css :shortcut-key)} sc])])
(when (> (count children) 1)
[:span {:class (stl/css :submenu-icon)} i/arrow])
(when (> (count children) 1)
[:ul {:class (stl/css :token-context-submenu)
:ref submenu-ref
:style {:display "none" :left 250}
:on-context-menu prevent-default}
children])])))
(mf/defc menu-separator
[]
[:li {:class (stl/css :separator)}])
(mf/defc token-pill-context-menu
[{:keys [token-id]}]
(let [do-delete #(st/emit! (dt/delete-token token-id))
do-duplicate #(js/console.log "Duplicating")
do-edit #(js/console.log "Editing")]
[:ul.context-list
[:& token-menu-entry {:title "Delete Token" :on-click do-delete}]
[:& token-menu-entry {:title "Duplicate Token" :on-click do-duplicate}]
[:& token-menu-entry {:title "Edit Token" :on-click do-edit}]]))
[:*
[:& menu-entry {:title "Delete Token" :on-click do-delete}]
[:& menu-entry {:title "Duplicate Token" :on-click do-duplicate}]
[:& menu-entry {:title "Edit Token" :on-click do-edit}]]))
(mf/defc token-context-menu
[]

95
frontend/src/app/main/ui/workspace/tokens/context_menu.scss
View file

@ -29,98 +29,3 @@
.token-context-submenu {
position: absolute;
}
.separator {
height: $s-12;
}
.context-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
height: $s-28;
width: 100%;
padding: $s-6;
border-radius: $br-8;
cursor: pointer;
.title {
@include bodySmallTypography;
color: var(--menu-foreground-color);
}
.shortcut {
@include flexCenter;
gap: $s-2;
color: var(--menu-shortcut-foreground-color);
.shortcut-key {
@include bodySmallTypography;
@include flexCenter;
height: $s-20;
padding: $s-2 $s-6;
border-radius: $br-6;
background-color: var(--menu-shortcut-background-color);
}
}
.submenu-icon svg {
@extend .button-icon-small;
stroke: var(--menu-foreground-color);
}
&:hover {
background-color: var(--menu-background-color-hover);
.title {
color: var(--menu-foreground-color-hover);
}
.shortcut {
color: var(--menu-shortcut-foreground-color-hover);
}
}
&:focus {
border: 1px solid var(--menu-border-color-focus);
background-color: var(--menu-background-color-focus);
}
}
.icon-menu-item {
display: flex;
justify-content: flex-start;
align-items: center;
height: $s-28;
padding: $s-6;
border-radius: $br-8;
&:hover {
background-color: var(--menu-background-color-hover);
}
span.title {
margin-left: $s-6;
}
.selected-icon {
svg {
@extend .button-icon-small;
stroke: var(--menu-foreground-color);
}
}
.shape-icon {
margin-left: $s-2;
svg {
@extend .button-icon-small;
stroke: var(--menu-foreground-color);
}
}
.icon-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 0;
}
}
.icon-menu-item[disabled],
.context-menu-item[disabled] {
pointer-events: none;
opacity: 0.6;
}