diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss index 6012f4a95..605a08ec3 100644 --- a/frontend/resources/styles/main/partials/viewer-header.scss +++ b/frontend/resources/styles/main/partials/viewer-header.scss @@ -49,6 +49,12 @@ display: flex; justify-content: center; + svg { + fill: $color-gray-30; + height: 30px; + width: 28px; + } + &:hover { > svg { fill: $color-primary; @@ -61,7 +67,7 @@ left: 0px; top: 40px; } - + .view-options-dropdown { 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 ed3cc84ed..061afd0f1 100644 --- a/frontend/src/app/main/ui/viewer/header.cljs +++ b/frontend/src/app/main/ui/viewer/header.cljs @@ -10,7 +10,6 @@ [app.common.uuid :as uuid] [app.config :as cfg] [app.main.data.comments :as dcm] - [app.main.data.events :as ev] [app.main.data.messages :as dm] [app.main.data.viewer :as dv] [app.main.data.viewer.shortcuts :as sc] @@ -20,11 +19,9 @@ [app.main.ui.components.fullscreen :as fs] [app.main.ui.icons :as i] [app.util.dom :as dom] - [app.util.i18n :as i18n :refer [t]] + [app.util.i18n :as i18n :refer [tr]] [app.util.router :as rt] [app.util.webapi :as wapi] - [cuerdas.core :as str] - [potok.core :as ptk] [rumext.alpha :as mf])) (mf/defc zoom-widget @@ -59,11 +56,9 @@ ;; "Full screen" [:span (sc/get-tooltip :full-screen)]]]]])) (mf/defc share-link - [{:keys [page token] :as props}] + [{:keys [token] :as props}] (let [show-dropdown? (mf/use-state false) dropdown-ref (mf/use-ref) - locale (mf/deref i18n/locale) - create (st/emitf (dv/create-share-link)) delete (st/emitf (dv/delete-share-link)) @@ -76,40 +71,40 @@ link (assoc cfg/public-uri :fragment link) copy-link - (fn [event] + (fn [_] (wapi/write-to-clipboard (str link)) (st/emit! (dm/show {:type :info :content "Link copied successfuly!" :timeout 3000})))] [:* [:span.btn-primary.btn-small - {:alt (t locale "viewer.header.share.title") + {:alt (tr "viewer.header.share.title") :on-click #(swap! show-dropdown? not)} - (t locale "viewer.header.share.title")] + (tr "viewer.header.share.title")] [:& dropdown {:show @show-dropdown? :on-close #(swap! show-dropdown? not) :container dropdown-ref} [:div.dropdown.share-link-dropdown {:ref dropdown-ref} - [:span.share-link-title (t locale "viewer.header.share.title")] + [:span.share-link-title (tr "viewer.header.share.title")] [:div.share-link-input (if (string? token) [:* [:span.link (str link)] [:span.link-button {:on-click copy-link} - (t locale "viewer.header.share.copy-link")]] - [:span.link-placeholder (t locale "viewer.header.share.placeholder")])] + (tr "viewer.header.share.copy-link")]] + [:span.link-placeholder (tr "viewer.header.share.placeholder")])] - [:span.share-link-subtitle (t locale "viewer.header.share.subtitle")] + [:span.share-link-subtitle (tr "viewer.header.share.subtitle")] [:div.share-link-buttons (if (string? token) [:button.btn-warning {:on-click delete} - (t locale "viewer.header.share.remove-link")] + (tr "viewer.header.share.remove-link")] [:button.btn-primary {:on-click create} - (t locale "viewer.header.share.create-link")])]]]])) + (tr "viewer.header.share.create-link")])]]]])) (mf/defc interactions-menu - [{:keys [state locale] :as props}] + [{:keys [state] :as props}] (let [imode (:interactions-mode state) show-dropdown? (mf/use-state false) @@ -123,7 +118,7 @@ [:div.view-options [:div.view-options-dropdown {:on-click toggle-dropdown} - [:span (t locale "viewer.header.interactions")] + [:span (tr "viewer.header.interactions")] i/arrow-down] [:& dropdown {:show @show-dropdown? :on-close hide-dropdown} @@ -131,20 +126,20 @@ [:li {:class (dom/classnames :selected (= imode :hide)) :on-click #(select-mode :hide)} [:span.icon i/tick] - [:span.label (t locale "viewer.header.dont-show-interactions")]] + [:span.label (tr "viewer.header.dont-show-interactions")]] [:li {:class (dom/classnames :selected (= imode :show)) :on-click #(select-mode :show)} [:span.icon i/tick] - [:span.label (t locale "viewer.header.show-interactions")]] + [:span.label (tr "viewer.header.show-interactions")]] [:li {:class (dom/classnames :selected (= imode :show-on-click)) :on-click #(select-mode :show-on-click)} [:span.icon i/tick] - [:span.label (t locale "viewer.header.show-interactions-on-click")]]]]])) + [:span.label (tr "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) @@ -169,22 +164,22 @@ [:li {:class (dom/classnames :selected (= :all cmode)) :on-click #(update-mode :all)} [:span.icon i/tick] - [:span.label (t locale "labels.show-all-comments")]] + [:span.label (tr "labels.show-all-comments")]] [:li {:class (dom/classnames :selected (= :yours cmode)) :on-click #(update-mode :yours)} [:span.icon i/tick] - [:span.label (t locale "labels.show-your-comments")]] + [:span.label (tr "labels.show-your-comments")]] [:hr] [:li {:class (dom/classnames :selected (= :pending cshow)) :on-click #(update-show (if (= :pending cshow) :all :pending))} [:span.icon i/tick] - [:span.label (t locale "labels.hide-resolved-comments")]]]]])) + [:span.label (tr "labels.hide-resolved-comments")]]]]])) (mf/defc file-menu - [{:keys [locale project-id file-id page-id] :as props}] + [{:keys [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)) @@ -203,7 +198,7 @@ :on-close hide-dropdown} [:ul.dropdown [:li {:on-click on-edit} - [:span.label (t locale "viewer.header.edit-file")]]]]]])) + [:span.label (tr "viewer.header.edit-file")]]]]]])) (mf/defc header [{:keys [data index section state] :as props}] @@ -212,7 +207,6 @@ fullscreen (mf/use-ctx fs/fullscreen-context) total (count frames) - locale (mf/deref i18n/locale) profile (mf/deref refs/profile) teams (mf/deref refs/teams) @@ -252,7 +246,7 @@ ;; If the user doesn't have permission we disable the link :style {:pointer-events (when-not has-permission? "none")}} i/logo-icon]] - [:div.sitemap-zone {:alt (t locale "viewer.header.sitemap") + [:div.sitemap-zone {:alt (tr "viewer.header.sitemap") :on-click on-click} [:span.project-name (:name project)] [:span "/"] @@ -284,8 +278,8 @@ [:div.options-zone (case section - :interactions [:& interactions-menu {:state state :locale locale}] - :comments [:& comments-menu {:locale locale}] + :interactions [:& interactions-menu {:state state}] + :comments [:& comments-menu] nil) (when has-permission? @@ -302,15 +296,14 @@ :on-fullscreen toggle-fullscreen}] [:span.btn-icon-basic.btn-small.tooltip.tooltip-bottom-left - {:alt (t locale "viewer.header.fullscreen") + {:alt (tr "viewer.header.fullscreen") :on-click toggle-fullscreen} (if @fullscreen i/full-screen-off i/full-screen)] (when has-permission? - [:& file-menu {:locale locale - :project-id project-id + [:& file-menu {:project-id project-id :file-id file-id :page-id page-id}])]]))