From 8bc1af9d1a13a8bebcfafe2e5a4af1f9c52c4f08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Wed, 2 Mar 2016 21:27:08 +0100
Subject: [PATCH] ux(): work on new modal design #4191

---
 .../app/features/dashboard/dashnav/dashnav.ts |  1 +
 .../dashboard/partials/saveDashboardAs.html   | 29 ++++++++++---------
 .../dashboard/partials/shareModal.html        |  8 ++---
 public/app/features/org/partials/invite.html  |  4 +--
 public/sass/components/_modals.scss           | 12 ++++++--
 5 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts
index ee3b9fc04a0..6cddafc03b8 100644
--- a/public/app/features/dashboard/dashnav/dashnav.ts
+++ b/public/app/features/dashboard/dashnav/dashnav.ts
@@ -160,6 +160,7 @@ export class DashNavCtrl {
       $scope.appEvent('show-modal', {
         src: 'public/app/features/dashboard/partials/saveDashboardAs.html',
         scope: newScope,
+        modalClass: 'modal--narrow'
       });
     };
 
diff --git a/public/app/features/dashboard/partials/saveDashboardAs.html b/public/app/features/dashboard/partials/saveDashboardAs.html
index 875876a4e63..106f54fb85f 100644
--- a/public/app/features/dashboard/partials/saveDashboardAs.html
+++ b/public/app/features/dashboard/partials/saveDashboardAs.html
@@ -1,23 +1,24 @@
-<div class="modal-body gf-box gf-box-no-margin" ng-controller="SaveDashboardAsCtrl" ng-init="init();">
-	<div class="gf-box-header">
-		<div class="gf-box-title">
+<div class="modal-body" ng-controller="SaveDashboardAsCtrl" ng-init="init();">
+	<div class="modal-header">
+		<h2 class="modal-header-title">
 			<i class="fa fa-copy"></i>
-			Save As...
-		</div>
+			<span class="p-l-1">Save As...</span>
+		</h2>
 
-		<button class="gf-box-header-close-btn" ng-click="dismiss();">
+		<a class="modal-header-close" ng-click="dismiss();">
 			<i class="fa fa-remove"></i>
-		</button>
+		</a>
 	</div>
 
-	<div class="gf-box-body">
-		<div class="text-center">
-			<h4>New title</h4>
-
-			<input type="text" class="input input-fluid" ng-model="clone.title" give-focus="true" ng-keydown="keyDown($event)">
-			<br>
-			<br>
+	<div class="modal-content">
+		<div class="p-t-2">
+			<div class="gf-form">
+				<label class="gf-form-label">New name</label>
+				<input type="text" class="gf-form-input" ng-model="clone.title" give-focus="true" ng-keydown="keyDown($event)">
+			</div>
+		</div>
 
+		<div class="gf-form-button-row text-center">
 			<a class="btn btn-success" ng-click="saveClone();">Save</a>
 			<a class="btn-text" ng-click="dismiss();">Cancel</a>
 		</div>
diff --git a/public/app/features/dashboard/partials/shareModal.html b/public/app/features/dashboard/partials/shareModal.html
index e659c33e51e..a6d439baadf 100644
--- a/public/app/features/dashboard/partials/shareModal.html
+++ b/public/app/features/dashboard/partials/shareModal.html
@@ -18,7 +18,7 @@
 		</a>
 	</div>
 
-	<div class="gf-box-body" ng-repeat="tab in tabs" ng-if="editor.index == $index">
+	<div class="modal-content" ng-repeat="tab in tabs" ng-if="editor.index == $index">
 		<div ng-include src="tab.src" class="share-modal-body"></div>
 	</div>
 
@@ -86,10 +86,8 @@
 			</div>
 		</div>
 	</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 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>
 </script>
 
diff --git a/public/app/features/org/partials/invite.html b/public/app/features/org/partials/invite.html
index bf3f2f85f7a..3bdf51d15a5 100644
--- a/public/app/features/org/partials/invite.html
+++ b/public/app/features/org/partials/invite.html
@@ -9,7 +9,7 @@
 		</a>
 	</div>
 
-	<div class="p-a-2">
+	<div class="modal-content">
 
 		<div class="modal-tagline p-b-2">
 			Send invite or add existing Grafana users to the organization
@@ -42,7 +42,7 @@
 
 			<div class="gf-form-inline gf-form-group">
 				<div class="gf-form">
-					<a class="btn btn-secondary gf-form-btn" ng-click="addInvite()">
+					<a class="btn btn-inverse btn-small" ng-click="addInvite()">
 						<i class="fa fa-plus"></i>
 						Invite another
 					</a>
diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss
index bb9bdf936f1..a92ed49813e 100644
--- a/public/sass/components/_modals.scss
+++ b/public/sass/components/_modals.scss
@@ -28,7 +28,7 @@
   @include background-clip(padding-box);
   outline: none;
 
-  max-width: 800px;
+  max-width: 750px;
   left: 0;
   right: 0;
   margin-left: auto;
@@ -56,7 +56,7 @@
 
 .modal-header-close {
   float: right;
-  padding: ($tabs-padding-top + $tabs-top-margin/2) $spacer $tabs-padding-bottom;
+  padding: 0.75rem $spacer;
 }
 
 // Body (where all modal content resides)
@@ -65,6 +65,10 @@
   overflow-y: auto;
 }
 
+.modal-content {
+  padding: $spacer*2;
+}
+
 // Remove bottom margin if need be
 .modal-form {
   margin-bottom: 0;
@@ -98,6 +102,10 @@
   }
 }
 
+.modal--narrow {
+  max-width: 500px;
+}
+
 .confirm-modal {
   max-width: 500px;