Notifications: move notifications directive to new component folder, move styles to new less file, move html element to support resizable pane

src/Umbraco.Web.UI.Client/src/common/directives/components/notifications/umbnotifications.directive.js

@@ -0,0 +1,36 @@
+/**
+ * @ngdoc directive
+ * @name umbraco.directives.directive:umbNotifications
+ */
+
+(function() {
+   'use strict';
+
+   function NotificationDirective(notificationsService) {
+
+      function link(scope, el, attr, ctrl) {
+
+         //subscribes to notifications in the notification service
+         scope.notifications = notificationsService.current;
+         scope.$watch('notificationsService.current', function (newVal, oldVal, scope) {
+             if (newVal) {
+                 scope.notifications = newVal;
+             }
+         });
+
+      }
+
+      var directive = {
+         restrict: "E",
+         replace: true,
+         templateUrl: 'views/components/notifications/umb-notifications.html',
+         link: link
+      };
+
+      return directive;
+
+   }
+
+   angular.module('umbraco.directives').directive('umbNotifications', NotificationDirective);
+
+})();

src/Umbraco.Web.UI.Client/src/common/directives/umbnotifications.directive.js

@@ -1,24 +0,0 @@
-/**
- * @ngdoc directive
- * @name umbraco.directives.directive:umbNotifications
- */
-function notificationDirective(notificationsService) {
-    return {
-        restrict: "E",    // restrict to an element
-        replace: true,   // replace the html element with the template
-        templateUrl: 'views/directives/umb-notifications.html',
-        link: function (scope, element, attr, ctrl) {
-
-            //subscribes to notifications in the notification service
-            scope.notifications = notificationsService.current;
-            scope.$watch('notificationsService.current', function (newVal, oldVal, scope) {
-                if (newVal) {
-                    scope.notifications = newVal;
-                }
-            });
-
-        }
-    };
-}
-
-angular.module('umbraco.directives').directive("umbNotifications", notificationDirective);

src/Umbraco.Web.UI.Client/src/less/alerts.less

@@ -31,6 +31,10 @@
   line-height: @baseLineHeight;
 }
 
+.close.-align-right {
+   right: 0;
+}
+
 
 // Alternate styles
 // -------------------------
@@ -63,11 +67,15 @@
 }
 
 .alert-form {
-  background-color: @grayLighter;
+  background-color: #ECECEC;
   border: 1px solid @gray !important;
   color: @gray;
 }
 
+.alert-form.-no-border {
+   border: none !important;
+}
+
 .alert-form h4 {
   color: @gray;
 }

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -99,6 +99,7 @@
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";
 
+@import "components/notifications/umb-notifications.less";
 @import "components/umb-file-dropzone.less";
 
 //page specific styles

src/Umbraco.Web.UI.Client/src/less/components/notifications/umb-notifications.less

@@ -0,0 +1,35 @@
+.umb-notifications {
+   z-index: 1000;
+   position: absolute;
+   bottom: 52px;
+   left: 0;
+   right: 0;
+   border-bottom: none;
+   margin: auto;
+   padding: 0px;
+   border: none;
+   background: none;
+   border-radius: 0;
+}
+
+.umb-notifications__notifications {
+   list-style: none;
+   margin: 0;
+   position: relative;
+}
+
+
+.umb-notifications__notification {
+   padding: 5px 20px;
+   text-shadow: none;
+   font-size: 12px;
+   border: none;
+   border-radius: 0;
+   position: relative;
+   margin-bottom: 0;
+}
+
+.umb-notifications__notification.-extra-padding {
+   padding-top: 20px;
+   padding-bottom: 20px;
+}

src/Umbraco.Web.UI.Client/src/less/main.less

@@ -34,11 +34,6 @@ h5{
   margin-top: 15px;
 }
 
-
-
-
-
-
 /* MISC FORM ELEMENTS */
 .umb-form-actions {
     background: none;
@@ -138,7 +133,7 @@ h5{
 .umb-control-group label.control-label {
   text-align: left
 }
-.umb-control-group label .help-block, 
+.umb-control-group label .help-block,
 .umb-control-group label small {
   font-size: 11px;
   color: #a0a0a0;
@@ -194,29 +189,10 @@ h5{
 
 .umb-dashboard-control a{text-decoration: underline;}
 
-.umb-dashboard-control 
+.umb-dashboard-control
   iframe{ position: absolute; display: block; width: 99%; height: 99%; overflow: auto !important;}
 
 
-/* NOTIFICATIONS */
-.umb-notification ul {
-  list-style: none;
-  margin: 0;
-  padding-left: 100px;
-  padding-right: 20px;
-  position: relative;
-}
-.umb-notification li {
-  padding: 5px 30px 5px 20px;
-  text-shadow: none;
-  font-size: 12px;
-  margin: auto;
-  margin-top: 5px;
-  border: none;
-  border-radius: 5;
-  position: relative;
-}
-
 /* TABLE */
 .umb-table {
   table-layout: fixed;
@@ -239,16 +215,16 @@ table thead a {
 
 .umb-table tbody.ui-sortable tr.ui-sortable-helper {
   background-color: @sortableHelperBg;
-  border: none; 
+  border: none;
 }
-.umb-table tbody.ui-sortable tr.ui-sortable-helper td 
+.umb-table tbody.ui-sortable tr.ui-sortable-helper td
  {
     border:none;
 }
 
 .umb-table tbody.ui-sortable tr.ui-sortable-placeholder {
   background-color: @sortablePlaceholderBg;
-  border:none;   
+  border:none;
 }
 
 .umb-table tbody.ui-sortable tr.ui-sortable-placeholder td
@@ -368,7 +344,7 @@ table thead a {
   background: @inputBorder;
   height: 1px;
   margin: 20px 0 0 0;
-  width: 82%; 
+  width: 82%;
   float: left;
 }
 
@@ -437,7 +413,7 @@ table thead a {
     color:@green;
 }
 
-// Loading Animation 
+// Loading Animation
 // ------------------------
 
 .umb-loader{
@@ -523,11 +499,11 @@ height:1px;
 }
 
 .umb-loader-wrapper {
-    
+
     position: absolute;
     right: 0;
     left: 0;
     margin: 10px 0;
-    overflow: hidden; 
+    overflow: hidden;
 
 }

src/Umbraco.Web.UI.Client/src/views/components/notifications/umb-notifications.html

@@ -0,0 +1,21 @@
+<div class="umb-notifications" ng-cloak>
+    <ul class="umb-notifications__notifications">
+        <li ng-repeat="notification in notifications"
+            class="alert alert-block alert-{{notification.type}} umb-notifications__notification animated -half-second fadeIn"
+            ng-class="{'-no-border -extra-padding': notification.type === 'form'}">
+
+            <a class='close -align-right' ng-click="removeNotification($index)" prevent-default href>&times;</a>
+
+            <div ng-if="notification.view">
+                <div ng-include="notification.view"></div>
+            </div>
+
+            <div ng-if="notification.headline">
+                <a ng-href="{{notification.url}}" target="_blank">
+                    <strong>{{notification.headline}}</strong>
+                    <span ng-bind-html="notification.message"></span>
+                </a>
+            </div>
+        </li>
+    </ul>
+</div>

src/Umbraco.Web.UI.Client/src/views/directives/umb-notifications.html

@@ -1,18 +0,0 @@
-<div id='speechbubble' class='umb-notification' ng-cloak>
-    <ul>
-        <li ng-repeat="notification in notifications" class="alert alert-block alert-{{notification.type}}" >
-            <a class='close' ng-click="removeNotification($index)" prevent-default href>&times;</a>
-
-            <div ng-if="notification.view">
-                <div ng-include="notification.view"></div>
-            </div>
-
-            <div ng-if="notification.headline">
-                <a ng-href="{{notification.url}}" target="_blank">
-                    <strong>{{notification.headline}}</strong>
-                    <span ng-bind-html="notification.message"></span>
-                </a>
-            </div>
-        </li>
-    </ul>
-</div>