diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 969bb43a6..33e558446 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -196,6 +196,9 @@ (def context-menu (l/derived :context-menu workspace-local)) +(def token-context-menu + (l/derived :token-context-menu workspace-local)) + ;; page item that it is being edited (def editing-page-item (l/derived :page-item workspace-local)) diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 8b4ee10c1..420e722a2 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -29,6 +29,7 @@ [app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]] [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]] [app.main.ui.workspace.sidebar.history :refer [history-toolbox]] + [app.main.ui.workspace.tokens.context-menu :refer [token-context-menu]] [app.main.ui.workspace.tokens.modals] [app.main.ui.workspace.viewport :refer [viewport]] [app.util.debug :as dbg] @@ -204,6 +205,7 @@ :style {:background-color background-color :touch-action "none"}} [:& context-menu] + [:& token-context-menu] (if ^boolean file-ready? [:& workspace-page {:page-id page-id diff --git a/frontend/src/app/main/ui/workspace/tokens/common.cljs b/frontend/src/app/main/ui/workspace/tokens/common.cljs index 0ecd7c505..bf4c29c5e 100644 --- a/frontend/src/app/main/ui/workspace/tokens/common.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/common.cljs @@ -7,6 +7,9 @@ (ns app.main.ui.workspace.tokens.common (:require-macros [app.main.style :as stl]) (:require + [app.common.data.macros :as dm] + [app.common.geom.point :as gpt] + [potok.v2.core :as ptk] [rumext.v2 :as mf])) ;; Helpers --------------------------------------------------------------------- @@ -39,3 +42,19 @@ :default-value default-value :autoFocus auto-focus? :on-change on-change}]]) + +;; Token Context Menu Functions ------------------------------------------------- + +(defn show-token-context-menu + [{:keys [position token-id] :as params}] + (dm/assert! (gpt/point? position)) + (ptk/reify ::show-token-context-menu + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:workspace-local :token-context-menu] params)))) + +(def hide-token-context-menu + (ptk/reify ::hide-token-context-menu + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:workspace-local :token-context-menu] nil)))) \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs new file mode 100644 index 000000000..424e56c91 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -0,0 +1,153 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) KALEIDOS INC + +(ns app.main.ui.workspace.tokens.context-menu + (:require-macros [app.main.style :as stl]) + (:require + [app.common.data :as d] + [app.common.data.macros :as dm] + [app.main.data.events :as ev] + [app.main.data.shortcuts :as scd] + [app.main.data.workspace :as dw] + [app.main.refs :as refs] + [app.main.store :as st] + [app.main.ui.components.dropdown :refer [dropdown]] + [app.main.ui.icons :as i] + [app.main.ui.workspace.tokens.common :refer [hide-token-context-menu]] + [app.util.dom :as dom] + [app.util.i18n :refer [tr]] + [app.util.timers :as timers] + [okulary.core :as l] + [rumext.v2 :as mf])) + +(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 #(js/console.log "Deleting") + do-duplicate #(js/console.log "Duplicating") + do-edit #(js/console.log "Editing")] + [:ul.context-list + [:> token-menu-entry {:title (tr "Delete Token") :on-click do-delete}] + [:> token-menu-entry {:title (tr "Duplicate Token") :on-click do-duplicate}] + [:> token-menu-entry {:title (tr "Edit Token") :on-click do-edit}]])) + +(mf/defc token-context-menu + [] + (let [mdata (mf/deref tokens-menu-ref) + top (- (get-in mdata [:position :y]) 20) + left (get-in mdata [:position :x]) + dropdown-ref (mf/use-ref)] + + (mf/use-effect + (mf/deps mdata) + #(let [dropdown (mf/ref-val dropdown-ref)] + (when dropdown + (let [bounding-rect (dom/get-bounding-rect dropdown) + window-size (dom/get-window-size) + delta-x (max (- (+ (:right bounding-rect) 250) (:width window-size)) 0) + delta-y (max (- (:bottom bounding-rect) (:height window-size)) 0) + new-style (str "top: " (- top delta-y) "px; " + "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! hide-token-context-menu)} + [:div {:class (stl/css :token-context-menu) + :ref dropdown-ref + :style {:top top :left left} + :on-context-menu prevent-default} + (when (= :token (:type mdata)) + [:ul {:class (stl/css :context-list)} + [:& token-pill-context-menu {:token-id (:id mdata)}]])]])) \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.scss b/frontend/src/app/main/ui/workspace/tokens/context_menu.scss new file mode 100644 index 000000000..6a697ece0 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.scss @@ -0,0 +1,126 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.token-context-menu { + position: absolute; + top: $s-40; + left: $s-736; + z-index: $z-index-4; +} + +.context-list, +.token-context-submenu { + @include menuShadow; + display: grid; + width: $s-240; + padding: $s-4; + border-radius: $br-8; + border: $s-2 solid var(--panel-border-color); + background-color: var(--menu-background-color); + max-height: 100vh; + overflow-y: auto; +} + +.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; +} diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 1aaaaf034..c1eba6e12 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -15,7 +15,7 @@ [app.main.ui.components.search-bar :refer [search-bar]] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.assets.common :as cmm] - [app.main.ui.workspace.tokens.common :refer [workspace-shapes]] + [app.main.ui.workspace.tokens.common :as tcm] [app.main.ui.workspace.tokens.core :refer [tokens-applied?] :as wtc] [app.util.dom :as dom] [rumext.v2 :as mf])) @@ -36,18 +36,28 @@ (mf/defc token-pill {::mf/wrap-props false} - [{:keys [on-click token highlighted?]}] + [{:keys [on-click token highlighted? on-context-menu]}] (let [{:keys [name value]} token] [:div {:class (stl/css-case :token-pill true :token-pill-highlighted highlighted?) :title (str "Token value: " value) - :on-click on-click} + :on-click on-click + :on-context-menu on-context-menu} name])) (mf/defc token-component [{:keys [type file tokens selected-shapes token-type-props]}] (let [open? (mf/use-state false) {:keys [modal attributes title]} token-type-props + + on-context-menu (mf/use-fn + (fn [event token] + (dom/prevent-default event) + (dom/stop-propagation event) + (st/emit! (tcm/show-token-context-menu {:type :token + :position (dom/get-client-position event) + :token-id (:id token)})))) + on-toggle-open-click (mf/use-fn (mf/deps open? tokens) #(when (seq tokens) @@ -87,7 +97,8 @@ {:key (:id token) :token token :highlighted? (tokens-applied? token selected-shapes attributes) - :on-click #(on-token-pill-click % token)}])]])]])) + :on-click #(on-token-pill-click % token) + :on-context-menu #(on-context-menu % token)}])]])]])) (defn sorted-token-groups "Separate token-types into groups of `:empty` or `:filled` depending if tokens exist for that type. @@ -114,7 +125,7 @@ token-groups (mf/with-memo [tokens] (sorted-token-groups tokens)) selected-shape-ids (mf/deref refs/selected-shapes) - selected-shapes (workspace-shapes workspace-data current-page-id selected-shape-ids)] + selected-shapes (tcm/workspace-shapes workspace-data current-page-id selected-shape-ids)] [:article [:div.assets-bar (for [{:keys [token-key token-type-props tokens]} (concat (:filled token-groups)