refactor dashboard sidebar

This commit is contained in:
Juan de la Cruz 2020-03-09 11:54:35 +01:00 committed by Andrey Antukh
parent 7d7cd1d3d6
commit 47de756080
3 changed files with 46 additions and 11 deletions

View file

@ -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;

View file

@ -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;

View file

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