mirror of
https://github.com/penpot/penpot.git
synced 2025-07-26 10:57:20 +02:00
refactor dashboard sidebar
This commit is contained in:
parent
7d7cd1d3d6
commit
47de756080
3 changed files with 46 additions and 11 deletions
|
@ -65,8 +65,9 @@
|
||||||
background: $color-gray-50;
|
background: $color-gray-50;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 28px;
|
height: 22px;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
|
width: 22px;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: $color-gray-30;
|
fill: $color-gray-30;
|
||||||
|
|
|
@ -60,11 +60,20 @@
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
padding: $small $medium;
|
padding: $medium $small;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
border-radius: 3px;
|
||||||
|
fill: $color-black;
|
||||||
|
height: 24px;
|
||||||
|
margin-right: $small;
|
||||||
|
padding: $x-small;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
span.element-title {
|
span.element-title {
|
||||||
color: $color-gray-60;
|
color: $color-gray-60;
|
||||||
|
@ -76,7 +85,15 @@
|
||||||
|
|
||||||
&.recent-projects {
|
&.recent-projects {
|
||||||
border-top: 1px solid $color-gray-10;
|
border-top: 1px solid $color-gray-10;
|
||||||
border-bottom: 1px solid $color-gray-10;
|
|
||||||
|
svg {
|
||||||
|
background-color: $color-black;
|
||||||
|
fill: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: $fs15;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input.element-title {
|
input.element-title {
|
||||||
|
@ -110,6 +127,10 @@
|
||||||
|
|
||||||
&.current {
|
&.current {
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $color-black;
|
||||||
|
}
|
||||||
|
|
||||||
span.element-title,
|
span.element-title,
|
||||||
.element-subtitle {
|
.element-subtitle {
|
||||||
color: $color-gray-60;
|
color: $color-gray-60;
|
||||||
|
@ -151,8 +172,8 @@
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: $color-gray-60;
|
fill: $color-gray-60;
|
||||||
height: 16px;
|
height: 13px;
|
||||||
width: 16px;
|
width: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -182,12 +203,18 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:focus-within {
|
||||||
|
border-color: $color-black;
|
||||||
|
}
|
||||||
|
|
||||||
.clear-search {
|
.clear-search {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 28px;
|
height: 22px;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
|
width: 22px;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: $color-gray-30;
|
fill: $color-gray-30;
|
||||||
|
|
|
@ -200,15 +200,22 @@
|
||||||
[:ul.library-elements
|
[:ul.library-elements
|
||||||
[:li.recent-projects #_{:on-click #(st/emit! (udp/go-to-project nil))
|
[:li.recent-projects #_{:on-click #(st/emit! (udp/go-to-project nil))
|
||||||
:class-name (when (nil? id) "current")}
|
:class-name (when (nil? id) "current")}
|
||||||
[:span.element-title "Recent"]]
|
i/user
|
||||||
|
[:span.element-title "Personal"]]
|
||||||
|
|
||||||
[:li.recent-projects {:on-click #(st/emit! (udp/go-to-project nil))
|
[:li {:on-click #(st/emit! (udp/go-to-project nil))
|
||||||
:class-name (when (nil? id) "current")}
|
:class-name (when (nil? id) "current")}
|
||||||
|
i/file-html
|
||||||
[:span.element-title "Drafts"]]
|
[:span.element-title "Drafts"]]
|
||||||
|
|
||||||
|
[:li {:on-click #(st/emit! (udp/go-to-project nil))
|
||||||
|
:class-name (when (nil? id) "current")}
|
||||||
|
i/icon-set
|
||||||
|
[:span.element-title "Libraries"]]
|
||||||
|
|
||||||
[:div.projects-row
|
[:div.projects-row
|
||||||
[:span "PROJECTS/TEAMS TODO"]
|
[:span "PROJECTS"]
|
||||||
#_[:a.add-project {:on-click #(st/emit! udp/create-project)}
|
[:a.add-project {:on-click #(st/emit! udp/create-project)}
|
||||||
i/close]]
|
i/close]]
|
||||||
|
|
||||||
#_(for [item projects]
|
#_(for [item projects]
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue