♻️ Improve file menu usage

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)

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

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)