3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-03 03:02:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Refactor dropdown-menu-item component

Browse source
This commit is contained in:
Andrey Antukh 2023-11-16 18:07:42 +01:00 • committed by Andrés Moya
parent f5296cafb1
commit e4283ee2e4
3 changed files with 334 additions and 398 deletions
Download patch file Download diff file Expand all files Collapse all files

25
frontend/src/app/main/ui/components/dropdown_menu.cljs
View file

@ -11,33 +11,18 @@
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.globals :as globals] [app.util.globals :as globals]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
[app.util.object :as obj]
[goog.events :as events] [goog.events :as events]
[goog.object :as gobj] [goog.object :as gobj]
[rumext.v2 :as mf]) [rumext.v2 :as mf])
(:import goog.events.EventType)) (:import goog.events.EventType))
(mf/defc dropdown-menu-item (mf/defc dropdown-menu-item*
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [props (-> (obj/clone props)
(let [children (gobj/get props "children") (obj/set! "role" "menuitem"))]
on-click (gobj/get props "on-click") [:> :li props]))
on-key-down (gobj/get props "on-key-down")
on-pointer-enter (gobj/get props "on-pointer-enter")
id (gobj/get props "id")
klass (gobj/get props "klass")
key (gobj/get props "unique-key")
data-test (gobj/get props "data-test")]
[:li {:id id
:class klass
:tab-index "0"
:on-key-down on-key-down
:on-click on-click
:on-pointer-enter on-pointer-enter
:key key
:role "menuitem"
:data-test data-test}
children]))
(mf/defc dropdown-menu' (mf/defc dropdown-menu'
{::mf/wrap-props false} {::mf/wrap-props false}

159
frontend/src/app/main/ui/dashboard/sidebar.cljs
View file

@ -17,7 +17,7 @@
[app.main.data.users :as du] [app.main.data.users :as du]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown-menu :refer [dropdown-menu dropdown-menu-item]] [app.main.ui.components.dropdown-menu :refer [dropdown-menu dropdown-menu-item*]]
[app.main.ui.components.link :refer [link]] [app.main.ui.components.link :refer [link]]
[app.main.ui.dashboard.comments :refer [comments-section]] [app.main.ui.dashboard.comments :refer [comments-section]]
[app.main.ui.dashboard.inline-edition :refer [inline-edition]] [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
@ -207,7 +207,7 @@
:placeholder (tr "dashboard.search-placeholder") :placeholder (tr "dashboard.search-placeholder")
:default-value search-term :default-value search-term
:auto-complete "off" :auto-complete "off"
;; :on-focus on-search-focus ;; :on-focus on-search-focus
:on-blur on-search-blur :on-blur on-search-blur
:on-change on-search-change :on-change on-search-change
:on-key-press on-key-press :on-key-press on-key-press
@ -239,27 +239,25 @@
(st/emit! (dd/go-to-projects team-id))))] (st/emit! (dd/go-to-projects team-id))))]
[:* [:*
[:& dropdown-menu-item {:on-click (partial team-selected (:default-team-id profile)) [:> dropdown-menu-item* {:on-click (partial team-selected (:default-team-id profile))
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(team-selected (:default-team-id profile) event))) (team-selected (:default-team-id profile) event)))
:id "teams-selector-default-team" :id "teams-selector-default-team"
:unique-key "default-team" :class "team-name"}
:klass "team-name"}
[:span.team-icon i/logo-icon] [:span.team-icon i/logo-icon]
[:span.team-text (tr "dashboard.your-penpot")] [:span.team-text (tr "dashboard.your-penpot")]
(when (= (:default-team-id profile) (:id team)) (when (= (:default-team-id profile) (:id team))
[:span.icon i/tick])] [:span.icon i/tick])]
(for [team-item (remove :is-default (vals teams))] (for [team-item (remove :is-default (vals teams))]
[:& dropdown-menu-item {:on-click (partial team-selected (:id team-item)) [:> dropdown-menu-item* {:on-click (partial team-selected (:id team-item))
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(team-selected (:id team-item) event))) (team-selected (:id team-item) event)))
:id (str "teams-selector-" (:id team-item)) :id (str "teams-selector-" (:id team-item))
:klass "team-name" :class "team-name"
:key (str "teams-selector-" (:id team-item)) :key (str "teams-selector-" (:id team-item))}
:unique-key (dm/str (:id team-item))}
[:span.team-icon [:span.team-icon
[:img {:src (cf/resolve-team-photo-url team-item) [:img {:src (cf/resolve-team-photo-url team-item)
:alt (:name team-item)}]] :alt (:name team-item)}]]
@ -267,13 +265,12 @@
(when (= (:id team-item) (:id team)) (when (= (:id team-item) (:id team))
[:span.icon i/tick])]) [:span.icon i/tick])])
[:hr {:role "separator"}] [:hr {:role "separator"}]
[:& dropdown-menu-item {:on-click on-create-clicked [:> dropdown-menu-item* {:on-click on-create-clicked
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-create-clicked event))) (on-create-clicked event)))
:id "teams-selector-create-team" :id "teams-selector-create-team"
:klass "team-name action" :class "team-name action"}
:unique-key "teams-selector-create-team"}
[:span.team-icon.new-team i/close] [:span.team-icon.new-team i/close]
[:span.team-text (tr "dashboard.create-new-team")]]])) [:span.team-text (tr "dashboard.create-new-team")]]]))
@ -362,92 +359,82 @@
:on-accept delete-fn}))] :on-accept delete-fn}))]
[:* [:*
[:& dropdown-menu-item {:on-click go-members [:> dropdown-menu-item* {:on-click go-members
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(go-members))) (go-members)))
:id "teams-options-members" :id "teams-options-members"
:unique-key "teams-options-members" :data-test "team-members"}
:data-test "team-members"}
(tr "labels.members")] (tr "labels.members")]
[:& dropdown-menu-item {:on-click go-invitations [:> dropdown-menu-item* {:on-click go-invitations
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(go-invitations))) (go-invitations)))
:id "teams-options-invitations" :id "teams-options-invitations"
:unique-key "teams-options-invitations" :data-test "team-invitations"}
:data-test "team-invitations"}
(tr "labels.invitations")] (tr "labels.invitations")]
(when (contains? cf/flags :webhooks) (when (contains? cf/flags :webhooks)
[:& dropdown-menu-item {:on-click go-webhooks [:> dropdown-menu-item* {:on-click go-webhooks
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(go-webhooks))) (go-webhooks)))
:id "teams-options-webhooks" :id "teams-options-webhooks"}
:unique-key "teams-options-webhooks"}
(tr "labels.webhooks")]) (tr "labels.webhooks")])
[:& dropdown-menu-item {:on-click go-settings [:> dropdown-menu-item* {:on-click go-settings
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(go-settings))) (go-settings)))
:id "teams-options-settings" :id "teams-options-settings"
:unique-key "teams-options-settings" :data-test "team-settings"}
:data-test "team-settings"}
(tr "labels.settings")] (tr "labels.settings")]
[:hr] [:hr]
(when can-rename? (when can-rename?
[:& dropdown-menu-item {:on-click on-rename-clicked [:> dropdown-menu-item* {:on-click on-rename-clicked
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-rename-clicked))) (on-rename-clicked)))
:id "teams-options-rename" :id "teams-options-rename"
:unique-key "teams-options-rename" :data-test "rename-team"}
:data-test "rename-team"}
(tr "labels.rename")]) (tr "labels.rename")])
(cond (cond
(= (count members) 1) (= (count members) 1)
[:& dropdown-menu-item {:on-click leave-and-close [:> dropdown-menu-item* {:on-click leave-and-close
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(leave-and-close))) (leave-and-close)))
:id "teams-options-leave-team" :id "teams-options-leave-team"}
:unique-key "teams-options-leave-team"}
(tr "dashboard.leave-team")] (tr "dashboard.leave-team")]
(get-in team [:permissions :is-owner]) (get-in team [:permissions :is-owner])
[:& dropdown-menu-item {:on-click on-leave-as-owner-clicked [:> dropdown-menu-item* {:on-click on-leave-as-owner-clicked
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-leave-as-owner-clicked))) (on-leave-as-owner-clicked)))
:id "teams-options-leave-team" :id "teams-options-leave-team"
:unique-key "teams-options-leave-team" :data-test "leave-team"}
:data-test "leave-team"}
(tr "dashboard.leave-team")] (tr "dashboard.leave-team")]
(> (count members) 1) (> (count members) 1)
[:& dropdown-menu-item {:on-click on-leave-clicked [:> dropdown-menu-item* {:on-click on-leave-clicked
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-leave-clicked))) (on-leave-clicked)))
:id "teams-options-leave-team" :id "teams-options-leave-team"}
:unique-key "teams-options-leave-team"}
(tr "dashboard.leave-team")]) (tr "dashboard.leave-team")])
(when (get-in team [:permissions :is-owner]) (when (get-in team [:permissions :is-owner])
[:& dropdown-menu-item {:on-click on-delete-clicked [:> dropdown-menu-item* {:on-click on-delete-clicked
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-delete-clicked))) (on-delete-clicked)))
:id "teams-options-delete-team" :id "teams-options-delete-team"
:unique-key "teams-options-delete-team" :class "warning"
:klass "warning" :data-test "delete-team"}
:data-test "delete-team"}
(tr "dashboard.delete-team")])])) (tr "dashboard.delete-team")])]))

548
frontend/src/app/main/ui/workspace/left_header.cljs
View file

@ -23,7 +23,7 @@
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.repo :as rp] [app.main.repo :as rp]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown-menu :refer [dropdown-menu dropdown-menu-item]] [app.main.ui.components.dropdown-menu :refer [dropdown-menu dropdown-menu-item*]]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.main.ui.hooks.resize :as r] [app.main.ui.hooks.resize :as r]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
@ -87,76 +87,68 @@
:on-close on-close :on-close on-close
:list-class (stl/css-case :sub-menu true :list-class (stl/css-case :sub-menu true
:help-info true)} :help-info true)}
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click nav-to-helpc-center :on-click nav-to-helpc-center
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(nav-to-helpc-center event))) (nav-to-helpc-center event)))
:id "file-menu-help-center" :id "file-menu-help-center"}
:unique-key "file-menu-help-center"}
[:span {:class (stl/css :item-name)} (tr "labels.help-center")]] [:span {:class (stl/css :item-name)} (tr "labels.help-center")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click nav-to-community :on-click nav-to-community
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(nav-to-community event))) (nav-to-community event)))
:id "file-menu-community" :id "file-menu-community"}
:unique-key "file-menu-community"}
[:span {:class (stl/css :item-name)} (tr "labels.community")]] [:span {:class (stl/css :item-name)} (tr "labels.community")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click nav-to-youtube :on-click nav-to-youtube
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(nav-to-youtube event))) (nav-to-youtube event)))
:id "file-menu-youtube" :id "file-menu-youtube"}
:unique-key "file-menu-youtube"}
[:span {:class (stl/css :item-name)} (tr "labels.tutorials")]] [:span {:class (stl/css :item-name)} (tr "labels.tutorials")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click show-release-notes :on-click show-release-notes
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(show-release-notes event))) (show-release-notes event)))
:id "file-menu-release-notes" :id "file-menu-release-notes"}
:unique-key "file-menu-release-notes"}
[:span {:class (stl/css :item-name)} (tr "labels.release-notes")]] [:span {:class (stl/css :item-name)} (tr "labels.release-notes")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click nav-to-templates :on-click nav-to-templates
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(nav-to-templates event))) (nav-to-templates event)))
:id "file-menu-templates" :id "file-menu-templates"}
:unique-key "file-menu-templates"}
[:span {:class (stl/css :item-name)} (tr "labels.libraries-and-templates")]] [:span {:class (stl/css :item-name)} (tr "labels.libraries-and-templates")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click nav-to-github :on-click nav-to-github
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(nav-to-github event))) (nav-to-github event)))
:id "file-menu-github" :id "file-menu-github"}
:unique-key "file-menu-github"}
[:span {:class (stl/css :item-name)} (tr "labels.github-repo")]] [:span {:class (stl/css :item-name)} (tr "labels.github-repo")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click nav-to-terms :on-click nav-to-terms
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(nav-to-terms event))) (nav-to-terms event)))
:id "file-menu-terms" :id "file-menu-terms"}
:unique-key "file-menu-terms"}
[:span {:class (stl/css :item-name)} (tr "auth.terms-of-service")]] [:span {:class (stl/css :item-name)} (tr "auth.terms-of-service")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click show-shortcuts :on-click show-shortcuts
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(show-shortcuts event))) (show-shortcuts event)))
:id "file-menu-shortcuts" :id "file-menu-shortcuts"}
:unique-key "file-menu-shortcuts"}
[:span {:class (stl/css :item-name)} (tr "label.shortcuts")] [:span {:class (stl/css :item-name)} (tr "label.shortcuts")]
[:span {:class (stl/css :shortcut)} [:span {:class (stl/css :shortcut)}
@ -164,13 +156,12 @@
[:span {:class (stl/css :shortcut-key) :key sc} sc])]] [:span {:class (stl/css :shortcut-key) :key sc} sc])]]
(when (contains? cf/flags :user-feedback) (when (contains? cf/flags :user-feedback)
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click nav-to-feedback :on-click nav-to-feedback
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(nav-to-feedback event))) (nav-to-feedback event)))
:id "file-menu-feedback" :id "file-menu-feedback"}
:unique-key "file-menu-feedback"}
[:span {:class (stl/css-case :feedback true [:span {:class (stl/css-case :feedback true
:item-name true)} (tr "labels.give-feedback")]])])) :item-name true)} (tr "labels.give-feedback")]])]))
@ -184,63 +175,59 @@
:list-class (stl/css-case :sub-menu true :list-class (stl/css-case :sub-menu true
:preferences true) :preferences true)
:on-close on-close} :on-close on-close}
[:& dropdown-menu-item {:on-click toggle-flag [:> dropdown-menu-item* {:on-click toggle-flag
:klass (stl/css :submenu-item) :class (stl/css :submenu-item)
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(toggle-flag event))) (toggle-flag event)))
:data-test "scale.-text" :data-test "scale.-text"
:id "file-menu-scale-text" :id "file-menu-scale-text"}
:unique-key "file-menu-scale-text"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(if (contains? layout :scale-text) (if (contains? layout :scale-text)
(tr "workspace.header.menu.disable-scale-content") (tr "workspace.header.menu.disable-scale-content")
(tr "workspace.header.menu.enable-scale-content"))] (tr "workspace.header.menu.enable-scale-content"))]
[:span {:class (stl/css :shortcut)} [:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-scale-text))] (for [sc (scd/split-sc (sc/get-tooltip :toggle-scale-text))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]] [:span {:class (stl/css :shortcut-key) :key sc} sc])]]
[:& dropdown-menu-item {:on-click toggle-flag [:> dropdown-menu-item* {:on-click toggle-flag
:klass (stl/css :submenu-item) :class (stl/css :submenu-item)
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(toggle-flag event))) (toggle-flag event)))
:data-test "snap-guides" :data-test "snap-guides"
:id "file-menu-snap-guides" :id "file-menu-snap-guides"}
:unique-key "file-menu-snap-guides"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(if (contains? layout :snap-guides) (if (contains? layout :snap-guides)
(tr "workspace.header.menu.disable-snap-guides") (tr "workspace.header.menu.disable-snap-guides")
(tr "workspace.header.menu.enable-snap-guides"))] (tr "workspace.header.menu.enable-snap-guides"))]
[:span {:class (stl/css :shortcut)} [:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-snap-guide))] (for [sc (scd/split-sc (sc/get-tooltip :toggle-snap-guide))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]] [:span {:class (stl/css :shortcut-key) :key sc} sc])]]
[:& dropdown-menu-item {:on-click toggle-flag [:> dropdown-menu-item* {:on-click toggle-flag
:klass (stl/css :submenu-item) :class (stl/css :submenu-item)
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(toggle-flag event))) (toggle-flag event)))
:data-test "snap-grid" :data-test "snap-grid"
:id "file-menu-snap-grid" :id "file-menu-snap-grid"}
:unique-key "file-menu-snap-grid"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(if (contains? layout :snap-grid) (if (contains? layout :snap-grid)
(tr "workspace.header.menu.disable-snap-grid") (tr "workspace.header.menu.disable-snap-grid")
(tr "workspace.header.menu.enable-snap-grid"))] (tr "workspace.header.menu.enable-snap-grid"))]
[:span {:class (stl/css :shortcut)} [:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-snap-grid))] (for [sc (scd/split-sc (sc/get-tooltip :toggle-snap-grid))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]] [:span {:class (stl/css :shortcut-key) :key sc} sc])]]
[:& dropdown-menu-item {:on-click toggle-flag [:> dropdown-menu-item* {:on-click toggle-flag
:klass (stl/css :submenu-item) :class (stl/css :submenu-item)
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(toggle-flag event))) (toggle-flag event)))
:data-test "dynamic-alignment" :data-test "dynamic-alignment"
:id "file-menu-dynamic-alignment" :id "file-menu-dynamic-alignment"}
:unique-key "file-menu-dynamic-alignment"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(if (contains? layout :dynamic-alignment) (if (contains? layout :dynamic-alignment)
(tr "workspace.header.menu.disable-dynamic-alignment") (tr "workspace.header.menu.disable-dynamic-alignment")
@ -249,14 +236,13 @@
(for [sc (scd/split-sc (sc/get-tooltip :toggle-alignment))] (for [sc (scd/split-sc (sc/get-tooltip :toggle-alignment))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]] [:span {:class (stl/css :shortcut-key) :key sc} sc])]]
[:& dropdown-menu-item {:on-click toggle-flag [:> dropdown-menu-item* {:on-click toggle-flag
:klass (stl/css :submenu-item) :class (stl/css :submenu-item)
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(toggle-flag event))) (toggle-flag event)))
:data-test "snap-pixel-grid" :data-test "snap-pixel-grid"
:id "file-menu-pixel-grid" :id "file-menu-pixel-grid"}
:unique-key "file-menu-pixel-grid"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(if (contains? layout :snap-pixel-grid) (if (contains? layout :snap-pixel-grid)
(tr "workspace.header.menu.disable-snap-pixel-grid") (tr "workspace.header.menu.disable-snap-pixel-grid")
@ -265,14 +251,13 @@
(for [sc (scd/split-sc (sc/get-tooltip :snap-pixel-grid))] (for [sc (scd/split-sc (sc/get-tooltip :snap-pixel-grid))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]] [:span {:class (stl/css :shortcut-key) :key sc} sc])]]
[:& dropdown-menu-item {:on-click show-nudge-options [:> dropdown-menu-item* {:on-click show-nudge-options
:klass (stl/css :submenu-item) :class (stl/css :submenu-item)
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(show-nudge-options event))) (show-nudge-options event)))
:data-test "snap-pixel-grid" :data-test "snap-pixel-grid"
:id "file-menu-nudge" :id "file-menu-nudge"}
:unique-key "file-menu-nudge"}
[:span {:class (stl/css :item-name)} (tr "modals.nudge-title")]]])) [:span {:class (stl/css :item-name)} (tr "modals.nudge-title")]]]))
(mf/defc view-menu (mf/defc view-menu
@ -302,91 +287,85 @@
:view true) :view true)
:on-close on-close} :on-close on-close}
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click toggle-flag :on-click toggle-flag
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(toggle-flag event))) (toggle-flag event)))
:data-test "rules" :data-test "rules"
:id "file-menu-rules" :id "file-menu-rules"}
:unique-key "file-menu-rules"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(if (contains? layout :rules) (if (contains? layout :rules)
(tr "workspace.header.menu.hide-rules") (tr "workspace.header.menu.hide-rules")
(tr "workspace.header.menu.show-rules"))] (tr "workspace.header.menu.show-rules"))]
[:span {:class (stl/css :shortcut)} [:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-rules))] (for [sc (scd/split-sc (sc/get-tooltip :toggle-rules))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]] [:span {:class (stl/css :shortcut-key) :key sc} sc])]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click toggle-flag :on-click toggle-flag
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(toggle-flag event))) (toggle-flag event)))
:data-test "display-grid" :data-test "display-grid"
:id "file-menu-grid" :id "file-menu-grid"}
:unique-key "file-menu-grid"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(if (contains? layout :display-grid) (if (contains? layout :display-grid)
(tr "workspace.header.menu.hide-grid") (tr "workspace.header.menu.hide-grid")
(tr "workspace.header.menu.show-grid"))] (tr "workspace.header.menu.show-grid"))]
[:span {:class (stl/css :shortcut)} [:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-grid))] (for [sc (scd/split-sc (sc/get-tooltip :toggle-grid))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]] [:span {:class (stl/css :shortcut-key) :key sc} sc])]]
(when-not ^boolean read-only? (when-not ^boolean read-only?
[:* [:*
[:& dropdown-menu-item {:klass (stl/css :submenu-item) :on-click toggle-color-palette [:> dropdown-menu-item* {:class (stl/css :submenu-item) :on-click toggle-color-palette
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(toggle-color-palette event))) (toggle-color-palette event)))
:id "file-menu-color-palette" :id "file-menu-color-palette"}
:unique-key "file-menu-color-palette"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(if (contains? layout :colorpalette) (if (contains? layout :colorpalette)
(tr "workspace.header.menu.hide-palette") (tr "workspace.header.menu.hide-palette")
(tr "workspace.header.menu.show-palette"))] (tr "workspace.header.menu.show-palette"))]
[:span {:class (stl/css :shortcut)} [:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-colorpalette))] (for [sc (scd/split-sc (sc/get-tooltip :toggle-colorpalette))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]] [:span {:class (stl/css :shortcut-key) :key sc} sc])]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) :on-click toggle-text-palette [:> dropdown-menu-item* {:class (stl/css :submenu-item) :on-click toggle-text-palette
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(toggle-text-palette event))) (toggle-text-palette event)))
:id "file-menu-text-palette" :id "file-menu-text-palette"}
:unique-key "file-menu-text-palette"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(if (contains? layout :textpalette) (if (contains? layout :textpalette)
(tr "workspace.header.menu.hide-palette") (tr "workspace.header.menu.hide-palette")
(tr "workspace.header.menu.show-palette"))] (tr "workspace.header.menu.show-palette"))]
[:span {:class (stl/css :shortcut)} [:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-textpalette))] (for [sc (scd/split-sc (sc/get-tooltip :toggle-textpalette))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]]]) [:span {:class (stl/css :shortcut-key) :key sc} sc])]]])
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click toggle-flag :on-click toggle-flag
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(toggle-flag event))) (toggle-flag event)))
:data-test "display-artboard-names" :data-test "display-artboard-names"
:id "file-menu-artboards" :id "file-menu-artboards"}
:unique-key "file-menu-artboards"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(if (contains? layout :display-artboard-names) (if (contains? layout :display-artboard-names)
(tr "workspace.header.menu.hide-artboard-names") (tr "workspace.header.menu.hide-artboard-names")
(tr "workspace.header.menu.show-artboard-names"))]] (tr "workspace.header.menu.show-artboard-names"))]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click toggle-flag :on-click toggle-flag
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(toggle-flag event))) (toggle-flag event)))
:data-test "show-pixel-grid" :data-test "show-pixel-grid"
:id "file-menu-pixel-grid" :id "file-menu-pixel-grid"}
:unique-key "file-menu-pixel-grid"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(if (contains? layout :show-pixel-grid) (if (contains? layout :show-pixel-grid)
(tr "workspace.header.menu.hide-pixel-grid") (tr "workspace.header.menu.hide-pixel-grid")
@ -395,14 +374,13 @@
(for [sc (scd/split-sc (sc/get-tooltip :show-pixel-grid))] (for [sc (scd/split-sc (sc/get-tooltip :show-pixel-grid))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]] [:span {:class (stl/css :shortcut-key) :key sc} sc])]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click toggle-flag :on-click toggle-flag
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(toggle-flag event))) (toggle-flag event)))
:data-test "hide-ui" :data-test "hide-ui"
:id "file-menu-hide-ui" :id "file-menu-hide-ui"}
:unique-key "file-menu-hide-ui"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(tr "workspace.shape.menu.hide-ui")] (tr "workspace.shape.menu.hide-ui")]
[:span {:class (stl/css :shortcut)} [:span {:class (stl/css :shortcut)}
@ -421,13 +399,12 @@
:edit true) :edit true)
:on-close on-close} :on-close on-close}
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click select-all :on-click select-all
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(select-all event))) (select-all event)))
:id "file-menu-select-all" :id "file-menu-select-all"}
:unique-key "file-menu-select-all"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(tr "workspace.header.menu.select-all")] (tr "workspace.header.menu.select-all")]
[:span {:class (stl/css :shortcut)} [:span {:class (stl/css :shortcut)}
@ -437,13 +414,12 @@
:key sc} :key sc}
sc])]] sc])]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click undo :on-click undo
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(undo event))) (undo event)))
:id "file-menu-undo" :id "file-menu-undo"}
:unique-key "file-menu-undo"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.undo")] [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.undo")]
[:span {:class (stl/css :shortcut)} [:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :undo))] (for [sc (scd/split-sc (sc/get-tooltip :undo))]
@ -451,20 +427,19 @@
:key sc} :key sc}
sc])]] sc])]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click redo :on-click redo
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(redo event))) (redo event)))
:id "file-menu-redo" :id "file-menu-redo"}
:unique-key "file-menu-redo"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.redo")] [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.redo")]
[:span {:class (stl/css :shortcut)} [:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :redo))] (for [sc (scd/split-sc (sc/get-tooltip :redo))]
[:span {:class (stl/css :shortcut-key) [:span {:class (stl/css :shortcut-key)
:key sc} :key sc}
sc])]]])) sc])]]]))
(mf/defc file-menu (mf/defc file-menu
{::mf/wrap-props false} {::mf/wrap-props false}
@ -545,63 +520,57 @@
:file true) :file true)
:on-close on-close} :on-close on-close}
(if ^boolean shared? (if ^boolean shared?
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click on-remove-shared :on-click on-remove-shared
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-remove-shared event))) (on-remove-shared event)))
:id "file-menu-remove-shared" :id "file-menu-remove-shared"}
:unique-key "file-menu-remove-shared"}
[:span {:class (stl/css :item-name)} (tr "dashboard.unpublish-shared")]] [:span {:class (stl/css :item-name)} (tr "dashboard.unpublish-shared")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click on-add-shared :on-click on-add-shared
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-add-shared event))) (on-add-shared event)))
:id "file-menu-add-shared" :id "file-menu-add-shared"}
:unique-key "file-menu-add-shared"}
[:span {:class (stl/css :item-name)} (tr "dashboard.add-shared")]]) [:span {:class (stl/css :item-name)} (tr "dashboard.add-shared")]])
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click on-export-shapes :on-click on-export-shapes
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-export-shapes event))) (on-export-shapes event)))
:id "file-menu-export-shapes" :id "file-menu-export-shapes"}
:unique-key "file-menu-export-shapes"}
[:span {:class (stl/css :item-name)} (tr "dashboard.export-shapes")] [:span {:class (stl/css :item-name)} (tr "dashboard.export-shapes")]
[:span {:class (stl/css :shortcut)} [:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :export-shapes))] (for [sc (scd/split-sc (sc/get-tooltip :export-shapes))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]] [:span {:class (stl/css :shortcut-key) :key sc} sc])]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click on-export-binary-file :on-click on-export-binary-file
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-export-binary-file event))) (on-export-binary-file event)))
:id "file-menu-binary-file" :id "file-menu-binary-file"}
:unique-key "file-menu-binary-file"}
[:span {:class (stl/css :item-name)} (tr "dashboard.download-binary-file")]] [:span {:class (stl/css :item-name)} (tr "dashboard.download-binary-file")]]
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click on-export-standard-file :on-click on-export-standard-file
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-export-standard-file event))) (on-export-standard-file event)))
:id "file-menu-standard-file" :id "file-menu-standard-file"}
:unique-key "file-menu-standard-file"}
[:span {:class (stl/css :item-name)} (tr "dashboard.download-standard-file")]] [:span {:class (stl/css :item-name)} (tr "dashboard.download-standard-file")]]
(when (seq frames) (when (seq frames)
[:& dropdown-menu-item {:klass (stl/css :submenu-item) [:> dropdown-menu-item* {:class (stl/css :submenu-item)
:on-click on-export-frames :on-click on-export-frames
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-export-frames event))) (on-export-frames event)))
:id "file-menu-export-frames" :id "file-menu-export-frames"}
:unique-key "file-menu-export-frames"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(tr "dashboard.export-frames")]])])) (tr "dashboard.export-frames")]])]))
@ -660,63 +629,58 @@
:on-close close-menu :on-close close-menu
:list-class (stl/css :menu)} :list-class (stl/css :menu)}
[:& dropdown-menu-item {:klass (stl/css :menu-item) [:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click :on-click on-menu-click
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-menu-click event))) (on-menu-click event)))
:on-pointer-enter on-menu-click :on-pointer-enter on-menu-click
:data-test "file" :data-test "file"
:id "file-menu-file" :id "file-menu-file"}
:unique-key "file-menu-file"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.file")] [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.file")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]] [:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
[:& dropdown-menu-item {:klass (stl/css :menu-item) [:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click :on-click on-menu-click
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-menu-click event))) (on-menu-click event)))
:on-pointer-enter on-menu-click :on-pointer-enter on-menu-click
:data-test "edit" :data-test "edit"
:id "file-menu-edit" :id "file-menu-edit"}
:unique-key "file-menu-edit"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.edit")] [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.edit")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]] [:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
[:& dropdown-menu-item {:klass (stl/css :menu-item) [:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click :on-click on-menu-click
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-menu-click event))) (on-menu-click event)))
:on-pointer-enter on-menu-click :on-pointer-enter on-menu-click
:data-test "view" :data-test "view"
:id "file-menu-view" :id "file-menu-view"}
:unique-key "file-menu-view"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.view")] [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.view")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]] [:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
[:& dropdown-menu-item {:klass (stl/css :menu-item) [:> dropdown-menu-item* {:class (stl/css :menu-item)
:on-click on-menu-click :on-click on-menu-click
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-menu-click event))) (on-menu-click event)))
:on-pointer-enter on-menu-click :on-pointer-enter on-menu-click
:data-test "preferences" :data-test "preferences"
:id "file-menu-preferences" :id "file-menu-preferences"}
:unique-key "file-menu-preferences"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.preferences")] [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.preferences")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]] [:span {:class (stl/css :open-arrow)} i/arrow-refactor]]
[:div {:class (stl/css :separator)}] [:div {:class (stl/css :separator)}]
[:& dropdown-menu-item {:klass (stl/css-case :menu-item true) [:> dropdown-menu-item* {:class (stl/css-case :menu-item true)
:on-click on-menu-click :on-click on-menu-click
:on-key-down (fn [event] :on-key-down (fn [event]
(when (kbd/enter? event) (when (kbd/enter? event)
(on-menu-click event))) (on-menu-click event)))
:on-pointer-enter on-menu-click :on-pointer-enter on-menu-click
:data-test "help-info" :data-test "help-info"
:id "file-menu-help-info" :id "file-menu-help-info"}
:unique-key "file-menu-help-info"}
[:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.help-info")] [:span {:class (stl/css :item-name)} (tr "workspace.header.menu.option.help-info")]
[:span {:class (stl/css :open-arrow)} i/arrow-refactor]]] [:span {:class (stl/css :open-arrow)} i/arrow-refactor]]]