ux(): worked more on new tabs view

pkg/api/dataproxy.go

@@ -64,20 +64,12 @@ func NewReverseProxy(ds *m.DataSource, proxyPath string, targetUrl *url.URL) *ht
 	return &httputil.ReverseProxy{Director: director}
 }
 
-var dsMap map[int64]*m.DataSource = make(map[int64]*m.DataSource)
-
 func getDatasource(id int64, orgId int64) (*m.DataSource, error) {
-	// ds, exists := dsMap[id]
-	// if exists && ds.OrgId == orgId {
-	// 	return ds, nil
-	// }
-
 	query := m.GetDataSourceByIdQuery{Id: id, OrgId: orgId}
 	if err := bus.Dispatch(&query); err != nil {
 		return nil, err
 	}
 
-	dsMap[id] = &query.Result
 	return &query.Result, nil
 }
 

public/app/features/dashboard/dashnav/dashnav.ts

@@ -12,6 +12,8 @@ export class DashNavCtrl {
     $scope.init = function() {
       $scope.onAppEvent('save-dashboard', $scope.saveDashboard);
       $scope.onAppEvent('delete-dashboard', $scope.deleteDashboard);
+      $scope.onAppEvent('export-dashboard', $scope.snapshot);
+      $scope.onAppEvent('quick-snapshot', $scope.quickSnapshot);
 
       $scope.showSettingsMenu = $scope.dashboardMeta.canEdit || $scope.contextSrv.isEditor;
 
@@ -52,6 +54,10 @@ export class DashNavCtrl {
       });
     };
 
+    $scope.quickSnapshot = function() {
+      $scope.shareDashboard(1);
+    };
+
     $scope.openSearch = function() {
       $scope.appEvent('show-dash-search');
     };

public/app/features/dashboard/keybindings.js

@@ -60,6 +60,14 @@ function(angular, $) {
         scope.appEvent('zoom-out', evt);
       }, { inputDisabled: true });
 
+      keyboardManager.bind('ctrl+e', function(evt) {
+        scope.appEvent('export-dashboard', evt);
+      }, { inputDisabled: true });
+
+      keyboardManager.bind('ctrl+i', function(evt) {
+        scope.appEvent('quick-snapshot', evt);
+      }, { inputDisabled: true });
+
       keyboardManager.bind('esc', function() {
         var popups = $('.popover.in');
         if (popups.length > 0) {

public/app/features/dashboard/partials/graphiteImport.html

@@ -1,21 +1,21 @@
 <div ng-controller="GraphiteImportCtrl" ng-init="init()">
 
 	<div ng-if="datasources.length > 0">
-		<h2 style="margin-top: 30px;">Load dashboard from Graphite-Web</h2>
+		<h2 class="page-heading">Load dashboard from Graphite-Web</h2>
 
 		<div class="gf-form-group">
 			<div class="gf-form-inline">
 				<div class="gf-form">
 					<span class="gf-form-label width-10">Data source</span>
 				</div>
-				<div class="gf-form width-30">
+				<div class="gf-form">
 					<div class="gf-form-select-wrapper">
-						<select type="text" ng-model="options.sourceName" class="gf-form-input max-width-10" ng-options="f for f in datasources">
+						<select type="text" ng-model="options.sourceName" class="gf-form-input gf-size-auto" ng-options="f for f in datasources">
 						</select>
 					</div>
 				</div>
 				<div class="gf-form">
-					<button class="btn btn-inverse pull-right" ng-click="listAll()">List dashboards</button>
+					<button class="btn btn-success pull-right" ng-click="listAll()">List dashboards</button>
 				</div>
 			</div>
 		</div>

public/app/features/dashboard/partials/shareModal.html

@@ -35,53 +35,30 @@
 
 	<div ng-include src="'shareLinkOptions.html'"></div>
 
-	<div class="gf-form">
-		<div class="gf-form-row">
-			<span class="gf-fluid-input">
-				<textarea rows="5" data-share-panel-url class="input" ng-model='iframeHtml'></textarea>
-			</span>
+	<div class="gf-form-group position-center">
+		<div class="gf-form width-30" >
+			<textarea rows="5" data-share-panel-url class="gf-form-input width-30" ng-model='iframeHtml'></textarea>
+		</div>
+	</div>
+	<div class="gf-form-group">
+		<div class="gf-form position-center">
+			<button class="btn btn-inverse" data-clipboard-text="{{iframeHtml}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
 		</div>
-		<button class="btn btn-inverse" data-clipboard-text="{{iframeHtml}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
 	</div>
 </script>
 
 <script type="text/ng-template" id="shareLinkOptions.html">
-	<div class="editor-row" style="margin: 11px 20px 33px 20px">
-		<div class="section">
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 170px;">
-						<label class="checkbox-label" for="options.forCurrent">Current time range</label>
-					</li>
-					<li class="tight-form-item last">
-						<input class="cr1" id="options.forCurrent" type="checkbox" ng-model="options.forCurrent" ng-checked="options.forCurrent" ng-change="buildUrl()">
-						<label for="options.forCurrent" class="cr1"></label>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 170px">
-						<label class="checkbox-label" for="options.includeTemplateVars">Include template variables</label>
-					</li>
-					<li class="tight-form-item last">
-						<input class="cr1" id="options.includeTemplateVars" type="checkbox" ng-model="options.includeTemplateVars" ng-checked="options.includeTemplateVars" ng-change="buildUrl()">
-						<label for="options.includeTemplateVars" class="cr1"></label>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 170px">
-						Theme
-					</li>
-					<li>
-						<select class="input-small tight-form-input last" style="width: 211px" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
+	<div class="gf-form-group position-center">
+		<div class="gf-form">
+			<editor-checkbox text="Current time range" model="options.forCurrent" change="updated()"></editor-checkbox>
+		</div>
+		<div class="gf-form">
+			<editor-checkbox text="Include template variables" model="options.includeTemplateVars" change="updated()"></editor-checkbox>
+		</div>
+		<div class="gf-form">
+			<span class="gf-form-label">Theme</span>
+			<div class="gf-form-select-wrapper max-width-10">
+				<select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
 			</div>
 		</div>
 	</div>
@@ -93,14 +70,19 @@
 	</div>
 
 	<div ng-include src="'shareLinkOptions.html'"></div>
-	<div class="gf-form">
-		<div class="gf-form-row">
-			<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
-			<span class="gf-fluid-input">
-				<input type="text" data-share-panel-url class="input" ng-model='shareUrl'></input>
-			</span>
+	<div class="gf-form-group position-center">
+		<div class="gf-form-inline">
+
+			<div class="gf-form width-30">
+				<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
+			</div>
+			<div class="gf-form pull-right">
+				<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
+			</div>
 		</div>
-		<div class="editor-row" style="margin-top: 5px;" ng-show="modeSharePanel">
+	</div>
+	<div class="gf-form-group">
+		<div class="gf-form position-center" ng-show="modeSharePanel">
 			<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
 		</div>
 	</div>
@@ -132,57 +114,44 @@
 			</p>
 		</div>
 
-		<div class="editor-row share-modal-options" style="">
-			<div class="section" ng-if="step === 1">
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 110px;">
-							Snapshot name
-						</li>
-						<li>
-							<input type="text" ng-model="snapshot.name" class="input-large tight-form-input last" >
-						</li>
-					</ul>
-					<div class="clearfix"></div>
-				</div>
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 110px">
-							Expire
-						</li>
-						<li>
-							<select class="input-small tight-form-input last" style="width: 211px" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
-						</li>
-					</ul>
-					<div class="clearfix"></div>
+		<div class="gf-form-group share-modal-options position-center">
+			<div class="gf-form" ng-if="step === 1">
+				<span class="gf-form-label width-12">Snapshot name</span>
+				<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15" >
+			</div>
+			<div class="gf-form">
+				<span class="gf-form-label width-12">Expire</span>
+				<div class="gf-form-select-wrapper max-width-15">
+					<select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
 				</div>
 			</div>
 
-			<div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
-				<div class="gf-form-row">
-					<a href="{{snapshotUrl}}" class="large share-snapshot-link" target="_blank">
-						<i class="fa fa-external-link-square"></i>
-						{{snapshotUrl}}
-					</a>
-					<br>
-					<button class="btn btn-inverse btn-large" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy Link</button>
+				<div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
+					<div class="gf-form-row">
+						<a href="{{snapshotUrl}}" class="large share-snapshot-link" target="_blank">
+							<i class="fa fa-external-link-square"></i>
+							{{snapshotUrl}}
+						</a>
+						<br>
+						<button class="btn btn-inverse btn-large" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy Link</button>
+					</div>
 				</div>
 			</div>
-		</div>
 
-		<div ng-if="step === 1">
-			<button class="btn btn-success btn-large" ng-click="createSnapshot()" ng-disabled="loading">
-				<i class="fa fa-save"></i>
-				Local Snapshot
-			</button>
-			<button class="btn btn-primary btn-large" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
-				<i class="fa fa-cloud-upload"></i>
-				{{sharingButtonText}}
-			</button>
-		</div>
+			<div ng-if="step === 1" class="gf-form-buttons-row">
+				<button class="btn btn-success btn-large" ng-click="createSnapshot()" ng-disabled="loading">
+					<i class="fa fa-save"></i>
+					Local Snapshot
+				</button>
+				<button class="btn btn-primary btn-large" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
+					<i class="fa fa-cloud-upload"></i>
+					{{sharingButtonText}}
+				</button>
+			</div>
 
-		<div class="pull-right" ng-if="step === 2" style="padding: 5px">
-			Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a>
+			<div class="pull-right" ng-if="step === 2" style="padding: 5px">
+				Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a>
+			</div>
 		</div>
 
 	</div>

public/app/features/dashboard/submenu/submenu.html

@@ -1,30 +1,27 @@
 <div class="submenu-controls">
-	<div class="tight-form borderless">
+	<ul ng-if="ctrl.dashboard.templating.list.length > 0">
+		<li ng-repeat="variable in ctrl.variables" class="submenu-item">
+			<span class="submenu-item-label template-variable " ng-show="!variable.hideLabel">
+				{{variable.label || variable.name}}:
+			</span>
+			<value-select-dropdown variable="variable" on-updated="ctrl.variableUpdated(variable)" get-values-for-tag="ctrl.getValuesForTag(variable, tagKey)"></value-select-dropdown>
+		</li>
+	</ul>
 
-		<ul class="tight-form-list" ng-if="ctrl.dashboard.templating.list.length > 0">
-			<li ng-repeat="variable in ctrl.variables" class="submenu-item">
-				<span class="template-variable tight-form-item" ng-show="!variable.hideLabel" style="padding-right: 5px">
-					{{variable.label || variable.name}}:
-				</span>
-				<value-select-dropdown variable="variable" on-updated="ctrl.variableUpdated(variable)" get-values-for-tag="ctrl.getValuesForTag(variable, tagKey)"></value-select-dropdown>
-			</li>
-		</ul>
+	<ul ng-if="ctrl.dashboard.annotations.list.length > 0">
+		<li ng-repeat="annotation in ctrl.dashboard.annotations.list" class="submenu-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
+			<a ng-click="ctrl.disableAnnotation(annotation)">
+				<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i>
+				{{annotation.name}}
+				<input class="cr1" id="hideYAxis" type="checkbox" ng-model="annotation.enable" ng-checked="annotation.enable">
+				<label for="hideYAxis" class="cr1"></label>
+			</a>
+		</li>
+	</ul>
 
-		<ul class="tight-form-list" ng-if="ctrl.dashboard.annotations.list.length > 0">
-			<li ng-repeat="annotation in ctrl.dashboard.annotations.list" class="submenu-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
-				<a ng-click="ctrl.disableAnnotation(annotation)">
-					<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i>
-					{{annotation.name}}
-					<input class="cr1" id="hideYAxis" type="checkbox" ng-model="annotation.enable" ng-checked="annotation.enable">
-					<label for="hideYAxis" class="cr1"></label>
-				</a>
-			</li>
-		</ul>
+	<ul class="pull-right" ng-if="ctrl.dashboard.links.length > 0">
+		<dash-links-container links="ctrl.dashboard.links"></dash-links-container>
+	</ul>
 
-		<ul class="tight-form-list pull-right" ng-if="ctrl.dashboard.links.length > 0">
-			<dash-links-container links="ctrl.dashboard.links"></dash-links-container>
-		</ul>
-
-		<div class="clearfix"></div>
-	</div>
+	<div class="clearfix"></div>
 </div>

public/app/features/dashboard/timepicker/settings.html

@@ -1,37 +1,15 @@
 <div class="editor-row">
-	<div class="section">
-		<div>
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 118px">
-						Auto-refresh
-					</li>
-					<li>
-						<input type="text" class="input-xlarge tight-form-input last" style="width: 450px" ng-model="ctrl.panel.refresh_intervals" array-join>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-
-			<div class="tight-form last">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 118px">
-						Now delay
-					</li>
-					<li class="tight-form-item">
-						now-
-					</li>
-					<li>
-						<input type="text" class="input-mini tight-form-input last"
-						ng-model="ctrl.panel.nowDelay" placeholder="0m"
-						valid-time-span
-						bs-tooltip="'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'"
-						data-placement="right">
-					</li>
-
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-		</div>
+<div class="gf-form-group">
+	<div class="gf-form">
+		<span class="gf-form-label width-10">Auto-refresh</span>
+		<input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.refresh_intervals" array-join>
+	</div>
+	<div class="gf-form">
+		<span class="gf-form-label width-10">Now delay now-</span>
+		<input type="text" class="gf-form-input max-width-25"
+				ng-model="ctrl.panel.nowDelay" placeholder="0m"
+				valid-time-span
+				bs-tooltip="'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'"
+				data-placement="right">
 	</div>
 </div>

public/app/features/dashlinks/editor.html

@@ -1,90 +1,82 @@
 <div class="editor-row">
-	<h5>Links and Dash Navigation</h5>
+	<h5 class="page-heading">Links and Dash Navigation</h5>
 
-	<div ng-repeat="link in dashboard.links" style="margin-top: 10px;">
-		<div class="tight-form">
-			<ul class="tight-form-list pull-right">
-				<li class="tight-form-item">
-					<i ng-click="moveLink($index, -1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
-					<i ng-click="moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-fw fa-arrow-down"></i>
-				</li>
-				<li class="tight-form-item last">
-					<i class="fa fa-remove pointer" ng-click="deleteLink($index)"></i>
-				</li>
-			</ul>
+	<div ng-repeat="link in dashboard.links">
+		<div class="gf-form-group" style="/*background: #292929; border-bottom: 2px solid #1f1d1d; padding: 10px; margin-bottom: 5px;*/">
+			<div class="gf-form-inline pull-right">
+				<div class="gf-form-buttons-row">
+					<button class="btn btn-inverse btn-mini" ng-hide="$first"><i ng-click="moveLink($index, -1)" class="fa fa-arrow-up"></i></button>
+					<button class="btn btn-inverse btn-mini" ng-hide="$last"><i ng-click="moveLink($index, 1)" class="fa fa-arrow-down"></i></button>
+					<button class="btn btn-inverse btn-mini"><i class="fa fa-remove" ng-click="deleteLink($index)"></i></button>
+				</div>
+			</div>
 
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 20px">
+			<div class="gf-form-inline">
+				<div class="gf-form width-2">
 					<i class="fa fa-fw fa-unlink"></i>
-				</li>
+				</div>
 
-				<li class="tight-form-item">Type</li>
-				<li>
-					<select class="input-medium tight-form-input" style="width: 150px;" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
-				</li>
+				<div class="gf-form">
+					<span class="gf-form-label width-6">Type</span>
+					<div class="gf-form-select-wrapper width-10">
+						<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
+					</div>
+				</div>
 
-				<li class="tight-form-item" ng-show="link.type === 'dashboards'">With tags</li>
-				<li ng-show="link.type === 'dashboards'">
-					<bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags">
-					</bootstrap-tagsinput>
-				</li>
-				<li class="tight-form-item" ng-show="link.type === 'dashboards'">
+				<div class="gf-form" ng-show="link.type === 'dashboards'">
+					<span class="gf-form-label">With tags</span>
+					<bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags"></bootstrap-tagsinput>
+				</div>
+
+				<div class="gf-form" ng-show="link.type === 'dashboards' && link.asDropdown">
+					<span class="gf-form-label width-6">Title</span>
+					<input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
+				</div>
+
+				<div class="gf-form" ng-show="link.type === 'dashboards'">
 					<editor-checkbox text="As dropdown" model="link.asDropdown" change="updated()"></editor-checkbox>
-				</li>
-				<li class="tight-form-item" ng-show="link.type === 'dashboards' && link.asDropdown">
-					Title
-				</li>
-				<li ng-show="link.type === 'dashboards' && link.asDropdown">
-					<input type="text" ng-model="link.title" class="input-medium tight-form-input" ng-model-onblur ng-change="updated()">
-				</li>
-				<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 51px">Url</li>
-				<li ng-show="link.type === 'link'">
-					<input type="text" ng-model="link.url" class="input-xlarge tight-form-input" style="width: 302px;" ng-model-onblur ng-change="updated()">
-				</li>
-				<li class="tight-form-item" ng-show="link.type === 'link'">
+				</div>
+
+				<div class="gf-form" ng-show="link.type === 'link'">
+					<li class="gf-form-label width-6">Url</li>
+					<input type="text" ng-model="link.url" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
 					<editor-checkbox text="Open in new tab " model="link.targetBlank" change="updated()"></editor-checkbox>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-		<div class="tight-form" ng-if="link.type === 'link'">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 20px">
+				</div>
+			</div>
+
+			<div class="gf-form-inline" ng-show="link.type === 'link'">
+				<div class="gf-form width-2">
 					<i class="fa fa-fw fa-unlink invisible"></i>
-				</li>
-				<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 31px">Title</li>
-				<li ng-show="link.type === 'link'">
-					<input type="text" ng-model="link.title" class="input-medium tight-form-input" ng-model-onblur ng-change="updated()">
-				</li>
-				<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 51px">Tooltip</li>
-				<li ng-show="link.type === 'link'">
-					<input type="text" ng-model="link.tooltip" class="input-medium tight-form-input" style="width: 151px" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
-				</li>
-				<li class="tight-form-item" ng-show="link.type === 'link'">Icon</li>
-				<li ng-show="link.type === 'link'">
-					<select class="input-medium tight-form-input" style="width: 110px;" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-		<div class="tight-form last">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 20px">
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label width-6">Title</span>
+					<input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
+				</div>
+
+				<div class="gf-form">
+					<span class="gf-form-label width-6">Tooltip</span>
+					<input type="text" ng-model="link.tooltip" class="gf-form-input max-width-10" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
+				</div>
+
+				<div class="gf-form">
+					<span class="gf-form-label width-6">Icon</span>
+					<div class="gf-form-select-wrapper max-width-10">
+						<select class="gf-form-input" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
+					</div>
+				</div>
+			</div>
+
+			<div class="gf-form-inline">
+				<div class="gf-form width-1">
 					<i class="fa fa-fw fa-unlink invisible"></i>
-				</li>
-				<li class="tight-form-item">
+				</div>
+				<div class="gf-form">
 					<editor-checkbox text="Keep current time range" model="link.keepTime" change="updated()"></editor-checkbox>
-				</li>
-				<li class="tight-form-item">
 					<editor-checkbox text="Add current variable values" model="link.includeVars" change="updated()"></editor-checkbox>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
-<div class="editor-row">
-	<br>
-	<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>
-</div>
 
+<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>

public/app/features/org/partials/apikeyModal.html

@@ -10,23 +10,16 @@
 		</button>
 	</div>
 
-	<div class="gf-box-body" style="min-height: 0px;">
+	<div class="gf-box-body">
 
-		<div class="tight-form last">
-			<ul class="tight-form-list">
-				<li class="tight-form-item">
-					<strong>Key</strong>
-				</li>
-				<li class="tight-form-item last">
-					{{key}}
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+		<div class="gf-form-group">
+			<div class="gf-form">
+				<span class="gf-form-label">Key</span>
+				<span class="gf-form-label">{{key}}</span>
+			</div>
 		</div>
-		<br>
-		<br>
 
-		<div class="grafana-info-box" style="text-align: left">
+		<div class="grafana-info-box" style="border: 0;">
 			You will only be able to view this key here once! It is not stored in this form. So be sure to copy it now.
 			<br>
 			<br>

public/app/features/org/partials/newOrg.html

@@ -6,24 +6,16 @@
 
 		<h2 style="margin-top: 30px;">Add Organization</h2>
 
-		<form name="form">
-			<div class="tight-form last">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 100px;">
-						<strong>Org. name</strong>
-					</li>
-					<li>
-						<input type="text" ng-model="newOrg.name" required class="input-xxlarge tight-form-input last" placeholder="organization name">
-					</li>
-					<li>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
+		<form name="form" class="gf-form-group">
+			<div class="gf-form">
+				<span class="gf-form-label width-10">Org. name</span>
+				<input type="text" ng-model="newOrg.name" required class="gf-form-input" placeholder="organization name">
 			</div>
 			<br>
-			<button class="btn btn-success pull-right" ng-click="createOrg()">Create</button>
+			<div class="gf-form-buttons-row">
+				<button class="btn btn-success pull-right" ng-click="createOrg()">Create</button>
+			</div>
 		</form>
-
 	</div>
 </div>
 

public/app/features/panel/panel_directive.ts

@@ -28,7 +28,7 @@ var panelTemplate = `
   </div>
 
   <div class="panel-full-edit" ng-if="ctrl.editMode">
-    <div class="tabbed-view">
+    <div class="tabbed-view tabbed-view--panel-edit">
       <div class="tabbed-view-header">
         <h2 class="tabbed-view-title">
           <i ng-class="ctrl.icon"></i>
@@ -44,7 +44,7 @@ var panelTemplate = `
         </ul>
 
         <button class="tabbed-view-close-btn" ng-click="ctrl.exitFullscreen();">
-          Back to dashboard
+          <i class="fa fa-remove"></i>
         </button>
       </div>
 

public/app/features/panel/partials/panelTime.html

@@ -1,59 +1,34 @@
-<div class="editor-row">
-	<div class="section tight-form-container" style="margin-bottom: 20px">
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item tight-form-item-icon">
-					<i class="fa fa-clock-o"></i>
-				</li>
-				<li class="tight-form-item" style="width: 178px">
-					<strong>Override relative time</strong>
-				</li>
-				<li class="tight-form-item" style="width: 50px">
-					Last
-				</li>
-				<li>
-					<input type="text" class="input-small tight-form-input last" placeholder="1h"
-					  empty-to-null ng-model="ctrl.panel.timeFrom" valid-time-span
-					  ng-change="ctrl.refresh()" ng-model-onblur>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item tight-form-item-icon">
-					<i class="fa fa-clock-o"></i>
-				</li>
-				<li class="tight-form-item" style="width: 178px">
-					<strong>Add time shift</strong>
-				</li>
-				<li class="tight-form-item" style="width: 50px">
-					Amount
-				</li>
-				<li>
-					<input type="text" class="input-small tight-form-input last" placeholder="1h"
-					empty-to-null ng-model="ctrl.panel.timeShift" valid-time-span
-					ng-change="ctrl.refresh()" ng-model-onblur>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item tight-form-item-icon">
-					<i class="fa fa-clock-o"></i>
-				</li>
-				<li class="tight-form-item" style="width: 178px">
-					<strong>Hide time override info</strong>
-				</li>
-				<li class="tight-form-item last">
-					<input class="cr1" id="ctrl.panel.hideTimeOverride" type="checkbox"
-					ng-model="ctrl.panel.hideTimeOverride" ng-checked="ctrl.panel.hideTimeOverride" ng-change="ctrl.refresh()">
-					<label for="ctrl.panel.hideTimeOverride" class="cr1"></label>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
+<div class="gf-form-group">
+	<div class="gf-form">
+		<span class="gf-form-label">
+			<i class="fa fa-clock-o"></i>
+		</span>
+
+		<span class="gf-form-label width-12">Override relative time</span>
+		<span class="gf-form-label width-6">Last</span>
+
+		<input type="text" class="gf-form-input max-width-8" placeholder="1h"
+			empty-to-null ng-model="ctrl.panel.timeFrom" valid-time-span
+			ng-change="ctrl.refresh()" ng-model-onblur>
+	</div>
+
+	<div class="gf-form">
+		<span class="gf-form-label">
+			<i class="fa fa-clock-o"></i>
+		</span>
+		<span class="gf-form-label width-12">Add time shift</span>
+		<span class="gf-form-label width-6">Amount</span>
+		<input type="text" class="gf-form-input max-width-8" placeholder="1h"
+			empty-to-null ng-model="ctrl.panel.timeShift" valid-time-span
+			ng-change="ctrl.refresh()" ng-model-onblur>
+	</div>
+
+	<div class="gf-form">
+		<span class="gf-form-label">
+			<i class="fa fa-clock-o"></i>
+		</span>
+		<editor-checkbox text="Hide time override info" model="ctrl.panel.hideTimeOverride" change="ctrl.refresh()"></editor-checkbox>
 	</div>
 </div>
 
+

public/app/features/panellinks/module.html

@@ -1,84 +1,67 @@
 <div class="editor-row">
-  <div class="section">
-		<h5>Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
+	<h5 class="section-heading">
+		Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
+	</h5>
 
-		<div ng-repeat="link in panel.links" style="margin-top: 20px;">
-			<div class="tight-form">
-				<ul class="tight-form-list pull-right">
-					<li class="tight-form-item">
-						<i ng-click="moveLink($index, -1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
-						<i ng-click="moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-fw fa-arrow-down"></i>
-					</li>
-					<li class="tight-form-item last">
-						<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
-					</li>
-				</ul>
+	<div ng-repeat="link in panel.links" style="margin-top: 20px;">
+		<div class="gf-form-group">
 
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 20px">
-						<i class="fa fa-fw fa-unlink"></i>
-					</li>
+			<div class="gf-form-inline">
+				<div class="gf-form width-2">
+					<i class="fa fa-fw fa-unlink"></i>
+				</div>
 
-					<li class="tight-form-item">Type</li>
-					<li>
-						<select class="input-medium tight-form-input" style="width: 150px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
-					</li>
+				<div class="gf-form">
+					<span class="gf-form-label width-7">Type</span>
+					<div class="gf-form-select-wrapper width-14">
+						<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
+					</div>
+				</div>
 
-					<li class="tight-form-item" ng-show="link.type === 'dashboard'" style="width: 73px;">Dashboard</li>
-					<li ng-show="link.type === 'dashboard'">
-						<input type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="input-large tight-form-input" ng-blur="dashboardChanged(link)">
-					</li>
+				<div class="gf-form">
+					<span class="gf-form-label width-7" ng-show="link.type === 'dashboard'">Dashboard</span>
+					<input ng-show="link.type === 'dashboard'" type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="gf-form-input max-width-14" ng-blur="dashboardChanged(link)">
 
-					<li class="tight-form-item" ng-show="link.type === 'absolute'" style="width: 73px;">Url</li>
-					<li ng-show="link.type === 'absolute'">
-						<input type="text" ng-model="link.url" class="input-large tight-form-input">
-					</li>
+					<span class="gf-form-label width-7" ng-show="link.type === 'absolute'">Url</span>
+					<input ng-show="link.type === 'absolute'" type="text" ng-model="link.url" class="gf-form-input max-width-14">
+				</div>
 
-				</ul>
-				<div class="clearfix"></div>
+				<div class="gf-form">
+					<button class="btn-inverse gf-form-btn btn-small" ng-click="deleteLink(link)"><i class="fa fa-trash"></i></button>
+				</div>
 			</div>
 
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 20px">
-						<i class="fa fa-fw fa-unlink invisible"></i>
-					</li>
-					<li class="tight-form-item" style="width: 31px">Title</li>
-					<li>
-						<input type="text" ng-model="link.title" class="input-medium tight-form-input">
-					</li>
-					<li class="tight-form-item" style="width: 73px;">
-						Url params
-					</li>
-					<li>
-						<input type="text" ng-model="link.params" class="input-large tight-form-input">
-					</li>
-				</ul>
-				<div class="clearfix"></div>
+			<div class="gf-form-inline">
+				<div class="gf-form width-2">
+					<i class="fa fa-fw fa-unlink invisible"></i>
+				</div>
+
+				<div class="gf-form">
+					<div class="gf-form-label width-7">Title</div>
+					<input type="text" ng-model="link.title" class="gf-form-input">
+				</div>
+
+				<div class="gf-form">
+					<span class="gf-form-label width-7">Url params</span>
+					<input type="text" ng-model="link.params" class="gf-form-input">
+				</div>
 			</div>
-			<div class="tight-form last">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 20px">
-						<i class="fa fa-fw fa-unlink invisible"></i>
-					</li>
-					<li class="tight-form-item">
-						<editor-checkbox text="Keep current time range" model="link.keepTime"></editor-checkbox>
-					</li>
-					<li class="tight-form-item">
-						<editor-checkbox text="Add current variable values" model="link.includeVars"></editor-checkbox>
-					</li>
-					<li class="tight-form-item last">
-						<editor-checkbox text="Open in new tab " model="link.targetBlank"></editor-checkbox>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
+
+			<div class="gf-form-inline">
+				<div class="gf-form width-2">
+					<i class="fa fa-fw fa-unlink invisible"></i>
+				</div>
+
+				<div class="gf-form">
+					<editor-checkbox text="Keep current time range" model="link.keepTime"></editor-checkbox>
+					<editor-checkbox text="Add current variable values" model="link.includeVars"></editor-checkbox>
+					<editor-checkbox text="Open in new tab " model="link.targetBlank"></editor-checkbox>
+				</div>
 			</div>
 		</div>
-
 	</div>
 </div>
 
 <div class="editor-row">
-	<br>
 	<button class="btn btn-inverse" ng-click="addLink()"><i class="fa fa-plus"></i> Add link</button>
 </div>

public/app/features/panellinks/module.js

@@ -52,6 +52,5 @@ function (angular, _) {
       $scope.deleteLink = function(link) {
         $scope.panel.links = _.without($scope.panel.links, link);
       };
-
     });
 });

public/app/features/snapshot/partials/snapshots.html

@@ -2,39 +2,39 @@
 </navbar>
 
 <div class="page-container">
-  <div class="page-wide">
-
+  <div class="page-header">
     <h1>Available snapshots</h1>
+  </div>
 
-     <table class="filter-table" style="margin-top: 20px">
-      <thead>
-        <th><strong>Name</strong></th>
-        <th><strong>Snapshot url</strong></th>
-        <th style="width: 70px"></th>
-        <th style="width: 25px"></th>
 
-     </thead>
+   <table class="filter-table" style="margin-top: 20px">
+    <thead>
+      <th><strong>Name</strong></th>
+      <th><strong>Snapshot url</strong></th>
+      <th style="width: 70px"></th>
+      <th style="width: 25px"></th>
 
-      <tr ng-repeat="snapshot in ctrl.snapshots">
-        <td>
-					<a href="dashboard/snapshot/{{snapshot.key}}">{{snapshot.name}}</a>
-        </td>
-        <td >
-          <a href="dashboard/snapshot/{{snapshot.key}}">dashboard/snapshot/{{snapshot.key}}</a>
-        </td>
-        <td class="text-center">
-          <a href="dashboard/snapshot/{{snapshot.key}}" class="btn btn-inverse btn-mini">
-            <i class="fa fa-eye"></i>
-            View
-          </a>
-        </td>
-        <td  class="text-right">
-          <a ng-click="ctrl.removeSnapshot(snapshot)" class="btn btn-danger btn-mini">
-            <i class="fa fa-remove"></i>
-          </a>
-        </td>
-      </tr>
-    </table>
+   </thead>
+
+    <tr ng-repeat="snapshot in ctrl.snapshots">
+      <td>
+				<a href="dashboard/snapshot/{{snapshot.key}}">{{snapshot.name}}</a>
+      </td>
+      <td >
+        <a href="dashboard/snapshot/{{snapshot.key}}">dashboard/snapshot/{{snapshot.key}}</a>
+      </td>
+      <td class="text-center">
+        <a href="dashboard/snapshot/{{snapshot.key}}" class="btn btn-inverse btn-mini">
+          <i class="fa fa-eye"></i>
+          View
+        </a>
+      </td>
+      <td  class="text-right">
+        <a ng-click="ctrl.removeSnapshot(snapshot)" class="btn btn-danger btn-mini">
+          <i class="fa fa-remove"></i>
+        </a>
+      </td>
+    </tr>
+  </table>
 
-  </div>
 </div>

public/app/features/templating/partials/editor.html

@@ -8,15 +8,11 @@
 		<div class="tabs">
 			<ul class="nav nav-tabs">
 				<li ng-class="{active: mode === 'list'}">
-					<a ng-click="mode = 'list';">
-						Variables
-					</a>
+					<a ng-click="mode = 'list';">Variables</a>
 				</li>
 
 				<li ng-class="{active: mode === 'edit'}" ng-show="mode === 'edit'">
-					<a>
-						{{current.name}}
-					</a>
+					<a>{{current.name}}</a>
 				</li>
 
 				<li ng-class="{active: mode === 'new'}">
@@ -78,249 +74,144 @@
 		</div>
 
 		<div ng-if="mode === 'edit' || mode === 'new'">
-			<div class="editor-row">
-				<div class="tight-form-section">
-					<h5>Variable</h5>
-					<div class="tight-form last">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 100px">
-								Name
-							</li>
-							<li>
-								<input type="text" class="input-large tight-form-input" placeholder="name" ng-model='current.name'></input>
-							</li>
-							<li class="tight-form-item">
-								Type
-							</li>
-							<li>
-								<select class="input-small tight-form-input" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
-							</li>
-							<li class="tight-form-item" ng-show="current.type === 'query'">
-								Data source
-							</li>
-							<li ng-show="current.type === 'query'">
-								<select class="input input-medium tight-form-input last" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
-							</li>
-						</ul>
-						<div class="clearfix"></div>
+			<h5>Variable</h5>
+			<div class="gf-form-group">
+				<div class="gf-form-inline">
+					<div class="gf-form">
+					<span class="gf-form-label width-7">Name</span>
+					<input type="text" class="gf-form-input max-width-14" placeholder="name" ng-model='current.name'></input>
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label width-7">Type</span>
+					<div class="gf-form-select-wrapper max-width-10">
+						<select class="gf-form-input  max-width-10" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
+					</div>
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label width-7" ng-show="current.type === 'query'">Data source</span>
+					<div class="gf-form-select-wrapper" ng-show="current.type === 'query'">
+						<select class="gf-form-input max-width-14" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
 					</div>
 				</div>
 			</div>
 
-			<div class="editor-row">
-				<div class="tight-form-section">
-					<h5>Value Options</h5>
+			<h5>Value Options</h5>
 
-					<div ng-show="current.type === 'interval'">
-						<div class="tight-form">
-							<ul class="tight-form-list">
-								<li class="tight-form-item" style="width: 160px">
-									Values
-								</li>
-								<li>
-									<input type="text" style="width: 345px" class="input-xxlarge tight-form-input last" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()"></input>
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-						<div class="tight-form last">
-							<ul class="tight-form-list">
-								<li class="tight-form-item" style="width: 160px">
-									<editor-checkbox text="Include auto interval" model="current.auto" change="runQuery()"></editor-checkbox>
-								</li>
-								<li class="tight-form-item" ng-show="current.auto">
-									Auto interval steps <tip>How many times should the current time range be divided to calculate the value</tip>
-								</li>
-								<li>
-									<select class="input-mini tight-form-input last" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
+			<div ng-show="current.type === 'interval'" class="gf-form-group">
+				<div class="gf-form">
+					<span class="gf-form-label width-7">Values</span>
+					<input type="text" class="gf-form-input max-width-28" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()"></input>
+				</div>
+				<div class="gf-form">
+					<editor-checkbox text="Include auto interval" model="current.auto" change="runQuery()"></editor-checkbox>
+					<span class="gf-form-label" ng-show="current.auto">
+						Auto interval steps <tip>How many times should the current time range be divided to calculate the value</tip>
+					</span>
+					<div class="gf-form-select-wrapper max-width-10">
+						<select class="gf-form-input" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
 					</div>
+				</div>
+			</div>
 
-					<div ng-show="current.type === 'custom'">
-						<div class="tight-form last">
-							<ul class="tight-form-list">
-								<li class="tight-form-item" style="width: 180px">
-									Values seperated by comma
-								</li>
-								<li>
-									<input type="text" class="input tight-form-input last" style="width: 325px;" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-            <div class="tight-form">
-              <ul class="tight-form-list">
-                <li class="tight-form-item" style="width: 100px;">
-                  <editor-checkbox text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
-                </li>
-                <li ng-show="current.includeAll">
-                  <input type="text" class="input-xlarge tight-form-input" style="width:364px" ng-model='current.options[0].value'></input>
-                </li>
-                <li class="tight-form-item" ng-show="current.includeAll">
-                  All format
-                </li>
-                <li ng-show="current.includeAll">
-                  <select class="input-medium tight-form-input last" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
-                </li>
-              </ul>
-              <div class="clearfix"></div>
-            </div>
+			<div ng-show="current.type === 'custom'" class="gf-form-group">
+				<div class="gf-form">
+					<span class="gf-form-label width-13">Values seperated by comma</span>
+					<input type="text" class="gf-form-input max-width-22" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
+				</div>
+				<div class="gf-form ">
+          <editor-checkbox class="width-13" text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
+          <input ng-show="current.includeAll" type="text" class="gf-form-input max-width-22" ng-model='current.options[0].value' style="margin-left: 4px;"></input>
+        </div>
+        <div class="gf-form">
+          <span class="gf-form-label width-13" ng-show="current.includeAll">All format</span>
+          <div class="gf-form-select-wrapper max-width-10" ng-show="current.includeAll">
+          	<select class="gf-form-input" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
+          </div>
+        </div>
+      </div>
+
+			<div ng-show="current.type === 'query'" class="gf-form-group">
+				<div class="gf-form">
+					<span class="gf-form-label width-7">Query</span>
+					<input type="text" class="gf-form-input" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()"></input>
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label width-7">
+						Regex
+						<tip>Optional, if you want to extract part of a series name or metric node segment</tip>
+					</span>
+					<input type="text" class="gf-form-input" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
+				</div>
+				<div class="gf-form">
+					<editor-checkbox class="width-13" text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
+					<input ng-show="current.includeAll" type="text" class="gf-form-input" ng-model='current.options[0].value'></input>
+					<span class="gf-form-label" ng-show="current.includeAll">All format</span>
+					<div class="gf-form-select-wrapper max-width-10" ng-show="current.includeAll">
+						<select class="gf-form-input" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
 					</div>
+				</div>
 
-					<div ng-show="current.type === 'query'">
-
-						<div class="tight-form">
-							<ul class="tight-form-list">
-								<li class="tight-form-item" style="width: 100px">
-									Query
-								</li>
-								<li>
-									<input type="text" style="width: 588px" class="input-xxlarge tight-form-input last" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()"></input>
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-						<div class="tight-form">
-							<ul class="tight-form-list">
-								<li class="tight-form-item" style="width: 100px;">
-									Regex
-									<tip>Optional, if you want to extract part of a series name or metric node segment</tip>
-								</li>
-								<li>
-									<input type="text" style="width: 588px" class="input tight-form-input last" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-
-						<div class="tight-form">
-							<ul class="tight-form-list">
-								<li class="tight-form-item" style="width: 100px;">
-									<editor-checkbox text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
-								</li>
-								<li ng-show="current.includeAll">
-									<input type="text" class="input-xlarge tight-form-input" style="width:364px" ng-model='current.options[0].value'></input>
-								</li>
-								<li class="tight-form-item" ng-show="current.includeAll">
-									All format
-								</li>
-								<li ng-show="current.includeAll">
-									<select class="input-medium tight-form-input last" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-
-						<div class="tight-form last">
-							<ul class="tight-form-list">
-								<li class="tight-form-item last">
-									<editor-checkbox text="Refresh on load" model="current.refresh"></editor-checkbox>
-									<tip>Check if you want values to be updated on dashboard load, will slow down dashboard load time</tip>
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-					</div>
+				<div class="gf-form">
+					<editor-checkbox class="width-13" text="Refresh on load" model="current.refresh"></editor-checkbox>
+					<tip>Check if you want values to be updated on dashboard load, will slow down dashboard load time</tip>
 				</div>
 			</div>
 
-			<div class="editor-row">
-				<div class="tight-form-section" ng-hide="current.type === 'interval'">
-					<h5>Multi-value selection <tip>Enables multiple values to be selected at the same time</tip></h5>
-					<div class="tight-form last">
-						<ul class="tight-form-list">
-							<li class="tight-form-item last" style="width: 100px;">
-								<editor-checkbox text="Enable" model="current.multi" change="runQuery()"></editor-checkbox>
-							</li>
-							<li class="tight-form-item" ng-show="current.multi">
-								Multi format
-							</li>
-							<li ng-show="current.multi">
-								<select class="input-medium tight-form-input last" ng-model="current.multiFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'regex values', 'lucene', 'pipe']"></select>
-							</li>
-						</ul>
-						<div class="clearfix"></div>
+			<div class="row">
+				<div class="col-md-6">
+					<div class="gf-form-group">
+						<h5>Display options</h5>
+						<div class="gf-form">
+							<span class="gf-form-label width-8">Variable Label</span>
+							<input type="text" class="gf-form-input max-width-12" ng-model='current.label' placeholder=""></input>
+							<editor-checkbox class="width-13" text="Hide label" model="current.hideLabel" change="runQuery()"></editor-checkbox>
+						</div>
 					</div>
 				</div>
-
-				<div class="tight-form-section">
-					<h5>Display options</h5>
-					<div class="tight-form last">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 100px">
-								Variable Label
-							</li>
-							<li>
-								<input type="text" class="input-medium tight-form-input" ng-model='current.label' placeholder=""></input>
-							</li>
-							<li class="tight-form-item last">
-								<editor-checkbox text="Hide label" model="current.hideLabel" change="runQuery()"></editor-checkbox>
-							</li>
-						</ul>
-						<div class="clearfix"></div>
+				<div class="col-md-6" ng-hide="current.type === 'interval'">
+					<div class="gf-form-group" >
+						<h5>Multi-value selection <tip>Enables multiple values to be selected at the same time</tip></h5>
+						<div class="gf-form">
+							<editor-checkbox text="Enable" model="current.multi" change="runQuery()"></editor-checkbox>
+
+							<span class="gf-form-label" ng-show="current.multi">Multi format</span>
+							<div class="gf-form-select-wrapper max-width-10" ng-show="current.multi">
+								<select class="gf-form-input" ng-model="current.multiFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'regex values', 'lucene', 'pipe']"></select>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
 
-			<div class="editor-row" ng-if="current.type === 'query'">
-				<div class="tight-form-section">
-					<h5>Value groups/tags (Experimental feature)</h5>
-					<div class="tight-form last" ng-if="current.useTags">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 135px">
-								Tags query
-							</li>
-							<li>
-								<input type="text" style="width: 588px" class="input-xxlarge tight-form-input last" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-					<div class="tight-form" ng-if="current.useTags">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 135px;">
-								Tag values query
-							</li>
-							<li>
-								<input type="text" style="width: 588px" class="input tight-form-input last" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-					<div class="tight-form">
-						<ul class="tight-form-list">
-							<li class="tight-form-item last">
-								<editor-checkbox text="Enable" model="current.useTags" change="runQuery()"></editor-checkbox>
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
+			<div class="gf-form-group" ng-if="current.type === 'query'">
+				<h5>Value groups/tags (Experimental feature)</h5>
+				<div class="gf-form">
+					<editor-checkbox text="Enable" model="current.useTags" change="runQuery()"></editor-checkbox>
+				</div>
+				<div class="gf-form last" ng-if="current.useTags">
+					<span class="gf-form-label width-10">Tags query</span>
+					<input type="text" class="gf-form-input" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
+				</div>
+				<div class="gf-form" ng-if="current.useTags">
+					<li class="gf-form-label width-10">Tag values query</li>
+					<input type="text" class="gf-form-input" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
 				</div>
 			</div>
 
-			<div class="editor-row">
-				<div class="tight-form-section">
-					<h5>Preview of values (shows max 20)</h5>
-					<div class="tight-form last">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" ng-repeat="option in current.options | limitTo: 20">
-								{{option.text}}
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
+			<div class="gf-form-group">
+				<h5>Preview of values (shows max 20)</h5>
+				<div class="gf-form">
+					<span class="gf-form-label" ng-repeat="option in current.options | limitTo: 20">
+						{{option.text}}
+					</span>
 				</div>
 			</div>
 		</div>
 
-		<div class="editor-row" style="margin-top: 20px">
+		<div class="gf-form-button-row" style="margin-top: 20px">
 			<button type="button" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
 			<button type="button" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
 		</div>
-
 	</div>
 </div>
 

public/app/partials/help_modal.html

@@ -32,6 +32,10 @@
 				<td><span class="label label-info">CTRL+S</span></td>
 				<td>Save dashboard</td>
 			</tr>
+      <tr>
+        <td><span class="label label-info">CTRL+E</span></td>
+        <td>Export dashboard</td>
+      </tr>
 			<tr>
 				<td><span class="label label-info">CTRL+H</span></td>
 				<td>Hide row controls</td>
@@ -40,6 +44,10 @@
 				<td><span class="label label-info">CTRL+Z</span></td>
 				<td>Zoom out</td>
 			</tr>
+      <tr>
+        <td><span class="label label-info">CTRL+I</span></td>
+        <td>Quick snapshot</td>
+      </tr>
 			<tr>
 				<td><span class="label label-info">CTRL+O</span></td>
 				<td>Enable/Disable shared graph crosshair</td>

public/app/partials/panelgeneral.html

@@ -31,10 +31,6 @@
 	</div>
 </div>
 
-<br>
-<br>
-<br>
-
 <panel-links-editor panel="ctrl.panel"></panel-links-editor>
 
 

public/app/partials/reset_password.html

@@ -1,11 +1,10 @@
-<div class="container">
+<div class="login-container container">
 
 	<div class="login-box">
 
 		<div class="login-box-logo">
-			<a href="login">
-				<img src="img/logo_transparent_200x75.png">
-			</a>
+			<img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
+			<i class="icon-gf icon-gf-grafana_wordmark"></i>
 		</div>
 
 		<div class="login-inner-box">
@@ -15,76 +14,50 @@
 				</button>
 			</div>
 
-			<form name="sendResetForm" class="login-form" ng-show="mode === 'send'">
-				<div class="tight-form last">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 78px">
-							<strong>User</strong>
-						</li>
-						<li>
-							<input type="text" name="username" class="tight-form-input last" required ng-model='formModel.userOrEmail' placeholder="email or username" style="width: 253px">
-						</li>
-					</ul>
-					<div class="clearfix"></div>
+			<form name="sendResetForm" class="login-form gf-form-group" ng-show="mode === 'send'">
+				<div class="gf-form">
+						<span class="gf-form-label width-7">User</span>
+						<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.userOrEmail' placeholder="email or username">
 				</div>
 
-				<div class="login-submit-button-row">
-					<button type="submit" class="btn" ng-click="sendResetEmail();" ng-class="{'btn-inverse': !sendResetForm.$valid, 'btn-primary': sendResetForm.$valid}">
+				<div class="gf-form-button-row">
+					<button type="submit" class="btn btn-large" ng-click="sendResetEmail();" ng-class="{'btn-inverse': !sendResetForm.$valid, 'btn-primary': sendResetForm.$valid}">
 						Send reset instructions
 					</button>
 				</div>
 			</form>
 
-			<h5 ng-if="mode === 'email-sent'" style="text-align: center; padding: 20px;">
+			<h5 style="text-align: center; padding: 20px;" ng-if="mode === 'email-sent'">
 				An email with a reset link as been sent to the email address, you should receive it shortly.
 			</h5>
 
-			<form name="resetForm" class="login-form" ng-show="mode === 'reset'">
-				<div class="tight-form">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 125px">
-							<strong>New Password</strong>
-						</li>
-						<li>
-							<input type="password" name="NewPassword" class="tight-form-input last" required ng-minlength="4" ng-model='formModel.newPassword' placeholder="password" style="width: 207px" watch-change="formModel.newPassword = inputValue;">
-						</li>
-					</ul>
-					<div class="clearfix"></div>
+			<form name="resetForm" class="login-form gf-form-group" ng-show="mode === 'reset'">
+				<div class="gf-form">
+					<span class="gf-form-label width-10">New Password</span>
+					<input type="password" name="NewPassword" class="gf-form-input max-width-14" required ng-minlength="4" ng-model='formModel.newPassword' placeholder="password" watch-change="formModel.newPassword = inputValue;">
 				</div>
-				<div class="tight-form last">
-					<ul class="tight-form-list">
-						<li class="tight-form-item" style="width: 125px">
-							<strong>Confirm Password</strong>
-						</li>
-						<li>
-							<input type="password" name="ConfirmPassword" class="tight-form-input last" required ng-minlength="4" ng-model='formModel.confirmPassword' placeholder="confirm password" style="width: 207px">
-						</li>
-					</ul>
-					<div class="clearfix"></div>
+				<div class="gf-form">
+					<span class="gf-form-label width-10">Confirm Password</span>
+					<input type="password" name="ConfirmPassword" class="gf-form-input max-width-14" required ng-minlength="4" ng-model='formModel.confirmPassword' placeholder="confirm password">
 				</div>
 
 				<div style="margin-left: 141px; width: 207px;">
 					<password-strength password="formModel.newPassword"></password-strength>
 				</div>
 
-				<div class="login-submit-button-row">
+				<div class="gf-form-button-row">
 					<button type="submit" class="btn" ng-click="submitReset();" ng-class="{'btn-inverse': !resetForm.$valid, 'btn-primary': resetForm.$valid}">
 						Reset Password
 					</button>
 				</div>
 			</form>
-
-			<div class="clearfix"></div>
 		</div>
 
-		<div class="row" style="margin-top: 40px">
+		<div class="row" style="margin-top: 20px">
 			<div class="text-center">
-				<a href="login">
-					Back to login
-				</a>
+				<a href="login">Back to login</a>
 			</div>
 		</div>
-
 	</div>
 </div>
 

public/app/partials/roweditor.html

@@ -5,60 +5,45 @@
 		Row settings
 	</div>
 
-	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-		<div ng-repeat="tab in ['General']" data-title="{{tab}}">
-		</div>
-	</div>
-
 	<button class="gf-box-header-close-btn" ng-click="dismiss();">
 		<i class="fa fa-remove"></i>
 	</button>
 </div>
 
 <div class="gf-box-body">
+	<div class="row">
+		<div class="col-md-8">
+			<div class="page-heading">
+				<h5>Row details</h5>
+			</div>
+			<div class="gf-form-group">
+				<div class="gf-form-inline">
 
-	<div class="editor-row">
-		<div class="section">
-			<h5>Row details</h5>
-			<div class="tight-form last">
-				<ul class="tight-form-list">
-					<li class="tight-form-item">
-						Title
-					</li>
-					<li>
-						<input type="text" class="input-xlarge tight-form-input" ng-model='row.title'></input>
-					</li>
-					<li class="tight-form-item">
-						Height
-					</li>
-					<li>
-						<input type="text" class="input-small tight-form-input" ng-model='row.height'></input>
-					</li>
-					<li class="tight-form-item last">
-						<label class="checkbox-label" for="row.showTitle">Show Title</label>
-						<input class="cr1" id="row.showTitle" type="checkbox" ng-model="row.showTitle" ng-checked="row.showTitle">
-						<label for="row.showTitle" class="cr1"></label>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
+					<div class="gf-form">
+						<span class="gf-form-label width-6">Title</span>
+						<input type="text" class="gf-form-input max-width-14" ng-model='row.title'></input>
+					</div>
+					<div class="gf-form">
+						<span class="gf-form-label width-6">Height</span>
+						<input type="text" class="gf-form-input max-width-8" ng-model='row.height'></input>
+						<editor-checkbox text="Show Title" model="row.showTitle"></editor-checkbox>
+					</div>
+				</div>
 			</div>
 		</div>
-		<div class="section">
-			<h5>Templating options</h5>
-			<div class="tight-form last">
-				<ul class="tight-form-list">
-					<li class="tight-form-item">
-						Repeat Row
-					</li>
-					<li>
-						<select class="input-small tight-form-input last" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
+		<div class="col-md-4">
+			<div class="page-heading">
+				<h5>Templating options</h5>
+			</div>
+			<div class="gf-form-group">
+				<div class="gf-form">
+					<span class="gf-form-label">Repeat Row</span>
+					<div class="gf-form-select-wrapper max-width-10">
+						<select class="gf-form-input" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
 							<option value=""></option>
-						</select>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
-
 </div>

public/app/partials/valueSelectDropdown.html

@@ -1,5 +1,5 @@
 <div class="variable-link-wrapper">
-	<a ng-click="vm.show()" class="variable-value-link tight-form-item">
+	<a ng-click="vm.show()" class="variable-value-link">
 		{{vm.linkText}}
 		<span ng-repeat="tag in vm.selectedTags" bs-tooltip='tag.valuesText' data-placement="bottom">
 			<span class="label-tag"tag-color-from-name="tag.text">
@@ -10,7 +10,7 @@
 		<i class="fa fa-caret-down"></i>
 	</a>
 
-	<input type="text" class="tight-form-clear-input input-small" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
+	<input type="text" class="hidden-input input-small" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
 
 	<div class="variable-value-dropdown" ng-if="vm.dropdownVisible" ng-class="{'multi': vm.variable.multi, 'single': !vm.variable.multi}">
 		<div class="variable-options-wrapper">

public/sass/_variables.dark.scss

@@ -53,6 +53,10 @@ $page-bg:  			   $dark-2;
 $body-color:   		   $gray-4;
 $text-color:   	       $gray-4;
 
+// gradients
+$brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%);
+$page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
+
 // Links
 // -------------------------
 $link-color:              darken($white,11%);

public/sass/_variables.light.scss

@@ -59,6 +59,10 @@ $page-bg:  		  $white;
 $body-color:    $gray-1;
 $text-color:    $gray-1;
 
+// gradients
+$brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);
+$page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
+
 // Links
 // -------------------------
 $link-color:             $gray-1;

public/sass/_variables.scss

@@ -218,3 +218,4 @@ $side-menu-width:  14rem;
 
 // dashboard
 $dashboard-padding: $spacer / 2;
+

public/sass/components/_dashboard.scss

@@ -271,17 +271,12 @@ div.flot-text {
 }
 
 .dashboard-header {
-  font-family: "grafana-icons";
-  font-size: 22px;
+  font-family: $headings-font-family;
+  font-size: $font-size-h2;
   text-align: center;
   span {
     display: inline-block;
-    border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
-    border-image-slice: 1;
-    border-top: 0;
-    border-right: 0;
-    border-left: 0;
-    border-bottom: 1px solid transparent;
+    @include brand-bottom-border();
     padding: 1.2rem .5rem .4rem .5rem;
   }
 }

public/sass/components/_gf-form.scss

@@ -9,12 +9,6 @@ $gf-form-label-margin: 0.25rem;
   align-items: center;
   text-align: left;
 
-  .checkbox-label {
-    display: inline;
-    cursor: pointer;
-    padding: 8px 7px 8px 4px;
-  }
-
   .cr1 {
     margin-left: 8px;
   }
@@ -58,6 +52,15 @@ $gf-form-label-margin: 0.25rem;
 
 .gf-form-checkbox {
   flex-shrink: 0;
+  padding: $input-padding-y $input-padding-x;
+  line-height: $input-line-height;
+
+  .checkbox-label {
+    display: inline;
+    cursor: pointer;
+    padding: $input-padding-y $input-padding-x;
+    line-height: $input-line-height;
+  }
 }
 
 .gf-form-input {

public/sass/components/_modals.scss

@@ -118,6 +118,8 @@
   }
 
   .share-modal-big-icon {
+    margin-bottom: 2rem;
+
     .fa, .icon-gf {
       font-size: 70px;
     }
@@ -147,3 +149,9 @@
     text-overflow: ellipsis;
   }
 }
+
+.modal-body {
+  .position-center {
+    display: inline-block;
+  }
+}

public/sass/components/_submenu.scss

@@ -1,5 +1,5 @@
 .submenu-controls {
-  margin: 10px 5px;
+  margin: 0 5px;
   font-size: 16px;
 }
 
@@ -23,6 +23,7 @@
   border: $panel-border;
   margin-right: 10px;
   display: inline-block;
+  float: left;
 
   .fa-caret-down {
     font-size: 75%;
@@ -37,11 +38,35 @@
   .label-tag {
     margin: 0 5px;
   }
+
+  padding: 8px 7px;
+  box-sizing: content-box;
+  display: inline-block;
+  font-weight: normal;
+  display: inline-block;
+  color: $text-color;
+}
+
+.submenu-item-label {
+  padding: 8px 0px 8px 7px;
+  box-sizing: content-box;
+  display: inline-block;
+  font-weight: normal;
+  display: inline-block;
 }
 
 .variable-link-wrapper  {
   display: inline-block;
   position: relative;
+
+  .hidden-input {
+    padding: 8px 7px;
+    border: none;
+    margin: 0px;
+    background: transparent;
+    border-radius: 0;
+    border-right: 1px solid $tight-form-border;
+  }
 }
 
 .variable-value-dropdown {

public/sass/components/_tabbed_view.scss

@@ -1,19 +1,27 @@
 .tabbed-view {
   background-color: $page-bg;
-  background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
+  background-image: $page-gradient;
   margin: -$dashboard-padding;
   margin-bottom: $spacer*2;
   padding: $spacer*3;
+
+  &.tabbed-view--panel-edit {
+    padding: 0;
+
+    .tabbed-view-header {
+      padding: 0;
+      background-color: $body-bg;
+      padding: 1.5em 1rem 0 1rem;
+    }
+    .gf-tabs-link.active {
+      background-color: $panel-bg;
+    }
+  }
 }
 
 .tabbed-view-header {
   @include clearfix();
-  border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
-  border-image-slice: 1;
-  border-top: 0;
-  border-right: 0;
-  border-left: 0;
-  border-bottom: 1px solid transparent;
+  @include brand-bottom-border();
 }
 
 .tabbed-view-title {

public/sass/components/_tabs.scss

@@ -55,7 +55,7 @@
 
   &:hover,
   &:focus {
-    border-color: #F9952B;
+    border-color: rgba(216, 131, 40, 0.77);
     color: $link-color;
   }
 
@@ -63,8 +63,7 @@
   &.active:hover,
   &.active:focus {
     @include border-radius(3px);
-    border: 1px solid #F9952B;
-    background-color: transparent;
+    border-color: rgba(216, 131, 40, 0.77);
     border-bottom: 1px solid $panel-bg;
     color: $link-color;
   }

public/sass/components/_tags.scss

@@ -25,6 +25,7 @@
   padding: 2px 6px;
   border-width: 1px;
   border-style: solid;
+  box-shadow: 0 0 1px rgba($white,.2);
   .icon-tag {
     position: relative;
     top: 1px;

public/sass/layout/_page.scss

@@ -33,12 +33,7 @@
   justify-content: flex-end;
   align-items: flex-end;
   flex-wrap: wrap-reverse;
-  border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
-  border-image-slice: 1;
-  border-top: 0;
-  border-right: 0;
-  border-left: 0;
-  border-bottom: 1px solid transparent;
+  @include brand-bottom-border();
 
   h1 {
     font-style: italic;

public/sass/mixins/_mixins.scss

@@ -343,3 +343,12 @@
   border-bottom: 0;
   border-left: 2px solid transparent;
 }
+
+@mixin brand-bottom-border() {
+  border-image: $brand-gradient;
+  border-image-slice: 1;
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  border-bottom: 1px solid transparent;
+}