💄 Add new project header

CHANGES.md

@@ -8,6 +8,7 @@
 - Allow to ungroup assets [Taiga #1719](https://tree.taiga.io/project/penpot/us/1719)
 - Allow to rename assets groups [Taiga #1721](https://tree.taiga.io/project/penpot/us/1721)
 - Memorize collapse state of assets in panel [Taiga #1718](https://tree.taiga.io/project/penpot/us/1718)
+- Headers button sets and menus review [Taiga #1663](https://tree.taiga.io/project/penpot/us/1663)
 - Add the ability to offload file data to a cheaper storage when file
   becomes inactive.
 

frontend/resources/styles/main/partials/dashboard-header.scss

@@ -104,7 +104,12 @@
     }
   }
 
+  .dashboard-header-actions {
+    display: flex;
+  }
+
   .pin-icon {
+    margin: 0 $small 0 $big;
     svg {
       fill: $color-gray-20;
     }

frontend/resources/styles/main/partials/dashboard.scss

@@ -34,7 +34,7 @@
     height: 40px;
 
     .btn-secondary {
-      margin-left: $big;
+      border: none;
       height: 32px;
     }
 
@@ -62,6 +62,7 @@
       cursor: pointer;
       display: flex;
       align-items: center;
+      margin-left: 40px;
       margin-right: 10px;
       svg {
         width: 15px;

frontend/src/app/main/ui/dashboard/files.cljs

@@ -29,7 +29,11 @@
         team-id    (:id team)
 
         on-menu-click
-        (mf/use-callback #(swap! local assoc :menu-open true))
+        (mf/use-callback
+         (fn [event]
+           (let [position (dom/get-client-position event)]
+             (dom/prevent-default event)
+             (swap! local assoc :menu-open true :menu-pos position))))
 
         on-menu-close
         (mf/use-callback #(swap! local assoc :menu-open false))
@@ -63,20 +67,26 @@
          [:div.dashboard-title
           [:h1 {:on-double-click on-edit}
            (:name project)]
-          [:div.icon {:on-click on-menu-click}
-           i/actions]
           [:& project-menu {:project project
                             :show? (:menu-open @local)
+                            :left (- (:x (:menu-pos @local)) 180)
+                            :top (:y (:menu-pos @local))
                             :on-edit on-edit
-                            :on-menu-close on-menu-close}]
+                            :on-menu-close on-menu-close}]]))
-          [:div.icon.pin-icon
+     [:div.dashboard-header-actions
+      [:a.btn-secondary.btn-small {:on-click on-create-clicked}
+       (tr "dashboard.new-file")]
+
+      [:div.icon.pin-icon.tooltip.tooltip-bottom
        {:class (when (:is-pinned project) "active")
-            :on-click toggle-pin}
+       :on-click toggle-pin :alt (tr "dashboard.pin-unpin")}
        (if (:is-pinned project)
          i/pin-fill
-             i/pin)]]))
+         i/pin)]
-     [:a.btn-secondary.btn-small {:on-click on-create-clicked}
+      
-      (tr "dashboard.new-file")]]))
+      [:div.icon.tooltip.tooltip-bottom
+       {:on-click on-menu-click :alt (tr "dashboard.options")}
+       i/actions]]]))
 
 (mf/defc files-section
   [{:keys [project team] :as props}]

frontend/src/app/main/ui/dashboard/projects.cljs

@@ -108,13 +108,6 @@
 
     [:div.dashboard-project-row {:class (when first? "first")}
      [:div.project
-      (when-not (:is-default project)
-        [:span.pin-icon
-         {:class (when (:is-pinned project) "active")
-          :on-click toggle-pin}
-         (if (:is-pinned project)
-           i/pin-fill
-           i/pin)])
       (if (:edition? @local)
         [:& inline-edition {:content (:name project)
                             :on-end on-edit}]
@@ -141,9 +134,21 @@
       #_[:& import-button {:project-id (:id project)
                          :on-finish-import on-finish-import}]
 
-      [:a.btn-secondary.btn-small
+      (when-not (:is-default project)
-       {:on-click create-file}
+        [:span.pin-icon.tooltip.tooltip-bottom
-       (tr "dashboard.new-file")]]
+         {:class (when (:is-pinned project) "active")
+          :on-click toggle-pin :alt (tr "dashboard.pin-unpin")}
+         (if (:is-pinned project)
+           i/pin-fill
+           i/pin)])
+
+      [:a.btn-secondary.btn-small.tooltip.tooltip-bottom
+       {:on-click create-file :alt (tr "dashboard.new-file")}
+       i/close]
+
+      [:a.btn-secondary.btn-small.tooltip.tooltip-bottom
+       {:on-click on-menu-click :alt (tr "dashboard.options")}
+       i/actions]]
 
      [:& line-grid
       {:project-id (:id project)

frontend/translations/en.po

@@ -2693,3 +2693,6 @@ msgstr "Export file"
 
 msgid "dashboard.export-multi"
 msgstr "Export %s files"
+
+msgid "dashboard.options"
+msgstr "Options"