Merge pull request #1038 from penpot/view-back-btn

View back btn

frontend/resources/styles/common/framework.scss

@@ -118,10 +118,10 @@
 .btn-icon-basic {
   @extend %btn;
   background: transparent;
-  color: $color-gray-60;
+  color: $color-gray-20;
   padding: $x-small;
   svg {
-    fill: $color-gray-60;
+    fill: $color-gray-20;
   }
   &:hover {
     background: transparent;

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

@@ -81,6 +81,14 @@
     }
   }
 
+  .file-menu {
+    .dropdown {
+      min-width: 100px;
+      right: 0px;
+      top: 40px;
+    }
+  }
+
   .sitemap-zone {
     align-items: center;
     cursor: pointer;

frontend/src/app/main/ui/viewer/header.cljs

@@ -108,9 +108,9 @@
   [{:keys [state locale] :as props}]
   (let [imode          (:interactions-mode state)
 
-        show-dropdown? (mf/use-state false)
+        show-dropdown?  (mf/use-state false)
-        show-dropdown  (mf/use-fn #(reset! show-dropdown? true))
+        toggle-dropdown (mf/use-fn #(swap! show-dropdown? not))
-        hide-dropdown  (mf/use-fn #(reset! show-dropdown? false))
+        hide-dropdown   (mf/use-fn #(reset! show-dropdown? false))
 
         select-mode
         (mf/use-callback
@@ -118,7 +118,7 @@
            (st/emit! (dv/set-interactions-mode mode))))]
 
     [:div.view-options
-     [:div.view-options-dropdown {:on-click #(swap! show-dropdown? not)}
+     [:div.view-options-dropdown {:on-click toggle-dropdown}
       [:span (t locale "viewer.header.interactions")]
       i/arrow-down]
      [:& dropdown {:show @show-dropdown?
@@ -139,14 +139,13 @@
         [:span.icon i/tick]
         [:span.label (t locale "viewer.header.show-interactions-on-click")]]]]]))
 
-
 (mf/defc comments-menu
   [{:keys [locale] :as props}]
   (let [{cmode :mode cshow :show} (mf/deref refs/comments-local)
 
-        show-dropdown? (mf/use-state false)
+        show-dropdown?  (mf/use-state false)
-        show-dropdown  (mf/use-fn #(reset! show-dropdown? true))
+        toggle-dropdown (mf/use-fn #(swap! show-dropdown? not))
-        hide-dropdown  (mf/use-fn #(reset! show-dropdown? false))
+        hide-dropdown   (mf/use-fn #(reset! show-dropdown? false))
 
         update-mode
         (mf/use-callback
@@ -159,7 +158,7 @@
            (st/emit! (dcm/update-filters {:show mode}))))]
 
     [:div.view-options
-     [:div.icon {:on-click #(swap! show-dropdown? not)} i/eye]
+     [:div.icon {:on-click toggle-dropdown} i/eye]
      [:& dropdown {:show @show-dropdown?
                    :on-close hide-dropdown}
       [:ul.dropdown.with-check
@@ -180,6 +179,28 @@
         [:span.icon i/tick]
         [:span.label (t locale "labels.hide-resolved-comments")]]]]]))
 
+(mf/defc file-menu
+  [{:keys [locale project-id file-id page-id] :as props}]
+  (let [show-dropdown?  (mf/use-state false)
+        toggle-dropdown (mf/use-fn #(swap! show-dropdown? not))
+        hide-dropdown   (mf/use-fn #(reset! show-dropdown? false))
+
+        on-edit
+        (mf/use-callback
+         (mf/deps project-id file-id page-id)
+         (st/emitf (rt/nav :workspace
+                           {:project-id project-id
+                            :file-id file-id}
+                           {:page-id page-id})))]
+    [:div.file-menu
+     [:span.btn-icon-dark.btn-small {:on-click toggle-dropdown}
+      i/actions
+      [:& dropdown {:show @show-dropdown?
+                    :on-close hide-dropdown}
+       [:ul.dropdown
+        [:li {:on-click on-edit}
+         [:span.label (t locale "viewer.header.edit-file")]]]]]]))
+
 (mf/defc header
   [{:keys [data index section state] :as props}]
   (let [{:keys [project file page frames]} data
@@ -209,13 +230,6 @@
          (mf/deps project)
          (st/emitf (dv/go-to-dashboard project)))
 
-        on-edit
-        (mf/use-callback
-         (mf/deps project-id file-id page-id)
-         (st/emitf (rt/nav :workspace
-                           {:project-id project-id
-                            :file-id file-id}
-                           {:page-id page-id})))
         navigate
         (mf/use-callback
          (mf/deps file-id page-id)
@@ -276,11 +290,15 @@
         :on-zoom-to-100 (st/emitf dv/reset-zoom)
         :on-zoom-to-200 (st/emitf dv/zoom-to-200)}]
 
-      [:span.btn-icon-dark.btn-small.tooltip.tooltip-bottom-left
+      [:span.btn-icon-basic.btn-small.tooltip.tooltip-bottom-left
        {:alt (t locale "viewer.header.fullscreen")
         :on-click #(if @fullscreen (fullscreen false) (fullscreen true))}
        (if @fullscreen
          i/full-screen-off
          i/full-screen)]
-      ]]))
+
+      [:& file-menu {:locale locale
+                     :project-id project-id
+                     :file-id file-id
+                     :page-id page-id}]]]))
 

frontend/translations/en.po

@@ -1454,8 +1454,8 @@ msgid "viewer.header.dont-show-interactions"
 msgstr "Don't show interactions"
 
 #: src/app/main/ui/viewer/header.cljs
-msgid "viewer.header.edit-page"
+msgid "viewer.header.edit-file"
-msgstr "Edit page"
+msgstr "Edit file"
 
 #: src/app/main/ui/viewer/header.cljs
 msgid "viewer.header.fullscreen"

frontend/translations/es.po

@@ -1444,8 +1444,8 @@ msgid "viewer.header.dont-show-interactions"
 msgstr "No mostrar interacciones"
 
 #: src/app/main/ui/viewer/header.cljs
-msgid "viewer.header.edit-page"
+msgid "viewer.header.edit-file"
-msgstr "Editar página"
+msgstr "Editar archivo"
 
 #: src/app/main/ui/viewer/header.cljs
 msgid "viewer.header.fullscreen"