Merge pull request #24 from leekelleher/dev/alerts-notifications

Adds alerts and notifications examples

Author: Mantus667

src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/alerts.controller.js

@@ -0,0 +1,55 @@
+(function () {
+    'use strict';
+
+    function alertsController($scope, exampleResource, notificationsService) {
+
+        var vm = this;
+
+        function init() {
+
+            vm.loading = true;
+
+            vm.linkAway = exampleResource.linkAway;
+
+            vm.alerts = [
+                { type: "form", class: "alert alert-form", headline: "Form", message: "A message, displaying on a white background with a dark border.", style: "info" },
+                { type: "info", class: "alert alert-info", headline: "Info", message: "An informational message, displaying on a blue background.", style: "action" },
+                { type: "success", class: "alert alert-success", headline: "Success", message: "A success message, displaying on a green background.", style: "success" },
+                { type: "warning", class: "alert alert-warning", headline: "Warning", message: "A warning message, displaying on an orange background.", style: "warning" },
+                { type: "error", class: "alert alert-error", headline: "Error", message: "An error message, displaying on a red background.", style: "danger" },
+                { type: "", class: "well", headline: "Well", message: "An informational message, displaying inset on a gray background.", style: "info" }
+            ];
+
+            vm.snippetNotification = `// To display a success notification.
+notificationsService.success("Document Published", "hooraaaay for you!");
+
+// To display an error notification.
+notificationsService.error("Document Failed", "booooh");
+
+// To display a custom notification, with sticky.
+notificationsService.add({ headline: 'Custom notification', message: 'My custom notification message', type: 'info', sticky: true });`;
+
+            vm.showNotification = showNotification;
+            vm.snippetAlert = snippetAlert;
+        };
+
+        function showNotification(item) {
+            notificationsService.add({
+                headline: item.headline,
+                message: item.message,
+                type: item.type
+            });
+        };
+
+        function snippetAlert(item) {
+            return `<div class="${item.class}" role="alert">
+    <h4>${item.headline}</h4>
+    <span>${item.message}</span>
+</div>`;
+        };
+
+        init();
+    };
+
+    angular.module('umbraco').controller('alertsController', alertsController);
+})();

src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/alerts.html

@@ -0,0 +1,75 @@
+<div class="editor-panels-container" ng-controller="alertsController as vm">
+
+    <umb-box>
+        <umb-box-header title-key="alerts_alertsTitle"></umb-box-header>
+        <umb-box-content>
+            <p>The alerts and notifications can provide contextual feedback messages for typical user actions.</p>
+            <p>The difference between alerts and notifications is that, an <strong>alert</strong> is a set of visual styles to display a feedback message, whereas a <strong>notification</strong> is a temporary feedback message that is displayed at the bottom of the screen.</p>
+        </umb-box-content>
+    </umb-box>
+
+    <umb-box>
+        <umb-box-header title="Notifications">
+            <umb-button action="vm.linkAway('https://our.umbraco.com/apidocs/v8/ui/#/api/umbraco.directives.directive:umbNotifications');"
+                        label="umb-notifications"
+                        type="button"
+                        icon="icon-book"
+                        button-style="info">
+            </umb-button>
+        </umb-box-header>
+        <umb-box-content>
+
+            <p>A notification is a contextual feedback message that appears at the bottom of the screen.</p>
+
+            <h5>Initialization</h5>
+            <p>The initialization of the <code>umb-notifications</code> directive is done at page level, typically you will not need to this, as it is already added to the main CMS backoffice pages.</p>
+            <p>But if you do need to add the directive, this is the code snippet:</p>
+            <umb-code-snippet language="'html'">&lt;umb-notifications&gt;&lt;/umb-notifications&gt;</umb-code-snippet>
+
+            <h5>Examples</h5>
+            <p>The styling and types of the notifications are the same as the alerts (below). Use the buttons below to trigger the different types.</p>
+
+            <div class="mb3">
+                <umb-button ng-repeat="item in vm.alerts"
+                            ng-if="item.type != ''"
+                            action="vm.showNotification(item)"
+                            label="{{item.headline}}"
+                            type="button"
+                            button-style="{{item.style}}">
+                </umb-button>
+            </div>
+
+            <p>The default timeout for a notification message before it disappears is 10 seconds.</p>
+
+            <h5>Code</h5>
+            <p>To use notifications in your own code, you will need to inject the <a href="https://our.umbraco.com/apidocs/v8/ui/#/api/umbraco.services.notificationsService" target="_blank"><code>notificationsService</code></a> into your AngularJS code.</p>
+            <umb-code-snippet language="'javascript'">{{vm.snippetNotification}}</umb-code-snippet>
+
+        </umb-box-content>
+    </umb-box>
+
+    <umb-box>
+        <umb-box-header title="Alerts"></umb-box-header>
+        <umb-box-content>
+
+            <p>An alert is a set of visual styles (e.g. CSS classes), that can be used to display feedback messages.</p>
+
+            <div class="flex" ng-repeat="item in vm.alerts">
+
+                <div class="mt3 umb-editor--small">
+                    <div ng-class="item.class" role="alert">
+                        <h4 ng-bind="item.headline"></h4>
+                        <span ng-bind="item.message"></span>
+                    </div>
+                </div>
+
+                <div class="ml3 umb-editor--medium">
+                    <umb-code-snippet language="'html'">{{vm.snippetAlert(item)}}</umb-code-snippet>
+                </div>
+
+            </div>
+
+        </umb-box-content>
+    </umb-box>
+
+</div>

src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/lang/en.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<language alias="en" intName="English (UK)" localName="English (UK)" lcid="" culture="en-GB">
+  <area alias="alerts">
+    <key alias="alertsTitle">Alerts and notifications</key>
+  </area>
+</language>

src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/package.manifest

@@ -0,0 +1,5 @@
+{
+  "javascript": [
+    "~/App_Plugins/uiexamples/alerts/alerts.controller.js"
+  ]
+}

src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/uiexamples.section.controller.js

@@ -58,6 +58,12 @@
                     'alias': 'editorPanels',
                     'icon': 'icon-screensharing',
                     'view': Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/uiexamples/editorPanels/panels.html',
+                },
+                {
+                    'name': 'Alerts',
+                    'alias': 'alerts',
+                    'icon': 'icon-alert',
+                    'view': Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/uiexamples/alerts/alerts.html',
                 }
             ]
         }