ux(viewmode): refining view mode #6476

public/app/features/playlist/partials/playlists.html

@@ -15,9 +15,8 @@
       <th><strong>Name</strong></th>
       <th><strong>Start url</strong></th>
       <th style="width: 68px"></th>
-      <th style="width: 68px"></th>
+      <th style="width: 78px"></th>
       <th style="width: 25px"></th>
-
     </thead>
     <tr ng-repeat="playlist in ctrl.playlists">
       <td>

public/sass/_grafana.scss

@@ -88,3 +88,4 @@
 
 
 @import "old_responsive";
+@import "components/view_states.scss";

public/sass/components/_view_states.scss

@@ -0,0 +1,86 @@
+@mixin hide-controls() {
+  .add-row-panel-hint,
+  .dash-row-menu-container {
+    display: none;
+  }
+  .resize-panel-handle,
+  .panel-drop-zone {
+    visibility: hidden;
+  }
+}
+
+.playlist-active {
+  @include hide-controls();
+
+  .navbar-inner {
+    background: transparent;
+  }
+  .navbar-brand-btn,
+  .navbar-page-btn {
+    border: none;
+    background: transparent;
+    .fa, .icon-gf {
+      opacity: 0;
+    }
+  }
+
+  .dashnav-refresh-action,
+  .dashnav-zoom-out,
+  .dashnav-action-icons,
+  .dashnav-move-timeframe  {
+    display: none;
+  }
+
+  .dash-playlist-actions {
+    a {
+      color: $text-color-faint !important;
+    }
+  }
+}
+
+.hide-controls {
+  @include hide-controls();
+}
+
+.page-kiosk-mode {
+  @include hide-controls();
+  dashnav {
+    display: none;
+  }
+}
+
+.user-activity-low {
+  .add-row-panel-hint,
+  .dash-row-menu-container,
+  .resize-panel-handle,
+  .panel-drop-zone
+  .dashnav-refresh-action,
+  .dashnav-zoom-out,
+  .dashnav-action-icons,
+  .dashnav-move-timeframe  {
+    opacity: 0;
+    transition: opacity 1.5s ease-in-out;
+  }
+
+  // navbar buttons
+  .navbar-brand-btn,
+  .navbar-inner {
+    border: none;
+    background: transparent;
+    transition: background 1.5s ease-in-out;
+    .fa {
+      opacity: 0;
+      transition: opacity 1.5s ease-in-out;
+    }
+  }
+  .navbar-page-btn {
+    border: none;
+    margin-left: -35px;
+    background: transparent;
+    transition: margin-left 1.5s ease-in-out;
+    .icon-gf {
+      opacity: 0;
+      transition: opacity 1.5s ease-in-out;
+    }
+  }
+}

public/sass/mixins/_mixins.scss

@@ -352,13 +352,4 @@
   border-bottom: 1px solid transparent;
 }
 
-@mixin hide-controls() {
+
-  .add-row-panel-hint,
-  .dash-row-menu {
-    display: none;
-  }
-  .resize-panel-handle,
-  .panel-drop-zone {
-    visibility: hidden;
-  }
-}

public/sass/pages/_dashboard.scss

@@ -13,58 +13,7 @@
   color: $variable;
 }
 
-.playlist-active {
-  @include hide-controls();
 
-  .dashnav-refresh-action,
-  .dashnav-zoom-out,
-  .dashnav-action-icons,
-  .dashnav-move-timeframe  {
-    display: none;
-  }
-
-  .grafana-menu-stop-playlist {
-    display: list-item;
-  }
-}
-
-.hide-controls {
-  @include hide-controls();
-}
-
-.page-kiosk-mode {
-  @include hide-controls();
-  dashnav {
-    display: none;
-  }
-}
-
-.user-activity-low {
-  @include hide-controls();
-  .dashnav-refresh-action,
-  .dashnav-zoom-out,
-  .dashnav-action-icons,
-  .dashnav-move-timeframe  {
-    opacity: 0;
-    transition: opacity 1.5s ease-in-out;
-  }
-
-  // navbar buttons
-  .navbar-inner {
-    background: transparent;
-    transition: background 1.5s ease-in-out;
-  }
-  .navbar-brand-btn,
-  .navbar-page-btn {
-    border: none;
-    background: transparent;
-    .fa, .icon-gf {
-      opacity: 0;
-      transition: opacity 1s ease-in-out;
-      transition: opacity 1.5s ease-in-out;
-    }
-  }
-}
 
 div.flot-text {
   color: $text-color !important;