From ee7248204f67dd7ccc0b2026ae5756b257ebb3eb Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Mon, 14 Jun 2021 20:00:10 +0200 Subject: [PATCH 1/2] :lipstick: Add new actions icon --- frontend/resources/styles/common/framework.scss | 4 ++-- frontend/src/app/main/ui/viewer/header.cljs | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 629cee8d1..d294b661d 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/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; diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index 0b82dd434..ff22757b7 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -276,11 +276,13 @@ :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)] - ]])) + + [:span.btn-icon-dark.btn-small + i/actions]]])) From 9300adf37434ce36ad05fae6ae2b0fee501d4edd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Tue, 15 Jun 2021 13:30:30 +0200 Subject: [PATCH 2/2] :tada: Activate edit file menu in viewer --- .../styles/main/partials/viewer-header.scss | 8 +++ frontend/src/app/main/ui/viewer/header.cljs | 52 ++++++++++++------- frontend/translations/en.po | 4 +- frontend/translations/es.po | 4 +- 4 files changed, 46 insertions(+), 22 deletions(-) diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss index 891f83667..6012f4a95 100644 --- a/frontend/resources/styles/main/partials/viewer-header.scss +++ b/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; diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs index ff22757b7..5d6800d4f 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/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-fn #(reset! show-dropdown? true)) - hide-dropdown (mf/use-fn #(reset! show-dropdown? false)) + show-dropdown? (mf/use-state false) + toggle-dropdown (mf/use-fn #(swap! show-dropdown? not)) + 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-fn #(reset! show-dropdown? true)) - hide-dropdown (mf/use-fn #(reset! show-dropdown? false)) + show-dropdown? (mf/use-state false) + toggle-dropdown (mf/use-fn #(swap! show-dropdown? not)) + 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) @@ -283,6 +297,8 @@ i/full-screen-off i/full-screen)] - [:span.btn-icon-dark.btn-small - i/actions]]])) + [:& file-menu {:locale locale + :project-id project-id + :file-id file-id + :page-id page-id}]]])) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index a745b6c07..6b70646a9 100644 --- a/frontend/translations/en.po +++ b/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" -msgstr "Edit page" +msgid "viewer.header.edit-file" +msgstr "Edit file" #: src/app/main/ui/viewer/header.cljs msgid "viewer.header.fullscreen" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index bb520ed39..b668c9428 100644 --- a/frontend/translations/es.po +++ b/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" -msgstr "Editar página" +msgid "viewer.header.edit-file" +msgstr "Editar archivo" #: src/app/main/ui/viewer/header.cljs msgid "viewer.header.fullscreen"