From 56aa8ae6e0d4cd86b4b66c1b02fc113acead4541 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sun, 1 Feb 2015 19:13:33 +0100
Subject: [PATCH] more design work

---
 src/app/directives/topnav.js                  |  3 --
 .../features/account/partials/account.html    | 17 ++++++-
 src/app/panels/graph/module.html              |  8 ++--
 src/app/partials/navbar.html                  |  5 ++
 src/css/less/sidemenu.less                    | 47 +++++++++++++------
 src/views/index.html                          |  5 +-
 6 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/src/app/directives/topnav.js b/src/app/directives/topnav.js
index 9228ce9fcb0..0dd497de047 100644
--- a/src/app/directives/topnav.js
+++ b/src/app/directives/topnav.js
@@ -37,9 +37,6 @@ function (angular) {
 
             '<a ng-click="titleAction()" class="top-nav-title">' +
               '{{title}}' +
-              '<span class="small" ng-show="titleAction">' +
-                '<i class="fa fa-angle-down"></i>' +
-              '</span>' +
             '</a>' +
           '</div><div ng-transclude></div></div></div></div>',
         link: function(scope, elem, attrs) {
diff --git a/src/app/features/account/partials/account.html b/src/app/features/account/partials/account.html
index 56e65c8de35..b890fee6d5c 100644
--- a/src/app/features/account/partials/account.html
+++ b/src/app/features/account/partials/account.html
@@ -1,4 +1,19 @@
-<topnav toggle="toggleSideMenu()" title="Details" icon="fa fa-shield" section="Account" show-menu-btn="!grafana.sidemenu"></topnav>
+<topnav toggle="toggleSideMenu()" icon="fa fa-shield" section="Account" show-menu-btn="!grafana.sidemenu">
+	<!-- <ul class="nav"> -->
+	<!-- 	<li> -->
+	<!-- 		<a href="asd">Details</a> -->
+	<!-- 	</li> -->
+	<!-- 	<li> -->
+	<!-- 		<a href="asd">Data Sources</a> -->
+	<!-- 	</li> -->
+	<!-- 	<li> -->
+	<!-- 		<a href="asd">Users</a> -->
+	<!-- 	</li> -->
+	<!-- 	<li> -->
+	<!-- 		<a href="asd">API Keys</a> -->
+	<!-- 	</li> -->
+	<!-- </ul> -->
+</topnav>
 
 <div class="gf-box" style="min-height: 500px">
 
diff --git a/src/app/panels/graph/module.html b/src/app/panels/graph/module.html
index 20896fc5c83..6f6b0d92a6c 100644
--- a/src/app/panels/graph/module.html
+++ b/src/app/panels/graph/module.html
@@ -24,9 +24,9 @@
 
 	<div class="clearfix"></div>
 
-	<div style="margin-top: 30px" ng-if="editMode">
-		<div class="dashboard-editor-header">
-			<div class="dashboard-editor-title">
+	<div class="gf-box" ng-if="editMode">
+		<div class="gf-box-header">
+			<div class="gf-box-title">
 				<i class="fa fa-bar-chart"></i>
 				Graph
 			</div>
@@ -37,7 +37,7 @@
 			</div>
 		</div>
 
-		<div class="dashboard-editor-body">
+		<div class="gf-box-body">
 			<div ng-repeat="tab in panelMeta.editorTabs" ng-if="editor.index === $index">
 				<div ng-include src="tab.src"></div>
 			</div>
diff --git a/src/app/partials/navbar.html b/src/app/partials/navbar.html
index 0823495755e..15c675b8d7e 100644
--- a/src/app/partials/navbar.html
+++ b/src/app/partials/navbar.html
@@ -7,6 +7,11 @@
 							section="{{pageSection}}"
 							show-menu-btn="!grafana.sidemenu">
 			</topnav>
+			<ul class="nav">
+				<li>
+					<a href="asd">Data Sources</a>
+				</li>
+			</ul>
 		</div>
 	</div>
 </div>
diff --git a/src/css/less/sidemenu.less b/src/css/less/sidemenu.less
index 5feb72df66f..95fa14fe601 100644
--- a/src/css/less/sidemenu.less
+++ b/src/css/less/sidemenu.less
@@ -1,5 +1,30 @@
+// body {
+//   position: absolute;
+//   overflow: hidden;
+//   width: 100%;
+//   height: 100%;
+// }
+
+// .sidemenu-canvas {
+//   width: 100%;
+//   height: 100%;
+//   position: relative;
+//   -webkit-transform: translateX(0);
+//   transform: translateX(0);
+//   -webkit-transition: .3s ease all;
+//   transition: .3s ease all;
+// }
+
 .sidemenu-wrapper {
+  position: absolute;
   display: none;
+  top: 0;
+  left: 0;
+  width: 200px;
+  background: @bodyBackground;
+  min-height: 100%;
+  z-index: 101;
+
   a:focus {
     text-decoration: none;
   }
@@ -8,26 +33,20 @@
 .sidemenu-open {
   .sidemenu-wrapper {
     display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 200px;
-    background: @bodyBackground;
-    min-height: 100%;
-    z-index: 101;
-  }
-
-  .dashboard-notice {
-    margin-left: 200px;
-    width: auto;
   }
 
   .main-view {
     padding-left: 200px;
   }
 
-  .panel-fullscreen {
-    left: 200px;
+  .sidemenu-canvas {
+    //-webkit-transform: translateX(200px);
+    //transform: translateX(200px);
+  }
+
+  .dashboard-notice {
+    margin-left: 200px;
+    width: auto;
   }
 }
 
diff --git a/src/views/index.html b/src/views/index.html
index e0ee9c6757d..1b315183fc6 100644
--- a/src/views/index.html
+++ b/src/views/index.html
@@ -24,10 +24,10 @@
 
   </head>
 
-  <body ng-cloak ng-controller="GrafanaCtrl">
+	<body ng-cloak ng-controller="GrafanaCtrl" ng-class="{'sidemenu-open': grafana.sidemenu}">
     <link rel="stylesheet" href="[[.AppSubUrl]]/css/grafana.light.min.css" ng-if="grafana.style === 'light'">
 
-		<div class="main-view-wrapper" ng-class="{'sidemenu-open': grafana.sidemenu}">
+		<div class="sidemenu-canvas">
 
 			<aside class="sidemenu-wrapper" ng-if="grafana.sidemenu">
 				<div ng-include="'app/partials/sidemenu.html'"></div>
@@ -44,6 +44,7 @@
 			</div>
 
 			<div ng-view class="main-view"></div>
+			</div>
 
 		</div>