Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-12 06:51:23 -05:00
Code Issues Activity

redesing dashboard main-bar

Browse source
This commit is contained in:
Juan de la Cruz 2020-03-05 19:18:11 +01:00 • committed by Andrey Antukh
parent 1ce46a0ef8
commit 7d7cd1d3d6
3 changed files with 64 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/resources/styles/common/framework.scss
View file

@ -131,6 +131,22 @@
}
}
.btn-dashboard {
@extend %btn;
background-color: $color-white;
border: 1px solid $color-black;
color: $color-black;
font-size: $fs12;
font-weight: normal;
padding: $x-small $small;
&:hover {
background-color: $color-primary;
border-color: $color-primary;
color: $color-black;
}
}
input[type=button][disabled],
.btn-disabled {
opacity: .5;

43
frontend/resources/styles/main/partials/main-bar.scss
View file

@ -7,24 +7,31 @@
.main-bar {
align-items: center;
background-color: $color-gray-50;
background-color: $color-white;
border-bottom: 1px solid $color-gray-10;
display: flex;
height: 40px;
padding: $x-small $medium;
padding: $x-small $small;
position: relative;
z-index: 10;
.main-logo {
border-right: 1px solid $color-gray-10;
padding-right: $small;
padding-top: $x-small;
svg {
fill: $color-gray-20;
fill: $color-black;
height: 30px;
width: 100px;
width: 30px;
}
}
.btn-dashboard {
margin-left: auto;
}
}
.main-nav {
@ -59,16 +66,27 @@
}
.dashboard-title {
color: $color-black;
font-size: $fs15;
font-weight: normal;
margin: 0 $x-big;
}
.user-zone {
align-items: center;
border-right: 1px solid $color-gray-10;
cursor: pointer;
display: flex;
margin-left: auto;
padding: 0 $x-small 0 $small;
position: relative;
width: 180px;
span {
color: $color-gray-20;
@include text-ellipsis;
color: $color-black;
margin: $small;
font-size: $fs12;
}
img {
@ -79,9 +97,8 @@
}
.dropdown {
background-color: $color-white;
background-color: $color-gray-60;
border-radius: $br-small;
border: 1px solid $color-gray-10;
min-width: 150px;
padding: 0 $small;
position: absolute;
@ -96,23 +113,23 @@
padding: $small 0;
svg {
fill: $color-gray-40;
fill: $color-gray-20;
height: 12px;
width: 12px;
}
span {
color: $color-gray-40;
color: $color-white;
}
&:hover {
span {
color: $color-gray-60;
color: $color-primary;
}
svg {
fill: $color-gray-60;
fill: $color-primary;
}
}

34
frontend/src/uxbox/main/ui/dashboard/header.cljs
View file

@ -39,21 +39,23 @@
[:header#main-bar.main-bar
[:div.main-logo
[:& header-link {:section :dashboard-projects
:content i/logo}]]
[:ul.main-nav
[:li {:class (when projects? "current")}
[:& header-link {:section :dashboard-projects
:content (t locale "dashboard.header.projects")}]]
[:li {:class (when icons? "current")}
[:& header-link {:section :dashboard-icons
:content (t locale "dashboard.header.icons")}]]
[:li {:class (when images? "current")}
[:& header-link {:section :dashboard-images
:content (t locale "dashboard.header.images")}]]
[:li {:class (when colors? "current")}
[:& header-link {:section :dashboard-colors
:content (t locale "dashboard.header.colors")}]]]
[:& user]]))
:content i/logo-icon}]]
[:& user]
[:h1.dashboard-title "Personal"]
[:a.btn-dashboard "+ New project"]]))
; [:ul.main-nav
; [:li {:class (when projects? "current")}
; [:& header-link {:section :dashboard-projects
; :content (t locale "dashboard.header.projects")}]]
; [:& header-link {:section :dashboard-icons
; [:li {:class (when icons? "current")}
; :content (t locale "dashboard.header.icons")}]]
; [:li {:class (when images? "current")}
; [:& header-link {:section :dashboard-images
; :content (t locale "dashboard.header.images")}]]
; [:li {:class (when colors? "current")}
; [:& header-link {:section :dashboard-colors
; :content (t locale "dashboard.header.colors")}]]]]))
;; --- User Widget
@ -74,8 +76,8 @@
[:div.user-zone {:on-click #(st/emit! (rt/nav :settings-profile))
:on-mouse-enter #(reset! open true)
:on-mouse-leave #(reset! open false)}
[:span (:fullname profile)]
[:img {:src photo}]
[:span (:fullname profile)]
(when @open
[:& user-menu])]))