Merge pull request #295 from rhamilto/delete-project-modal

Align delete project modal with PatternFly standard

dist/less/_core.less

-.delete-resource-modal {
-  background-color: @gray-lighter;
-  h1 {
-    font-size: 21px;
-    font-weight: 500;
-    margin-bottom: 20px;
-    word-wrap: break-word; // firefox, IE
-    word-break: break-word; // non-standard for webkit
-    overflow-wrap: break-word; // new name as per the CSS3 spec
-    min-width: 0;          // firefox (1)
-  }
-  p {
-    font-size: @font-size-large + 1;
-  }
-  .help-block {
-    margin-top: 0px;
-    margin-bottom: 10px;
-  }
-}
-
 .dialog-btn {
   float: right !important;
   margin-right: 10px;

dist/origin-web-common-ui.js

@@ -322,8 +322,13 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
     "<div class=\"delete-resource-modal\">\n" +
     "  <!-- Use a form so that the enter key submits when typing a project name to confirm. -->\n" +
     "  <form>\n" +
+    "    <div class=\"modal-header\">\n" +
+    "      <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\" aria-label=\"Close\" ng-click=\"cancel()\">\n" +
+    "        <span class=\"pficon pficon-close\"></span>\n" +
+    "      </button>\n" +
+    "      <h1 class=\"modal-title\">Are you sure you want to delete the project '<strong>{{project | displayName}}</strong>'?</h1>\n" +
+    "    </div>\n" +
     "    <div class=\"modal-body\">\n" +
-    "      <h1>Are you sure you want to delete the project '<strong>{{project | displayName}}</strong>'?</h1>\n" +
     "      <p>\n" +
     "        This will <strong>delete all resources</strong> associated with\n" +
     "        the project {{project | displayName}} and <strong>cannot be\n" +
@@ -346,8 +351,8 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
     "      </div>\n" +
     "    </div>\n" +
     "    <div class=\"modal-footer\">\n" +
-    "      <button ng-disabled=\"typeNameToConfirm && confirmName !== project.metadata.name && confirmName !== (project | displayName : false)\" class=\"btn btn-lg btn-danger\" type=\"submit\" ng-click=\"delete()\">Delete</button>\n" +
-    "      <button class=\"btn btn-lg btn-default\" type=\"button\" ng-click=\"cancel()\">Cancel</button>\n" +
+    "      <button class=\"btn btn-default\" type=\"button\" ng-click=\"cancel()\">Cancel</button>\n" +
+    "      <button ng-disabled=\"typeNameToConfirm && confirmName !== project.metadata.name && confirmName !== (project | displayName : false)\" class=\"btn btn-danger\" type=\"submit\" ng-click=\"delete()\">Delete</button>\n" +
     "    </div>\n" +
     "  </form>\n" +
     "</div>\n"
@@ -687,7 +692,6 @@ angular.module("openshiftCommonUI")
 
           // opening the modal with settings scope as parent
           var modalInstance = $uibModal.open({
-            animation: true,
             templateUrl: 'src/components/delete-project/delete-project-modal.html',
             controller: 'DeleteProjectModalController',
             scope: scope
@@ -723,7 +727,6 @@ angular.module("openshiftCommonUI")
       }
     };
   });
-
 ;'use strict';
 /* jshint unused: false */
 

dist/origin-web-common.css

@@ -122,25 +122,6 @@
     font-size: 36px;
   }
 }
-.delete-resource-modal {
-  background-color: #f1f1f1;
-}
-.delete-resource-modal h1 {
-  font-size: 21px;
-  font-weight: 500;
-  margin-bottom: 20px;
-  word-wrap: break-word;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  min-width: 0;
-}
-.delete-resource-modal p {
-  font-size: 15px;
-}
-.delete-resource-modal .help-block {
-  margin-top: 0px;
-  margin-bottom: 10px;
-}
 .dialog-btn {
   float: right !important;
   margin-right: 10px;

dist/origin-web-common.js

@@ -478,8 +478,13 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
     "<div class=\"delete-resource-modal\">\n" +
     "  <!-- Use a form so that the enter key submits when typing a project name to confirm. -->\n" +
     "  <form>\n" +
+    "    <div class=\"modal-header\">\n" +
+    "      <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\" aria-label=\"Close\" ng-click=\"cancel()\">\n" +
+    "        <span class=\"pficon pficon-close\"></span>\n" +
+    "      </button>\n" +
+    "      <h1 class=\"modal-title\">Are you sure you want to delete the project '<strong>{{project | displayName}}</strong>'?</h1>\n" +
+    "    </div>\n" +
     "    <div class=\"modal-body\">\n" +
-    "      <h1>Are you sure you want to delete the project '<strong>{{project | displayName}}</strong>'?</h1>\n" +
     "      <p>\n" +
     "        This will <strong>delete all resources</strong> associated with\n" +
     "        the project {{project | displayName}} and <strong>cannot be\n" +
@@ -502,8 +507,8 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
     "      </div>\n" +
     "    </div>\n" +
     "    <div class=\"modal-footer\">\n" +
-    "      <button ng-disabled=\"typeNameToConfirm && confirmName !== project.metadata.name && confirmName !== (project | displayName : false)\" class=\"btn btn-lg btn-danger\" type=\"submit\" ng-click=\"delete()\">Delete</button>\n" +
-    "      <button class=\"btn btn-lg btn-default\" type=\"button\" ng-click=\"cancel()\">Cancel</button>\n" +
+    "      <button class=\"btn btn-default\" type=\"button\" ng-click=\"cancel()\">Cancel</button>\n" +
+    "      <button ng-disabled=\"typeNameToConfirm && confirmName !== project.metadata.name && confirmName !== (project | displayName : false)\" class=\"btn btn-danger\" type=\"submit\" ng-click=\"delete()\">Delete</button>\n" +
     "    </div>\n" +
     "  </form>\n" +
     "</div>\n"
@@ -843,7 +848,6 @@ angular.module("openshiftCommonUI")
 
           // opening the modal with settings scope as parent
           var modalInstance = $uibModal.open({
-            animation: true,
             templateUrl: 'src/components/delete-project/delete-project-modal.html',
             controller: 'DeleteProjectModalController',
             scope: scope
@@ -879,7 +883,6 @@ angular.module("openshiftCommonUI")
       }
     };
   }]);
-
 ;'use strict';
 /* jshint unused: false */
 

dist/scripts/templates.js

@@ -293,8 +293,13 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
     "<div class=\"delete-resource-modal\">\n" +
     "  <!-- Use a form so that the enter key submits when typing a project name to confirm. -->\n" +
     "  <form>\n" +
+    "    <div class=\"modal-header\">\n" +
+    "      <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\" aria-label=\"Close\" ng-click=\"cancel()\">\n" +
+    "        <span class=\"pficon pficon-close\"></span>\n" +
+    "      </button>\n" +
+    "      <h1 class=\"modal-title\">Are you sure you want to delete the project '<strong>{{project | displayName}}</strong>'?</h1>\n" +
+    "    </div>\n" +
     "    <div class=\"modal-body\">\n" +
-    "      <h1>Are you sure you want to delete the project '<strong>{{project | displayName}}</strong>'?</h1>\n" +
     "      <p>\n" +
     "        This will <strong>delete all resources</strong> associated with\n" +
     "        the project {{project | displayName}} and <strong>cannot be\n" +
@@ -317,8 +322,8 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
     "      </div>\n" +
     "    </div>\n" +
     "    <div class=\"modal-footer\">\n" +
-    "      <button ng-disabled=\"typeNameToConfirm && confirmName !== project.metadata.name && confirmName !== (project | displayName : false)\" class=\"btn btn-lg btn-danger\" type=\"submit\" ng-click=\"delete()\">Delete</button>\n" +
-    "      <button class=\"btn btn-lg btn-default\" type=\"button\" ng-click=\"cancel()\">Cancel</button>\n" +
+    "      <button class=\"btn btn-default\" type=\"button\" ng-click=\"cancel()\">Cancel</button>\n" +
+    "      <button ng-disabled=\"typeNameToConfirm && confirmName !== project.metadata.name && confirmName !== (project | displayName : false)\" class=\"btn btn-danger\" type=\"submit\" ng-click=\"delete()\">Delete</button>\n" +
     "    </div>\n" +
     "  </form>\n" +
     "</div>\n"

src/components/delete-project/delete-project-modal.html

 <div class="delete-resource-modal">
   <!-- Use a form so that the enter key submits when typing a project name to confirm. -->
   <form>
+    <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close" ng-click="cancel()">
+        <span class="pficon pficon-close"></span>
+      </button>
+      <h1 class="modal-title">Are you sure you want to delete the project '<strong>{{project | displayName}}</strong>'?</h1>
+    </div>
     <div class="modal-body">
-      <h1>Are you sure you want to delete the project '<strong>{{project | displayName}}</strong>'?</h1>
       <p>
         This will <strong>delete all resources</strong> associated with
         the project {{project | displayName}} and <strong>cannot be
@@ -25,8 +30,8 @@
       </div>
     </div>
     <div class="modal-footer">
-      <button ng-disabled="typeNameToConfirm && confirmName !== project.metadata.name && confirmName !== (project | displayName : false)" class="btn btn-lg btn-danger" type="submit" ng-click="delete()">Delete</button>
-      <button class="btn btn-lg btn-default" type="button" ng-click="cancel()">Cancel</button>
+      <button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
+      <button ng-disabled="typeNameToConfirm && confirmName !== project.metadata.name && confirmName !== (project | displayName : false)" class="btn btn-danger" type="submit" ng-click="delete()">Delete</button>
     </div>
   </form>
 </div>

src/components/delete-project/deleteProject.js

@@ -59,7 +59,6 @@ angular.module("openshiftCommonUI")
 
           // opening the modal with settings scope as parent
           var modalInstance = $uibModal.open({
-            animation: true,
             templateUrl: 'src/components/delete-project/delete-project-modal.html',
             controller: 'DeleteProjectModalController',
             scope: scope
@@ -95,4 +94,3 @@ angular.module("openshiftCommonUI")
       }
     };
   });
-

src/styles/_core.less

-.delete-resource-modal {
-  background-color: @gray-lighter;
-  h1 {
-    font-size: 21px;
-    font-weight: 500;
-    margin-bottom: 20px;
-    word-wrap: break-word; // firefox, IE
-    word-break: break-word; // non-standard for webkit
-    overflow-wrap: break-word; // new name as per the CSS3 spec
-    min-width: 0;          // firefox (1)
-  }
-  p {
-    font-size: @font-size-large + 1;
-  }
-  .help-block {
-    margin-top: 0px;
-    margin-bottom: 10px;
-  }
-}
-
 .dialog-btn {
   float: right !important;
   margin-right: 10px;