🎉 Add message for empty state for color and typography palettes

CHANGES.md

@@ -15,8 +15,8 @@
 
 ### :heart: Community contributions by (Thank you!)
 - Update Typography palette order (by @akshay-gupta7) [Github #3156](https://github.com/penpot/penpot/pull/3156)
-- Duplicate objects via drag + alt [Github #3147](https://github.com/penpot/penpot/pull/3147)
+- Palettes (color, typographies) empty state (by @akshay-gupta7) [Github #3160](https://github.com/penpot/penpot/pull/3160)
-
+- Duplicate objects via drag + alt (by @akshay-gupta7) [Github #3147](https://github.com/penpot/penpot/pull/3147)
 
 ## 1.18.3 (Unreleased)
 

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

@@ -160,10 +160,16 @@
 
      [:span.left-arrow {:on-click on-left-arrow-click} i/arrow-slide]
      [:div.color-palette-content {:ref container :on-wheel on-scroll}
-      [:div.color-palette-inside {:style {:position "relative"
+     (if (empty? current-colors)
+        [:div.color-palette-empty {:style {:position "absolute"
+                                           :left "50%"
+                                           :top "50%"
+                                           :transform "translate(-50%, -50%)"}} 
+              (tr "workspace.libraries.colors.empty-palette")]
+        [:div.color-palette-inside {:style {:position "relative"
                                           :right (str (* 66 offset) "px")}}
-       (for [[idx item] (map-indexed vector current-colors)]
+          (for [[idx item] (map-indexed vector current-colors)]
-         [:& palette-item {:color item :key idx}])]]
+            [:& palette-item {:color item :key idx}])])]
 
      [:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]]))
 

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

@@ -129,13 +129,19 @@
      [:span.left-arrow {:on-click on-left-arrow-click} i/arrow-slide]
 
      [:div.color-palette-content {:ref container :on-wheel on-wheel}
-      [:div.color-palette-inside
+     (if (empty? current-typographies)
-       (for [[idx item] (map-indexed vector current-typographies)]
+        [:div.color-palette-empty {:style {:position "absolute"
-         [:& typography-item
+                                           :left "50%"
-          {:key idx
+                                           :top "50%"
-           :file-id file-id
+                                           :transform "translate(-50%, -50%)"}} 
-           :selected-ids selected-ids
+              (tr "workspace.libraries.colors.empty-typography-palette")]
-           :typography item}])]]
+        [:div.color-palette-inside
+        (for [[idx item] (map-indexed vector current-typographies)]
+          [:& typography-item
+            {:key idx
+            :file-id file-id
+            :selected-ids selected-ids
+            :typography item}])])]
 
      [:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]]))
 

frontend/translations/en.po

@@ -3141,6 +3141,14 @@ msgstr "HSV"
 msgid "workspace.libraries.colors.recent-colors"
 msgstr "Recent colors"
 
+#: src/app/main/ui/workspace/colorpalette.cljs
+msgid "workspace.libraries.colors.empty-palette"
+msgstr "There are no Color Styles in your Library yet"
+
+#: src/app/main/ui/workspace/textpalette.cljs
+msgid "workspace.libraries.colors.empty-typography-palette"
+msgstr "There are no Typography Styles in your Library yet"
+
 #: src/app/main/ui/workspace/colorpicker.cljs
 msgid "workspace.libraries.colors.rgb-complementary"
 msgstr "RGB Complementary"

frontend/translations/es.po

@@ -3235,6 +3235,14 @@ msgstr "HSV"
 msgid "workspace.libraries.colors.recent-colors"
 msgstr "Colores recientes"
 
+#: src/app/main/ui/workspace/colorpalette.cljs
+msgid "workspace.libraries.colors.empty-palette"
+msgstr "Todavía no hay estilos de color en tu biblioteca"
+
+#: src/app/main/ui/workspace/textpalette.cljs
+msgid "workspace.libraries.colors.empty-typography-palette"
+msgstr "Todavía no hay tipografías en tu biblioteca"
+
 #: src/app/main/ui/workspace/colorpicker.cljs
 msgid "workspace.libraries.colors.rgb-complementary"
 msgstr "RGB Complementario"