refactor&fix(modals): use bootstrap ui instead simple bootstrap

src/app/pages/ui/modals/ModalsPageCtrl.js

@@ -0,0 +1,28 @@
+/**
+ * @author a.demeshko
+ * created on 18.01.2016
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.ui.notifications')
+    .controller('ModalsPageCtrl', ModalsPageCtrl);
+
+  /** @ngInject */
+  function ModalsPageCtrl($scope, $uibModal) {
+    $scope.open = function (page, size) {
+      $uibModal.open({
+        animation: true,
+        templateUrl: page,
+        size: size,
+        resolve: {
+          items: function () {
+            return $scope.items;
+          }
+        }
+      });
+    };
+  }
+
+
+})();

src/app/pages/ui/modals/message-modals.html

@@ -1,6 +0,0 @@
-<div class="modal-buttons same-width clearfix">
-  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#successModal">Success Message</button>
-  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#infoModal">Info Message</button>
-  <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#warningModal">Warning Message</button>
-  <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#dangerModal">Danger Message</button>
-</div>

src/app/pages/ui/modals/modalTemplates/basicModal.html

@@ -0,0 +1,16 @@
+<div class="modal-content">
+  <div class="modal-header">
+    <button type="button" class="close" ng-click="$dismiss()" aria-label="Close">
+      <em class="ion-ios-close-empty sn-link-close"></em>
+    </button>
+    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
+  </div>
+  <div class="modal-body">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
+    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
+    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-primary" ng-click="$dismiss()">Save changes</button>
+  </div>
+</div>

src/app/pages/ui/modals/modalTemplates/dangerModal.html

@@ -0,0 +1,9 @@
+<div class="modal-content">
+  <div class="modal-header bg-danger">
+    <i class="ion-flame"></i><span> Error</span>
+  </div>
+  <div class="modal-body text-center">Your information hasn't been saved!</div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-danger" ng-click="$dismiss()">OK</button>
+  </div>
+</div>

src/app/pages/ui/modals/modalTemplates/infoModal.html

@@ -0,0 +1,9 @@
+<div class="modal-content">
+  <div class="modal-header bg-info">
+    <i class="ion-information-circled"></i><span> Information</span>
+  </div>
+  <div class="modal-body text-center">You've got a new email!</div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-info" ng-click="$dismiss()">OK</button>
+  </div>
+</div>

src/app/pages/ui/modals/modalTemplates/largeModal.html

@@ -0,0 +1,16 @@
+<div class="modal-content">
+  <div class="modal-header">
+    <button type="button" class="close" ng-click="$dismiss()" aria-label="Close">
+      <em class="ion-ios-close-empty sn-link-close"></em>
+    </button>
+    <h4 class="modal-title">Modal title</h4>
+  </div>
+  <div class="modal-body">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
+    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
+    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-primary" ng-click="$dismiss()">Save changes</button>
+  </div>
+</div>

src/app/pages/ui/modals/modalTemplates/smallModal.html

@@ -0,0 +1,17 @@
+<div class="modal-content">
+  <div class="modal-header">
+    <button type="button" class="close" ng-click="$dismiss()" aria-label="Close">
+      <em class="ion-ios-close-empty sn-link-close"></em>
+    </button>
+    <h4 class="modal-title">Modal title</h4>
+  </div>
+  <div class="modal-body">
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
+    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
+    suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-primary" ng-click="$dismiss()">Save changes</button>
+  </div>
+</div>
+

src/app/pages/ui/modals/modalTemplates/successModal.html

@@ -0,0 +1,10 @@
+<div class="modal-content">
+  <div class="modal-header bg-success">
+    <i class="ion-checkmark"></i><span> Success</span>
+  </div>
+  <div class="modal-body text-center">Your information has been saved successfully</div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-success" ng-click="$dismiss()">OK</button>
+  </div>
+</div>
+

src/app/pages/ui/modals/modalTemplates/warningModal.html

@@ -0,0 +1,9 @@
+<div class="modal-content">
+  <div class="modal-header bg-warning">
+    <i class="ion-android-warning"></i><span> Warning</span>
+  </div>
+  <div class="modal-body text-center">Your computer is about to explode!</div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-warning" ng-click="$dismiss()">OK</button>
+  </div>
+</div>

src/app/pages/ui/modals/modals.html

@@ -5,7 +5,15 @@
          ba-panel
          ba-panel-title="Modals"
          ba-panel-class="with-scroll">
-      <div ng-include="'app/pages/ui/modals/modalsPanel.html'"></div>
+      <div class="modal-buttons clearfix">
+        <button type="button" class="btn btn-primary" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/basicModal.html', 'md')">Default modal</button>
+        <button type="button" class="btn btn-success" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/largeModal.html', 'lg')">
+          Large modal
+        </button>
+        <button type="button" class="btn btn-warning" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/smallModal.html', 'sm')">
+          Small modal
+        </button>
+      </div>
     </div>
   </div>
 
@@ -14,7 +22,18 @@
          ba-panel
          ba-panel-title="Message Modals"
          ba-panel-class="with-scroll">
-      <div ng-include="'app/pages/ui/modals/message-modals.html'"></div>
+      <div class="modal-buttons same-width clearfix">
+        <button type="button" class="btn btn-success" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/successModal.html')">
+          Success Message
+        </button>
+        <button type="button" class="btn btn-info" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/infoModal.html')">Info Message</button>
+        <button type="button" class="btn btn-warning" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/warningModal.html')">
+          Warning Message
+        </button>
+        <button type="button" class="btn btn-danger" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/dangerModal.html')">
+          Danger Message
+        </button>
+      </div>
     </div>
     <div class="col-md-6"
          ba-panel
@@ -25,138 +44,3 @@
   </div>
 
 </div>
-
-
-<!-- Modal -->
-<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <em class="ion-ios-close-empty sn-link-close"></em>
-        </button>
-        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
-      </div>
-      <div class="modal-body">
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
-        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
-        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Large modal -->
-<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
-  <div class="modal-dialog modal-lg" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <em class="ion-ios-close-empty sn-link-close"></em>
-        </button>
-        <h4 class="modal-title">Modal title</h4>
-      </div>
-      <div class="modal-body">
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
-        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
-        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Small modal -->
-<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
-  <div class="modal-dialog modal-sm" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <em class="ion-ios-close-empty sn-link-close"></em>
-        </button>
-        <h4 class="modal-title">Modal title</h4>
-      </div>
-      <div class="modal-body">
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
-        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
-        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Success modal -->
-<div class="modal fade message-modal success-modal" id="successModal" tabindex="-1" role="dialog"
-     aria-labelledby="mySmallModalLabel">
-  <div class="modal-dialog modal-sm">
-    <div class="modal-content">
-      <div class="modal-header">
-        <i class="ion-checkmark"></i>
-      </div>
-      <div class="modal-title">Success</div>
-      <div class="modal-body">Your information has been saved successfully</div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Info modal -->
-<div class="modal fade message-modal info-modal" id="infoModal" tabindex="-1" role="dialog"
-     aria-labelledby="mySmallModalLabel">
-  <div class="modal-dialog modal-sm">
-    <div class="modal-content">
-      <div class="modal-header">
-        <i class="ion-information"></i>
-      </div>
-      <div class="modal-title">Information</div>
-      <div class="modal-body">You've got a new email!</div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-info" data-dismiss="modal">OK</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Warning modal -->
-<div class="modal fade message-modal warning-modal" id="warningModal" tabindex="-1" role="dialog"
-     aria-labelledby="mySmallModalLabel">
-  <div class="modal-dialog modal-sm">
-    <div class="modal-content">
-      <div class="modal-header">
-        <i class="ion-android-warning"></i>
-      </div>
-      <div class="modal-title">Warning</div>
-      <div class="modal-body">Your computer is about to explode!</div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-warning" data-dismiss="modal">OK</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Danger modal -->
-<div class="modal fade message-modal danger-modal" id="dangerModal" tabindex="-1" role="dialog"
-     aria-labelledby="mySmallModalLabel">
-  <div class="modal-dialog modal-sm">
-    <div class="modal-content">
-      <div class="modal-header">
-        <i class="ion-flame"></i>
-      </div>
-      <div class="modal-title">Error</div>
-      <div class="modal-body">Your information hasn't been saved!</div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-danger" data-dismiss="modal">OK</button>
-      </div>
-    </div>
-  </div>
-</div>

src/app/pages/ui/modals/modals.module.js

@@ -14,6 +14,7 @@
         .state('ui.modals', {
           url: '/modals',
           templateUrl: 'app/pages/ui/modals/modals.html',
+          controller: 'ModalsPageCtrl',
           title: 'Modals',
           sidebarMeta: {
             order: 300,

src/app/pages/ui/modals/modalsPanel.html

@@ -1,5 +0,0 @@
-<div class="modal-buttons clearfix">
-  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Default modal</button>
-  <button type="button" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
-  <button type="button" class="btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
-</div>

src/sass/app/_form.scss

@@ -85,6 +85,7 @@ textarea.form-control {
 
 .modal-content {
   border-radius: 0;
+  color: $default-text;
 }
 
 @mixin setSwitchBorder($color) {