Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-12 01:58:44 -05:00
Code Issues Activity

♻️ Improve file menu usage

Browse source
This commit is contained in:
Eva 2022-02-22 11:02:04 +01:00 • committed by Andrey Antukh
parent 46bfb2aacd
commit 70def21153
3 changed files with 41 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGES.md
View file

@ -5,6 +5,8 @@
### :boom: Breaking changes
### :sparkles: New features
- Improve usage of file menu [Taiga #2853](https://tree.taiga.io/project/penpot/us/2853)
- Rotation to snap to 15º intervals with shift [Taiga #2437](https://tree.taiga.io/project/penpot/issue/2437)
- Support border radius and stroke properties for images [Taiga #497](https://tree.taiga.io/project/penpot/us/497)
- Disallow using same password as user email [Taiga #2454](https://tree.taiga.io/project/penpot/us/2454)

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

@ -154,12 +154,22 @@
left: 40px;
width: 183px;
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);
:first-child {
&:hover {
border-radius: $br-small $br-small 0px 0px;
}
}
:last-child {
&:hover {
border-radius: 0px 0px $br-small $br-small;
}
}
li {
cursor: pointer;
font-size: $fs14;
@ -193,11 +203,21 @@
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);
:first-child {
&:hover {
border-radius: $br-small $br-small 0px 0px;
}
}
:last-child {
&:hover {
border-radius: 0px 0px $br-small $br-small;
}
}
&.file {
top: 40px;
}

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

@ -194,6 +194,13 @@
(st/emit! (dm/error (tr "errors.unexpected-error"))))
(st/emitf dm/hide)))))))
on-item-hover
(mf/use-callback
(fn [item]
(fn [event]
(dom/stop-propagation event)
(reset! show-sub-menu? item))))
on-item-click
(mf/use-callback
(fn [item]
@ -230,18 +237,23 @@
[:& dropdown {:show @show-menu?
:on-close #(reset! show-menu? false)}
[:ul.menu
[:li {:on-click (on-item-click :file)}
[:li {:on-click (on-item-click :file)
:on-pointer-enter (on-item-hover :file)}
[:span (tr "workspace.header.menu.option.file")]
[:span i/arrow-slide]]
[:li {:on-click (on-item-click :edit)}
[:li {:on-click (on-item-click :edit)
:on-pointer-enter (on-item-hover :edit)}
[:span (tr "workspace.header.menu.option.edit")] [:span i/arrow-slide]]
[:li {:on-click (on-item-click :view)}
[:li {:on-click (on-item-click :view)
:on-pointer-enter (on-item-hover :view)}
[:span (tr "workspace.header.menu.option.view")] [:span i/arrow-slide]]
[:li {:on-click (on-item-click :preferences)}
[:li {:on-click (on-item-click :preferences)
:on-pointer-enter (on-item-hover :preferences)}
[:span (tr "workspace.header.menu.option.preferences")] [:span i/arrow-slide]]
(when (contains? @cf/flags :user-feedback)
[:*
[:li.feedback {:on-click (st/emitf (rt/nav :settings-feedback))}
[:li.feedback {:on-click (st/emitf (rt/nav :settings-feedback))
:on-pointer-enter (st/emitf (rt/nav :settings-feedback))}
[:span (tr "labels.give-feedback")]]])]]
[:& dropdown {:show (= @show-sub-menu? :file)