Skip to content

N
nexpie-grafana-theme
Commit ef9fa7b0 by Torkel Ödegaard
Options

ux: very early start to new sidemenu

parent cdd5ba61
Showing with 31 additions and 46 deletions
public/app/core/components/navbar/navbar.html
...@@ -3,9 +3,6 @@ ...@@ -3,9 +3,6 @@
<span class="navbar-brand-btn-background"> <span class="navbar-brand-btn-background">
<img src="public/img/grafana_icon.svg"></img> <img src="public/img/grafana_icon.svg"></img>
</span> </span>
<i class="icon-gf icon-gf-grafana_wordmark"></i>
<i class="fa fa-caret-down"></i>
<i class="fa fa-chevron-left"></i>
</a> </a>
<a class="navbar-page-btn navbar-page-btn--search" ng-click="ctrl.showSearch()"> <a class="navbar-page-btn navbar-page-btn--search" ng-click="ctrl.showSearch()">
......
public/app/core/components/sidemenu/sidemenu.html
...@@ -13,7 +13,6 @@ ...@@ -13,7 +13,6 @@
<span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span> <span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
</div> </div>
</a> </a>
<i class="fa fa-caret-right"></i>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="::menuItem.cssClass"> <li ng-repeat="menuItem in ctrl.orgMenu" ng-class="::menuItem.cssClass">
<span ng-show="::menuItem.section">{{::menuItem.section}}</span> <span ng-show="::menuItem.section">{{::menuItem.section}}</span>
...@@ -42,7 +41,6 @@ ...@@ -42,7 +41,6 @@
<img ng-src="{{::item.img}}" ng-show="::item.img"> <img ng-src="{{::item.img}}" ng-show="::item.img">
</span> </span>
<span class="sidemenu-item-text">{{::item.text}}</span> <span class="sidemenu-item-text">{{::item.text}}</span>
<span class="fa fa-caret-right" ng-if="::item.children"></span>
</a> </a>
<ul class="dropdown-menu" role="menu" ng-if="::item.children"> <ul class="dropdown-menu" role="menu" ng-if="::item.children">
<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}"> <li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
......
public/sass/_variables.dark.scss
...@@ -93,6 +93,10 @@ $panel-border: solid 1px $dark-3; ...@@ -93,6 +93,10 @@ $panel-border: solid 1px $dark-3;
$panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px); $panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
$panel-menu-border: solid 1px black; $panel-menu-border: solid 1px black;
// Row
// -------------------------
$row-menu-bg: $body-bg;
$divider-border-color: #555; $divider-border-color: #555;
// Graphite Target Editor // Graphite Target Editor
...@@ -226,9 +230,8 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); ...@@ -226,9 +230,8 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
// Sidemenu // Sidemenu
// ------------------------- // -------------------------
$side-menu-bg: $body-bg; $side-menu-bg: $dark-3;
$side-menu-item-hover-bg: $dark-3; $side-menu-item-hover-bg: $dark-2;
$side-menu-opacity: 0.97;
// Pagination // Pagination
// ------------------------- // -------------------------
......
public/sass/_variables.light.scss
...@@ -100,6 +100,10 @@ $panel-border: solid 1px $gray-6; ...@@ -100,6 +100,10 @@ $panel-border: solid 1px $gray-6;
$panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px); $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
$panel-menu-border: solid 1px white; $panel-menu-border: solid 1px white;
// Row
// -------------------------
$row-menu-bg: $body-bg;
$divider-border-color: $gray-2; $divider-border-color: $gray-2;
// Graphite Target Editor // Graphite Target Editor
...@@ -182,7 +186,6 @@ $input-invalid-border-color: lighten($red, 5%); ...@@ -182,7 +186,6 @@ $input-invalid-border-color: lighten($red, 5%);
// ------------------------- // -------------------------
$side-menu-bg: $body-bg; $side-menu-bg: $body-bg;
$side-menu-item-hover-bg: $gray-6; $side-menu-item-hover-bg: $gray-6;
$side-menu-opacity: 0.97;
// search // search
$search-shadow: 0 5px 30px 0 lighten($gray-2, 30%); $search-shadow: 0 5px 30px 0 lighten($gray-2, 30%);
......
public/sass/_variables.scss
...@@ -219,7 +219,7 @@ $btn-padding-y-lg: .75rem !default; ...@@ -219,7 +219,7 @@ $btn-padding-y-lg: .75rem !default;
$btn-border-radius: 2px; $btn-border-radius: 2px;
// sidemenu // sidemenu
$side-menu-width: 14rem; $side-menu-width: 68px;
// dashboard // dashboard
$panel-margin: 0.4rem; $panel-margin: 0.4rem;
......
public/sass/components/_navbar.scss
...@@ -171,27 +171,6 @@ ...@@ -171,27 +171,6 @@
} }
} }
.sidemenu-pinned {
.navbar-brand-btn {
width: $side-menu-width;
.icon-gf-grafana_wordmark {
display: inline-block;
}
.fa-caret-down {
display: none;
}
&:hover .fa-chevron-left {
display: inline-block;
color: $text-color-weak;
position: relative;
left: 1.3rem;
}
}
}
.navbar-section-wrapper { .navbar-section-wrapper {
position: relative; position: relative;
float: left; float: left;
......
public/sass/components/_row.scss
...@@ -142,7 +142,7 @@ $dash-row-menu-animation-speed: 0.20s; ...@@ -142,7 +142,7 @@ $dash-row-menu-animation-speed: 0.20s;
list-style: none; list-style: none;
flex-grow: 1; flex-grow: 1;
box-shadow: $search-shadow; box-shadow: $search-shadow;
background: $side-menu-bg; background: $row-menu-bg;
li a { li a {
display: block; display: block;
...@@ -150,7 +150,7 @@ $dash-row-menu-animation-speed: 0.20s; ...@@ -150,7 +150,7 @@ $dash-row-menu-animation-speed: 0.20s;
color: $text-muted; color: $text-muted;
font-size: $font-size-sm; font-size: $font-size-sm;
padding: $spacer/2 $spacer; padding: $spacer/2 $spacer;
border-left: 2px solid $side-menu-bg; border-left: 2px solid $row-menu-bg;
i { i {
display: inline-block; display: inline-block;
padding-right: $spacer/2; padding-right: $spacer/2;
......
public/sass/components/_sidemenu.scss
...@@ -6,8 +6,9 @@ ...@@ -6,8 +6,9 @@
position: absolute; position: absolute;
top: 52px; top: 52px;
left: 0; left: 0;
border-top: 1px solid $navbarBorder;
width: $side-menu-width; width: $side-menu-width;
background-color: rgba($side-menu-bg,$side-menu-opacity); background-color: $side-menu-bg;
z-index: 1000; z-index: 1000;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
...@@ -31,7 +32,7 @@ ...@@ -31,7 +32,7 @@
min-height: calc(100% - 54px); min-height: calc(100% - 54px);
} }
.dashboard-container { .dashboard-container {
padding-left: $side-menu-width + 0.5rem; padding-left: $side-menu-width + 20px;
} }
.page-container { .page-container {
margin-left: $side-menu-width; margin-left: $side-menu-width;
...@@ -61,8 +62,8 @@ ...@@ -61,8 +62,8 @@
top: 0px; top: 0px;
// important to overlap it otherwise it can be hidden // important to overlap it otherwise it can be hidden
// again by the mouse getting outside the hover space // again by the mouse getting outside the hover space
left: $side-menu-width - 0.2rem; left: $side-menu-width - 5px;
background-color: rgba($side-menu-bg,$side-menu-opacity); background-color: $side-menu-bg;
@include animation('dropdown-anim 150ms ease-in-out 100ms forwards'); @include animation('dropdown-anim 150ms ease-in-out 100ms forwards');
z-index: -9999; z-index: -9999;
} }
...@@ -118,10 +119,22 @@ ...@@ -118,10 +119,22 @@
padding: 0px 10px 0px 10px; padding: 0px 10px 0px 10px;
display: block; display: block;
border-left: 1px solid transparent; border-left: 1px solid transparent;
position: relative;
.sidemenu-item-text { .sidemenu-item-text {
padding-left: 11px; padding-left: 11px;
position: absolute;
display: none;
opacity: 0;
}
&:hover {
.sidemenu-item-text {
display: block;
opacity: 1;
transition: opacity 150ms ease-in-out;
}
} }
img { img {
...@@ -132,15 +145,6 @@ ...@@ -132,15 +145,6 @@
} }
} }
.sidemenu-section-tagline {
font-style: italic;
line-height: 10px;
}
.sidemenu-section-text-wrapper {
padding-top: 4px;
}
.sidemenu-org-section .dropdown-menu-title { .sidemenu-org-section .dropdown-menu-title {
margin: 0 10px 0 6px; margin: 0 10px 0 6px;
padding: 7px 0 7px; padding: 7px 0 7px;
...@@ -215,6 +219,7 @@ ...@@ -215,6 +219,7 @@
.sidemenu-org-details { .sidemenu-org-details {
padding-left: 10px; padding-left: 10px;
color: $link-color; color: $link-color;
display: none;
} }
.sidemenu-org-name { .sidemenu-org-name {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment