Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-15 11:38:24 -05:00
Code Issues Activity

✨ Allows renaming when new typography and context menu

Browse source
This commit is contained in:
alonso.torres 2020-10-01 14:05:21 +02:00 • committed by Hirunatan
parent 5f650832e6
commit bd92936a64
3 changed files with 39 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/app/main/data/workspace/libraries.cljs
View file

@ -541,10 +541,13 @@
ptk/WatchEvent ptk/WatchEvent
(watch [_ state s] (watch [_ state s]
(let [rchg {:type :add-typography (let [rchg {:type :add-typography
:typography typography} :typography (assoc typography :ts (.now js/Date))}
uchg {:type :del-typography uchg {:type :del-typography
:id (:id typography)}] :id (:id typography)}]
(rx/of (dwc/commit-changes [rchg] [uchg] {:commit-local? true}))))))) (rx/of (dwc/commit-changes [rchg] [uchg] {:commit-local? true})
#(assoc-in %
[:workspace-local :rename-typography]
(:id typography))))))))
(defn update-typography (defn update-typography
[typography] [typography]

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

@ -380,10 +380,25 @@
(mf/deps file-id) (mf/deps file-id)
(fn [event] )) (fn [event] ))
handle-rename-typography-clicked (fn []) handle-rename-typography-clicked
handle-edit-typography-clicked (fn [] ) (fn []
handle-delete-typography (fn [] (st/emit! #(assoc-in % [:workspace-local :rename-typography] (:id @state))))
(st/emit! (dwl/delete-typography (:id @state))))]
handle-edit-typography-clicked
(fn []
(st/emit! #(assoc-in % [:workspace-local :edit-typography] (:id @state))))
handle-delete-typography
(fn []
(st/emit! (dwl/delete-typography (:id @state))))]
(mf/use-effect
(mf/deps local)
(fn []
(when (:rename-typography local)
(st/emit! #(update % :workspace-local dissoc :rename-typography)))
(when (:edit-typography local)
(st/emit! #(update % :workspace-local dissoc :edit-typography)))))
[:div.asset-group [:div.asset-group
[:div.group-title {:class (when (not open?) "closed")} [:div.group-title {:class (when (not open?) "closed")}
@ -403,14 +418,17 @@
[(t locale "workspace.assets.delete") handle-delete-typography]]}] [(t locale "workspace.assets.delete") handle-delete-typography]]}]
(when open? (when open?
[:div.group-list [:div.group-list
(for [typography (sort-by (comp - :ts) typographies)] (for [typography (sort-by :ts typographies)]
[:& typography-entry [:& typography-entry
{:key (:id typography) {:key (:id typography)
:typography typography :typography typography
:read-only? (not local?) :read-only? (not local?)
:on-context-menu #(on-context-menu (:id typography) %) :on-context-menu #(on-context-menu (:id typography) %)
:on-change #(handle-change typography %) :on-change #(handle-change typography %)
:on-select #(handle-typography-selection typography)}])])])) :on-select #(handle-typography-selection typography)
:editting? (or (= (:rename-typography local) (:id typography))
(= (:edit-typography local) (:id typography)))
:focus-name? (= (:rename-typography local) (:id typography))}])])]))
(defn file-colors-ref (defn file-colors-ref
[id] [id]

15
frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs
View file

@ -18,8 +18,9 @@
[app.main.data.workspace.texts :as dwt] [app.main.data.workspace.texts :as dwt]
[app.main.ui.components.editable-select :refer [editable-select]] [app.main.ui.components.editable-select :refer [editable-select]]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
[app.util.dom :as dom]
[app.main.fonts :as fonts] [app.main.fonts :as fonts]
[app.util.dom :as dom]
[app.util.timers :as ts]
[app.util.i18n :as i18n :refer [t]])) [app.util.i18n :as i18n :refer [t]]))
(defn- attr->string [value] (defn- attr->string [value]
@ -216,14 +217,18 @@
(mf/use-effect (mf/use-effect
(mf/deps editting?) (mf/deps editting?)
(fn [] (reset! open? editting?))) (fn []
(when editting?
(reset! open? editting?))))
(mf/use-effect (mf/use-effect
(mf/deps focus-name?) (mf/deps focus-name?)
(fn [] (fn []
(when-let [node (mf/ref-val name-input-ref)] (when focus-name?
(dom/focus! node) (ts/schedule 100
(dom/select-text! node)))) #(when-let [node (mf/ref-val name-input-ref)]
(dom/focus! node)
(dom/select-text! node))))))
[:* [:*
[:div.element-set-options-group.typography-entry [:div.element-set-options-group.typography-entry