Merge pull request #1753 from weaveworks/1743-grid-selector-position

Move grid selector to top menu

client/app/scripts/components/app.js

@@ -124,6 +124,7 @@ class App extends React.Component {
           </div>
           <Search />
           <Topologies />
+          <GridModeSelector />
         </div>
 
         <Nodes />
@@ -131,7 +132,6 @@ class App extends React.Component {
         <Sidebar classNames={gridMode ? 'sidebar-gridmode' : ''}>
           {showingMetricsSelector && !gridMode && <MetricSelector />}
           {showingNetworkSelector && !gridMode && <NetworkSelector />}
-          <GridModeSelector />
           <Status />
           <TopologyOptions />
         </Sidebar>

client/app/styles/main.less

@@ -1175,6 +1175,24 @@ h2 {
   }
 }
 
+.grid-mode-selector {
+  margin-top: 8px;
+  margin-left: 8px;
+
+  &-wrapper {
+    border-color: @background-darker-secondary-color;
+  }
+
+  &-action {
+    background-color: transparent;
+    text-transform: uppercase;
+
+    &-selected, &:hover {
+      background-color: @background-darker-secondary-color;
+    }
+  }
+}
+
 .topology-option {
   &-action {
     &-selected {
@@ -1253,7 +1271,7 @@ h2 {
   transition: width 0.3s 0s @base-ease;
 
   &-wrapper {
-    flex: 0 1 25%;
+    flex: 0 1 20%;
     margin: 8px;
     text-align: right;
   }