Merged trent's styles and added admin submenu

pkg/api/index.go

@@ -105,6 +105,12 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 			Text: "Admin",
 			Icon: "fa fa-fw fa-cogs",
 			Url:  setting.AppSubUrl + "/admin",
+			Children: []*dtos.NavLink{
+				{Text: "Global Users", Icon: "fa fa-fw fa-cogs", Url: setting.AppSubUrl + "/admin/users"},
+				{Text: "Global Orgs", Icon: "fa fa-fw fa-cogs", Url: setting.AppSubUrl + "/admin/orgs"},
+				{Text: "Server Settings", Icon: "fa fa-fw fa-cogs", Url: setting.AppSubUrl + "/admin/settings"},
+				{Text: "Server Stats", Icon: "fa-fw fa-cogs", Url: setting.AppSubUrl + "/admin/stats"},
+			},			
 		})
 	}
 

public/app/core/components/sidemenu/sidemenu.html

@@ -3,7 +3,8 @@
 	<li class="sidemenu-org-section" ng-if="ctrl.isSignedIn" class="dropdown">
 		<div class="sidemenu-org">
 			<div class="sidemenu-org-avatar">
-				<img ng-src="{{ctrl.user.gravatarUrl}}">
+				<img ng-if="ctrl.user.gravatarURL" ng-src="{{ctrl.user.gravatarUrl}}">
+				<span class="no-avatar h2" ng-if!="ctrl.user.gravatarURL">?</span>
 			</div>
 			<div class="sidemenu-org-details">
 				<span class="sidemenu-org-user sidemenu-item-text">{{ctrl.user.name}}</span>

public/app/features/apps/partials/list.html

@@ -2,14 +2,14 @@
 </navbar>
 
 <div class="page-container">
-  <div class="page-wide">
+  <div class="page-header">
     <h1>Plugins</h1>
+    </div>
+	<div ng-if="!ctrl.apps">
+		<em>No apps defined</em>
+	</div>
 
-		<div ng-if="!ctrl.apps">
-			<em>No apps defined</em>
-		</div>
-
-		<ul class="filter-list">
+	<ul class="filter-list">
       <li ng-repeat="app in ctrl.apps">
         <ul class="filter-list-card">
 					<li class="filter-list-card-image">
@@ -43,6 +43,5 @@
           </li>
         </ul>
       </li>
-		</ul>
-	</div>
+	</ul>
 </div>

public/app/features/apps/partials/page.html

@@ -1,14 +1,13 @@
-<navbar icon="fa fa-fw fa-cubes" title="{{ctrl.appModel.name}}" title-url="apps/{{ctrl.appId}}/edit">
+<navbar icon="icon-gf icon-gf-apps" title="{{ctrl.appModel.name}}" title-url="apps/{{ctrl.appId}}/edit">
 </navbar>
 
 <div class="page-container">
-	<div class="page-wide">
+	<div class="page-header">
 		<h1>{{ctrl.page.name}}</h1>
+	</div>
 
-		<div ng-if="ctrl.page">
-			<plugin-component type="app-page">
-			</plugin-component>
-		</div>
-
+	<div ng-if="ctrl.page">
+		<plugin-component type="app-page">
+		</plugin-component>
 	</div>
 </div>

public/app/features/datasources/partials/list.html

@@ -33,7 +33,7 @@
 				<tr ng-repeat="ds in ctrl.datasources">
 					<td>
 						<a href="datasources/edit/{{ds.id}}">
-							<i class="fa fa-database"></i> &nbsp; {{ds.name}}
+							<i class="icon-gf inline-icon-gf icon-gf-datasources"></i> &nbsp; {{ds.name}}
 						</a>
 					</td>
 					<td>
@@ -41,7 +41,7 @@
 					</td>
 					<td class="text-center">
 						<span ng-if="ds.isDefault">
-							<span class="label label-info">default</span>
+							<span class="btn btn-secondary btn-mini">default</span>
 						</span>
 					</td>
 					<td class="text-right">

public/app/partials/login.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="login-container container">
 
 	<div class="login-box">
 

public/sass/_variables.dark.scss

@@ -50,6 +50,7 @@ $critical:              #ed2e18;
 // -------------------------
 $body-bg:  			   rgb(20,20,20);
 $page-bg:  			   $dark-2;
+$pageImageUrl: 		   '../img/angle_gradient_rev.png';
 $body-color:   		   $gray-4;
 $text-color:   	       $gray-4;
 
@@ -74,6 +75,7 @@ $hr-border-color: rgba(0,0,0,.1) !default;
 $component-active-color: #fff !default;
 $component-active-bg:    $brand-primary !default;
 
+
 // Panel
 // -------------------------
 $panel-bg: 				 $dark-2;
@@ -117,6 +119,9 @@ $table-border:                $dark-3; // table and cell border
 $btn-primary-bg:              $brand-primary;
 $btn-primary-bg-hl:           lighten($brand-primary, 8%);
 
+$btn-secondary-bg:            $blue-dark;
+$btn-secondary-bg-hl:         lighten($blue-dark, 8%);
+
 $btn-info-bg:                 lighten($purple, 3%);
 $btn-info-bg-hl:     		  darken($purple, 3%);
 

public/sass/_variables.light.scss

@@ -54,8 +54,9 @@ $critical:              #EC2128;
 // Scaffolding
 // -------------------------
 
-$body-bg:  		  $white;
-$page-bg:  		  $white;
+$body-bg:  		$white;
+$page-bg:  		$white;
+$pageImageUrl: 	'../img/angle_gradient_light_rev.png';
 $body-color:    $gray-1;
 $text-color:    $gray-1;
 
@@ -80,6 +81,7 @@ $hr-border-color: $dark-3 !default;
 $component-active-color: $white !default;
 $component-active-bg:    $brand-primary !default;
 
+
 // Panel
 // -------------------------
 
@@ -125,6 +127,9 @@ $scrollbarBorder:       $gray-4;
 $btn-primary-bg:        $brand-primary;
 $btn-primary-bg-hl:     lighten($brand-primary, 8%);
 
+$btn-secondary-bg:      $blue-dark;
+$btn-secondary-bg-hl:   lighten($blue-dark, 8%);
+
 $btn-info-bg:           lighten($purple, 3%);
 $btn-info-bg-hl:        darken($purple, 3%);
 

public/sass/base/_fonts.scss

@@ -24,6 +24,14 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.inline-icon-gf {
+    vertical-align: middle;
+}
+
+
+
+
+
 .icon-gf-raintank_wordmark:before {
     content: "\e600";
 }

public/sass/components/_buttons.scss

@@ -73,6 +73,9 @@
 .btn-primary {
   @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
 }
+.btn-secondary {
+  @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
+}
 // Warning appears are orange
 .btn-warning {
   @include buttonBackground($btn-warning-bg, $btn-warning-bg-hl);

public/sass/components/_dashboard.scss

@@ -281,7 +281,7 @@ div.flot-text {
     border-top: 0;
     border-right: 0;
     border-left: 0;
-    border-bottom: 2px solid transparent;
+    border-bottom: 1px solid transparent;
     padding: 1.2rem .5rem .4rem .5rem;
   }
 }

public/sass/components/_sidemenu.scss

@@ -189,6 +189,15 @@
 
 .sidemenu-org-avatar {
   width: 44px;
+  background-color: $gray-2;
+  border-radius: 50%;
+  .no-avatar {
+    color: $text-color;
+    text-shadow: 0 1px 0 $dark-1;
+    padding-left: 17px;
+    position: relative;
+    top:  5px;
+  }
 }
 
 .sidemenu-org-avatar > img {

public/sass/layout/_page.scss

@@ -20,6 +20,10 @@
 
 .page-container {
   background-color: $page-bg;
+  background-image: url($pageImageUrl); /* this is an experiment */
+  background-position: left;
+  background-size: 60%;
+  background-repeat: no-repeat;
   position: relative;
   padding: ($spacer * 2) ($spacer * 4);
   max-width: 1060px;
@@ -30,7 +34,6 @@
 
 .page-header {
   padding: $spacer 0 $spacer/2 0;
-
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
@@ -40,7 +43,7 @@
   border-top: 0;
   border-right: 0;
   border-left: 0;
-  border-bottom: 2px solid transparent;
+  border-bottom: 1px solid transparent;
 
   h1 {
     font-style: italic;

public/sass/pages/_login.scss

@@ -1,3 +1,13 @@
+.login-container {
+  background-image: url($pageImageUrl); /* this is an experiment */
+  background-position: left;
+  background-size: 60%;
+  background-repeat: no-repeat;
+  min-width: 100%;
+  margin-left: 0;
+  margin-top: -26px; /* BAD HACK - experiement to see how it looks */
+  padding-top: $spacer * 5; /* BAD HACK - experiement to see how it looks */
+}
 
 .login-form {
   display: inline-block;
@@ -6,11 +16,12 @@
 
 .login-box {
   max-width: 700px;
-  margin: $spacer * 2 auto 0 auto;
+  margin: 0 auto; /* was $spacer * 2 auto 0 auto; */
 }
 
 .login-box-logo {
   text-align: center;
+  margin-bottom: $spacer * 2;
   img {
     width: 6rem;
   }
@@ -173,7 +184,7 @@
       width: 125px;
     }
     .icon-gf-grafana_wordmark {
-      top: -90px;
+      top: -5px;
       font-size: 3rem;
     }
   }