ux: nav changes

pkg/api/index.go

@@ -90,9 +90,9 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 			Icon: "fa fa-fw fa-plus",
 			Url:  setting.AppSubUrl + "/",
 			Children: []*dtos.NavLink{
-				{Text: "Dashboard", Icon: "icon-gf icon-gf-dashboard", Url: setting.AppSubUrl + "/dashboard/new"},
-				{Text: "Folder", Icon: "fa fa-fw fa-folder", Url: setting.AppSubUrl + "/dashboard/new"},
-				{Text: "Import", Icon: "fa fa-fw fa-download", Url: setting.AppSubUrl + "/dashboard/new/?editview=import"},
+				{Text: "Dashboard", Icon: "fa fa-fw fa-plus", Url: setting.AppSubUrl + "/dashboard/new"},
+				{Text: "Folder", Icon: "fa fa-fw fa-plus", Url: setting.AppSubUrl + "/dashboard/new/?editview=new-folder"},
+				{Text: "Import", Icon: "fa fa-fw fa-plus", Url: setting.AppSubUrl + "/dashboard/new/?editview=import"},
 			},
 		})
 	}

public/app/core/components/search/search.ts

@@ -158,13 +158,6 @@ export class SearchCtrl {
     this.search();
   }
 
-  showNewFolderModal() {
-    appEvents.emit('show-modal', {
-      templateHtml: '<folder-modal></folder-modal>',
-      modalClass: 'modal--narrow'
-    });
-  }
-
   search() {
     this.showImport = false;
     this.selectedIndex = 0;

public/app/core/directives/dash_edit_link.js

@@ -14,7 +14,12 @@ function ($, angular, coreModule, _) {
     'history':     { html: '<gf-dashboard-history dashboard="dashboard"></gf-dashboard-history>'},
     'timepicker':  { src: 'public/app/features/dashboard/timepicker/dropdown.html' },
     'import':      { html: '<dash-import dismiss="dismiss()"></dash-import>', isModal: true },
-    'permissions': { html: '<dash-acl-modal dismiss="dismiss()"></dash-acl-modal>', isModal: true }
+    'permissions': { html: '<dash-acl-modal dismiss="dismiss()"></dash-acl-modal>', isModal: true },
+    'new-folder':  {
+      isModal: true,
+      html: '<folder-modal dismiss="dismiss()"></folder-modal>',
+      modalClass: 'modal--narrow'
+    }
   };
 
   coreModule.default.directive('dashEditorView', function($compile, $location, $rootScope) {
@@ -87,7 +92,8 @@ function ($, angular, coreModule, _) {
             $rootScope.appEvent('show-modal', {
               templateHtml: options.html,
               scope: modalScope,
-              backdrop: 'static'
+              backdrop: 'static',
+              modalClass: options.modalClass,
             });
 
             return;

public/app/features/dashboard/folder_modal/folder.html

 <div class="modal-body">
   <div class="modal-header">
     <h2 class="modal-header-title">
-      <span class="p-l-1">Create Folder</span>
+			<i class="fa fa-folder"></i>
+      <span class="p-l-1">New Dashboard Folder</span>
     </h2>
 
     <a class="modal-header-close" ng-click="ctrl.dismiss();">
@@ -12,13 +13,12 @@
   <form name="ctrl.saveForm" ng-submit="ctrl.create()" class="modal-content folder-modal" novalidate>
     <div class="p-t-2">
       <div class="gf-form">
-        <span class="gf-form-label width-10">Folder Name</span>
-        <input type="text" ng-model="ctrl.title" required give-focus="true" class="gf-form-input max-width-14" placeholder="Enter folder name" />
+        <input type="text" ng-model="ctrl.title" required give-focus="true" class="gf-form-input" placeholder="Enter folder name" />
       </div>
     </div>
     <div class="gf-form-button-row text-center">
-      <button type="submit" class="btn btn-success">Create</button>
-      <a class="btn-text" ng-click="dismiss();">Cancel</a>
+      <button type="submit" class="btn btn-success" ng-disabled="ctrl.saveForm.$invalid">Create</button>
+      <a class="btn-text" ng-click="ctrl.dismiss();">Cancel</a>
     </div>
   </form>
 </div>

public/app/features/dashboard/folder_modal/folder.ts

@@ -6,9 +6,10 @@ import _ from 'lodash';
 
 export class FolderCtrl {
   title: string;
+  dismiss: any;
 
   /** @ngInject */
-  constructor(private backendSrv, private $scope, $sce) {
+  constructor(private backendSrv, private $scope, private $location) {
   }
 
   create() {
@@ -18,17 +19,13 @@ export class FolderCtrl {
 
     const title = this.title.trim();
 
-
-    return this.backendSrv.createDashboardFolder(title).then((result) => {
-      appEvents.emit('alert-success', ['Dashboard saved', 'Saved as ' + title]);
-
-      appEvents.emit('dashboard-saved', result);
+    return this.backendSrv.createDashboardFolder(title).then(result => {
+      appEvents.emit('alert-success', ['Folder Created', 'OK']);
       this.dismiss();
-    });
-  }
 
-  dismiss() {
-    appEvents.emit('hide-modal');
+      var folderUrl = '/dashboard/db/' + result.slug;
+      this.$location.url(folderUrl);
+    });
   }
 }
 
@@ -39,6 +36,9 @@ export function folderModal() {
     controller: FolderCtrl,
     bindToController: true,
     controllerAs: 'ctrl',
+    scope: {
+      dismiss: "&"
+    }
   };
 }
 

public/sass/components/_dropdown.scss

@@ -109,7 +109,7 @@
 
       i {
         display: inline-block;
-        margin-right: 10px;
+        margin-right: 5px;
       }
 
       &:hover {