From 5409f83167316422e8b32bfde21ba30518bf1676 Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 19 Jan 2022 16:58:33 +0100 Subject: [PATCH] :sparkles: Divide file menu options in semantically groups --- CHANGES.md | 1 + .../main/partials/workspace-header.scss | 54 ++++++++- .../src/app/main/ui/workspace/header.cljs | 113 +++++++++++------- frontend/translations/en.po | 24 ++++ frontend/translations/es.po | 24 ++++ 5 files changed, 169 insertions(+), 47 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index f3e14a3523..2be278b4c5 100644 --- a/CHANGES.md +++ b/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). diff --git a/frontend/resources/styles/main/partials/workspace-header.scss b/frontend/resources/styles/main/partials/workspace-header.scss index 1e0c48f417..43faf986c4 100644 --- a/frontend/resources/styles/main/partials/workspace-header.scss +++ b/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; - } } } diff --git a/frontend/src/app/main/ui/workspace/header.cljs b/frontend/src/app/main/ui/workspace/header.cljs index ca418b63fa..6a7c5aaab8 100644 --- a/frontend/src/app/main/ui/workspace/header.cljs +++ b/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))} - [:span (tr "workspace.header.menu.select-all")] - [:span.shortcut (sc/get-tooltip :select-all)]] + [: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"))]]]] + + [:& 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)]] - - [: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")]])]]])) + [:span.shortcut (sc/get-tooltip :toggle-alignment)]]]]])) ;; --- Header Component diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 0778497b5a..2b1be1b532 100644 --- a/frontend/translations/en.po +++ b/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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 154b274471..28099b4c8e 100644 --- a/frontend/translations/es.po +++ b/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"