mirror of
https://github.com/penpot/penpot.git
synced 2025-03-11 23:31:21 -05:00
✨ Divide file menu options in semantically groups
This commit is contained in:
parent
c27d709b6b
commit
5409f83167
5 changed files with 169 additions and 47 deletions
|
@ -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).
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Add table
Reference in a new issue