Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 10:38:13 -05:00
Code Issues Activity

🐛 Fix wrong styles on viewer comments header menu & icon.

Browse source 
And additionally fix some linter issues on the affected namespaces.
This commit is contained in:
Andrey Antukh 2021-06-17 08:46:47 +02:00 • committed by Andrés Moya
parent 16b5bb595c
commit eacc945254
2 changed files with 34 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/resources/styles/main/partials/viewer-header.scss
View file

@ -49,6 +49,12 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
svg {
fill: $color-gray-30;
height: 30px;
width: 28px;
}
&:hover { &:hover {
> svg { > svg {
fill: $color-primary; fill: $color-primary;
@ -61,7 +67,7 @@
left: 0px; left: 0px;
top: 40px; top: 40px;
} }
.view-options-dropdown { .view-options-dropdown {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;

61
frontend/src/app/main/ui/viewer/header.cljs
View file

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