diff --git a/frontend/src/app/main/data/modal.cljs b/frontend/src/app/main/data/modal.cljs index 2156acbfd..fe7055297 100644 --- a/frontend/src/app/main/data/modal.cljs +++ b/frontend/src/app/main/data/modal.cljs @@ -60,8 +60,8 @@ (c/update ::modal merge options))))) (defn show! - [type props] - (st/emit! (show type props))) + ([props] (st/emit! (show props))) + ([type props] (st/emit! (show type props)))) (defn update-props! [type props] diff --git a/frontend/src/app/main/ui/workspace/header.cljs b/frontend/src/app/main/ui/workspace/header.cljs index 8d6113c44..644e2840b 100644 --- a/frontend/src/app/main/ui/workspace/header.cljs +++ b/frontend/src/app/main/ui/workspace/header.cljs @@ -37,7 +37,7 @@ [potok.core :as ptk] [rumext.v2 :as mf])) -(def workspace-persistence-ref +(def ref:workspace-persistence (l/derived :workspace-persistence st/state)) ;; --- Persistence state Widget @@ -45,57 +45,71 @@ (mf/defc persistence-state-widget {::mf/wrap [mf/memo]} [] - (let [data (mf/deref workspace-persistence-ref)] + (let [{:keys [status]} (mf/deref ref:workspace-persistence)] [:div.persistence-status-widget - (cond - (= :pending (:status data)) + (case status + :pending [:div.pending [:span.label (tr "workspace.header.unsaved")]] - (= :saving (:status data)) + :saving [:div.saving [:span.icon i/toggle] [:span.label (tr "workspace.header.saving")]] - (= :saved (:status data)) + :saved [:div.saved [:span.icon i/tick] [:span.label (tr "workspace.header.saved")]] - (= :error (:status data)) + :error [:div.error {:title "There was an error saving the data. Please refresh if this persists."} [:span.icon i/msg-warning] - [:span.label (tr "workspace.header.save-error")]])])) + [:span.label (tr "workspace.header.save-error")]] + + nil)])) ;; --- Zoom Widget (mf/defc zoom-widget-workspace - {::mf/wrap [mf/memo]} - [{:keys [zoom - on-increase - on-decrease - on-zoom-reset - on-zoom-fit - on-zoom-selected] - :as props}] - (let [show-dropdown? (mf/use-state false)] - [:div.zoom-widget {:on-click #(reset! show-dropdown? true)} - [:span.label (fmt/format-percent zoom {:precision 0})] + {::mf/wrap [mf/memo] + ::mf/wrap-props false} + [{:keys [zoom on-increase on-decrease on-zoom-reset on-zoom-fit on-zoom-selected]}] + (let [open* (mf/use-state false) + open? (deref open*) + + open-dropdown + (mf/use-fn #(reset! open* true)) + + close-dropdown + (mf/use-fn #(reset! open* false)) + + on-increase + (mf/use-fn + (mf/deps on-increase) + (fn [event] + (dom/stop-propagation event) + (on-increase))) + + on-decrease + (mf/use-fn + (mf/deps on-decrease) + (fn [event] + (dom/stop-propagation event) + (on-decrease))) + + zoom (fmt/format-percent zoom {:precision 0})] + + [:div.zoom-widget {:on-click open-dropdown} + [:span.label zoom] [:span.icon i/arrow-down] - [:& dropdown {:show @show-dropdown? - :on-close #(reset! show-dropdown? false)} + [:& dropdown {:show open? :on-close close-dropdown} [:ul.dropdown [:li.basic-zoom-bar [:span.zoom-btns - [:button {:on-click (fn [event] - (dom/stop-propagation event) - (dom/prevent-default event) - (on-decrease))} "-"] - [:p.zoom-size {} (fmt/format-percent zoom {:precision 0})] - [:button {:on-click (fn [event] - (dom/stop-propagation event) - (dom/prevent-default event) - (on-increase))} "+"]] + [:button {:on-click on-decrease} "-"] + [:p.zoom-size zoom] + [:button {:on-click on-increase} "+"]] [:button.reset-btn {:on-click on-zoom-reset} (tr "workspace.header.reset-zoom")]] [:li.separator] [:li {:on-click on-zoom-fit} @@ -103,86 +117,290 @@ [:li {:on-click on-zoom-selected} (tr "workspace.header.zoom-selected") [:span (sc/get-tooltip :zoom-selected)]]]]])) - - ;; --- Header Users -;; FIXME: refactor & optimizations -(mf/defc menu - [{:keys [layout project file team-id] :as props}] - (let [show-menu? (mf/use-state false) - show-sub-menu? (mf/use-state false) - editing? (mf/use-state false) - edit-input-ref (mf/use-ref nil) - objects (mf/deref refs/workspace-page-objects) - frames (->> (cph/get-immediate-children objects uuid/zero) - (filterv cph/frame-shape?)) - workspace-read-only? (mf/use-ctx ctx/workspace-read-only?) +(mf/defc help-info-menu + {::mf/wrap-props false + ::mf/wrap [mf/memo]} + [{:keys [layout on-close]}] + (let [nav-to-helpc-center + (mf/use-fn #(dom/open-new-window "https://help.penpot.app")) + + nav-to-community + (mf/use-fn #(dom/open-new-window "https://community.penpot.app")) + + nav-to-youtube + (mf/use-fn #(dom/open-new-window "https://www.youtube.com/c/Penpot")) + + nav-to-templates + (mf/use-fn #(dom/open-new-window "https://penpot.app/libraries-templates")) + + nav-to-github + (mf/use-fn #(dom/open-new-window "https://github.com/penpot/penpot")) + + nav-to-terms + (mf/use-fn #(dom/open-new-window "https://penpot.app/terms")) + + nav-to-feedback + (mf/use-fn #(st/emit! (rt/nav-new-window* {:rname :settings-feedback}))) + + show-shortcuts + (mf/use-fn + (mf/deps layout) + (fn [] + (when (contains? layout :collapse-left-sidebar) + (st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))) + + (st/emit! + (-> (dw/toggle-layout-flag :shortcuts) + (vary-meta assoc ::ev/origin "workspace-header"))))) + + show-release-notes + (mf/use-fn + (fn [event] + (let [version (:main @cf/version)] + (st/emit! (ptk/event ::ev/event {::ev/name "show-release-notes" :version version})) + (if (and (kbd/alt? event) (kbd/mod? event)) + (st/emit! (modal/show {:type :onboarding})) + (st/emit! (modal/show {:type :release-notes :version version})))))) + + ] + + [:& dropdown {:show true :on-close on-close} + [:ul.sub-menu.help-info + [:li {:on-click nav-to-helpc-center} + [:span (tr "labels.help-center")]] + [:li {:on-click nav-to-community} + [:span (tr "labels.community")]] + [:li {:on-click nav-to-youtube} + [:span (tr "labels.tutorials")]] + [:li {:on-click show-release-notes} + [:span (tr "labels.release-notes")]] + [:li.separator {:on-click nav-to-templates} + [:span (tr "labels.libraries-and-templates")]] + [:li {:on-click nav-to-github} + [:span (tr "labels.github-repo")]] + [:li {:on-click nav-to-terms} + [:span (tr "auth.terms-of-service")]] + [:li.separator {:on-click show-shortcuts} + [:span (tr "label.shortcuts")] + [:span.shortcut (sc/get-tooltip :show-shortcuts)]] + + (when (contains? @cf/flags :user-feedback) + [:* + [:li.feedback {:on-click nav-to-feedback} + [:span (tr "labels.give-feedback")]]])]])) + +(mf/defc preferences-menu + {::mf/wrap-props false + ::mf/wrap [mf/memo]} + [{:keys [layout toggle-flag on-close]}] + (let [show-nudge-options (mf/use-fn #(modal/show! {:type :nudge-option}))] + + [:& dropdown {:show true :on-close on-close} + [:ul.sub-menu.preferences + [:li {:on-click toggle-flag + :data-flag "scale-text"} + [:span + (if (contains? layout :scale-text) + (tr "workspace.header.menu.disable-scale-content") + (tr "workspace.header.menu.enable-scale-content"))] + [:span.shortcut (sc/get-tooltip :toggle-scale-text)]] + + [:li {:on-click toggle-flag + :data-flag "snap-guides"} + [:span + (if (contains? layout :snap-guides) + (tr "workspace.header.menu.disable-snap-guides") + (tr "workspace.header.menu.enable-snap-guides"))] + [:span.shortcut (sc/get-tooltip :toggle-snap-guide)]] + + [:li {:on-click toggle-flag + :data-flag "snap-grid"} + [:span + (if (contains? layout :snap-grid) + (tr "workspace.header.menu.disable-snap-grid") + (tr "workspace.header.menu.enable-snap-grid"))] + [:span.shortcut (sc/get-tooltip :toggle-snap-grid)]] + + [:li {:on-click toggle-flag + :data-flag "dynamic-alignment"} + [:span + (if (contains? layout :dynamic-alignment) + (tr "workspace.header.menu.disable-dynamic-alignment") + (tr "workspace.header.menu.enable-dynamic-alignment"))] + [:span.shortcut (sc/get-tooltip :toggle-alignment)]] + + [:li {:on-click toggle-flag + :data-flag "snap-pixel-grid"} + [:span + (if (contains? layout :snap-pixel-grid) + (tr "workspace.header.menu.disable-snap-pixel-grid") + (tr "workspace.header.menu.enable-snap-pixel-grid"))] + [:span.shortcut (sc/get-tooltip :snap-pixel-grid)]] + + [:li {:on-click show-nudge-options} + [:span (tr "modals.nudge-title")]]]])) + +(mf/defc view-menu + {::mf/wrap-props false + ::mf/wrap [mf/memo]} + [{:keys [layout toggle-flag on-close]}] + (let [read-only? (mf/use-ctx ctx/workspace-read-only?) + + toggle-color-palette + (mf/use-fn + (fn [] + (r/set-resize-type! :bottom) + (st/emit! (dw/remove-layout-flag :textpalette) + (-> (dw/toggle-layout-flag :colorpalette) + (vary-meta assoc ::ev/origin "workspace-menu"))))) + + toggle-text-palette + (mf/use-fn + (fn [] + (r/set-resize-type! :bottom) + (st/emit! (dw/remove-layout-flag :colorpalette) + (-> (dw/toggle-layout-flag :textpalette) + (vary-meta assoc ::ev/origin "workspace-menu")))))] + + [:& dropdown {:show true :on-close on-close} + [:ul.sub-menu.view + [:li {:on-click toggle-flag + :data-flag "rules"} + [:span + (if (contains? layout :rules) + (tr "workspace.header.menu.hide-rules") + (tr "workspace.header.menu.show-rules"))] + [:span.shortcut (sc/get-tooltip :toggle-rules)]] + + [:li {:on-click toggle-flag + :data-flag "display-grid"} + [:span + (if (contains? layout :display-grid) + (tr "workspace.header.menu.hide-grid") + (tr "workspace.header.menu.show-grid"))] + [:span.shortcut (sc/get-tooltip :toggle-grid)]] + + (when-not ^boolean read-only? + [:* + [:li {:on-click toggle-color-palette} + [:span + (if (contains? layout :colorpalette) + (tr "workspace.header.menu.hide-palette") + (tr "workspace.header.menu.show-palette"))] + [:span.shortcut (sc/get-tooltip :toggle-colorpalette)]] + + [:li {:on-click toggle-text-palette} + [:span + (if (contains? layout :textpalette) + (tr "workspace.header.menu.hide-textpalette") + (tr "workspace.header.menu.show-textpalette"))] + [:span.shortcut (sc/get-tooltip :toggle-textpalette)]]]) + + [:li {:on-click toggle-flag + :data-flag "display-artboard-names"} + [:span + (if (contains? layout :display-artboard-names) + (tr "workspace.header.menu.hide-artboard-names") + (tr "workspace.header.menu.show-artboard-names"))]] + + [:li {:on-click toggle-flag + :data-flag "show-pixel-grid"} + [:span + (if (contains? layout :show-pixel-grid) + (tr "workspace.header.menu.hide-pixel-grid") + (tr "workspace.header.menu.show-pixel-grid"))] + [:span.shortcut (sc/get-tooltip :show-pixel-grid)]] + + [:li {:on-click toggle-flag + :data-flag "hide-ui"} + [:span + (tr "workspace.shape.menu.hide-ui")] + [:span.shortcut (sc/get-tooltip :hide-ui)]]]])) + +(mf/defc edit-menu + {::mf/wrap-props false + ::mf/wrap [mf/memo]} + [{:keys [on-close]}] + (let [select-all (mf/use-fn #(st/emit! (dw/select-all))) + undo (mf/use-fn #(st/emit! dwc/undo)) + redo (mf/use-fn #(st/emit! dwc/redo))] + [:& dropdown {:show true :on-close on-close} + [:ul.sub-menu.edit + [:li {:on-click select-all} + [:span (tr "workspace.header.menu.select-all")] + [:span.shortcut (sc/get-tooltip :select-all)]] + + [:li {:on-click undo} + [:span (tr "workspace.header.menu.undo")] + [:span.shortcut (sc/get-tooltip :undo)]] + + [:li {:on-click redo} + [:span (tr "workspace.header.menu.redo")] + [:span.shortcut (sc/get-tooltip :redo)]]]])) + +(mf/defc file-menu + {::mf/wrap-props false} + [{:keys [on-close file team-id]}] + (let [file-id (:id file) + file-name (:name file) + shared? (:is-shared file) + + objects (mf/deref refs/workspace-page-objects) + frames (->> (cph/get-immediate-children objects uuid/zero) + (filterv cph/frame-shape?)) add-shared-fn - #(st/emit! (dwl/set-file-shared (:id file) true)) + (mf/use-fn + (mf/deps file-id) + #(st/emit! (dwl/set-file-shared file-id true))) on-add-shared (mf/use-fn - (mf/deps file) - #(st/emit! (modal/show - {:type :confirm - :message "" - :title (tr "modals.add-shared-confirm.message" (:name file)) - :hint (tr "modals.add-shared-confirm.hint") - :cancel-label :omit - :accept-label (tr "modals.add-shared-confirm.accept") - :accept-style :primary - :on-accept add-shared-fn}))) + (mf/deps file-name add-shared-fn) + #(modal/show! {:type :confirm + :message "" + :title (tr "modals.add-shared-confirm.message" file-name) + :hint (tr "modals.add-shared-confirm.hint") + :cancel-label :omit + :accept-label (tr "modals.add-shared-confirm.accept") + :accept-style :primary + :on-accept add-shared-fn})) on-remove-shared (mf/use-fn - (mf/deps file) + (mf/deps file-id) (fn [event] (dom/prevent-default event) (dom/stop-propagation event) - (st/emit! (modal/show - {:type :delete-shared-libraries - :origin :unpublish - :ids #{(:id file)} - :on-accept #(st/emit! (dwl/set-file-shared (:id file) false)) - :count-libraries 1})))) - - handle-blur - (fn [_] - (let [value (str/trim (-> edit-input-ref mf/ref-val dom/get-value))] - (when (not= value "") - (st/emit! (dw/rename-file (:id file) value)))) - (reset! editing? false)) - - handle-name-keydown (fn [event] - (when (kbd/enter? event) - (handle-blur event))) - start-editing-name (fn [event] - (dom/prevent-default event) - (reset! editing? true)) + (modal/show! + {:type :delete-shared-libraries + :origin :unpublish + :ids #{file-id} + :on-accept #(st/emit! (dwl/set-file-shared file-id false)) + :count-libraries 1}))) on-export-shapes - (mf/use-callback - (fn [_] - (st/emit! (de/show-workspace-export-dialog)))) + (mf/use-fn #(st/emit! (de/show-workspace-export-dialog))) on-export-file - (fn [event-name binary?] - (st/emit! (ptk/event ::ev/event {::ev/name event-name - ::ev/origin "workspace" - :num-files 1})) + (mf/use-fn + (mf/deps file) + (fn [event-name binary?] + (st/emit! (ptk/event ::ev/event {::ev/name event-name + ::ev/origin "workspace" + :num-files 1})) - (->> (rx/of file) - (rx/flat-map - (fn [file] - (->> (rp/cmd! :has-file-libraries {:file-id (:id file)}) - (rx/map #(assoc file :has-libraries? %))))) - (rx/reduce conj []) - (rx/subs - (fn [files] - (st/emit! - (modal/show + (->> (rx/of file) + (rx/flat-map + (fn [file] + (->> (rp/cmd! :has-file-libraries {:file-id (:id file)}) + (rx/map #(assoc file :has-libraries? %))))) + (rx/reduce conj []) + (rx/subs + (fn [files] + (modal/show! {:type :export :team-id team-id :has-libraries? (->> files (some :has-libraries?)) @@ -190,297 +408,248 @@ :binary? binary?})))))) on-export-binary-file - (mf/use-callback - (mf/deps file team-id) - (fn [_] - (on-export-file "export-binary-files" true))) + (mf/use-fn + (mf/deps on-export-file) + (partial on-export-file "export-binary-files" true)) on-export-standard-file - (mf/use-callback - (mf/deps file team-id) - (fn [_] - (on-export-file "export-standard-files" false))) + (mf/use-fn + (mf/deps on-export-file) + (partial on-export-file "export-standard-files" false)) on-export-frames - (mf/use-callback - (mf/deps file frames) + (mf/use-fn + (mf/deps frames) (fn [_] - (st/emit! (de/show-workspace-export-frames-dialog (reverse frames))))) + (st/emit! (de/show-workspace-export-frames-dialog (reverse frames)))))] - on-item-hover - (mf/use-callback - (fn [item] - (fn [event] - (dom/stop-propagation event) - (reset! show-sub-menu? item)))) + [:& dropdown {:show true :on-close on-close} + [:ul.sub-menu.file + (if ^boolean shared? + [:li {:on-click on-remove-shared} + [:span (tr "dashboard.unpublish-shared")]] + [:li {:on-click on-add-shared} + [:span (tr "dashboard.add-shared")]]) + [:li.export-file {:on-click on-export-shapes} + [:span (tr "dashboard.export-shapes")] + [:span.shortcut (sc/get-tooltip :export-shapes)]] + [:li.separator.export-file {:on-click on-export-binary-file} + [:span (tr "dashboard.download-binary-file")]] + [:li.export-file {:on-click on-export-standard-file} + [:span (tr "dashboard.download-standard-file")]] + (when (seq frames) + [:li.separator.export-file {:on-click on-export-frames} + [:span (tr "dashboard.export-frames")]])]])) - on-item-click - (mf/use-callback - (fn [item] - (fn [event] - (dom/stop-propagation event) - (reset! show-sub-menu? item)))) +(mf/defc menu + {::mf/wrap-props false} + [{:keys [layout file team-id]}] + (let [show-menu* (mf/use-state false) + show-menu? (deref show-menu*) + sub-menu* (mf/use-state false) + sub-menu (deref sub-menu*) + + open-menu (mf/use-fn #(reset! show-menu* true)) + close-menu (mf/use-fn #(reset! show-menu* false)) + close-sub-menu (mf/use-fn #(reset! sub-menu* nil)) + + on-menu-click + (mf/use-fn + (fn [event] + (dom/stop-propagation event) + (let [menu (-> (dom/get-target event) + (dom/get-data "menu") + (keyword))] + (reset! sub-menu* menu)))) toggle-flag - (mf/use-callback - (fn [flag] - (-> (dw/toggle-layout-flag flag) - (vary-meta assoc ::ev/origin "workspace-menu")))) - - show-release-notes - (mf/use-callback + (mf/use-fn (fn [event] - (let [version (:main @cf/version)] - (st/emit! (ptk/event ::ev/event {::ev/name "show-release-notes" :version version})) - (if (and (kbd/alt? event) (kbd/mod? event)) - (st/emit! (modal/show {:type :onboarding})) - (st/emit! (modal/show {:type :release-notes :version version}))))))] + (let [flag (-> (dom/get-target event) + (dom/get-data :flag) + (keyword))] + (st/emit! + (-> (dw/toggle-layout-flag flag) + (vary-meta assoc ::ev/origin "workspace-menu"))))))] - (mf/use-effect - (mf/deps @editing?) - #(when @editing? - (dom/select-text! (mf/ref-val edit-input-ref)))) - [:div.menu-section - [:div.btn-icon-dark.btn-small {:on-click #(reset! show-menu? true)} i/actions] - [:div.project-tree {:alt (tr "workspace.sitemap")} - [:span.project-name - {:on-click #(st/emit! (rt/nav-new-window* {:rname :dashboard-files - :path-params {:team-id team-id - :project-id (:project-id file)}}))} - (:name project) " /"] - (if @editing? - [:input.file-name - {:type "text" - :ref edit-input-ref - :on-blur handle-blur - :on-key-down handle-name-keydown - :auto-focus true - :default-value (:name file "")}] - [:span - {:on-double-click start-editing-name} - (:name file)])] - (when (:is-shared file) - [:div.shared-badge i/library]) + [:* + [:div.btn-icon-dark.btn-small {:on-click open-menu} i/actions] - [:& dropdown {:show @show-menu? - :on-close #(reset! show-menu? false)} + [:& dropdown {:show show-menu? :on-close close-menu} [:ul.menu - [:li {:on-click (on-item-click :file) - :on-pointer-enter (on-item-hover :file)} + [:li {:on-click on-menu-click + :on-pointer-enter on-menu-click + :data-menu "file"} [:span (tr "workspace.header.menu.option.file")] [:span i/arrow-slide]] - [:li {:on-click (on-item-click :edit) - :on-pointer-enter (on-item-hover :edit)} - [:span (tr "workspace.header.menu.option.edit")] [:span i/arrow-slide]] - [:li {:on-click (on-item-click :view) - :on-pointer-enter (on-item-hover :view)} - [:span (tr "workspace.header.menu.option.view")] [:span i/arrow-slide]] - [:li {:on-click (on-item-click :preferences) - :on-pointer-enter (on-item-hover :preferences)} - [:span (tr "workspace.header.menu.option.preferences")] [:span i/arrow-slide]] - [:li.info {:on-click (on-item-click :help-info) - :on-pointer-enter (on-item-hover :help-info)} - [:span (tr "workspace.header.menu.option.help-info")] [:span i/arrow-slide]]]] + [:li {:on-click on-menu-click + :on-pointer-enter on-menu-click + :data-menu "edit"} + [:span (tr "workspace.header.menu.option.edit")] + [:span i/arrow-slide]] + [:li {:on-click on-menu-click + :on-pointer-enter on-menu-click + :data-menu :view} + [:span (tr "workspace.header.menu.option.view")] + [:span i/arrow-slide]] + [:li {:on-click on-menu-click + :on-pointer-enter on-menu-click + :data-menu "preferences"} + [:span (tr "workspace.header.menu.option.preferences")] + [:span i/arrow-slide]] + [:li.info {:on-click on-menu-click + :on-pointer-enter on-menu-click + :data-menu "help-info"} + [:span (tr "workspace.header.menu.option.help-info")] + [:span i/arrow-slide]]]] - [:& dropdown {:show (= @show-sub-menu? :file) - :on-close #(reset! show-sub-menu? false)} - [:ul.sub-menu.file - (if (:is-shared file) - [:li {:on-click on-remove-shared} - [:span (tr "dashboard.unpublish-shared")]] - [:li {:on-click on-add-shared} - [:span (tr "dashboard.add-shared")]]) - [:li.export-file {:on-click on-export-shapes} - [:span (tr "dashboard.export-shapes")] - [:span.shortcut (sc/get-tooltip :export-shapes)]] - [:li.separator.export-file {:on-click on-export-binary-file} - [:span (tr "dashboard.download-binary-file")]] - [:li.export-file {:on-click on-export-standard-file} - [:span (tr "dashboard.download-standard-file")]] - (when (seq frames) - [:li.separator.export-file {:on-click on-export-frames} - [:span (tr "dashboard.export-frames")]])]] + (case sub-menu + :file + [:& file-menu + {:file file + :team-id team-id + :on-close close-sub-menu}] - [:& dropdown {:show (= @show-sub-menu? :edit) - :on-close #(reset! show-sub-menu? false)} - [:ul.sub-menu.edit - [:li {:on-click #(st/emit! (dw/select-all))} - [:span (tr "workspace.header.menu.select-all")] - [:span.shortcut (sc/get-tooltip :select-all)]] + :edit + [:& edit-menu + {:on-close close-sub-menu}] - [:li {:on-click #(st/emit! dwc/undo)} - [:span (tr "workspace.header.menu.undo")] - [:span.shortcut (sc/get-tooltip :undo)]] + :view + [:& view-menu + {:layout layout + :toggle-flag toggle-flag + :on-close close-sub-menu}] - [:li {:on-click #(st/emit! dwc/redo)} - [:span (tr "workspace.header.menu.redo")] - [:span.shortcut (sc/get-tooltip :redo)]]]] + :preferences + [:& preferences-menu + {:layout layout + :toggle-flag toggle-flag + :on-close close-sub-menu}] - [:& dropdown {:show (= @show-sub-menu? :view) - :on-close #(reset! show-sub-menu? false)} - [:ul.sub-menu.view - [:li {:on-click #(st/emit! (toggle-flag :rules))} - [:span - (if (contains? layout :rules) - (tr "workspace.header.menu.hide-rules") - (tr "workspace.header.menu.show-rules"))] - [:span.shortcut (sc/get-tooltip :toggle-rules)]] + :help-info + [:& help-info-menu + {:layout layout + :on-close close-sub-menu}] - [:li {:on-click #(st/emit! (toggle-flag :display-grid))} - [:span - (if (contains? layout :display-grid) - (tr "workspace.header.menu.hide-grid") - (tr "workspace.header.menu.show-grid"))] - [:span.shortcut (sc/get-tooltip :toggle-grid)]] - - (when-not workspace-read-only? - [:* - [:li {:on-click (fn [] - (r/set-resize-type! :bottom) - (st/emit! (dw/remove-layout-flag :textpalette) - (toggle-flag :colorpalette)))} - [:span - (if (contains? layout :colorpalette) - (tr "workspace.header.menu.hide-palette") - (tr "workspace.header.menu.show-palette"))] - [:span.shortcut (sc/get-tooltip :toggle-colorpalette)]] - - [:li {:on-click (fn [] - (r/set-resize-type! :bottom) - (st/emit! (dw/remove-layout-flag :colorpalette) - (toggle-flag :textpalette)))} - [:span - (if (contains? layout :textpalette) - (tr "workspace.header.menu.hide-textpalette") - (tr "workspace.header.menu.show-textpalette"))] - [:span.shortcut (sc/get-tooltip :toggle-textpalette)]]]) - - [:li {:on-click #(st/emit! (toggle-flag :display-artboard-names))} - [:span - (if (contains? layout :display-artboard-names) - (tr "workspace.header.menu.hide-artboard-names") - (tr "workspace.header.menu.show-artboard-names"))]] - - [:li {:on-click #(st/emit! (toggle-flag :show-pixel-grid))} - [:span - (if (contains? layout :show-pixel-grid) - (tr "workspace.header.menu.hide-pixel-grid") - (tr "workspace.header.menu.show-pixel-grid"))] - [:span.shortcut (sc/get-tooltip :show-pixel-grid)]] - - [:li {:on-click #(st/emit! (-> (toggle-flag :hide-ui) - (vary-meta assoc ::ev/origin "workspace-menu")))} - [:span - (tr "workspace.shape.menu.hide-ui")] - [:span.shortcut (sc/get-tooltip :hide-ui)]]]] - - [:& dropdown {:show (= @show-sub-menu? :preferences) - :on-close #(reset! show-sub-menu? false)} - [:ul.sub-menu.preferences - [:li {:on-click #(st/emit! (toggle-flag :scale-text))} - [:span - (if (contains? layout :scale-text) - (tr "workspace.header.menu.disable-scale-content") - (tr "workspace.header.menu.enable-scale-content"))] - [:span.shortcut (sc/get-tooltip :toggle-scale-text)]] - - [:li {:on-click #(st/emit! (toggle-flag :snap-guides))} - [:span - (if (contains? layout :snap-guides) - (tr "workspace.header.menu.disable-snap-guides") - (tr "workspace.header.menu.enable-snap-guides"))] - [:span.shortcut (sc/get-tooltip :toggle-snap-guide)]] - - [:li {:on-click #(st/emit! (toggle-flag :snap-grid))} - [:span - (if (contains? layout :snap-grid) - (tr "workspace.header.menu.disable-snap-grid") - (tr "workspace.header.menu.enable-snap-grid"))] - [:span.shortcut (sc/get-tooltip :toggle-snap-grid)]] - - [:li {:on-click #(st/emit! (toggle-flag :dynamic-alignment))} - [:span - (if (contains? layout :dynamic-alignment) - (tr "workspace.header.menu.disable-dynamic-alignment") - (tr "workspace.header.menu.enable-dynamic-alignment"))] - [:span.shortcut (sc/get-tooltip :toggle-alignment)]] - - [:li {:on-click #(st/emit! (toggle-flag :snap-pixel-grid))} - [:span - (if (contains? layout :snap-pixel-grid) - (tr "workspace.header.menu.disable-snap-pixel-grid") - (tr "workspace.header.menu.enable-snap-pixel-grid"))] - [:span.shortcut (sc/get-tooltip :snap-pixel-grid)]] - - [:li {:on-click #(st/emit! (modal/show {:type :nudge-option}))} - [:span (tr "modals.nudge-title")]]]] - - [:& dropdown {:show (= @show-sub-menu? :help-info) - :on-close #(reset! show-sub-menu? false)} - [:ul.sub-menu.help-info - [:li {:on-click #(dom/open-new-window "https://help.penpot.app")} - [:span (tr "labels.help-center")]] - [:li {:on-click #(dom/open-new-window "https://community.penpot.app")} - [:span (tr "labels.community")]] - [:li {:on-click #(dom/open-new-window "https://www.youtube.com/c/Penpot")} - [:span (tr "labels.tutorials")]] - [:li {:on-click show-release-notes} - [:span (tr "labels.release-notes")]] - [:li.separator {:on-click #(dom/open-new-window "https://penpot.app/libraries-templates")} - [:span (tr "labels.libraries-and-templates")]] - [:li {:on-click #(dom/open-new-window "https://github.com/penpot/penpot")} - [:span (tr "labels.github-repo")]] - [:li {:on-click #(dom/open-new-window "https://penpot.app/terms")} - [:span (tr "auth.terms-of-service")]] - [:li.separator {:on-click #(st/emit! (when (contains? layout :collapse-left-sidebar) (dw/toggle-layout-flag :collapse-left-sidebar)) - (-> (dw/toggle-layout-flag :shortcuts) - (vary-meta assoc ::ev/origin "workspace-header")))} - [:span (tr "label.shortcuts")] - [:span.shortcut (sc/get-tooltip :show-shortcuts)]] - - (when (contains? @cf/flags :user-feedback) - [:* - [:li.feedback {:on-click #(st/emit! (rt/nav-new-window* {:rname :settings-feedback}))} - [:span (tr "labels.give-feedback")]]])]]])) + nil)])) ;; --- Header Component (mf/defc header - [{:keys [file layout project page-id] :as props}] - (let [team-id (:team-id project) - zoom (mf/deref refs/selected-zoom) - params {:page-id page-id :file-id (:id file) :section "interactions"} - workspace-read-only? (mf/use-ctx ctx/workspace-read-only?) + {::mf/wrap-props false} + [{:keys [file layout project page-id]}] + (let [file-id (:id file) + file-name (:name file) + project-id (:id project) + team-id (:team-id project) + shared? (:is-shared file) + + zoom (mf/deref refs/selected-zoom) + read-only? (mf/use-ctx ctx/workspace-read-only?) + + on-increase (mf/use-fn #(st/emit! (dw/increase-zoom nil))) + on-decrease (mf/use-fn #(st/emit! (dw/decrease-zoom nil))) + on-zoom-reset (mf/use-fn #(st/emit! dw/reset-zoom)) + on-zoom-fit (mf/use-fn #(st/emit! dw/zoom-to-fit-all)) + on-zoom-selected (mf/use-fn #(st/emit! dw/zoom-to-selected-shape)) + + + editing* (mf/use-state false) + editing? (deref editing*) + + input-ref (mf/use-ref nil) + + handle-blur + (mf/use-fn + (mf/deps file-id) + (fn [_] + (let [value (str/trim (-> input-ref mf/ref-val dom/get-value))] + (when (not= value "") + (st/emit! (dw/rename-file file-id value))) + (reset! editing* false)))) + + handle-name-keydown + (mf/use-fn + (mf/deps handle-blur) + (fn [event] + (when (kbd/enter? event) + (handle-blur event)))) + + start-editing-name + (mf/use-fn + (fn [event] + (dom/prevent-default event) + (reset! editing* true))) close-modals - (mf/use-callback - (fn [] - (st/emit! (dc/stop-picker)) - (st/emit! (modal/hide!)))) + (mf/use-fn + #(st/emit! (dc/stop-picker) + (modal/hide))) go-back - (mf/use-callback + (mf/use-fn (mf/deps project) (fn [] (close-modals) (st/emit! (dw/go-to-dashboard project)))) - go-viewer - (mf/use-callback - (mf/deps file page-id) - #(st/emit! (dw/go-to-viewer params)))] + nav-to-viewer + (mf/use-fn + (mf/deps file-id page-id) + (fn [] + (let [params {:page-id page-id + :file-id file-id + :section "interactions"}] + (st/emit! (dw/go-to-viewer params))))) + + nav-to-project + (mf/use-fn + (mf/deps team-id project-id) + #(st/emit! (rt/nav-new-window* {:rname :dashboard-files + :path-params {:team-id team-id + :project-id (:project-id project-id)}}))) + + toggle-history + (mf/use-fn + #(st/emit! (-> (dw/toggle-layout-flag :document-history) + (vary-meta assoc ::ev/origin "workspace-header"))))] + + (mf/with-effect [editing?] + (when ^boolean editing? + (dom/select-text! (mf/ref-val input-ref)))) [:header.workspace-header [:div.left-area [:div.main-icon [:a {:on-click go-back} i/logo-icon]] - [:& menu {:layout layout - :project project - :file file - :team-id team-id - :page-id page-id}]] + [:div.menu-section + [:& menu {:layout layout + :file file + :read-only? read-only? + :team-id team-id + :page-id page-id}] + + [:div.project-tree {:alt (tr "workspace.sitemap")} + [:span.project-name + {:on-click nav-to-project} + (:name project) " /"] + + (if ^boolean editing? + [:input.file-name + {:type "text" + :ref input-ref + :on-blur handle-blur + :on-key-down handle-name-keydown + :auto-focus true + :default-value (:name file "")}] + [:span + {:on-double-click start-editing-name} + file-name])] + + (when ^boolean shared? + [:div.shared-badge i/library])]] [:div.center-area [:div.users-section @@ -490,26 +659,25 @@ [:div.options-section [:& persistence-state-widget] [:& export-progress-widget] - (when-not workspace-read-only? + (when-not ^boolean read-only? [:button.document-history {:alt (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history)) :aria-label (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history)) :class (when (contains? layout :document-history) "selected") - :on-click #(st/emit! (-> (dw/toggle-layout-flag :document-history) - (vary-meta assoc ::ev/origin "workspace-header")))} + :on-click toggle-history} i/recent])] [:div.options-section [:& zoom-widget-workspace {:zoom zoom - :on-increase #(st/emit! (dw/increase-zoom nil)) - :on-decrease #(st/emit! (dw/decrease-zoom nil)) - :on-zoom-reset #(st/emit! dw/reset-zoom) - :on-zoom-fit #(st/emit! dw/zoom-to-fit-all) - :on-zoom-selected #(st/emit! dw/zoom-to-selected-shape)}] + :on-increase on-increase + :on-decrease on-decrease + :on-zoom-reset on-zoom-reset + :on-zoom-fit on-zoom-fit + :on-zoom-selected on-zoom-selected}] [:a.btn-icon-dark.btn-small.tooltip.tooltip-bottom-left {:alt (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer)) - :on-click go-viewer} + :on-click nav-to-viewer} i/play]]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index 0626dd0ac..f48010aea 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -303,6 +303,7 @@ :options options}]) (mf/defc asset-section + {::mf/wrap-props false} [{:keys [children file-id title section assets-count open?]}] (let [children (->> (if (array? children) children [children]) (filter some?)) @@ -310,12 +311,12 @@ title-buttons (filter #(= (get-role %) :title-button) children) content (filter #(= (get-role %) :content) children)] [:div.asset-section - [:div.asset-title {:class (when (not open?) "closed")} + [:div.asset-title {:class (when (not ^boolean open?) "closed")} [:span {:on-click #(st/emit! (dwl/set-assets-section-open file-id section (not open?)))} i/arrow-slide title] [:span.num-assets (str "\u00A0(") assets-count ")"] ;; Unicode 00A0 is non-breaking space title-buttons] - (when open? + (when ^boolean open? content)])) (mf/defc asset-section-block