Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 02:28:18 -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;
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;

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

@ -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}])]]))