Explorar el Código

Added vertical ellipses, played with box shadows and borders and such. Ellipses need to fade to Opacity 0 when menu is open.

Matt hace 9 años
padre
commit
4e15e61b39
Se han modificado 2 ficheros con 15 adiciones y 2 borrados
  1. 2 1
      public/app/features/dashboard/row/row.html
  2. 13 1
      public/sass/components/_row.scss

+ 2 - 1
public/app/features/dashboard/row/row.html

@@ -1,9 +1,10 @@
-<div class="dash-row-menu-container" ng-hide="dashboard.meta.fullscreen">
+<div class="dash-row-menu-container" id="dash-row-menu-container-id" ng-hide="dashboard.meta.fullscreen">
 	<ul class="dash-row-menu" role="menu" aria-labelledby="drop1">
 	<ul class="dash-row-menu" role="menu" aria-labelledby="drop1">
 		<li>
 		<li>
 			<a ng-click="ctrl.onMenuAddPanel()">
 			<a ng-click="ctrl.onMenuAddPanel()">
 				<i class="fa fa-plus"></i> Add Panel
 				<i class="fa fa-plus"></i> Add Panel
 			</a>
 			</a>
+			<i class="icon-gf icon-gf-bulk_action dash-row-menu--affordance" id="dash-row-menu--affordance-id"></i>
 		</li>
 		</li>
 		<li>
 		<li>
 			<a ng-click="ctrl.onMenuRowOptions()">
 			<a ng-click="ctrl.onMenuRowOptions()">

+ 13 - 1
public/sass/components/_row.scss

@@ -114,13 +114,15 @@
 
 
   &:hover {
   &:hover {
     left: 0px;
     left: 0px;
+    z-index: 101;
+    box-shadow: $search-shadow;
   }
   }
 }
 }
 
 
 .dash-row-menu {
 .dash-row-menu {
   list-style: none;
   list-style: none;
   li a {
   li a {
-    display: block;
+    display: inline-block;
     white-space: nowrap;
     white-space: nowrap;
     color: $text-muted;
     color: $text-muted;
     font-size: $font-size-sm;
     font-size: $font-size-sm;
@@ -132,6 +134,16 @@
   }
   }
 }
 }
 
 
+.dash-row-menu--affordance {
+  float: right;
+  font-size: 130%;
+  margin-top: 7px;
+  color: $text-color-faint;
+  margin-right: -7px;
+  opacity: 1;
+  transition: .30s opacity forwards;
+}
+
 // Legacy mode
 // Legacy mode
 .row-tab {
 .row-tab {
   .dropdown-menu-right {
   .dropdown-menu-right {