mirror of
https://github.com/penpot/penpot.git
synced 2025-01-23 23:18:48 -05:00
🎉 Group typographies
This commit is contained in:
Andrés Moya
Andrey Antukh
parent
c858707c39
commit
ddbaee228a
4 changed files with 89 additions and 23 deletions
|
|
@ -381,6 +381,7 @@
|
|||
|
||||
(s/def :internal.typography/id ::id)
|
||||
(s/def :internal.typography/name ::string)
|
||||
(s/def :internal.typography/path (s/nilable ::string))
|
||||
(s/def :internal.typography/font-id ::string)
|
||||
(s/def :internal.typography/font-family ::string)
|
||||
(s/def :internal.typography/font-variant-id ::string)
|
||||
|
|
@ -402,7 +403,8 @@
|
|||
:internal.typography/font-style
|
||||
:internal.typography/line-height
|
||||
:internal.typography/letter-spacing
|
||||
:internal.typography/text-transform]))
|
||||
:internal.typography/text-transform]
|
||||
:opt-un [:internal.typography/path]))
|
||||
|
||||
(s/def :internal.file/pages
|
||||
(s/coll-of ::uuid :kind vector?))
|
||||
|
|
|
|||
|
|
@ -227,7 +227,9 @@
|
|||
(ptk/reify ::update-typography
|
||||
ptk/WatchEvent
|
||||
(watch [it state stream]
|
||||
(let [prev (get-in state [:workspace-data :typographies (:id typography)])
|
||||
(let [[path name] (cp/parse-path-name (:name typography))
|
||||
typography (assoc typography :path path :name name)
|
||||
prev (get-in state [:workspace-data :typographies (:id typography)])
|
||||
rchg {:type :mod-typography
|
||||
:typography typography}
|
||||
uchg {:type :mod-typography
|
||||
|
|
|
|||
|
|
@ -747,15 +747,19 @@
|
|||
:menu-open? false
|
||||
:top nil
|
||||
:left nil
|
||||
:id nil})
|
||||
:id nil
|
||||
:folded-groups empty-folded-groups})
|
||||
|
||||
local (deref refs/workspace-local)
|
||||
|
||||
groups (group-assets typographies)
|
||||
folded-groups (:folded-groups @state)
|
||||
|
||||
selected-typographies (:typographies selected-assets)
|
||||
multi-typographies? (> (count selected-typographies) 1)
|
||||
multi-assets? (or (not (empty? (:graphics selected-assets)))
|
||||
(not (empty? (:colors selected-assets)))
|
||||
(not (empty? (:typographies selected-assets))))
|
||||
multi-assets? (or (not (empty? (:components selected-assets)))
|
||||
(not (empty? (:graphics selected-assets)))
|
||||
(not (empty? (:colors selected-assets))))
|
||||
|
||||
add-typography
|
||||
(mf/use-callback
|
||||
|
|
@ -779,6 +783,38 @@
|
|||
(run! #(st/emit! (dwt/update-text-attrs {:id % :editor (get-in local [:editors %]) :attrs attrs}))
|
||||
ids)))
|
||||
|
||||
create-group
|
||||
(mf/use-callback
|
||||
(mf/deps typographies selected-typographies on-clear-selection file-id)
|
||||
(fn [name]
|
||||
(on-clear-selection)
|
||||
(st/emit! (dwu/start-undo-transaction))
|
||||
(apply st/emit!
|
||||
(->> typographies
|
||||
(filter #(contains? selected-typographies (:id %)))
|
||||
(map #(dwl/update-typography
|
||||
(assoc % :name
|
||||
(str name " / "
|
||||
(cp/merge-path-item (:path %) (:name %))))
|
||||
file-id))))
|
||||
(st/emit! (dwu/commit-undo-transaction))))
|
||||
|
||||
on-fold-group
|
||||
(mf/use-callback
|
||||
(mf/deps groups folded-groups)
|
||||
(fn [path]
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(swap! state update :folded-groups
|
||||
toggle-folded-group path))))
|
||||
|
||||
on-group
|
||||
(mf/use-callback
|
||||
(mf/deps typographies selected-typographies)
|
||||
(fn [event]
|
||||
(dom/stop-propagation event)
|
||||
(modal/show! :create-group-dialog {:create create-group})))
|
||||
|
||||
on-context-menu
|
||||
(mf/use-callback
|
||||
(mf/deps selected-typographies on-clear-selection)
|
||||
|
|
@ -845,22 +881,40 @@
|
|||
[(t locale "workspace.assets.rename") handle-rename-typography-clicked])
|
||||
(when-not (or multi-typographies? multi-assets?)
|
||||
[(t locale "workspace.assets.edit") handle-edit-typography-clicked])
|
||||
[(t locale "workspace.assets.delete") handle-delete-typography]]}]
|
||||
[(t locale "workspace.assets.delete") handle-delete-typography]
|
||||
(when-not multi-assets?
|
||||
[(tr "workspace.assets.group") on-group])]}]
|
||||
(when open?
|
||||
[:div.asset-list
|
||||
(for [typography typographies]
|
||||
[:& typography-entry
|
||||
{:key (:id typography)
|
||||
:typography typography
|
||||
:file file
|
||||
:read-only? (not local?)
|
||||
:on-context-menu #(on-context-menu (:id typography) %)
|
||||
:on-change #(handle-change typography %)
|
||||
:selected? (contains? selected-typographies (:id typography))
|
||||
:on-click #(on-asset-click % (:id typography) {"" typographies}
|
||||
(partial apply-typography typography))
|
||||
:editting? (= editting-id (:id typography))
|
||||
:focus-name? (= (:rename-typography local) (:id typography))}])])]))
|
||||
(for [group groups]
|
||||
(let [path (first group)
|
||||
typographies (second group)
|
||||
group-open? (not (contains? folded-groups path))]
|
||||
[:*
|
||||
(when-not (empty? path)
|
||||
(let [[other-path last-path truncated] (cp/compact-path path 35)]
|
||||
[:div.group-title {:class (when-not group-open? "closed")
|
||||
:on-click (on-fold-group path)}
|
||||
[:span i/arrow-slide]
|
||||
(when-not (empty? other-path)
|
||||
[:span.dim {:title (when truncated path)}
|
||||
other-path "\u00A0/\u00A0"])
|
||||
[:span {:title (when truncated path)}
|
||||
last-path]]))
|
||||
(when group-open?
|
||||
[:div.asset-list
|
||||
(for [typography typographies]
|
||||
[:& typography-entry
|
||||
{:key (:id typography)
|
||||
:typography typography
|
||||
:file file
|
||||
:read-only? (not local?)
|
||||
:on-context-menu #(on-context-menu (:id typography) %)
|
||||
:on-change #(handle-change typography %)
|
||||
:selected? (contains? selected-typographies (:id typography))
|
||||
:on-click #(on-asset-click % (:id typography) {"" typographies}
|
||||
(partial apply-typography typography))
|
||||
:editting? (= editting-id (:id typography))
|
||||
:focus-name? (= (:rename-typography local) (:id typography))}])])])))]))
|
||||
|
||||
|
||||
;; --- Assets toolbox ----
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
(ns app.main.ui.workspace.sidebar.options.menus.typography
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.pages :as cp]
|
||||
[app.common.text :as txt]
|
||||
[app.main.data.workspace.texts :as dwt]
|
||||
[app.main.fonts :as fonts]
|
||||
|
|
@ -212,11 +213,17 @@
|
|||
open? (mf/use-state editting?)
|
||||
hover-detach (mf/use-state false)
|
||||
name-input-ref (mf/use-ref nil)
|
||||
value (mf/use-state (cp/merge-path-item (:path typography) (:name typography)))
|
||||
|
||||
#_(rt/resolve router :workspace
|
||||
{:project-id (:project-id file)
|
||||
:file-id (:id file)}
|
||||
{:page-id (get-in file [:data :pages 0])})
|
||||
|
||||
handle-change
|
||||
(fn [event]
|
||||
(reset! value (dom/get-target-val event)))
|
||||
|
||||
handle-go-to-edit
|
||||
(fn [] (st/emit! (rt/nav :workspace {:project-id (:project-id file)
|
||||
:file-id (:id file)}
|
||||
|
|
@ -303,7 +310,8 @@
|
|||
[:input.element-name.adv-typography-name
|
||||
{:type "text"
|
||||
:ref name-input-ref
|
||||
:value (:name typography)
|
||||
:on-change #(on-change {:name (dom/get-target-val %)})}]]]
|
||||
:value @value
|
||||
:on-change handle-change
|
||||
:on-blur #(on-change {:name @value})}]]]
|
||||
[:& typography-options {:values typography
|
||||
:on-change on-change}]])]]))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue