3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix several frontend errors related with new UI

Browse source
This commit is contained in:
Eva 2023-10-03 14:24:56 +02:00 • committed by Andrés Moya
parent 828082ea47
commit d913637290
20 changed files with 315 additions and 281 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -338,6 +338,16 @@ button.collapse-sidebar {
grid-template-columns: 100%; grid-template-columns: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
position: relative;
.resize-area-horiz {
position: absolute;
top: var(--height, 200px);
left: 0;
height: 8px;
width: 100%;
z-index: 10;
cursor: ns-resize;
}
} }
.shortcuts, .shortcuts,

2
frontend/resources/styles/main/partials/tab-container.scss
View file

@ -2,7 +2,7 @@
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
grid-template-columns: 100%; grid-template-columns: 100%;
height: calc(100% - 45px); height: 100%;
} }
.tab-container-tabs { .tab-container-tabs {

24
frontend/src/app/main/data/workspace.cljs
View file

@ -1420,30 +1420,6 @@
(rx/of ::dwp/force-persist (rx/of ::dwp/force-persist
(rt/nav :dashboard-fonts {:team-id team-id})))))) (rt/nav :dashboard-fonts {:team-id team-id}))))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Toolbar
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn toggle-toolbar-visibility
[]
(ptk/reify ::toggle-toolbar-visibility
ptk/UpdateEvent
(update [_ state]
(update-in state [:workspace-local :hide-toolbar] not))))
(defn hide-toolbar
[]
(ptk/reify ::hide-toolbar
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:workspace-local :hide-toolbar] true))))
(defn show-toolbar
[]
(ptk/reify ::show-toolbar
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:workspace-local :hide-toolbar] false))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Context Menu ;; Context Menu

27
frontend/src/app/main/data/workspace/common.cljs
View file

@ -152,3 +152,30 @@
:undo-changes [] :undo-changes []
:origin it :origin it
:save-undo? false}))))))))))) :save-undo? false})))))))))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Toolbar
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn toggle-toolbar-visibility
[]
(ptk/reify ::toggle-toolbar-visibility
ptk/UpdateEvent
(update [_ state]
(update-in state [:workspace-local :hide-toolbar] not))))
(defn hide-toolbar
[]
(ptk/reify ::hide-toolbar
ptk/UpdateEvent
(update [_ state]
(let [_ (prn "hide toolbar")])
(assoc-in state [:workspace-local :hide-toolbar] true))))
(defn show-toolbar
[]
(ptk/reify ::show-toolbar
ptk/UpdateEvent
(update [_ state]
(let [_ (prn "show toolbar")])
(assoc-in state [:workspace-local :hide-toolbar] false))))

3
frontend/src/app/main/data/workspace/drawing.cljs
View file

@ -38,7 +38,8 @@
(watch [_ _ stream] (watch [_ _ stream]
(rx/merge (rx/merge
(when (= tool :path) (when (= tool :path)
(rx/of (start-drawing :path))) (rx/of (start-drawing :path)
(dwc/hide-toolbar)))
(when (= tool :curve) (when (= tool :curve)
(let [stopper (rx/filter dwc/interrupt? stream)] (let [stopper (rx/filter dwc/interrupt? stream)]

1
frontend/src/app/main/data/workspace/edition.cljs
View file

@ -46,4 +46,5 @@
(-> state (-> state
(update :workspace-local dissoc :edition) (update :workspace-local dissoc :edition)
(dissoc :workspace-grid-edition) (dissoc :workspace-grid-edition)
(assoc-in [:workspace-local :hide-toolbar] false)
(cond-> (some? id) (update-in [:workspace-local :edit-path] dissoc id))))))) (cond-> (some? id) (update-in [:workspace-local :edit-path] dissoc id)))))))

4
frontend/src/app/main/data/workspace/path/drawing.cljs
View file

@ -15,6 +15,7 @@
[app.common.types.shape-tree :as ctst] [app.common.types.shape-tree :as ctst]
[app.common.types.shape.layout :as ctl] [app.common.types.shape.layout :as ctl]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.data.workspace.common :as dwc]
[app.main.data.workspace.drawing.common :as dwdc] [app.main.data.workspace.drawing.common :as dwdc]
[app.main.data.workspace.edition :as dwe] [app.main.data.workspace.edition :as dwe]
[app.main.data.workspace.path.changes :as changes] [app.main.data.workspace.path.changes :as changes]
@ -350,7 +351,8 @@
(let [id (st/get-path-id state)] (let [id (st/get-path-id state)]
(cond (cond
(and id (= :move mode)) (rx/of (common/finish-path "change-edit-mode")) (and id (= :move mode)) (rx/of (common/finish-path "change-edit-mode"))
(and id (= :draw mode)) (rx/of (start-draw-mode)) (and id (= :draw mode)) (rx/of (dwc/hide-toolbar)
(start-draw-mode))
:else (rx/empty)))))) :else (rx/empty))))))
(defn reset-last-handler (defn reset-last-handler

2
frontend/src/app/main/data/workspace/path/edition.cljs
View file

@ -15,6 +15,7 @@
[app.common.path.shapes-to-path :as upsp] [app.common.path.shapes-to-path :as upsp]
[app.common.path.subpaths :as ups] [app.common.path.subpaths :as ups]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.data.workspace.common :as dwc]
[app.main.data.workspace.edition :as dwe] [app.main.data.workspace.edition :as dwe]
[app.main.data.workspace.path.changes :as changes] [app.main.data.workspace.path.changes :as changes]
[app.main.data.workspace.path.drawing :as drawing] [app.main.data.workspace.path.drawing :as drawing]
@ -308,6 +309,7 @@
(= (ptk/type %) ::start-path-edit)))) (= (ptk/type %) ::start-path-edit))))
interrupt (->> stream (rx/filter #(= % :interrupt)) (rx/take 1))] interrupt (->> stream (rx/filter #(= % :interrupt)) (rx/take 1))]
(rx/concat (rx/concat
(rx/of (dwc/hide-toolbar))
(rx/of (undo/start-path-undo)) (rx/of (undo/start-path-undo))
(rx/of (drawing/change-edit-mode mode)) (rx/of (drawing/change-edit-mode mode))
(->> interrupt (->> interrupt

9
frontend/src/app/main/ui/workspace/left_toolbar.cljs
View file

@ -11,6 +11,7 @@
[app.common.media :as cm] [app.common.media :as cm]
[app.main.data.events :as ev] [app.main.data.events :as ev]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.data.workspace.common :as dwc]
[app.main.data.workspace.media :as dwm] [app.main.data.workspace.media :as dwm]
[app.main.data.workspace.shortcuts :as sc] [app.main.data.workspace.shortcuts :as sc]
[app.main.refs :as refs] [app.main.refs :as refs]
@ -27,7 +28,8 @@
(mf/defc image-upload (mf/defc image-upload
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[] []
(let [ref (mf/use-ref nil) (let [new-css-system (mf/use-ctx ctx/new-css-system)
ref (mf/use-ref nil)
file-id (mf/use-ctx ctx/current-file-id) file-id (mf/use-ctx ctx/current-file-id)
on-click on-click
@ -49,13 +51,14 @@
:blobs (seq blobs) :blobs (seq blobs)
:position (gpt/point x y)}] :position (gpt/point x y)}]
(st/emit! (dwm/upload-media-workspace params)))))] (st/emit! (dwm/upload-media-workspace params)))))]
[:li [:li
[:button [:button
{:title (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) {:title (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
:aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image)) :aria-label (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
:on-click on-click} :on-click on-click}
(if new-css-system
i/img-refactor i/img-refactor
i/image)
[:& file-uploader [:& file-uploader
{:input-id "image-upload" {:input-id "image-upload"
:accept cm/str-image-types :accept cm/str-image-types
@ -138,7 +141,7 @@
toggle-toolbar toggle-toolbar
(mf/use-fn (mf/use-fn
#(st/emit! (dw/toggle-toolbar-visibility)))] #(st/emit! (dwc/toggle-toolbar-visibility)))]
(if new-css-system (if new-css-system
(when-not ^boolean read-only? (when-not ^boolean read-only?

39
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

@ -40,6 +40,8 @@
(let [options-mode (mf/deref refs/options-mode-global) (let [options-mode (mf/deref refs/options-mode-global)
mode-inspect? (= options-mode :inspect) mode-inspect? (= options-mode :inspect)
project (mf/deref refs/workspace-project) project (mf/deref refs/workspace-project)
show-pages? (mf/use-state true)
toggle-pages (mf/use-callback #(reset! show-pages? not))
section (cond (or mode-inspect? (contains? layout :layers)) :layers section (cond (or mode-inspect? (contains? layout :layers)) :layers
(contains? layout :assets) :assets) (contains? layout :assets) :assets)
@ -47,9 +49,13 @@
show-debug? (contains? layout :debug-panel) show-debug? (contains? layout :debug-panel)
new-css-system (mf/use-ctx ctx/new-css-system) new-css-system (mf/use-ctx ctx/new-css-system)
{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]} {on-pointer-down :on-pointer-down on-lost-pointer-capture :on-lost-pointer-capture on-pointer-move :on-pointer-move parent-ref :parent-ref size :size}
(use-resize-hook :left-sidebar 275 275 500 :x false :left) (use-resize-hook :left-sidebar 275 275 500 :x false :left)
{on-pointer-down-pages :on-pointer-down on-lost-pointer-capture-pages :on-lost-pointer-capture on-pointer-move-pages :on-pointer-move size-pages :size}
(use-resize-hook :sitemap 200 38 400 :y false nil)
handle-collapse handle-collapse
(mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))) (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
@ -94,11 +100,21 @@
:shortcuts? shortcuts? :shortcuts? shortcuts?
:collapsable? true :collapsable? true
:handle-collapse handle-collapse :handle-collapse handle-collapse
:class :tab-spacing} :class (stl/css :tab-spacing)}
[:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")} [:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
[:div {:class (stl/css :layers-tab)} [:div {:class (stl/css :layers-tab)
[:& sitemap {:layout layout}] :style #js {"--height" (str size-pages "px")}}
[:& layers-toolbox {:size-parent size}]]] [:& sitemap {:layout layout
:toggle-pages toggle-pages
:show-pages? @show-pages?
:size size-pages}]
(when @show-pages?
[:div {:class (stl/css :resize-area-horiz)
:on-pointer-down on-pointer-down-pages
:on-lost-pointer-capture on-lost-pointer-capture-pages
:on-pointer-move on-pointer-move-pages}])
[:& layers-toolbox {:size-parent size
:size size-pages}]]]
(when-not ^boolean mode-inspect? (when-not ^boolean mode-inspect?
[:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")} [:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
@ -118,8 +134,17 @@
:handle-collapse handle-collapse} :handle-collapse handle-collapse}
[:& tabs-element {:id :layers :title (tr "workspace.sidebar.layers")} [:& tabs-element {:id :layers :title (tr "workspace.sidebar.layers")}
[:div {:class :layers-tab} [:div {:class :layers-tab
[:& sitemap {:layout layout}] :style #js {"--height" (str size-pages "px")}}
[:& sitemap {:layout layout
:toggle-pages toggle-pages
:show-pages? @show-pages?
:size size-pages}]
(when @show-pages?
[:div.resize-area-horiz
{:on-pointer-down on-pointer-down-pages
:on-lost-pointer-capture on-lost-pointer-capture-pages
:on-pointer-move on-pointer-move-pages}])
[:& layers-toolbox {:size-parent size}]]] [:& layers-toolbox {:size-parent size}]]]
(when-not ^boolean mode-inspect? (when-not ^boolean mode-inspect?

17
frontend/src/app/main/ui/workspace/sidebar.scss
View file

@ -26,6 +26,19 @@ $width-settings-bar-max: $s-500;
height: calc(100vh - $s-52); height: calc(100vh - $s-52);
cursor: ew-resize; cursor: ew-resize;
} }
.resize-area-horiz {
position: absolute;
top: calc($s-80 + var(--height, 200px));
left: 0;
width: 100%;
height: $s-12;
border-top: 2px solid var(--color-background-secondary);
background-color: var(--color-background-primary);
cursor: ns-resize;
&:hover {
border-color: var(--color-background-quaternary);
}
}
.settings-bar-inside { .settings-bar-inside {
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
@ -42,8 +55,8 @@ $width-settings-bar-max: $s-500;
} }
} }
} }
:global(.tab-spacing) { .tab-spacing {
margin: $s-4 $s-8 0 $s-8; margin: $s-4 $s-12 0 $s-12;
} }
.right-settings-bar { .right-settings-bar {
grid-area: right-sidebar; grid-area: right-sidebar;

5
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View file

@ -237,13 +237,14 @@
} }
} }
.tool-window-content { .tool-window-content {
--calculated-height: calc(128px + var(--height, 200px));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: calc(100vh - var(--calculated-height));
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
// scrollbar-gutter: stable; scrollbar-gutter: stable;
overflow-y: overlay; overflow-y: overlay;
.element-list { .element-list {
width: 100%; width: 100%;

1
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View file

@ -174,7 +174,6 @@
(when (or (= type :frame) (when (or (= type :frame)
(and (= type :multiple) (some? (:hide-fill-on-export values)))) (and (= type :multiple) (some? (:hide-fill-on-export values))))
[:div {:class (stl/css :checkbox)} [:div {:class (stl/css :checkbox)}
[:label {:for "show-fill-on-export" [:label {:for "show-fill-on-export"
:class (stl/css-case :checked (not hide-fill-on-export?))} :class (stl/css-case :checked (not hide-fill-on-export?))}
[:span {:class (stl/css-case :check-mark true [:span {:class (stl/css-case :check-mark true

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

@ -381,7 +381,7 @@
(= (:height size-preset) (d/parse-integer (:height values) 0))) (= (:height size-preset) (d/parse-integer (:height values) 0)))
[:span {:class (stl/css :check-icon)} i/tick-refactor])]))]]] [:span {:class (stl/css :check-icon)} i/tick-refactor])]))]]]
[:& radio-buttons {:selected (name orientation) [:& radio-buttons {:selected (or (d/name orientation) "")
:on-change on-orientation-change-refactor :on-change on-orientation-change-refactor
:name "frame-otientation"} :name "frame-otientation"}
[:& radio-button {:icon i/size-vertical-refactor [:& radio-button {:icon i/size-vertical-refactor

40
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -64,6 +64,7 @@
shadow-style (if new-css-system shadow-style (if new-css-system
(:style value) (:style value)
(dm/str (:style value))) (dm/str (:style value)))
shadow-id (:id value) shadow-id (:id value)
open-status-ref (mf/with-memo [open-state-ref shadow-id] open-status-ref (mf/with-memo [open-state-ref shadow-id]
@ -146,13 +147,20 @@
(st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))) (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value))))))
type-options [{:value "drop-shadow" :label (tr "workspace.options.shadow-options.drop-shadow")} type-options [{:value "drop-shadow" :label (tr "workspace.options.shadow-options.drop-shadow")}
{:value "inner-shadow" :label (tr "workspace.options.shadow-options.inner-shadow")}]] {:value "inner-shadow" :label (tr "workspace.options.shadow-options.inner-shadow")}]
(if new-css-system manage-on-open #(st/emit! (dwu/start-undo-transaction :color-row))
[:div {:class (stl/css-case :shadow-element true manage-on-close #(st/emit! (dwu/commit-undo-transaction :color-row))]
[:div.shadow-option {:class (stl/css-case new-css-system
:old-css/shadow-option true
:shadow-element true
:dnd-over-top (= (:over dprops) :top) :dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot)) :dnd-over-bot (= (:over dprops) :bot))
:ref dref} :ref dref}
(if new-css-system
[:*
[:div {:class (stl/css :basic-options)} [:div {:class (stl/css :basic-options)}
[:div {:class (stl/css :shadow-info)} [:div {:class (stl/css :shadow-info)}
[:button {:class (stl/css :more-options) [:button {:class (stl/css :more-options)
@ -173,7 +181,6 @@
[:button {:class (stl/css :action-btn) [:button {:class (stl/css :action-btn)
:on-click on-remove-shadow} :on-click on-remove-shadow}
i/remove-refactor]]] i/remove-refactor]]]
(when open-shadow (when open-shadow
[:& advanced-options {:class (stl/css :shadow-advanced-options) [:& advanced-options {:class (stl/css :shadow-advanced-options)
:visible? open-shadow :visible? open-shadow
@ -217,7 +224,6 @@
:on-blur on-blur :on-blur on-blur
:value (:spread value)}]]] :value (:spread value)}]]]
[:div {:class (stl/css :second-row)} [:div {:class (stl/css :second-row)}
[:div {:class (stl/css :offset-y-input) [:div {:class (stl/css :offset-y-input)
:title (tr "workspace.options.shadow-options.offsety")} :title (tr "workspace.options.shadow-options.offsety")}
@ -238,13 +244,10 @@
:disable-gradient true :disable-gradient true
:on-change update-color :on-change update-color
:on-detach detach-color :on-detach detach-color
:on-open #(st/emit! (dwu/start-undo-transaction :color-row)) :on-open manage-on-open
:on-close #(st/emit! (dwu/commit-undo-transaction :color-row))}]]])] :on-close manage-on-close}]]])]
[:div.shadow-option {:class (dom/classnames [:*
:dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot))
:ref dref}
[:div.shadow-option-main {:style {:display (when open-shadow "none")}} [:div.shadow-option-main {:style {:display (when open-shadow "none")}}
[:div.element-set-actions-button [:div.element-set-actions-button
{:on-click on-toggle-open-shadow} {:on-click on-toggle-open-shadow}
@ -253,9 +256,7 @@
[:select.input-select [:select.input-select
{:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
:default-value shadow-style :default-value shadow-style
:on-change (fn [event] :on-change on-type-change}
(let [value (-> event dom/get-target dom/get-value d/read-string)]
(st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
[:option {:value ":drop-shadow" [:option {:value ":drop-shadow"
:selected (when (= shadow-style ":drop-shadow") "selected")} :selected (when (= shadow-style ":drop-shadow") "selected")}
(tr "workspace.options.shadow-options.drop-shadow")] (tr "workspace.options.shadow-options.drop-shadow")]
@ -264,7 +265,7 @@
(tr "workspace.options.shadow-options.inner-shadow")]] (tr "workspace.options.shadow-options.inner-shadow")]]
[:div.shadow-option-main-actions [:div.shadow-option-main-actions
[:div.element-set-actions-button {:on-click (toggle-visibility index)} [:div.element-set-actions-button {:on-click toggle-visibility}
(if (:hidden value) i/eye-closed i/eye)] (if (:hidden value) i/eye-closed i/eye)]
[:div.element-set-actions-button [:div.element-set-actions-button
{:data-index index {:data-index index
@ -280,9 +281,7 @@
[:select.input-select [:select.input-select
{:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
:default-value shadow-style :default-value shadow-style
:on-change (fn [event] :on-change on-type-change}
(let [value (-> event dom/get-target dom/get-value d/read-string)]
(st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
[:option {:value ":drop-shadow" [:option {:value ":drop-shadow"
:selected (when (= shadow-style ":drop-shadow") "selected")} :selected (when (= shadow-style ":drop-shadow") "selected")}
(tr "workspace.options.shadow-options.drop-shadow")] (tr "workspace.options.shadow-options.drop-shadow")]
@ -338,8 +337,9 @@
:disable-gradient true :disable-gradient true
:on-change update-color :on-change update-color
:on-detach detach-color :on-detach detach-color
:on-open #(st/emit! (dwu/start-undo-transaction :color-row)) :on-open manage-on-open
:on-close #(st/emit! (dwu/commit-undo-transaction :color-row))}]]]]))) :on-close manage-on-close}]]]])]))
(mf/defc shadow-menu (mf/defc shadow-menu
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]

5
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -14,7 +14,8 @@
[app.main.data.workspace.libraries :as dwl] [app.main.data.workspace.libraries :as dwl]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.color-bullet-new :as cb] [app.main.ui.components.color-bullet :as cb]
[app.main.ui.components.color-bullet-new :as cbn]
[app.main.ui.components.color-input :refer [color-input*]] [app.main.ui.components.color-input :refer [color-input*]]
[app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
@ -167,7 +168,7 @@
[:span {:class (stl/css-case :color-name-wrapper true [:span {:class (stl/css-case :color-name-wrapper true
:gradient-name-wrapper gradient-color?)} :gradient-name-wrapper gradient-color?)}
[:span {:class (stl/css :color-bullet-wrapper)} [:span {:class (stl/css :color-bullet-wrapper)}
[:& cb/color-bullet {:color (cond-> color [:& cbn/color-bullet {:color (cond-> color
(nil? color-name) (assoc (nil? color-name) (assoc
:id nil :id nil
:file-id nil)) :file-id nil))

40
frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
View file

@ -16,7 +16,6 @@
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.main.ui.hooks :as hooks] [app.main.ui.hooks :as hooks]
[app.main.ui.hooks.resize :refer [use-resize-hook]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
@ -220,11 +219,8 @@
;; --- Sitemap Toolbox ;; --- Sitemap Toolbox
(mf/defc sitemap (mf/defc sitemap
[] [{:keys [size show-pages? toggle-pages] :as props}]
(let [{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]} (let [file (mf/deref refs/workspace-file)
(use-resize-hook :sitemap 200 38 400 :y false nil)
file (mf/deref refs/workspace-file)
create (mf/use-callback create (mf/use-callback
(mf/deps file) (mf/deps file)
(fn [event] (fn [event]
@ -232,24 +228,22 @@
(st/emit! (dw/create-page {:file-id (:id file) (st/emit! (dw/create-page {:file-id (:id file)
:project-id (:project-id file)})) :project-id (:project-id file)}))
(dom/blur! node)))) (dom/blur! node))))
show-pages? (mf/use-state true)
size (if @show-pages? size 32) size (if show-pages? size 32)
toggle-pages (mf/use-callback #(reset! show-pages? not))
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?) workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
new-css-system (mf/use-ctx ctx/new-css-system)] new-css-system (mf/use-ctx ctx/new-css-system)]
(if new-css-system (if new-css-system
[:div {:class (dom/classnames (css :sitemap) true) [:div {:class (dom/classnames (css :sitemap) true)
:ref parent-ref
:style #js {"--height" (str size "px")}} :style #js {"--height" (str size "px")}}
[:& title-bar {:collapsable? true [:& title-bar {:collapsable? true
:collapsed? (not @show-pages?) :collapsed? (not show-pages?)
:on-collapsed toggle-pages :on-collapsed toggle-pages
:title (tr "workspace.sidebar.sitemap") :title (tr "workspace.sidebar.sitemap")
:class (css :title-spacing-sitemap)} :class (css :title-spacing-sitemap)}
(if workspace-read-only? (if workspace-read-only?
[:div [:div
{:class (dom/classnames (css :view-only-mode) true)} {:class (dom/classnames (css :view-only-mode) true)}
@ -259,30 +253,16 @@
i/add-refactor])] i/add-refactor])]
[:div {:class (dom/classnames (css :tool-window-content) true)} [:div {:class (dom/classnames (css :tool-window-content) true)}
[:& pages-list {:file file :key (:id file)}]] [:& pages-list {:file file :key (:id file)}]]]
(when @show-pages? [:div#sitemap.tool-window {:style #js {"--height" (str size "px")}}
[:div {:class (dom/classnames (css :resize-area) true)
:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move}])]
[:div#sitemap.tool-window {:ref parent-ref
:style #js {"--height" (str size "px")}}
[:div.tool-window-bar [:div.tool-window-bar
[:span.pages-title (tr "workspace.sidebar.sitemap")] [:span.pages-title (tr "workspace.sidebar.sitemap")]
(if workspace-read-only? (if workspace-read-only?
[:div.view-only-mode (tr "labels.view-only")] [:div.view-only-mode (tr "labels.view-only")]
[:div.add-page {:on-click create} i/close]) [:div.add-page {:on-click create} i/close])
[:div.collapse-pages {:on-click toggle-pages [:div.collapse-pages {:on-click toggle-pages
:style {:transform (when (not @show-pages?) "rotate(-90deg)")}} i/arrow-slide]] :style {:transform (when (not show-pages?) "rotate(-90deg)")}} i/arrow-slide]]
[:div.tool-window-content [:div.tool-window-content
[:& pages-list {:file file :key (:id file)}]] [:& pages-list {:file file :key (:id file)}]]])))
(when @show-pages?
[:div.resize-area {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move}])])))

4
frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
View file

@ -60,9 +60,9 @@
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
// scrollbar-gutter: stable; scrollbar-gutter: stable;
overflow-y: overlay; overflow-y: overlay;
height: 100%; height: calc(-38px + var(--height, 200px));
width: 100%; width: 100%;
.pages-list { .pages-list {

34
frontend/src/app/main/ui/workspace/viewport/path_actions.cljs
View file

@ -118,14 +118,14 @@
;; Draw Mode ;; Draw Mode
[:button [:button
{:class (stl/css-case :is-toggled (= edit-mode :draw)) {:class (stl/css-case :is-toggled (= edit-mode :draw))
:alt (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes)) :title (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
:on-click on-select-draw-mode} :on-click on-select-draw-mode}
i/pentool-refactor] i/pentool-refactor]
;; Edit mode ;; Edit mode
[:button [:button
{:class (stl/css-case :is-toggled (= edit-mode :move)) {:class (stl/css-case :is-toggled (= edit-mode :move))
:alt (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes)) :title (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
:on-click on-select-edit-mode} :on-click on-select-edit-mode}
i/move-refactor]] i/move-refactor]]
@ -133,52 +133,52 @@
;; Add Node ;; Add Node
[:button [:button
{:class (stl/css-case :is-disabled (:add-node enabled-buttons)) {:class (stl/css-case :is-disabled (not (:add-node enabled-buttons)))
:alt (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node)) :title (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
:on-click on-add-node} :on-click on-add-node}
i/add-refactor] i/add-refactor]
;; Remove node ;; Remove node
[:button [:button
{:class (stl/css-case :is-disabled (:remove-node enabled-buttons)) {:class (stl/css-case :is-disabled (not (:remove-node enabled-buttons)))
:alt (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node)) :title (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
:on-click on-remove-node} :on-click on-remove-node}
i/remove-refactor]] i/remove-refactor]]
[:div {:class (stl/css :sub-actions-group)} [:div {:class (stl/css :sub-actions-group)}
;; Merge Nodes ;; Merge Nodes
[:button [:button
{:class (stl/css-case :is-disabled (:merge-nodes enabled-buttons)) {:class (stl/css-case :is-disabled (not (:merge-nodes enabled-buttons)))
:alt (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes)) :title (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
:on-click on-merge-nodes} :on-click on-merge-nodes}
i/merge-nodes-refactor] i/merge-nodes-refactor]
;; Join Nodes ;; Join Nodes
[:button [:button
{:class (stl/css-case :is-disabled (:join-nodes enabled-buttons)) {:class (stl/css-case :is-disabled (not (:join-nodes enabled-buttons)))
:alt (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes)) :title (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
:on-click on-join-nodes} :on-click on-join-nodes}
i/join-nodes-refactor] i/join-nodes-refactor]
;; Separate Nodes ;; Separate Nodes
[:button [:button
{:class (stl/css-case :is-disabled (:separate-nodes enabled-buttons)) {:class (stl/css-case :is-disabled (not (:separate-nodes enabled-buttons)))
:alt (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes)) :title (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
:on-click on-separate-nodes} :on-click on-separate-nodes}
i/separate-nodes-refactor]] i/separate-nodes-refactor]]
;; Make Corner ;; Make Corner
[:div {:class (stl/css :sub-actions-group)} [:div {:class (stl/css :sub-actions-group)}
[:button [:button
{:class (stl/css-case :is-disabled (:make-corner enabled-buttons)) {:class (stl/css-case :is-disabled (not (:make-corner enabled-buttons)))
:alt (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner)) :title (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
:on-click on-make-corner} :on-click on-make-corner}
i/to-corner-refactor] i/to-corner-refactor]
;; Make Curve ;; Make Curve
[:button [:button
{:class (stl/css-case :is-disabled (:make-curve enabled-buttons)) {:class (stl/css-case :is-disabled (not (:make-curve enabled-buttons)))
:alt (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve)) :title (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
:on-click on-make-curve} :on-click on-make-curve}
i/to-curve-refactor]] i/to-curve-refactor]]
@ -186,7 +186,7 @@
[:div {:class (stl/css :sub-actions-group)} [:div {:class (stl/css :sub-actions-group)}
[:button [:button
{:class (stl/css-case :is-toggled snap-toggled) {:class (stl/css-case :is-toggled snap-toggled)
:alt (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes)) :title (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
:on-click on-toggle-snap} :on-click on-toggle-snap}
i/snap-nodes-refactor]]] i/snap-nodes-refactor]]]

7
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View file

@ -75,13 +75,6 @@
grid-edition? (and single? editing? (ctl/grid-layout? shape))] grid-edition? (and single? editing? (ctl/grid-layout? shape))]
(mf/use-effect
(mf/deps editing?)
(fn []
(if editing?
(st/emit! (dw/hide-toolbar))
(st/emit! (dw/show-toolbar)))))
(cond (cond
path-edition? path-edition?
[:div.viewport-actions [:div.viewport-actions