From 38083b5965c15266d4330d635a991c4b3a4de66e Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Thu, 4 Aug 2016 14:49:28 +0200
Subject: [PATCH] Move grid selector to top menu

* move to top right, to bookend topologies
* hierarchically similar to search, so similar positioning

Fixes #1743
---
 client/app/scripts/components/app.js |  2 +-
 client/app/styles/main.less          | 20 +++++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index 2e24fe8f4..b324ce059 100644
--- a/client/app/scripts/components/app.js
+++ b/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>
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index f7d98859f..7daedae92 100644
--- a/client/app/styles/main.less
+++ b/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;
   }