diff --git a/frontend/resources/styles/main/partials/main-bar-v2.scss b/frontend/resources/styles/main/partials/main-bar-v2.scss new file mode 100644 index 0000000000..387f7af7e2 --- /dev/null +++ b/frontend/resources/styles/main/partials/main-bar-v2.scss @@ -0,0 +1,121 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) 2015-2016 Andrey Antukh +// Copyright (c) 2015-2016 Juan de la Cruz + +.main-bar { + align-items: center; + background-color: $primary-ui-bg; + display: flex; + height: 60px; + padding: $x-small $medium; + position: relative; + z-index: 10; + + .main-logo { + + svg { + fill: $medium-ui-icons; + height: 40px; + width: 120px; + } + + } + +} + +.main-nav { + align-items: center; + display: flex; + height: 50px; + margin: 0 0 0 120px; + + li { + + a { + color: $soft-ui-text; + padding: 1rem; + + &:hover { + color: $intense-ui-text; + } + + } + + &.current { + + a { + color: $intense-ui-text; + } + + } + + } + +} + +.user-zone { + align-items: center; + cursor: pointer; + display: flex; + margin-left: auto; + position: relative; + + span { + color: $medium-ui-text; + margin: $small; + } + + img { + border-radius: 50%; + flex-shrink: 0; + height: 32px; + width: 32px; + } + + .dropdown { + background-color: $secondary-ui-bg; + border-radius: $br-small; + border: 1px solid $soft-ui-border; + min-width: 150px; + padding: 0 $small; + position: absolute; + top: 0; + right: 0; + width: 100%; + z-index: 12; + @include animation(0,.2s,fadeInDown); + + li { + font-size: $fs13; + padding: $small 0; + + svg { + fill: $medium-ui-text; + height: 12px; + width: 12px; + } + + span { + color: $medium-ui-text; + } + + &:hover { + + span { + color: $intense-ui-text; + } + + svg { + fill: $intense-ui-text; + } + + } + + } + + } + +} diff --git a/frontend/resources/styles/main/partials/main-bar.scss b/frontend/resources/styles/main/partials/main-bar.scss index 387f7af7e2..42432cfc07 100644 --- a/frontend/resources/styles/main/partials/main-bar.scss +++ b/frontend/resources/styles/main/partials/main-bar.scss @@ -71,8 +71,8 @@ img { border-radius: 50%; flex-shrink: 0; - height: 32px; - width: 32px; + height: 25px; + width: 25px; } .dropdown { diff --git a/frontend/resources/styles/main/partials/workspace-bar.scss b/frontend/resources/styles/main/partials/workspace-bar.scss index b88d1dcf2f..6705bb1cfb 100644 --- a/frontend/resources/styles/main/partials/workspace-bar.scss +++ b/frontend/resources/styles/main/partials/workspace-bar.scss @@ -157,67 +157,67 @@ } - .options-view { + } + + .options-view { + align-items: center; + display: flex; + justify-content: content; + margin: 0; + + li { align-items: center; display: flex; - justify-content: content; - margin: 0; + flex-shrink: 0; + height: 30px; + margin: 0 $small; + position: relative; + width: 60px; - li { - align-items: center; - display: flex; - flex-shrink: 0; - height: 30px; - margin: 0 $small; + &.zoom-input { + width: 85px; + padding: 0 25px; position: relative; - width: 60px; - &.zoom-input { - width: 85px; - padding: 0 25px; - position: relative; + .add-zoom, + .remove-zoom { + align-items: center; + border-radius: 50%; + border: 1px solid $intense-ui-border; + cursor: pointer; + color: $intense-ui-border; + display: none; + flex-shrink: 0; + font-size: $fs20; + font-weight: bold; + height: 20px; + justify-content: center; + position: absolute; + top: 5px; + width: 20px; + + &:hover { + border-color: $color-primary; + color: $color-primary; + } + + } + + .add-zoom { + left: -5px; + } + + .remove-zoom { + padding-top: 4px; + right: -5px; + } + + &:hover { .add-zoom, .remove-zoom { - align-items: center; - border-radius: 50%; - border: 1px solid $intense-ui-border; - cursor: pointer; - color: $intense-ui-border; - display: none; - flex-shrink: 0; - font-size: $fs20; - font-weight: bold; - height: 20px; - justify-content: center; - position: absolute; - top: 5px; - width: 20px; - - &:hover { - border-color: $color-primary; - color: $color-primary; - } - - } - - .add-zoom { - left: -5px; - } - - .remove-zoom { - padding-top: 4px; - right: -5px; - } - - &:hover { - - .add-zoom, - .remove-zoom { - display: flex; - @include animation(0s,.3s,fadeIn); - } - + display: flex; + @include animation(0s,.3s,fadeIn); } } @@ -281,3 +281,23 @@ } } + +.user-multi { + align-items: center; + cursor: pointer; + display: flex; + margin: 0; + + li { + margin-left: $small; + position: relative; + + img { + border: 3px solid #f3dd14; + border-radius: 50%; + flex-shrink: 0; + height: 25px; + width: 25px; + } + } +} \ No newline at end of file diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index 1b7dfa31c3..9691b061ec 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -53,12 +53,20 @@ [:header#workspace-bar.workspace-bar [:div.main-icon [:a {:on-click #(st/emit! (rt/nav :dashboard-projects))} i/logo-icon]] + [:div.project-tree-btn {:alt (tr "header.sitemap") :class (when (contains? layout :sitemap) "selected") :on-click #(st/emit! (dw/toggle-layout-flag :sitemap))} i/project-tree - [:span {} "Project name / File name / "(:name page)]] + [:span {} "Project name / File name";(:name page) + ]] + + [:ul.user-multi + [:li.tooltip.tooltip-bottom + {:alt "USER_NAME"} + [:img {:src "images/avatar.jpg"}]]] + [:div.workspace-options [:ul.options-btn [:li.tooltip.tooltip-bottom @@ -134,6 +142,7 @@ {:alt (tr "header.view-mode") ;; :on-click #(st/emit! (dw/->OpenView (:id page))) } - i/play]] - [:& zoom-widget]] - [:& user]])) + i/play]]] + ;;[:& user] + [:& zoom-widget] + ]))