0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 01:01:30 -05:00

♻️ Unnest scss rules in dashboard settings

This commit is contained in:
Eva Marco 2024-03-07 11:09:03 +01:00 committed by Andrey Antukh
parent cfffb1e551
commit 47df285500
2 changed files with 74 additions and 128 deletions

View file

@ -23,6 +23,9 @@
(def ^:private arrow-icon (def ^:private arrow-icon
(i/icon-xref :arrow-refactor (stl/css :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 (def ^:private go-settings-profile
#(st/emit! (rt/nav :settings-profile))) #(st/emit! (rt/nav :settings-profile)))
@ -64,43 +67,49 @@
[:div {:class (stl/css :sidebar-content)} [:div {:class (stl/css :sidebar-content)}
[:div {:class (stl/css :sidebar-content-section)} [:div {:class (stl/css :sidebar-content-section)}
[:div {:class (stl/css :back-to-dashboard) [:button {:class (stl/css :back-to-dashboard)
:on-click go-dashboard} :on-click go-dashboard}
arrow-icon 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)} [:div {:class (stl/css :sidebar-content-section)}
[:ul {:class (stl/css :sidebar-nav :no-overflow)} [:ul {:class (stl/css :sidebar-nav-settings)}
[:li {:class (when profile? (stl/css :current)) [:li {:class (stl/css-case :current profile?
:settings-item true)
:on-click go-settings-profile} :on-click go-settings-profile}
[:span {:class (stl/css :element-title)} (tr "labels.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} :on-click go-settings-password}
[:span {:class (stl/css :element-title)} (tr "labels.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 :on-click go-settings-options
:data-test "settings-profile"} :data-test "settings-profile"}
[:span {:class (stl/css :element-title)} (tr "labels.settings")]] [:span {:class (stl/css :element-title)} (tr "labels.settings")]]
(when (contains? cf/flags :access-tokens) (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 :on-click go-settings-access-tokens
:data-test "settings-access-tokens"} :data-test "settings-access-tokens"}
[:span {:class (stl/css :element-title)} (tr "labels.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")]] [:span {:class (stl/css :element-title)} (tr "labels.release-notes")]]
(when (contains? cf/flags :user-feedback) (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} :on-click go-settings-feedback}
i/feedback-refactor feedback-icon
[:span {:class (stl/css :element-title)} (tr "labels.give-feedback")]])]]])) [:span {:class (stl/css :element-title)} (tr "labels.give-feedback")]])]]]))
(mf/defc sidebar (mf/defc sidebar

View file

@ -7,143 +7,80 @@
@use "common/refactor/common-refactor.scss" as *; @use "common/refactor/common-refactor.scss" as *;
.dashboard-sidebar { .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-column: 1 / span 2;
grid-row: 1 / span 2; grid-row: 1 / span 2;
display: grid;
grid-template-rows: 1fr auto;
height: 100%; height: 100%;
margin: 0 $s-16 0 0; padding-block-start: $s-16;
padding: $s-16 0 0 0; border-right: $s-1 solid var(--panel-border-color);
z-index: $z-index-1; z-index: $z-index-1;
background-color: var(--panel-background-color);
} }
.sidebar-content { .sidebar-content {
display: flex; display: grid;
flex-direction: column; grid-template-rows: auto auto 1fr;
height: 100%; height: 100%;
overflow-y: auto;
padding: 0; padding: 0;
overflow-y: auto;
}
hr { .sidebar-separator {
border-color: transparent; border-color: transparent;
margin: $s-12 $s-16; margin: $s-12 $s-16;
} }
}
.sidebar-nav { .sidebar-nav-settings {
display: flex; display: grid;
flex-direction: column; grid-auto-rows: auto;
margin: 0; margin: 0;
overflow-y: auto;
user-select: none;
&.no-overflow {
overflow: unset; overflow: unset;
user-select: none;
} }
li { .settings-item {
--settings-foreground-color: var(--menu-foreground-color-rest);
--settings-background-color: transparent;
display: flex;
align-items: center; align-items: center;
cursor: pointer;
display: flex;
flex-shrink: 0;
padding: $s-8 $s-8 $s-8 $s-24; padding: $s-8 $s-8 $s-8 $s-24;
color: $df-secondary; color: var(--settings-foreground-color);
background-color: var(--settings-background-color);
a { cursor: pointer;
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 { &:hover {
background-color: $db-quaternary; --settings-foreground-color: var(--sidebar-element-foreground-color-hover);
&::before { --settings-background-color: var(--sidebar-element-background-color-hover);
background-color: $df-primary;
}
} }
&.current { &.current {
background-color: $db-quaternary; --settings-foreground-color: var(--sidebar-element-foreground-color-selected);
color: $da-primary; --settings-background-color: var(--sidebar-element-background-color-selected);
}
a {
font-weight: $fw400;
color: currentColor;
} }
&::before { .feedback-icon {
background-color: $da-tertiary; @extend .button-icon-small;
} stroke: var(--settings-foreground-color);
} margin-right: $s-8;
} }
.element-title {
@include textEllipsis;
@include bodyMediumTypography;
} }
.back-to-dashboard { .back-to-dashboard {
@include buttonStyle;
display: flex; display: flex;
align-items: center; align-items: center;
padding: $s-12 $s-16; padding: $s-12 $s-16;
font-size: $fs-14; font-size: $fs-14;
cursor: pointer;
.text {
color: $df-primary;
} }
.back-text {
color: $df-primary;
} }
.arrow-icon { .arrow-icon {