diff --git a/CHANGES.md b/CHANGES.md index 762a10f5d..dbc43f80a 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -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) diff --git a/frontend/resources/styles/main/partials/workspace-header.scss b/frontend/resources/styles/main/partials/workspace-header.scss index f2e20d65d..3a5f1af69 100644 --- a/frontend/resources/styles/main/partials/workspace-header.scss +++ b/frontend/resources/styles/main/partials/workspace-header.scss @@ -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; } diff --git a/frontend/src/app/main/ui/workspace/header.cljs b/frontend/src/app/main/ui/workspace/header.cljs index 81d8a80f3..3d5169fb2 100644 --- a/frontend/src/app/main/ui/workspace/header.cljs +++ b/frontend/src/app/main/ui/workspace/header.cljs @@ -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)