mirror of
https://github.com/penpot/penpot.git
synced 2026-04-28 20:58:06 +00:00
💄 Add minor cosmetic improvements on sitemap ns
This commit is contained in:
Andrey Antukh
Andrés Moya
parent
f2a4275531
commit
f06be2727e
@ -5,7 +5,7 @@
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.sitemap
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require-macros [app.main.style :as stl :refer [css]])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
@ -27,16 +27,17 @@
|
||||
;; --- Page Item
|
||||
|
||||
(mf/defc page-item
|
||||
[{:keys [page index deletable? selected? editing? hovering?] :as props}]
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [page index deletable? selected? editing? hovering?]}]
|
||||
(let [input-ref (mf/use-ref)
|
||||
id (:id page)
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
delete-fn (mf/use-callback (mf/deps id) #(st/emit! (dw/delete-page id)))
|
||||
navigate-fn (mf/use-callback (mf/deps id) #(st/emit! :interrupt (dw/go-to-page id)))
|
||||
delete-fn (mf/use-fn (mf/deps id) #(st/emit! (dw/delete-page id)))
|
||||
navigate-fn (mf/use-fn (mf/deps id) #(st/emit! :interrupt (dw/go-to-page id)))
|
||||
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
|
||||
on-delete
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps id)
|
||||
#(st/emit! (modal/show
|
||||
{:type :confirm
|
||||
@ -45,7 +46,7 @@
|
||||
:on-accept delete-fn})))
|
||||
|
||||
on-double-click
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps workspace-read-only?)
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
@ -54,7 +55,7 @@
|
||||
(st/emit! (dw/start-rename-page-item id)))))
|
||||
|
||||
on-blur
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(let [name (str/trim (dom/get-target-val event))]
|
||||
(when-not (str/empty? name)
|
||||
@ -62,7 +63,7 @@
|
||||
(st/emit! (dw/stop-rename-page-item)))))
|
||||
|
||||
on-key-down
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(cond
|
||||
(kbd/enter? event)
|
||||
@ -72,7 +73,7 @@
|
||||
(st/emit! (dw/stop-rename-page-item)))))
|
||||
|
||||
on-drop
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps id index)
|
||||
(fn [side {:keys [id] :as data}]
|
||||
(let [index (if (= :bot side) (inc index) index)]
|
||||
@ -88,7 +89,7 @@
|
||||
:draggable? (not workspace-read-only?))
|
||||
|
||||
on-context-menu
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps id workspace-read-only?)
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
@ -183,7 +184,8 @@
|
||||
st/state =))
|
||||
|
||||
(mf/defc page-item-wrapper
|
||||
[{:keys [page-id index deletable? selected? editing?] :as props}]
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [page-id index deletable? selected? editing?]}]
|
||||
(let [page-ref (mf/use-memo (mf/deps page-id) #(make-page-ref page-id))
|
||||
page (mf/deref page-ref)]
|
||||
[:& page-item {:page page
|
||||
@ -195,7 +197,8 @@
|
||||
;; --- Pages List
|
||||
|
||||
(mf/defc pages-list
|
||||
[{:keys [file] :as props}]
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [file]}]
|
||||
(let [pages (:pages file)
|
||||
deletable? (> (count pages) 1)
|
||||
editing-page-id (mf/deref refs/editing-page-item)
|
||||
@ -218,22 +221,24 @@
|
||||
;; --- Sitemap Toolbox
|
||||
|
||||
(mf/defc sitemap
|
||||
[{:keys [size show-pages? toggle-pages] :as props}]
|
||||
(let [file (mf/deref refs/workspace-file)
|
||||
create (mf/use-callback
|
||||
(mf/deps file)
|
||||
(fn [event]
|
||||
(let [node (dom/get-current-target event)]
|
||||
(st/emit! (dw/create-page {:file-id (:id file)
|
||||
:project-id (:project-id file)}))
|
||||
(dom/blur! node))))
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [size show-pages? toggle-pages]}]
|
||||
(let [file (mf/deref refs/workspace-file)
|
||||
file-id (get file :id)
|
||||
project-id (get file :project-id)
|
||||
|
||||
size (if show-pages? size 32)
|
||||
on-create (mf/use-fn
|
||||
(mf/deps file-id project-id)
|
||||
(fn [event]
|
||||
(st/emit! (dw/create-page {:file-id file-id :project-id project-id}))
|
||||
(-> event dom/get-current-target dom/blur!)))
|
||||
|
||||
workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
size (if show-pages? size 32)
|
||||
|
||||
(if new-css-system
|
||||
read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)]
|
||||
|
||||
(if ^boolean new-css-system
|
||||
[:div {:class (dom/classnames (css :sitemap) true)
|
||||
:style #js {"--height" (str size "px")}}
|
||||
|
||||
@ -244,12 +249,12 @@
|
||||
:title (tr "workspace.sidebar.sitemap")
|
||||
:class (css :title-spacing-sitemap)}
|
||||
|
||||
(if workspace-read-only?
|
||||
(if ^boolean read-only?
|
||||
[:div
|
||||
{:class (dom/classnames (css :view-only-mode) true)}
|
||||
(tr "labels.view-only")]
|
||||
[:button {:class (dom/classnames (css :add-page) true)
|
||||
:on-click create}
|
||||
[:button {:class (stl/css :add-page)
|
||||
:on-click on-create}
|
||||
i/add-refactor])]
|
||||
|
||||
[:div {:class (dom/classnames (css :tool-window-content) true)}
|
||||
@ -258,9 +263,9 @@
|
||||
[:div#sitemap.tool-window {:style #js {"--height" (str size "px")}}
|
||||
[:div.tool-window-bar
|
||||
[:span.pages-title (tr "workspace.sidebar.sitemap")]
|
||||
(if workspace-read-only?
|
||||
(if ^boolean read-only?
|
||||
[:div.view-only-mode (tr "labels.view-only")]
|
||||
[:div.add-page {:on-click create} i/close])
|
||||
[:div.add-page {:on-click on-create} i/close])
|
||||
[:div.collapse-pages {:on-click toggle-pages
|
||||
:style {:transform (when (not show-pages?) "rotate(-90deg)")}} i/arrow-slide]]
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user