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

19
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,14 +28,15 @@
(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)
file-id (mf/use-ctx ctx/current-file-id) ref (mf/use-ref nil)
file-id (mf/use-ctx ctx/current-file-id)
on-click on-click
(mf/use-fn (mf/use-fn
(fn [] (fn []
(st/emit! :interrupt dw/clear-edition-mode) (st/emit! :interrupt dw/clear-edition-mode)
(dom/click (mf/ref-val ref)))) (dom/click (mf/ref-val ref))))
on-selected on-selected
(mf/use-fn (mf/use-fn
@ -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}
i/img-refactor (if new-css-system
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?

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

@ -39,7 +39,9 @@
[{:keys [layout file page-id] :as props}] [{:keys [layout file page-id] :as props}]
(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%;

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

@ -149,7 +149,7 @@
(tr "settings.multiple")] (tr "settings.multiple")]
[:button {:on-click on-remove-all [:button {:on-click on-remove-all
:class (stl/css :remove-btn)} :class (stl/css :remove-btn)}
i/remove-refactor]] i/remove-refactor]]
(seq (:fills values)) (seq (:fills values))
[:& h/sortable-container {} [:& h/sortable-container {}
@ -174,14 +174,13 @@
(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
:checked (not hide-fill-on-export?))} :checked (not hide-fill-on-export?))}
(when(not hide-fill-on-export?) (when (not hide-fill-on-export?)
i/status-tick-refactor)] i/status-tick-refactor)]
(tr "workspace.options.show-fill-on-export") (tr "workspace.options.show-fill-on-export")
[:input {:type "checkbox" [:input {:type "checkbox"
:id "show-fill-on-export" :id "show-fill-on-export"
:ref checkbox-ref :ref checkbox-ref

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

342
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,200 +147,199 @@
(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))]
:dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot))
:ref dref}
[:div {:class (stl/css :basic-options)}
[:div {:class (stl/css :shadow-info)}
[:button {:class (stl/css :more-options)
:on-click on-toggle-open-shadow}
i/menu-refactor]
[:div {:class (stl/css :type-select)}
[:& select
{:class (stl/css :shadow-type-select)
:default-value (d/name shadow-style)
:options type-options
:on-change on-type-change}]]]
[:div {:class (stl/css :actions)}
[:button {:class (stl/css :action-btn)
:on-click toggle-visibility}
(if (:hidden value)
i/hide-refactor
i/shown-refactor)]
[:button {:class (stl/css :action-btn)
:on-click on-remove-shadow}
i/remove-refactor]]]
(when open-shadow
[:& advanced-options {:class (stl/css :shadow-advanced-options)
:visible? open-shadow
:on-close on-toggle-open-shadow}
[:div {:class (stl/css :first-row)}
[:div {:class (stl/css :offset-x-input)
:title (tr "workspace.options.shadow-options.offsetx")}
[:span {:class (stl/css :input-label)}
"X"]
[:> numeric-input* {:className (stl/css :numeric-input)
:ref adv-offset-x-ref
:no-validate true
:placeholder "--"
:on-change (update-attr index :offset-x basic-offset-x-ref)
:on-blur on-blur
:value (:offset-x value)}]]
[:div {:class (stl/css :blur-input)
:title (tr "workspace.options.shadow-options.blur")}
[:span {:class (stl/css :input-label)}
(tr "workspace.options.shadow-options.blur")]
[:> numeric-input* {:ref adv-blur-ref
:className (stl/css :numeric-input)
:no-validate true
:placeholder "--"
:on-change (update-attr index :blur basic-blur-ref)
:on-blur on-blur
:min 0
:value (:blur value)}]]
[:div {:class (stl/css :spread-input)
:title (tr "workspace.options.shadow-options.spread")}
[:span {:class (stl/css :input-label)}
(tr "workspace.options.shadow-options.spread")]
[:> numeric-input* {:ref adv-spread-ref
:className (stl/css :numeric-input)
:no-validate true
:placeholder "--"
:on-change (update-attr index :spread)
:on-blur on-blur
:value (:spread value)}]]]
[:div {:class (stl/css :second-row)} [:div.shadow-option {:class (stl/css-case new-css-system
[:div {:class (stl/css :offset-y-input) :old-css/shadow-option true
:title (tr "workspace.options.shadow-options.offsety")} :shadow-element true
[:span {:class (stl/css :input-label)} :dnd-over-top (= (:over dprops) :top)
"Y"] :dnd-over-bot (= (:over dprops) :bot))
[:> numeric-input* {:ref adv-offset-y-ref :ref dref}
:className (stl/css :numeric-input) (if new-css-system
:no-validate true [:*
:placeholder "--" [:div {:class (stl/css :basic-options)}
:on-change (update-attr index :offset-y basic-offset-y-ref) [:div {:class (stl/css :shadow-info)}
:on-blur on-blur [:button {:class (stl/css :more-options)
:value (:offset-y value)}]] :on-click on-toggle-open-shadow}
[:& color-row {:color (if (string? (:color value)) i/menu-refactor]
;; Support for old format colors [:div {:class (stl/css :type-select)}
{:color (:color value) :opacity (:opacity value)} [:& select
(:color value)) {:class (stl/css :shadow-type-select)
:title (tr "workspace.options.shadow-options.color") :default-value (d/name shadow-style)
:disable-gradient true :options type-options
:on-change update-color :on-change on-type-change}]]]
:on-detach detach-color [:div {:class (stl/css :actions)}
:on-open #(st/emit! (dwu/start-undo-transaction :color-row)) [:button {:class (stl/css :action-btn)
:on-close #(st/emit! (dwu/commit-undo-transaction :color-row))}]]])] :on-click toggle-visibility}
(if (:hidden value)
i/hide-refactor
i/shown-refactor)]
[:button {:class (stl/css :action-btn)
:on-click on-remove-shadow}
i/remove-refactor]]]
(when open-shadow
[:& advanced-options {:class (stl/css :shadow-advanced-options)
:visible? open-shadow
:on-close on-toggle-open-shadow}
[:div.shadow-option {:class (dom/classnames [:div {:class (stl/css :first-row)}
:dnd-over-top (= (:over dprops) :top) [:div {:class (stl/css :offset-x-input)
:dnd-over-bot (= (:over dprops) :bot)) :title (tr "workspace.options.shadow-options.offsetx")}
:ref dref} [:span {:class (stl/css :input-label)}
[:div.shadow-option-main {:style {:display (when open-shadow "none")}} "X"]
[:div.element-set-actions-button [:> numeric-input* {:className (stl/css :numeric-input)
{:on-click on-toggle-open-shadow} :ref adv-offset-x-ref
i/actions] :no-validate true
:placeholder "--"
:on-change (update-attr index :offset-x basic-offset-x-ref)
:on-blur on-blur
:value (:offset-x value)}]]
[:select.input-select [:div {:class (stl/css :blur-input)
{:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element :title (tr "workspace.options.shadow-options.blur")}
:default-value shadow-style [:span {:class (stl/css :input-label)}
:on-change (fn [event] (tr "workspace.options.shadow-options.blur")]
(let [value (-> event dom/get-target dom/get-value d/read-string)] [:> numeric-input* {:ref adv-blur-ref
(st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))} :className (stl/css :numeric-input)
[:option {:value ":drop-shadow" :no-validate true
:selected (when (= shadow-style ":drop-shadow") "selected")} :placeholder "--"
(tr "workspace.options.shadow-options.drop-shadow")] :on-change (update-attr index :blur basic-blur-ref)
[:option {:value ":inner-shadow" :on-blur on-blur
:selected (when (= shadow-style ":inner-shadow") "selected")} :min 0
(tr "workspace.options.shadow-options.inner-shadow")]] :value (:blur value)}]]
[:div.shadow-option-main-actions [:div {:class (stl/css :spread-input)
[:div.element-set-actions-button {:on-click (toggle-visibility index)} :title (tr "workspace.options.shadow-options.spread")}
(if (:hidden value) i/eye-closed i/eye)] [:span {:class (stl/css :input-label)}
[:div.element-set-actions-button (tr "workspace.options.shadow-options.spread")]
{:data-index index [:> numeric-input* {:ref adv-spread-ref
:on-click on-remove-shadow} :className (stl/css :numeric-input)
i/minus]]] :no-validate true
:placeholder "--"
:on-change (update-attr index :spread)
:on-blur on-blur
:value (:spread value)}]]]
[:& advanced-options {:visible? open-shadow [:div {:class (stl/css :second-row)}
:on-close on-toggle-open-shadow} [:div {:class (stl/css :offset-y-input)
[:div.color-data :title (tr "workspace.options.shadow-options.offsety")}
[:span {:class (stl/css :input-label)}
"Y"]
[:> numeric-input* {:ref adv-offset-y-ref
:className (stl/css :numeric-input)
:no-validate true
:placeholder "--"
:on-change (update-attr index :offset-y basic-offset-y-ref)
:on-blur on-blur
:value (:offset-y value)}]]
[:& color-row {:color (if (string? (:color value))
;; Support for old format colors
{:color (:color value) :opacity (:opacity value)}
(:color value))
:title (tr "workspace.options.shadow-options.color")
:disable-gradient true
:on-change update-color
:on-detach detach-color
:on-open manage-on-open
:on-close manage-on-close}]]])]
[:*
[: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}
i/actions] i/actions]
[: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")]
[:option {:value ":inner-shadow" [:option {:value ":inner-shadow"
:selected (when (= shadow-style ":inner-shadow") "selected")} :selected (when (= shadow-style ":inner-shadow") "selected")}
(tr "workspace.options.shadow-options.inner-shadow")]]] (tr "workspace.options.shadow-options.inner-shadow")]]
[:div.row-grid-2 [:div.shadow-option-main-actions
[:div.input-element {:title (tr "workspace.options.shadow-options.offsetx")} [:div.element-set-actions-button {:on-click toggle-visibility}
[:> numeric-input* {:ref adv-offset-x-ref (if (:hidden value) i/eye-closed i/eye)]
:no-validate true [:div.element-set-actions-button
:placeholder "--" {:data-index index
:on-change (update-attr index :offset-x basic-offset-x-ref) :on-click on-remove-shadow}
:on-blur on-blur i/minus]]]
:value (:offset-x value)}]
[:span.after (tr "workspace.options.shadow-options.offsetx")]]
[:div.input-element {:title (tr "workspace.options.shadow-options.offsety")} [:& advanced-options {:visible? open-shadow
[:> numeric-input* {:ref adv-offset-y-ref :on-close on-toggle-open-shadow}
:no-validate true [:div.color-data
:placeholder "--" [:div.element-set-actions-button
:on-change (update-attr index :offset-y basic-offset-y-ref) {:on-click on-toggle-open-shadow}
:on-blur on-blur i/actions]
:value (:offset-y value)}] [:select.input-select
[:span.after (tr "workspace.options.shadow-options.offsety")]]] {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element
:default-value shadow-style
:on-change on-type-change}
[:option {:value ":drop-shadow"
:selected (when (= shadow-style ":drop-shadow") "selected")}
(tr "workspace.options.shadow-options.drop-shadow")]
[:option {:value ":inner-shadow"
:selected (when (= shadow-style ":inner-shadow") "selected")}
(tr "workspace.options.shadow-options.inner-shadow")]]]
[:div.row-grid-2 [:div.row-grid-2
[:div.input-element {:title (tr "workspace.options.shadow-options.blur")} [:div.input-element {:title (tr "workspace.options.shadow-options.offsetx")}
[:> numeric-input* {:ref adv-blur-ref [:> numeric-input* {:ref adv-offset-x-ref
:no-validate true :no-validate true
:placeholder "--" :placeholder "--"
:on-change (update-attr index :blur basic-blur-ref) :on-change (update-attr index :offset-x basic-offset-x-ref)
:on-blur on-blur :on-blur on-blur
:min 0 :value (:offset-x value)}]
:value (:blur value)}] [:span.after (tr "workspace.options.shadow-options.offsetx")]]
[:span.after (tr "workspace.options.shadow-options.blur")]]
[:div.input-element {:title (tr "workspace.options.shadow-options.spread")} [:div.input-element {:title (tr "workspace.options.shadow-options.offsety")}
[:> numeric-input* {:ref adv-spread-ref [:> numeric-input* {:ref adv-offset-y-ref
:no-validate true :no-validate true
:placeholder "--" :placeholder "--"
:on-change (update-attr index :spread) :on-change (update-attr index :offset-y basic-offset-y-ref)
:on-blur on-blur :on-blur on-blur
:value (:spread value)}] :value (:offset-y value)}]
[:span.after (tr "workspace.options.shadow-options.spread")]]] [:span.after (tr "workspace.options.shadow-options.offsety")]]]
[:div.row-grid-2
[:div.input-element {:title (tr "workspace.options.shadow-options.blur")}
[:> numeric-input* {:ref adv-blur-ref
:no-validate true
:placeholder "--"
:on-change (update-attr index :blur basic-blur-ref)
:on-blur on-blur
:min 0
:value (:blur value)}]
[:span.after (tr "workspace.options.shadow-options.blur")]]
[:div.input-element {:title (tr "workspace.options.shadow-options.spread")}
[:> numeric-input* {:ref adv-spread-ref
:no-validate true
:placeholder "--"
:on-change (update-attr index :spread)
:on-blur on-blur
:value (:spread value)}]
[:span.after (tr "workspace.options.shadow-options.spread")]]]
[:div.color-row-wrap
[:& color-row {:color (if (string? (:color value))
;; Support for old format colors
{:color (:color value) :opacity (:opacity value)}
(:color value))
:title (tr "workspace.options.shadow-options.color")
:disable-gradient true
:on-change update-color
:on-detach detach-color
:on-open manage-on-open
:on-close manage-on-close}]]]])]))
[:div.color-row-wrap
[:& color-row {:color (if (string? (:color value))
;; Support for old format colors
{:color (:color value) :opacity (:opacity value)}
(:color value))
:title (tr "workspace.options.shadow-options.color")
:disable-gradient true
:on-change update-color
:on-detach detach-color
:on-open #(st/emit! (dwu/start-undo-transaction :color-row))
:on-close #(st/emit! (dwu/commit-undo-transaction :color-row))}]]]])))
(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