mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
♻️ Unnest scss rules in dashboard settings
This commit is contained in:
Eva Marco
Andrey Antukh
parent
cfffb1e551
commit
47df285500
2 changed files with 74 additions and 128 deletions
|
|
@ -23,6 +23,9 @@
|
|||
(def ^:private arrow-icon
|
||||
(i/icon-xref :arrow-refactor (stl/css :arrow-icon)))
|
||||
|
||||
(def ^:private feedback-icon
|
||||
(i/icon-xref :feedback-refactor (stl/css :feedback-icon)))
|
||||
|
||||
(def ^:private go-settings-profile
|
||||
#(st/emit! (rt/nav :settings-profile)))
|
||||
|
||||
|
|
@ -64,43 +67,49 @@
|
|||
|
||||
[:div {:class (stl/css :sidebar-content)}
|
||||
[:div {:class (stl/css :sidebar-content-section)}
|
||||
[:div {:class (stl/css :back-to-dashboard)
|
||||
:on-click go-dashboard}
|
||||
[:button {:class (stl/css :back-to-dashboard)
|
||||
:on-click go-dashboard}
|
||||
arrow-icon
|
||||
[:span {:class (stl/css :text)} (tr "labels.dashboard")]]]
|
||||
[:span {:class (stl/css :back-text)} (tr "labels.dashboard")]]]
|
||||
|
||||
[:hr]
|
||||
[:hr {:class (stl/css :sidebar-separator)}]
|
||||
|
||||
[:div {:class (stl/css :sidebar-content-section)}
|
||||
[:ul {:class (stl/css :sidebar-nav :no-overflow)}
|
||||
[:li {:class (when profile? (stl/css :current))
|
||||
[:ul {:class (stl/css :sidebar-nav-settings)}
|
||||
[:li {:class (stl/css-case :current profile?
|
||||
:settings-item true)
|
||||
:on-click go-settings-profile}
|
||||
[:span {:class (stl/css :element-title)} (tr "labels.profile")]]
|
||||
|
||||
[:li {:class (when password? (stl/css :current))
|
||||
[:li {:class (stl/css-case :current password?
|
||||
:settings-item true)
|
||||
:on-click go-settings-password}
|
||||
[:span {:class (stl/css :element-title)} (tr "labels.password")]]
|
||||
|
||||
[:li {:class (when options? (stl/css :current))
|
||||
[:li {:class (stl/css-case :current options?
|
||||
:settings-item true)
|
||||
:on-click go-settings-options
|
||||
:data-test "settings-profile"}
|
||||
[:span {:class (stl/css :element-title)} (tr "labels.settings")]]
|
||||
|
||||
(when (contains? cf/flags :access-tokens)
|
||||
[:li {:class (when access-tokens? (stl/css :current))
|
||||
[:li {:class (stl/css-case :current access-tokens?
|
||||
:settings-item true)
|
||||
:on-click go-settings-access-tokens
|
||||
:data-test "settings-access-tokens"}
|
||||
[:span {:class (stl/css :element-title)} (tr "labels.access-tokens")]])
|
||||
|
||||
[:hr]
|
||||
[:hr {:class (stl/css :sidebar-separator)}]
|
||||
|
||||
[:li {:on-click show-release-notes :data-test "release-notes"}
|
||||
[:li {:on-click show-release-notes :data-test "release-notes"
|
||||
:class (stl/css :settings-item)}
|
||||
[:span {:class (stl/css :element-title)} (tr "labels.release-notes")]]
|
||||
|
||||
(when (contains? cf/flags :user-feedback)
|
||||
[:li {:class (when feedback? (stl/css :current))
|
||||
[:li {:class (stl/css-case :current feedback?
|
||||
:settings-item true)
|
||||
:on-click go-settings-feedback}
|
||||
i/feedback-refactor
|
||||
feedback-icon
|
||||
[:span {:class (stl/css :element-title)} (tr "labels.give-feedback")]])]]]))
|
||||
|
||||
(mf/defc sidebar
|
||||
|
|
|
|||
|
|
@ -7,143 +7,80 @@
|
|||
@use "common/refactor/common-refactor.scss" as *;
|
||||
|
||||
.dashboard-sidebar {
|
||||
background-color: var(--panel-background-color);
|
||||
border-right: $s-1 solid $db-quaternary;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 1 / span 2;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
height: 100%;
|
||||
margin: 0 $s-16 0 0;
|
||||
padding: $s-16 0 0 0;
|
||||
padding-block-start: $s-16;
|
||||
border-right: $s-1 solid var(--panel-border-color);
|
||||
z-index: $z-index-1;
|
||||
background-color: var(--panel-background-color);
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: transparent;
|
||||
margin: $s-12 $s-16;
|
||||
.sidebar-separator {
|
||||
border-color: transparent;
|
||||
margin: $s-12 $s-16;
|
||||
}
|
||||
|
||||
.sidebar-nav-settings {
|
||||
display: grid;
|
||||
grid-auto-rows: auto;
|
||||
margin: 0;
|
||||
overflow: unset;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.settings-item {
|
||||
--settings-foreground-color: var(--menu-foreground-color-rest);
|
||||
--settings-background-color: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $s-8 $s-8 $s-8 $s-24;
|
||||
color: var(--settings-foreground-color);
|
||||
background-color: var(--settings-background-color);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
--settings-foreground-color: var(--sidebar-element-foreground-color-hover);
|
||||
--settings-background-color: var(--sidebar-element-background-color-hover);
|
||||
}
|
||||
|
||||
&.current {
|
||||
--settings-foreground-color: var(--sidebar-element-foreground-color-selected);
|
||||
--settings-background-color: var(--sidebar-element-background-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
user-select: none;
|
||||
.feedback-icon {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--settings-foreground-color);
|
||||
margin-right: $s-8;
|
||||
}
|
||||
|
||||
&.no-overflow {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
padding: $s-8 $s-8 $s-8 $s-24;
|
||||
color: $df-secondary;
|
||||
|
||||
a {
|
||||
font-weight: $fw400;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
margin-right: $s-8;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: $fs-14;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
background-color: transparent;
|
||||
border-radius: $br-4;
|
||||
content: "";
|
||||
height: $s-24;
|
||||
margin-right: $s-8;
|
||||
width: $s-4;
|
||||
}
|
||||
|
||||
&.recent-projects {
|
||||
svg {
|
||||
fill: $df-primary;
|
||||
}
|
||||
}
|
||||
|
||||
& .edit-wrapper {
|
||||
border: $s-1 solid $df-primary;
|
||||
border-radius: $br-4;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input.element-title {
|
||||
border: 0;
|
||||
height: $s-32;
|
||||
padding: $s-6;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background-color: $df-primary;
|
||||
}
|
||||
|
||||
.element-subtitle {
|
||||
color: $df-secondary;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $db-quaternary;
|
||||
&::before {
|
||||
background-color: $df-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
background-color: $db-quaternary;
|
||||
color: $da-primary;
|
||||
|
||||
a {
|
||||
font-weight: $fw400;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: $da-tertiary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.element-title {
|
||||
@include textEllipsis;
|
||||
@include bodyMediumTypography;
|
||||
}
|
||||
|
||||
.back-to-dashboard {
|
||||
@include buttonStyle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $s-12 $s-16;
|
||||
font-size: $fs-14;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: $df-primary;
|
||||
}
|
||||
.back-text {
|
||||
color: $df-primary;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue