diff --git a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/alerts.controller.js b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/alerts.controller.js new file mode 100644 index 0000000..45fe1de --- /dev/null +++ b/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 ``; + }; + + init(); + }; + + angular.module('umbraco').controller('alertsController', alertsController); +})(); \ No newline at end of file diff --git a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/alerts.html b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/alerts.html new file mode 100644 index 0000000..38dd635 --- /dev/null +++ b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/alerts.html @@ -0,0 +1,75 @@ +
+ + + + +

The alerts and notifications can provide contextual feedback messages for typical user actions.

+

The difference between alerts and notifications is that, an alert is a set of visual styles to display a feedback message, whereas a notification is a temporary feedback message that is displayed at the bottom of the screen.

+ + + + + + + + + + +

A notification is a contextual feedback message that appears at the bottom of the screen.

+ +
Initialization
+

The initialization of the umb-notifications directive is done at page level, typically you will not need to this, as it is already added to the main CMS backoffice pages.

+

But if you do need to add the directive, this is the code snippet:

+ <umb-notifications></umb-notifications> + +
Examples
+

The styling and types of the notifications are the same as the alerts (below). Use the buttons below to trigger the different types.

+ +
+ + +
+ +

The default timeout for a notification message before it disappears is 10 seconds.

+ +
Code
+

To use notifications in your own code, you will need to inject the notificationsService into your AngularJS code.

+ {{vm.snippetNotification}} + + + + + + + + +

An alert is a set of visual styles (e.g. CSS classes), that can be used to display feedback messages.

+ +
+ +
+
+

+ +
+
+ +
+ {{vm.snippetAlert(item)}} +
+ +
+ + + + +
diff --git a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/lang/en.xml b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/lang/en.xml new file mode 100644 index 0000000..e725ce7 --- /dev/null +++ b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/lang/en.xml @@ -0,0 +1,6 @@ + + + + Alerts and notifications + + \ No newline at end of file diff --git a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/package.manifest b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/package.manifest new file mode 100644 index 0000000..f7443d9 --- /dev/null +++ b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/alerts/package.manifest @@ -0,0 +1,5 @@ +{ + "javascript": [ + "~/App_Plugins/uiexamples/alerts/alerts.controller.js" + ] +} \ No newline at end of file diff --git a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/uiexamples.section.controller.js b/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/uiexamples.section.controller.js index ec4eba4..edf152b 100644 --- a/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/uiexamples.section.controller.js +++ b/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', } ] }