✨ Divide file menu options in semantically groups

CHANGES.md

@@ -6,6 +6,7 @@
 
 ### :sparkles: New features
 
+- Improve file menu by adding semantically groups [Github #1203](https://github.com/penpot/penpot/issues/1203).
 - Create firsts e2e test [Taiga #2608](https://tree.taiga.io/project/penpot/task/2608).
 - Add an option to hide artboards names on the viewport [Taiga #2034](https://tree.taiga.io/project/penpot/issue/2034).
 - Limit pasted object position to container boundaries [Taiga #2449](https://tree.taiga.io/project/penpot/us/2449).

frontend/resources/styles/main/partials/workspace-header.scss

@@ -132,7 +132,7 @@
     position: absolute;
     top: 40px;
     left: 40px;
-    width: 270px;
+    width: 183px;
     z-index: 12;
     @include animation(0, 0.2s, fadeInDown);
 
@@ -158,6 +158,54 @@
         margin: 0 $size-1;
       }
 
+      &:hover {
+        background-color: $color-primary-lighter;
+      }
+
+      &.feedback {
+        border-top: 1px solid $color-gray-10;
+      }
+    }
+  }
+
+  .sub-menu {
+    position: absolute;
+    left: 230px;
+    width: 270px;
+    z-index: 12;
+    @include animation(0, 0.2s, fadeInDown);
+    background-color: $color-white;
+    border-radius: $br-small;
+    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
+
+    &.file {
+      top: 40px;
+    }
+
+    &.edit {
+      top: 77px;
+    }
+
+    &.view {
+      top: 114px;
+    }
+
+    &.preferences {
+      top: 150px;
+    }
+
+    li {
+      cursor: pointer;
+      font-size: $fs14;
+      padding: $size-2;
+      display: flex;
+      justify-content: space-between;
+
+      span {
+        color: $color-gray-60;
+        margin: 0 $size-1;
+      }
+
       .shortcut {
         color: $color-gray-20;
         font-size: $fs12;
@@ -166,10 +214,6 @@
       &:hover {
         background-color: $color-primary-lighter;
       }
-
-      &.feedback {
-        border-top: 1px solid $color-gray-10;
-      }
     }
   }
 

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

@@ -100,6 +100,7 @@
 (mf/defc menu
   [{:keys [layout project file team-id page-id] :as props}]
   (let [show-menu? (mf/use-state false)
+        show-sub-menu? (mf/use-state false)
         editing?   (mf/use-state false)
 
         frames (mf/deref refs/workspace-frames)
@@ -192,7 +193,8 @@
                        (dom/trigger-download filename body))
                      (fn [_error]
                        (st/emit! (dm/error (tr "errors.unexpected-error"))))
-                     (st/emitf dm/hide)))))))]
+                     (st/emitf dm/hide)))))))
+        on-item-click (fn [item] (fn [event] (do (dom/stop-propagation event) (reset! show-sub-menu? item))))]
 
     (mf/use-effect
      (mf/deps @editing?)
@@ -223,6 +225,51 @@
      [:& dropdown {:show @show-menu?
                    :on-close #(reset! show-menu? false)}
       [:ul.menu
+       [:li {:on-click (on-item-click :file)}
+        [:span (tr "workspace.header.menu.option.file")]
+        [:span i/arrow-slide]]
+       [:li {:on-click (on-item-click :edit)}
+        [:span (tr "workspace.header.menu.option.edit")] [:span i/arrow-slide]]
+       [:li {:on-click (on-item-click :view)}
+        [:span (tr "workspace.header.menu.option.view")] [:span i/arrow-slide]]
+       [:li {:on-click (on-item-click :preferences)}
+        [:span (tr "workspace.header.menu.option.preferences")] [:span i/arrow-slide]]
+       (when (contains? @cf/flags :user-feedback)
+         [:*
+          [:li.separator]
+          [:li.feedback {:on-click (st/emitf (rt/nav :settings-feedback))}
+           [:span (tr "labels.give-feedback")]]])]]
+
+     [:& dropdown {:show (= @show-sub-menu? :file)
+                   :on-close #(reset! show-sub-menu? false)}
+      [:ul.sub-menu.file
+       (if (:is-shared file)
+         [:li {:on-click on-remove-shared}
+          [:span (tr "dashboard.remove-shared")]]
+         [:li {:on-click on-add-shared}
+          [:span (tr "dashboard.add-shared")]])
+       [:li.export-file {:on-click on-export-file}
+        [:span (tr "dashboard.export-single")]]
+       (when (seq frames)
+         [:li.export-file {:on-click on-export-frames}
+          [:span (tr "dashboard.export-frames")]])]]
+
+     [:& dropdown {:show (= @show-sub-menu? :edit)
+                   :on-close #(reset! show-sub-menu? false)}
+      [:ul.sub-menu.edit
+       [:li {:on-click #(st/emit! (dw/select-all))}
+        [:span (tr "workspace.header.menu.select-all")]
+        [:span.shortcut (sc/get-tooltip :select-all)]]
+       [:li {:on-click #(st/emit! (dw/toggle-layout-flags :scale-text))}
+        [:span
+         (if (contains? layout :scale-text)
+           (tr "workspace.header.menu.disable-scale-text")
+           (tr "workspace.header.menu.enable-scale-text"))]
+        [:span.shortcut (sc/get-tooltip :toggle-scale-text)]]]]
+
+     [:& dropdown {:show (= @show-sub-menu? :view)
+                   :on-close #(reset! show-sub-menu? false)}
+      [:ul.sub-menu.view
        [:li {:on-click #(st/emit! (dw/toggle-layout-flags :rules))}
         [:span
          (if (contains? layout :rules)
@@ -237,13 +284,6 @@
            (tr "workspace.header.menu.show-grid"))]
         [:span.shortcut (sc/get-tooltip :toggle-grid)]]
 
-       [:li {:on-click #(st/emit! (dw/toggle-layout-flags :snap-grid))}
-        [:span
-         (if (contains? layout :snap-grid)
-           (tr "workspace.header.menu.disable-snap-grid")
-           (tr "workspace.header.menu.enable-snap-grid"))]
-        [:span.shortcut (sc/get-tooltip :toggle-snap-grid)]]
-
        [:li {:on-click #(st/emit! (dw/toggle-layout-flags :sitemap :layers))}
         [:span
          (if (or (contains? layout :sitemap) (contains? layout :layers))
@@ -258,12 +298,6 @@
            (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
          (if (contains? layout :assets)
@@ -271,40 +305,35 @@
            (tr "workspace.header.menu.show-assets"))]
         [:span.shortcut (sc/get-tooltip :toggle-assets)]]
 
-       [:li {:on-click #(st/emit! (dw/select-all))}
+       [:li {:on-click #(st/emit! (dw/toggle-layout-flags :display-artboard-names))}
-        [:span (tr "workspace.header.menu.select-all")]
+        [:span
-        [:span.shortcut (sc/get-tooltip :select-all)]]
+         (if (contains? layout :display-artboard-names)
+           (tr "workspace.header.menu.hide-artboard-names")
+           (tr "workspace.header.menu.show-artboard-names"))]]]]
+
+     [:& dropdown {:show (= @show-sub-menu? :preferences)
+                   :on-close #(reset! show-sub-menu? false)}
+      [:ul.sub-menu.preferences
+       #_[:li {:on-click #()}
+          [:span
+           (if (contains? layout :snap-guide)
+             (tr "workspace.header.menu.disable-snap-guides")
+             (tr "workspace.header.menu.enable-snap-guides"))]
+          [:span.shortcut (sc/get-tooltip :toggle-snap-grid)]]
+
+       [:li {:on-click #(st/emit! (dw/toggle-layout-flags :snap-grid))}
+        [:span
+         (if (contains? layout :snap-grid)
+           (tr "workspace.header.menu.disable-snap-grid")
+           (tr "workspace.header.menu.enable-snap-grid"))]
+        [:span.shortcut (sc/get-tooltip :toggle-snap-grid)]]
 
        [:li {:on-click #(st/emit! (dw/toggle-layout-flags :dynamic-alignment))}
         [:span
          (if (contains? layout :dynamic-alignment)
            (tr "workspace.header.menu.disable-dynamic-alignment")
            (tr "workspace.header.menu.enable-dynamic-alignment"))]
-        [:span.shortcut (sc/get-tooltip :toggle-alignment)]]
+        [:span.shortcut (sc/get-tooltip :toggle-alignment)]]]]]))
-
-       [:li {:on-click #(st/emit! (dw/toggle-layout-flags :scale-text))}
-        [:span
-         (if (contains? layout :scale-text)
-           (tr "workspace.header.menu.disable-scale-text")
-           (tr "workspace.header.menu.enable-scale-text"))]
-        [:span.shortcut (sc/get-tooltip :toggle-scale-text)]]
-
-       (if (:is-shared file)
-         [:li {:on-click on-remove-shared}
-          [:span (tr "dashboard.remove-shared")]]
-         [:li {:on-click on-add-shared}
-          [:span (tr "dashboard.add-shared")]])
-
-       [:li.export-file {:on-click on-export-file}
-        [:span (tr "dashboard.export-single")]]
-
-       (when (seq frames)
-         [:li.export-file {:on-click on-export-frames}
-          [:span (tr "dashboard.export-frames")]])
-
-       (when (contains? @cf/flags :user-feedback)
-         [:li.feedback {:on-click (st/emitf (rt/nav :settings-feedback))}
-          [:span (tr "labels.give-feedback")]])]]]))
 
 ;; --- Header Component
 

frontend/translations/en.po

@@ -2009,6 +2009,22 @@ msgstr "Linear gradient"
 msgid "workspace.gradients.radial"
 msgstr "Radial gradient"
 
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.option.file"
+msgstr "File"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.option.edit"
+msgstr "Edit"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.option.view"
+msgstr "View"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.option.preferences"
+msgstr "Preferences"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.disable-dynamic-alignment"
 msgstr "Disable dynamic alignment"
@@ -2021,6 +2037,10 @@ msgstr "Disable scale text"
 msgid "workspace.header.menu.disable-snap-grid"
 msgstr "Disable snap to grid"
 
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.disable-snap-guides"
+msgstr "Disable snap to guides"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.enable-dynamic-alignment"
 msgstr "Enable dynamic alignment"
@@ -2033,6 +2053,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.enable-snap-guides"
+msgstr "Snap to guides"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.hide-artboard-names"
 msgstr "Hide artboard names"

frontend/translations/es.po

@@ -2024,6 +2024,22 @@ msgstr "Degradado lineal"
 msgid "workspace.gradients.radial"
 msgstr "Degradado radial"
 
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.option.file"
+msgstr "Archivo"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.option.edit"
+msgstr "Editar"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.option.view"
+msgstr "Ver"
+
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.option.preferences"
+msgstr "Preferencias"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.disable-dynamic-alignment"
 msgstr "Desactivar alineamiento dinámico"
@@ -2036,6 +2052,10 @@ msgstr "Desactivar escalar texto"
 msgid "workspace.header.menu.disable-snap-grid"
 msgstr "Desactivar alinear a la rejilla"
 
+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.disable-snap-guides"
+msgstr "Desactivar alinear a las guias"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.enable-dynamic-alignment"
 msgstr "Activar alineamiento dinámico"
@@ -2048,6 +2068,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.enable-snap-guides"
+msgstr "Alinear a las guias"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.hide-artboard-names"
 msgstr "Ocultar nombres de tableros"