Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-13 16:21:57 -05:00
Code Issues Activity

✨ Divide file menu options in semantically groups

Browse source
This commit is contained in:
Eva 2022-01-19 16:58:33 +01:00 • committed by Alonso Torres
parent c27d709b6b
commit 5409f83167
5 changed files with 169 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -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).

54
frontend/resources/styles/main/partials/workspace-header.scss
View file

@ -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;
}
}
}

113
frontend/src/app/main/ui/workspace/header.cljs
View file

@ -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

24
frontend/translations/en.po
View file

@ -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"

24
frontend/translations/es.po
View file

@ -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"