From e45f7598dbab831ad8174ca436ae38cfba36ed87 Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Tue, 25 May 2021 16:28:59 +0200 Subject: [PATCH 1/2] :sparkles: First viewer header changes --- .../styles/main/partials/viewer-header.scss | 27 ++++++++++++++----- frontend/src/app/main/data/workspace.cljs | 2 +- frontend/src/app/main/ui/viewer.cljs | 2 +- frontend/src/app/main/ui/viewer/header.cljs | 8 +++--- .../src/app/main/ui/workspace/header.cljs | 1 - frontend/translations/de.po | 2 +- frontend/translations/en.po | 2 +- frontend/translations/es.po | 2 +- frontend/translations/fr.po | 2 +- 9 files changed, 30 insertions(+), 18 deletions(-) diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss index 9e8449c461..652ff98979 100644 --- a/frontend/resources/styles/main/partials/viewer-header.scss +++ b/frontend/resources/styles/main/partials/viewer-header.scss @@ -56,17 +56,28 @@ } } - svg { - fill: $color-gray-30; - height: 16px; - width: 16px; - } - .dropdown { top: 40px; left: 0px; width: 260px; } + + .view-options-dropdown { + align-items: center; + cursor: pointer; + display: flex; + + span { + font-size: $fs13; + margin-right: $small; + } + + svg { + fill: $color-gray-20; + height: 12px; + width: 12px; + } + } } .sitemap-zone { @@ -165,6 +176,10 @@ height: 20px; } } + + .btn-primary { + flex-shrink: 0; + } } .share-link-dropdown { diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index f7017f541a..e973bf1dee 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/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)) diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 930968526a..a5f330b7d8 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index 46a29b984a..9d465e2ee8 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/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 "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) diff --git a/frontend/src/app/main/ui/workspace/header.cljs b/frontend/src/app/main/ui/workspace/header.cljs index 309803e9ee..9b5d230d82 100644 --- a/frontend/src/app/main/ui/workspace/header.cljs +++ b/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]]])) diff --git a/frontend/translations/de.po b/frontend/translations/de.po index c5179aefad..087a3af41b 100644 --- a/frontend/translations/de.po +++ b/frontend/translations/de.po @@ -1328,7 +1328,7 @@ 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.show-interactions" diff --git a/frontend/translations/en.po b/frontend/translations/en.po index a0cd82b375..d36e224d0f 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -1478,7 +1478,7 @@ 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.show-interactions" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 7063b56497..7cc5bc35f1 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -1468,7 +1468,7 @@ 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.show-interactions" diff --git a/frontend/translations/fr.po b/frontend/translations/fr.po index 34e70bab41..1883e1a36c 100644 --- a/frontend/translations/fr.po +++ b/frontend/translations/fr.po @@ -1224,7 +1224,7 @@ 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.show-interactions" From 3d5caf18e3fb15f99ec0b7b7de3e3e4255b8587a Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Wed, 26 May 2021 09:05:11 +0200 Subject: [PATCH 2/2] :sparkles: Add new interactions link and translations --- .../resources/styles/main/partials/viewer-header.scss | 9 +++++---- frontend/src/app/main/ui/viewer/header.cljs | 2 +- frontend/translations/de.po | 4 ++++ frontend/translations/en.po | 4 ++++ frontend/translations/es.po | 4 ++++ frontend/translations/fr.po | 4 ++++ frontend/translations/ro.po | 4 ++++ frontend/translations/ru.po | 4 ++++ 8 files changed, 30 insertions(+), 5 deletions(-) diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss index 652ff98979..891f836670 100644 --- a/frontend/resources/styles/main/partials/viewer-header.scss +++ b/frontend/resources/styles/main/partials/viewer-header.scss @@ -57,9 +57,9 @@ } .dropdown { - top: 40px; + min-width: 260px; left: 0px; - width: 260px; + top: 40px; } .view-options-dropdown { @@ -68,12 +68,13 @@ display: flex; span { + color: $color-gray-10; font-size: $fs13; - margin-right: $small; + margin-right: $x-small; } svg { - fill: $color-gray-20; + fill: $color-gray-10; height: 12px; width: 12px; } diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index 9d465e2ee8..0b82dd4344 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -119,7 +119,7 @@ [:div.view-options [:div.view-options-dropdown {:on-click #(swap! show-dropdown? not)} - [:span "Interactions"] + [:span (t locale "viewer.header.interactions")] i/arrow-down] [:& dropdown {:show @show-dropdown? :on-close hide-dropdown} diff --git a/frontend/translations/de.po b/frontend/translations/de.po index 087a3af41b..0fbb95166f 100644 --- a/frontend/translations/de.po +++ b/frontend/translations/de.po @@ -1330,6 +1330,10 @@ msgstr "Jeder mit dem Link hat Zugriff" msgid "viewer.header.share.title" 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" msgstr "Interaktionen anzeigen" diff --git a/frontend/translations/en.po b/frontend/translations/en.po index d36e224d0f..925e171c15 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -1480,6 +1480,10 @@ msgstr "Anyone with the link will have access" msgid "viewer.header.share.title" 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" msgstr "Show interactions" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 7cc5bc35f1..f4824a4784 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -1470,6 +1470,10 @@ msgstr "Cualquiera con el enlace podrá acceder" msgid "viewer.header.share.title" 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" msgstr "Mostrar interacciones" diff --git a/frontend/translations/fr.po b/frontend/translations/fr.po index 1883e1a36c..313aa753d5 100644 --- a/frontend/translations/fr.po +++ b/frontend/translations/fr.po @@ -1226,6 +1226,10 @@ msgstr "Toute personne disposant du lien aura accès" msgid "viewer.header.share.title" 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" msgstr "Afficher les interactions" diff --git a/frontend/translations/ro.po b/frontend/translations/ro.po index 6823ed2731..3a0e4402b5 100644 --- a/frontend/translations/ro.po +++ b/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" diff --git a/frontend/translations/ru.po b/frontend/translations/ru.po index 9118ae5359..b56f9f0789 100644 --- a/frontend/translations/ru.po +++ b/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 "Показывать взаимодействия"