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

Add custom context menu and fix styling issues with subcontext menu

Browse source
This commit is contained in:
Akshay Gupta 2024-06-10 23:25:11 +05:30
parent 842b76f3c1
commit 3f55536fc0
No known key found for this signature in database
2 changed files with 190 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,8 +8,10 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.types.shape.radius :as ctsr]
[app.main.data.modal :as modal]
[app.main.data.shortcuts :as scd]
[app.main.data.tokens :as dt]
[app.main.data.workspace :as dw]
[app.main.data.workspace.changes :as dch]
@ -18,9 +20,10 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.workspace.context-menu :refer [menu-entry prevent-default]]
[app.main.ui.icons :as i]
[app.main.ui.workspace.tokens.core :as wtc]
[app.util.dom :as dom]
[app.util.timers :as timers]
[clojure.set :as set]
[okulary.core :as l]
[rumext.v2 :as mf]))
@ -28,6 +31,92 @@
(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 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
50
#(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 235}
:on-context-menu prevent-default}
children])])))
(mf/defc menu-separator
[]
[:li {:class (stl/css :separator)}])
(defn update-shape-radius-single-corner [value shape-ids attribute]
(st/emit!
(dch/update-shapes shape-ids
@ -215,7 +304,6 @@
"left: " (- left delta-x) "px;")]
(when (or (> delta-x 0) (> delta-y 0))
(.setAttribute ^js dropdown "style" new-style))))))
[:& dropdown {:show (boolean mdata)
:on-close #(st/emit! dt/hide-token-context-menu)}
[:div {:class (stl/css :token-context-menu)

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

@ -25,15 +25,112 @@
max-height: 100vh;
overflow-y: auto;
// TODO: Fixes missing styles from parent context menu
li {
@include bodySmallTypography;
color: var(--menu-foreground-color);
}
}
.context-list > li:nth-child(-n + 3) > span:first-of-type {
margin: calc(($s-32 + $s-28) / 2);
.token-context-submenu {
position: absolute;
padding: $s-4;
margin-left: $s-6;
}
.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);
margin-left: calc(($s-32 + $s-28) / 2);
}
.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;
}
// TODO: Allow selected items wihtout an icon for the context menu