3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-31 03:26:10 +02:00
Code Issues Projects Releases Packages Wiki 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
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], input[type=button][disabled],
.btn-disabled { .btn-disabled {
opacity: .5; opacity: .5;

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

@ -7,24 +7,31 @@
.main-bar { .main-bar {
align-items: center; align-items: center;
background-color: $color-gray-50; background-color: $color-white;
border-bottom: 1px solid $color-gray-10;
display: flex; display: flex;
height: 40px; height: 40px;
padding: $x-small $medium; padding: $x-small $small;
position: relative; position: relative;
z-index: 10; z-index: 10;
.main-logo { .main-logo {
border-right: 1px solid $color-gray-10;
padding-right: $small;
padding-top: $x-small; padding-top: $x-small;
svg { svg {
fill: $color-gray-20; fill: $color-black;
height: 30px; height: 30px;
width: 100px; width: 30px;
} }
} }
.btn-dashboard {
margin-left: auto;
}
} }
.main-nav { .main-nav {
@ -59,16 +66,27 @@
} }
.dashboard-title {
color: $color-black;
font-size: $fs15;
font-weight: normal;
margin: 0 $x-big;
}
.user-zone { .user-zone {
align-items: center; align-items: center;
border-right: 1px solid $color-gray-10;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
margin-left: auto; padding: 0 $x-small 0 $small;
position: relative; position: relative;
width: 180px;
span { span {
color: $color-gray-20; @include text-ellipsis;
color: $color-black;
margin: $small; margin: $small;
font-size: $fs12;
} }
img { img {
@ -79,9 +97,8 @@
} }
.dropdown { .dropdown {
background-color: $color-white; background-color: $color-gray-60;
border-radius: $br-small; border-radius: $br-small;
border: 1px solid $color-gray-10;
min-width: 150px; min-width: 150px;
padding: 0 $small; padding: 0 $small;
position: absolute; position: absolute;
@ -96,23 +113,23 @@
padding: $small 0; padding: $small 0;
svg { svg {
fill: $color-gray-40; fill: $color-gray-20;
height: 12px; height: 12px;
width: 12px; width: 12px;
} }
span { span {
color: $color-gray-40; color: $color-white;
} }
&:hover { &:hover {
span { span {
color: $color-gray-60; color: $color-primary;
} }
svg { 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 [:header#main-bar.main-bar
[:div.main-logo [:div.main-logo
[:& header-link {:section :dashboard-projects [:& header-link {:section :dashboard-projects
:content i/logo}]] :content i/logo-icon}]]
[:ul.main-nav [:& user]
[:li {:class (when projects? "current")} [:h1.dashboard-title "Personal"]
[:& header-link {:section :dashboard-projects [:a.btn-dashboard "+ New project"]]))
:content (t locale "dashboard.header.projects")}]] ; [:ul.main-nav
[:li {:class (when icons? "current")} ; [:li {:class (when projects? "current")}
[:& header-link {:section :dashboard-icons ; [:& header-link {:section :dashboard-projects
:content (t locale "dashboard.header.icons")}]] ; :content (t locale "dashboard.header.projects")}]]
[:li {:class (when images? "current")} ; [:& header-link {:section :dashboard-icons
[:& header-link {:section :dashboard-images ; [:li {:class (when icons? "current")}
:content (t locale "dashboard.header.images")}]] ; :content (t locale "dashboard.header.icons")}]]
[:li {:class (when colors? "current")} ; [:li {:class (when images? "current")}
[:& header-link {:section :dashboard-colors ; [:& header-link {:section :dashboard-images
:content (t locale "dashboard.header.colors")}]]] ; :content (t locale "dashboard.header.images")}]]
[:& user]])) ; [:li {:class (when colors? "current")}
; [:& header-link {:section :dashboard-colors
; :content (t locale "dashboard.header.colors")}]]]]))
;; --- User Widget ;; --- User Widget
@ -74,8 +76,8 @@
[:div.user-zone {:on-click #(st/emit! (rt/nav :settings-profile)) [:div.user-zone {:on-click #(st/emit! (rt/nav :settings-profile))
:on-mouse-enter #(reset! open true) :on-mouse-enter #(reset! open true)
:on-mouse-leave #(reset! open false)} :on-mouse-leave #(reset! open false)}
[:span (:fullname profile)]
[:img {:src photo}] [:img {:src photo}]
[:span (:fullname profile)]
(when @open (when @open
[:& user-menu])])) [:& user-menu])]))