diff --git a/CHANGES.md b/CHANGES.md index 7459428f5..7594df160 100644 --- a/CHANGES.md +++ b/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. diff --git a/frontend/resources/styles/main/partials/dashboard-header.scss b/frontend/resources/styles/main/partials/dashboard-header.scss index c3af04cb2..3c5c7ab40 100644 --- a/frontend/resources/styles/main/partials/dashboard-header.scss +++ b/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; } diff --git a/frontend/resources/styles/main/partials/dashboard.scss b/frontend/resources/styles/main/partials/dashboard.scss index 780dd8794..6c90ee4f5 100644 --- a/frontend/resources/styles/main/partials/dashboard.scss +++ b/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; diff --git a/frontend/src/app/main/ui/dashboard/files.cljs b/frontend/src/app/main/ui/dashboard/files.cljs index a43026964..dc7b44e8b 100644 --- a/frontend/src/app/main/ui/dashboard/files.cljs +++ b/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}] - [:div.icon.pin-icon - {:class (when (:is-pinned project) "active") - :on-click toggle-pin} - (if (:is-pinned project) - i/pin-fill - i/pin)]])) - [:a.btn-secondary.btn-small {:on-click on-create-clicked} - (tr "dashboard.new-file")]])) + :on-menu-close on-menu-close}]])) + [: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 :alt (tr "dashboard.pin-unpin")} + (if (:is-pinned project) + i/pin-fill + i/pin)] + + [: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}] diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 7921624aa..8e6485b37 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/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 - {:on-click create-file} - (tr "dashboard.new-file")]] + (when-not (:is-default project) + [:span.pin-icon.tooltip.tooltip-bottom + {: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) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index a745b6c07..6b383d739 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -2693,3 +2693,6 @@ msgstr "Export file" msgid "dashboard.export-multi" msgstr "Export %s files" + +msgid "dashboard.options" +msgstr "Options"