Merge pull request #1000 from penpot/view-mode-header

View mode header

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

@@ -56,16 +56,28 @@
       }
     }
 
-    svg {
+    .dropdown {
-      fill: $color-gray-30;
+      min-width: 260px;
-      height: 16px;
+      left: 0px;
-      width: 16px;
+      top: 40px;
     }
     
-    .dropdown {
+    .view-options-dropdown {
-      top: 40px;
+      align-items: center;
-      left: 0px;
+      cursor: pointer;
-      width: 260px;
+      display: flex;
+
+      span {
+        color: $color-gray-10;
+        font-size: $fs13;
+        margin-right: $x-small;
+      }
+
+      svg {
+        fill: $color-gray-10;
+        height: 12px;
+        width: 12px;
+      }
     }
   }
 
@@ -165,6 +177,10 @@
         height: 20px;
       }
     }
+
+    .btn-primary {
+      flex-shrink: 0;
+    }
   }
 
   .share-link-dropdown {

frontend/src/app/main/data/workspace.cljs

@@ -1248,7 +1248,7 @@
              params {:file-id (or file-id current-file-id)
                      :page-id (or page-id current-page-id)}]
          (rx/of ::dwp/force-persist
-                (rt/nav :viewer params {:index 0})))))))
+                (rt/nav-new-window :viewer params {:index 0})))))))
 
 (defn go-to-dashboard
   ([] (go-to-dashboard nil))

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

@@ -273,7 +273,7 @@
     (mf/use-effect
       (mf/deps (:file data))
       #(when-let [name (get-in data [:file :name])]
-         (dom/set-html-title (tr "title.viewer" name))))
+         (dom/set-html-title (str "\u25b6 " (tr "title.viewer" name)))))
 
     (when (and data state)
       [:& viewer-content

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

@@ -118,7 +118,9 @@
            (st/emit! (dv/set-interactions-mode mode))))]
 
     [:div.view-options
-     [:div.icon {:on-click #(swap! show-dropdown? not)} i/eye]
+     [:div.view-options-dropdown {:on-click #(swap! show-dropdown? not)}
+      [:span (t locale "viewer.header.interactions")]
+      i/arrow-down]
      [:& dropdown {:show @show-dropdown?
                    :on-close hide-dropdown}
       [:ul.dropdown.with-check
@@ -266,10 +268,6 @@
         [:& share-link {:token (:token data)
                         :page  (:page data)}])
 
-      (when has-permission?
-        [:a.btn-text-basic.btn-small {:on-click on-edit}
-         (t locale "viewer.header.edit-page")])
-
       [:& zoom-widget
        {:zoom (:zoom state)
         :on-increase (st/emitf dv/increase-zoom)

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

@@ -282,7 +282,6 @@
 
       [:a.btn-icon-dark.btn-small.tooltip.tooltip-bottom-left
        {:alt (tr "workspace.header.viewer" (sc/get-tooltip :open-viewer))
-        :href (str "#" view-url)
         :on-click go-viewer}
        i/play]]]))
 

frontend/translations/de.po

@@ -1328,7 +1328,11 @@ msgstr "Jeder mit dem Link hat Zugriff"
 
 #: src/app/main/ui/viewer/header.cljs, src/app/main/ui/viewer/header.cljs, src/app/main/ui/viewer/header.cljs
 msgid "viewer.header.share.title"
-msgstr "Link teilen"
+msgstr "Prototyp teilen"
+
+#: src/app/main/ui/viewer/header.cljs
+msgid "viewer.header.interactions"
+msgstr "Interaktionen"
 
 #: src/app/main/ui/viewer/header.cljs
 msgid "viewer.header.show-interactions"

frontend/translations/en.po

@@ -1478,7 +1478,11 @@ msgstr "Anyone with the link will have access"
 
 #: src/app/main/ui/viewer/header.cljs, src/app/main/ui/viewer/header.cljs, src/app/main/ui/viewer/header.cljs
 msgid "viewer.header.share.title"
-msgstr "Share link"
+msgstr "Share prototype"
+
+#: src/app/main/ui/viewer/header.cljs
+msgid "viewer.header.interactions"
+msgstr "Interactions"
 
 #: src/app/main/ui/viewer/header.cljs
 msgid "viewer.header.show-interactions"

frontend/translations/es.po

@@ -1468,7 +1468,11 @@ msgstr "Cualquiera con el enlace podrá acceder"
 
 #: src/app/main/ui/viewer/header.cljs, src/app/main/ui/viewer/header.cljs, src/app/main/ui/viewer/header.cljs
 msgid "viewer.header.share.title"
-msgstr "Enlace"
+msgstr "Compartir prototipo"
+
+#: src/app/main/ui/viewer/header.cljs
+msgid "viewer.header.interactions"
+msgstr "Interacciones"
 
 #: src/app/main/ui/viewer/header.cljs
 msgid "viewer.header.show-interactions"

frontend/translations/fr.po

@@ -1224,7 +1224,11 @@ msgstr "Toute personne disposant du lien aura accès"
 
 #: src/app/main/ui/viewer/header.cljs, src/app/main/ui/viewer/header.cljs, src/app/main/ui/viewer/header.cljs
 msgid "viewer.header.share.title"
-msgstr "Lien de partage"
+msgstr "Partager le prototype"
+
+#: src/app/main/ui/viewer/header.cljs
+msgid "viewer.header.interactions"
+msgstr "Interactions"
 
 #: src/app/main/ui/viewer/header.cljs
 msgid "viewer.header.show-interactions"

frontend/translations/ro.po

@@ -1469,6 +1469,10 @@ msgstr "Distribuie link"
 msgid "viewer.header.show-interactions"
 msgstr "Afişează interacţiunile"
 
+#: src/app/main/ui/viewer/header.cljs
+msgid "viewer.header.interactions"
+msgstr "Interacţiunile"
+
 #: src/app/main/ui/viewer/header.cljs
 msgid "viewer.header.show-interactions-on-click"
 msgstr "Afişează interacţiunile la click"

frontend/translations/ru.po

@@ -599,6 +599,10 @@ msgstr "Любой, у кого есть ссылка будет иметь до
 msgid "viewer.header.share.title"
 msgstr "Поделиться ссылкой"
 
+#: src/app/main/ui/viewer/header.cljs
+msgid "viewer.header-interactions"
+msgstr "взаимодействия"
+
 #: src/app/main/ui/viewer/header.cljs
 msgid "viewer.header.show-interactions"
 msgstr "Показывать взаимодействия"