mirror of
https://github.com/penpot/penpot.git
synced 2025-02-15 11:38:24 -05:00
Merge pull request #5385 from penpot/mavalroot-rename-board
🎉 Rename board on the workspace
This commit is contained in:
commit
b9df1d5d3f
5 changed files with 107 additions and 37 deletions
|
@ -163,6 +163,7 @@
|
||||||
(tr "shortcuts.paste")
|
(tr "shortcuts.paste")
|
||||||
(tr "shortcuts.prev-frame")
|
(tr "shortcuts.prev-frame")
|
||||||
(tr "shortcuts.redo")
|
(tr "shortcuts.redo")
|
||||||
|
(tr "shortcuts.rename")
|
||||||
(tr "shortcuts.reset-zoom")
|
(tr "shortcuts.reset-zoom")
|
||||||
(tr "shortcuts.scale")
|
(tr "shortcuts.scale")
|
||||||
(tr "shortcuts.search-placeholder")
|
(tr "shortcuts.search-placeholder")
|
||||||
|
|
|
@ -26,7 +26,9 @@
|
||||||
[app.main.ui.workspace.viewport.utils :as vwu]
|
[app.main.ui.workspace.viewport.utils :as vwu]
|
||||||
[app.util.debug :as dbg]
|
[app.util.debug :as dbg]
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
|
[app.util.keyboard :as kbd]
|
||||||
[app.util.timers :as ts]
|
[app.util.timers :as ts]
|
||||||
|
[cuerdas.core :as str]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
(mf/defc pixel-grid
|
(mf/defc pixel-grid
|
||||||
|
@ -78,8 +80,10 @@
|
||||||
|
|
||||||
(mf/defc frame-title
|
(mf/defc frame-title
|
||||||
{::mf/wrap [mf/memo
|
{::mf/wrap [mf/memo
|
||||||
#(mf/deferred % ts/raf)]}
|
#(mf/deferred % ts/raf)]
|
||||||
[{:keys [frame selected? zoom show-artboard-names? show-id? on-frame-enter on-frame-leave on-frame-select grid-edition?]}]
|
::mf/forward-ref true}
|
||||||
|
[{:keys [frame selected? zoom show-artboard-names? show-id? on-frame-enter
|
||||||
|
on-frame-leave on-frame-select grid-edition?]} external-ref]
|
||||||
(let [workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
|
(let [workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
|
||||||
|
|
||||||
;; Note that we don't use mf/deref to avoid a repaint dependency here
|
;; Note that we don't use mf/deref to avoid a repaint dependency here
|
||||||
|
@ -100,12 +104,6 @@
|
||||||
(dom/stop-propagation event)
|
(dom/stop-propagation event)
|
||||||
(on-frame-select event (:id frame)))))
|
(on-frame-select event (:id frame)))))
|
||||||
|
|
||||||
on-double-click
|
|
||||||
(mf/use-fn
|
|
||||||
(mf/deps (:id frame))
|
|
||||||
#(st/emit! (dw/go-to-layout :layers)
|
|
||||||
(dw/start-rename-shape (:id frame))))
|
|
||||||
|
|
||||||
on-context-menu
|
on-context-menu
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(mf/deps frame workspace-read-only?)
|
(mf/deps frame workspace-read-only?)
|
||||||
|
@ -134,15 +132,54 @@
|
||||||
text-width (* (:width frame) zoom)
|
text-width (* (:width frame) zoom)
|
||||||
show-icon? (and (or (:use-for-thumbnail frame) grid-edition? main-instance?)
|
show-icon? (and (or (:use-for-thumbnail frame) grid-edition? main-instance?)
|
||||||
(not (<= text-width 15)))
|
(not (<= text-width 15)))
|
||||||
text-pos-x (if show-icon? 15 0)]
|
text-pos-x (if show-icon? 15 0)
|
||||||
|
|
||||||
|
edition* (mf/use-state false)
|
||||||
|
edition? (deref edition*)
|
||||||
|
|
||||||
|
local-ref (mf/use-ref)
|
||||||
|
ref (d/nilv external-ref local-ref)
|
||||||
|
|
||||||
|
frame-id (:id frame)
|
||||||
|
|
||||||
|
start-edit
|
||||||
|
(mf/use-fn
|
||||||
|
(mf/deps frame-id edition?)
|
||||||
|
(fn []
|
||||||
|
(if (not edition?)
|
||||||
|
(reset! edition* true)
|
||||||
|
(st/emit! (dw/start-rename-shape frame-id)))))
|
||||||
|
|
||||||
|
accept-edit
|
||||||
|
(mf/use-fn
|
||||||
|
(mf/deps frame-id)
|
||||||
|
(fn []
|
||||||
|
(let [name-input (mf/ref-val ref)
|
||||||
|
name (str/trim (dom/get-value name-input))]
|
||||||
|
(reset! edition* false)
|
||||||
|
(st/emit! (dw/end-rename-shape frame-id name)))))
|
||||||
|
|
||||||
|
cancel-edit
|
||||||
|
(mf/use-fn
|
||||||
|
(mf/deps frame-id)
|
||||||
|
(fn []
|
||||||
|
(reset! edition* false)
|
||||||
|
(st/emit! (dw/end-rename-shape frame-id nil))))
|
||||||
|
|
||||||
|
on-key-down
|
||||||
|
(mf/use-fn
|
||||||
|
(mf/deps accept-edit cancel-edit)
|
||||||
|
(fn [event]
|
||||||
|
(when (kbd/enter? event) (accept-edit))
|
||||||
|
(when (kbd/esc? event) (cancel-edit))))]
|
||||||
|
|
||||||
|
|
||||||
(when (not (:hidden frame))
|
(when (not (:hidden frame))
|
||||||
[:g.frame-title {:id (dm/str "frame-title-" (:id frame))
|
[:g.frame-title {:id (dm/str "frame-title-" (:id frame))
|
||||||
:data-edit-grid grid-edition?
|
:data-edit-grid grid-edition?
|
||||||
:transform (vwu/title-transform frame zoom grid-edition?)
|
:transform (vwu/title-transform frame zoom grid-edition?)
|
||||||
:pointer-events (when (:blocked frame) "none")}
|
:pointer-events (when (:blocked frame) "none")}
|
||||||
(cond
|
(when show-icon?
|
||||||
show-icon?
|
|
||||||
[:svg {:x 0
|
[:svg {:x 0
|
||||||
:y -9
|
:y -9
|
||||||
:width 12
|
:width 12
|
||||||
|
@ -152,33 +189,47 @@
|
||||||
:fill "none"}
|
:fill "none"}
|
||||||
:visibility (if show-artboard-names? "visible" "hidden")}
|
:visibility (if show-artboard-names? "visible" "hidden")}
|
||||||
(cond
|
(cond
|
||||||
(:use-for-thumbnail frame)
|
(:use-for-thumbnail frame) [:use {:href "#icon-boards-thumbnail"}]
|
||||||
[:use {:href "#icon-boards-thumbnail"}]
|
grid-edition? [:use {:href "#icon-grid"}]
|
||||||
|
main-instance? [:use {:href "#icon-component"}])])
|
||||||
|
|
||||||
grid-edition?
|
(if ^boolean edition?
|
||||||
[:use {:href "#icon-grid"}]
|
;; Case when edition? is true
|
||||||
|
[:foreignObject {:x text-pos-x
|
||||||
main-instance?
|
:y -15
|
||||||
[:use {:href "#icon-component"}])])
|
:width (max 0 (- text-width text-pos-x))
|
||||||
|
:height 22
|
||||||
|
:class (stl/css :workspace-frame-label-wrapper)
|
||||||
[:foreignObject {:x text-pos-x
|
:style {:fill color}
|
||||||
:y -11
|
:visibility (if show-artboard-names? "visible" "hidden")}
|
||||||
:width (max 0 (- text-width text-pos-x))
|
[:input {:type "text"
|
||||||
:height 20
|
:class (stl/css :workspace-frame-label
|
||||||
:class (stl/css :workspace-frame-label-wrapper)
|
:element-name-input)
|
||||||
:style {:fill color}
|
:style {:color color}
|
||||||
:visibility (if show-artboard-names? "visible" "hidden")}
|
:auto-focus true
|
||||||
[:div {:class (stl/css :workspace-frame-label)
|
:on-key-down on-key-down
|
||||||
:style {:color color}
|
:ref ref
|
||||||
:on-pointer-down on-pointer-down
|
:default-value (:name frame)
|
||||||
:on-double-click on-double-click
|
:on-blur accept-edit}]]
|
||||||
:on-context-menu on-context-menu
|
;; Case when edition? is false
|
||||||
:on-pointer-enter on-pointer-enter
|
[:foreignObject {:x text-pos-x
|
||||||
:on-pointer-leave on-pointer-leave}
|
:y -11
|
||||||
(if show-id?
|
:width (max 0 (- text-width text-pos-x))
|
||||||
(dm/str (dm/str (:id frame)) " - " (:name frame))
|
:height 20
|
||||||
(:name frame))]]])))
|
:class (stl/css :workspace-frame-label-wrapper)
|
||||||
|
:style {:fill color}
|
||||||
|
:visibility (if show-artboard-names? "visible" "hidden")}
|
||||||
|
[:div {:class (stl/css :workspace-frame-label)
|
||||||
|
:style {:color color}
|
||||||
|
:ref ref
|
||||||
|
:on-pointer-down on-pointer-down
|
||||||
|
:on-double-click start-edit
|
||||||
|
:on-context-menu on-context-menu
|
||||||
|
:on-pointer-enter on-pointer-enter
|
||||||
|
:on-pointer-leave on-pointer-leave}
|
||||||
|
(if show-id?
|
||||||
|
(dm/str (:id frame) " - " (:name frame))
|
||||||
|
(:name frame))]])])))
|
||||||
|
|
||||||
(mf/defc frame-titles
|
(mf/defc frame-titles
|
||||||
{::mf/wrap-props false
|
{::mf/wrap-props false
|
||||||
|
|
|
@ -76,3 +76,15 @@
|
||||||
max-width: fit-content;
|
max-width: fit-content;
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.element-name-input {
|
||||||
|
@include removeInputStyle;
|
||||||
|
@include bodySmallTypography;
|
||||||
|
@include removeInputStyle;
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 20px;
|
||||||
|
margin: 0;
|
||||||
|
padding-left: $s-6;
|
||||||
|
border: $s-1 solid var(--input-border-color-focus);
|
||||||
|
color: var(--layer-row-foreground-color);
|
||||||
|
}
|
||||||
|
|
|
@ -3621,6 +3621,9 @@ msgstr "Previous board"
|
||||||
msgid "shortcuts.redo"
|
msgid "shortcuts.redo"
|
||||||
msgstr "Redo"
|
msgstr "Redo"
|
||||||
|
|
||||||
|
msgid "shortcuts.rename"
|
||||||
|
msgstr "Rename"
|
||||||
|
|
||||||
#: src/app/main/ui/workspace/sidebar/shortcuts.cljs:166
|
#: src/app/main/ui/workspace/sidebar/shortcuts.cljs:166
|
||||||
msgid "shortcuts.reset-zoom"
|
msgid "shortcuts.reset-zoom"
|
||||||
msgstr "Reset zoom"
|
msgstr "Reset zoom"
|
||||||
|
|
|
@ -3625,6 +3625,9 @@ msgstr "Tablero anterior"
|
||||||
msgid "shortcuts.redo"
|
msgid "shortcuts.redo"
|
||||||
msgstr "Rehacer"
|
msgstr "Rehacer"
|
||||||
|
|
||||||
|
msgid "shortcuts.rename"
|
||||||
|
msgstr "Renombrar"
|
||||||
|
|
||||||
#: src/app/main/ui/workspace/sidebar/shortcuts.cljs:166
|
#: src/app/main/ui/workspace/sidebar/shortcuts.cljs:166
|
||||||
msgid "shortcuts.reset-zoom"
|
msgid "shortcuts.reset-zoom"
|
||||||
msgstr "Reiniciar zoom"
|
msgstr "Reiniciar zoom"
|
||||||
|
|
Loading…
Add table
Reference in a new issue