Sfoglia il codice sorgente

ux(): added on hover chevron to pinned brand button

Torkel Ödegaard 9 anni fa
parent
commit
9d3d0912e5

+ 1 - 0
public/app/core/components/navbar/navbar.html

@@ -5,6 +5,7 @@
 		</span>
 		</span>
 		<i class="icon-gf icon-gf-grafana_wordmark"></i>
 		<i class="icon-gf icon-gf-grafana_wordmark"></i>
 		<i class="fa fa-caret-down"></i>
 		<i class="fa fa-caret-down"></i>
+		<i class="fa fa-chevron-left"></i>
 	</a>
 	</a>
 
 
 	<a href="{{::ctrl.titleUrl}}" class="navbar-page-btn" ng-show="ctrl.title">
 	<a href="{{::ctrl.titleUrl}}" class="navbar-page-btn" ng-show="ctrl.title">

+ 25 - 5
public/sass/components/_navbar.scss

@@ -68,6 +68,9 @@
   .fa-caret-down {
   .fa-caret-down {
     font-size: 70%;
     font-size: 70%;
   }
   }
+  .fa-chevron-left{
+    display: none;
+  }
 
 
   &:hover {
   &:hover {
     background: $navbarButtonBackgroundHighlight;
     background: $navbarButtonBackgroundHighlight;
@@ -122,11 +125,6 @@
     padding-left: 0.2rem;
     padding-left: 0.2rem;
   }
   }
 
 
-  .fa-th-large {
-    position: relative;
-    top: 2px;
-  }
-
   .icon-gf {
   .icon-gf {
     position: relative;
     position: relative;
     top: 2px;
     top: 2px;
@@ -135,3 +133,25 @@
   }
   }
 }
 }
 
 
+.sidemenu-pinned {
+  .navbar-brand-btn {
+    background-color: $page-bg;
+    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;
+    }
+  }
+}
+

+ 0 - 11
public/sass/components/_sidemenu.scss

@@ -35,17 +35,6 @@
   .page-container {
   .page-container {
     margin-left: $side-menu-width;
     margin-left: $side-menu-width;
   }
   }
-  .navbar-brand-btn {
-    background-color: $page-bg;
-    width: $side-menu-width;
-
-    .icon-gf-grafana_wordmark  {
-      display: inline-block;
-    }
-    .fa {
-      display: none;
-    }
-  }
   .search-container {
   .search-container {
     left: auto;
     left: auto;
   }
   }