✨ Add an option to hide artboards names on the viewport

CHANGES.md

@@ -6,6 +6,7 @@
 
 ### :sparkles: New features
 
+- Add an option to hide artboards names on the viewport [Taiga #2034](https://tree.taiga.io/project/penpot/issue/2034).
 - Add new options for zoom widget in workspace and viewer mode [Taiga #896](https://tree.taiga.io/project/penpot/us/896).
 - Allow decimals on stroke width and positions [Taiga #2035](https://tree.taiga.io/project/penpot/issue/2035).
 - Ability to ignore background when exporting an artboard [Taiga #1395](https://tree.taiga.io/project/penpot/us/1395).

frontend/src/app/main/data/workspace.cljs

@@ -82,7 +82,8 @@
     :display-grid
     :snap-grid
     :scale-text
-    :dynamic-alignment})
+    :dynamic-alignment
+    :display-artboard-names})
 
 (s/def ::layout-flags (s/coll-of ::layout-flag))
 
@@ -93,7 +94,8 @@
     :rules
     :display-grid
     :snap-grid
-    :dynamic-alignment})
+    :dynamic-alignment
+    :display-artboard-names})
 
 (def layout-presets
   {:assets

frontend/src/app/main/ui/workspace/header.cljs

@@ -251,6 +251,12 @@
            (tr "workspace.header.menu.hide-palette")
            (tr "workspace.header.menu.show-palette"))]
         [:span.shortcut (sc/get-tooltip :toggle-palette)]]
+       
+       [:li {:on-click #(st/emit! (dw/toggle-layout-flags :display-artboard-names))}
+        [:span
+         (if (contains? layout :display-artboard-names)
+           (tr "workspace.header.menu.hide-artboard-names")
+           (tr "workspace.header.menu.show-artboard-names"))]]
 
        [:li {:on-click #(st/emit! (dw/toggle-layout-flags :assets))}
         [:span

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -144,7 +144,8 @@
                                           (contains? layout :snap-grid))
                                       (or drawing-obj transform))
         show-selrect?            (and selrect (empty? drawing))
-        show-measures?           (and (not transform) (not node-editing?) show-distances?)]
+        show-measures?           (and (not transform) (not node-editing?) show-distances?)
+        show-artboard-names?              (contains? layout :display-artboard-names)]
 
     (hooks/setup-dom-events viewport-ref zoom disable-paste in-viewport?)
     (hooks/setup-viewport-size viewport-ref)
@@ -262,6 +263,7 @@
          :selected selected
          :zoom zoom
          :modifiers modifiers
+         :show-artboard-names? show-artboard-names?
          :on-frame-enter on-frame-enter
          :on-frame-leave on-frame-leave
          :on-frame-select on-frame-select}]

frontend/src/app/main/ui/workspace/viewport/widgets.cljs

@@ -91,7 +91,7 @@
 
 (mf/defc frame-title
   {::mf/wrap [mf/memo]}
-  [{:keys [frame modifiers selected? zoom on-frame-enter on-frame-leave on-frame-select]}]
+  [{:keys [frame modifiers selected? zoom show-artboard-names? on-frame-enter on-frame-leave on-frame-select]}]
   (let [{:keys [width x y]} (gsh/transform-shape frame)
         label-pos (gpt/point x (- y (/ 10 zoom)))
 
@@ -142,6 +142,7 @@
                               (str (:displacement modifiers) " " ))
                             (text-transform label-pos zoom))
             :style {:fill (when selected? "var(--color-primary-dark)")}
+            :visibility (if show-artboard-names? "visible" "hidden")
             :on-mouse-down on-mouse-down
             :on-double-click on-double-click
             :on-context-menu on-context-menu
@@ -156,6 +157,7 @@
         zoom            (unchecked-get props "zoom")
         modifiers       (unchecked-get props "modifiers")
         selected        (or (unchecked-get props "selected") #{})
+        show-artboard-names? (unchecked-get props "show-artboard-names?")
         on-frame-enter  (unchecked-get props "on-frame-enter")
         on-frame-leave  (unchecked-get props "on-frame-leave")
         on-frame-select (unchecked-get props "on-frame-select")
@@ -166,6 +168,7 @@
        [:& frame-title {:frame frame
                         :selected? (contains? selected (:id frame))
                         :zoom zoom
+                        :show-artboard-names? show-artboard-names?
                         :modifiers modifiers
                         :on-frame-enter on-frame-enter
                         :on-frame-leave on-frame-leave

frontend/translations/en.po

@@ -2027,6 +2027,10 @@ msgstr "Enable scale text"
 msgid "workspace.header.menu.enable-snap-grid"
 msgstr "Snap to grid"
 
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.hide-artboard-names"
+msgstr "Hide artboard names"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.hide-assets"
 msgstr "Hide assets"
@@ -2051,6 +2055,10 @@ msgstr "Hide rules"
 msgid "workspace.header.menu.select-all"
 msgstr "Select all"
 
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.show-artboard-names"
+msgstr "Show artboards names"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.show-assets"
 msgstr "Show assets"

frontend/translations/es.po

@@ -2042,6 +2042,10 @@ msgstr "Activar escalar texto"
 msgid "workspace.header.menu.enable-snap-grid"
 msgstr "Alinear a la rejilla"
 
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.hide-artboard-names"
+msgstr "Ocultar nombres de tableros"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.hide-assets"
 msgstr "Ocultar recursos"
@@ -2066,6 +2070,10 @@ msgstr "Ocultar reglas"
 msgid "workspace.header.menu.select-all"
 msgstr "Seleccionar todo"
 
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.show-artboard-names"
+msgstr "Mostrar nombres de tableros"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.show-assets"
 msgstr "Mostrar recursos"