3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-13 19:06:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Update dashboard comment icon

Browse source
This commit is contained in:
Eva Marco 2024-03-07 09:26:51 +01:00 • committed by Andrey Antukh
parent 9012987f7e
commit 9f7d1be0a9
2 changed files with 45 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

25
frontend/src/app/main/ui/dashboard/comments.cljs
View file

@ -20,6 +20,17 @@
[potok.v2.core :as ptk] [potok.v2.core :as ptk]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def ^:private close-icon
(i/icon-xref :close-refactor (stl/css :close-icon)))
(def ^:private comments-icon-svg
(i/icon-xref :comments-refactor (stl/css :comments-icon)))
(def ^:private comments-icon-small
(i/icon-xref :comments-refactor (stl/css :comments-icon-small)))
(mf/defc comments-icon (mf/defc comments-icon
[{:keys [profile show? on-show-comments]}] [{:keys [profile show? on-show-comments]}]
@ -47,7 +58,7 @@
:class (stl/css-case :button true :class (stl/css-case :button true
:open show? :open show?
:unread (boolean (seq tgroups)))} :unread (boolean (seq tgroups)))}
i/comments-refactor]])) comments-icon-small]]))
(mf/defc comments-section (mf/defc comments-section
[{:keys [profile team show? on-hide-comments]}] [{:keys [profile team show? on-hide-comments]}]
@ -91,11 +102,11 @@
[:div {:class (stl/css :dropdown :comments-section :comment-threads-section)} [:div {:class (stl/css :dropdown :comments-section :comment-threads-section)}
[:div {:class (stl/css :header)} [:div {:class (stl/css :header)}
[:h3 (tr "labels.comments")] [:h3 (tr "labels.comments")]
[:button [:button {:class (stl/css :close-btn)
{:class (stl/css :close) :tab-index (if show? "0" "-1")
:tab-index (if show? "0" "-1") :on-click on-hide-comments
:on-click on-hide-comments :on-key-down handle-keydown}
:on-key-down handle-keydown} i/close]] close-icon]]
(if (seq tgroups) (if (seq tgroups)
[:div {:class (stl/css :thread-groups)} [:div {:class (stl/css :thread-groups)}
@ -113,5 +124,5 @@
:key (:page-id tgroup)}])] :key (:page-id tgroup)}])]
[:div {:class (stl/css :thread-groups-placeholder)} [:div {:class (stl/css :thread-groups-placeholder)}
i/comments-refactor comments-icon-svg
(tr "labels.no-comments-available")])]]])) (tr "labels.no-comments-available")])]]]))

61
frontend/src/app/main/ui/dashboard/comments.scss
View file

@ -48,14 +48,14 @@
padding: $s-24; padding: $s-24;
text-align: center; text-align: center;
color: $df-secondary; color: $df-secondary;
}
svg { .comments-icon {
stroke: $df-secondary; @extend .button-icon;
fill: none; stroke: var(--icon-foreground);
height: $s-24; height: $s-24;
margin-bottom: $s-24; width: $s-24;
width: $s-24; margin-bottom: $s-24;
}
} }
.button { .button {
@ -65,28 +65,24 @@
border-radius: $br-8; border-radius: $br-8;
height: $s-32; height: $s-32;
width: $s-32; width: $s-32;
--comment-icon-small-foreground-color: var(--icon-foreground);
svg { &.unread,
width: $s-16; &.open {
height: $s-16; --comment-icon-small-foreground-color: var(--icon-foreground-selected);
stroke: $df-secondary;
fill: none;
}
&.unread svg,
&.open svg {
stroke: $da-tertiary;
} }
&:hover { &:hover {
background-color: $db-quaternary; background-color: $db-quaternary;
--comment-icon-small-foreground-color: var(--icon-foreground-active);
svg {
stroke: $da-primary;
}
} }
} }
.comments-icon-small {
@extend .button-icon;
stroke: var(--comment-icon-small-foreground-color);
}
.dropdown { .dropdown {
@include menuShadow; @include menuShadow;
background-color: $db-tertiary; background-color: $db-tertiary;
@ -111,7 +107,6 @@
height: $s-40; height: $s-40;
align-items: center; align-items: center;
padding: 0 $s-12; padding: 0 $s-12;
h3 { h3 {
color: $df-secondary; color: $df-secondary;
font-size: $fs-11; font-size: $fs-11;
@ -119,16 +114,14 @@
flex-grow: 1; flex-grow: 1;
text-transform: uppercase; text-transform: uppercase;
} }
}
.close {
display: flex; .close-btn {
align-items: center; @include buttonStyle;
cursor: pointer; @include flexCenter;
svg { }
width: $s-16;
height: $s-16; .close-icon {
transform: rotate(45deg); @extend .button-icon;
fill: $df-secondary; stroke: var(--icon-foreground);
}
}
} }