Add -Dialog Section and Overlay examples

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

@@ -0,0 +1,77 @@
+(function () {
+ 'use strict';
+
+
+ function dialogsController($scope, overlayService) {
+
+ var vm = this;
+
+ vm.openConfirmOverlay = openConfirmOverlay;
+ vm.openCustomOverlay = openCustomOverlay;
+
+ function openConfirmOverlay(content, confirmType) {
+
+ var options = {
+ title: 'Simple',
+ content: content,
+ disableBackdropClick: true,
+ disableEscKey: true,
+ confirmType: confirmType, // type of confirmation.
+ submit: function () {
+ overlayService.close();
+ }
+ };
+
+ overlayService.confirm(options);
+
+ }
+
+ function openCustomOverlay() {
+
+
+ var options = {
+ view: Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/uiexamples/dialogs/overlays/customOverlay.html',
+ title: 'Custom overlay',
+ description: 'A custom view in an overlay',
+ disableBackdropClick: true,
+ disableEscKey: true,
+ submitButtonLabel: 'Do Things',
+ closeButtonLable: 'Close',
+ submit: function (model) {
+
+ // multi-step overlay, will still call the submit
+ // as its the only button, 
+ // but you can use values in the model, to check
+ // if you are ready to close.
+ // simple example, we have a process function 
+ // (in the overlay's controller) that does stuff
+ // and sets complete when done. 
+
+ // when complete is true, we close the overlay.
+ // until then we keep calling process.
+
+ if (model.complete) {
+ overlayService.close();
+ }
+ else {
+ model.process();
+ }
+
+ },
+ close: function () {
+ overlayService.close();
+ }
+
+ }
+
+ overlayService.open(options);
+
+ }
+
+
+ }
+
+ angular.module('umbraco')
+ .controller('exampleDialogController', dialogsController);
+
+})();

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

@@ -0,0 +1,47 @@
+<div ng-controller="exampleDialogController as vm">
+
+ <umb-box>
+ <umb-box-header title-key="exdialog_overlayTitle"
+ description-key="exdialog_overlayDescription">
+ </umb-box-header>
+ <umb-box-content>
+
+ <localize key="exdialog_overlayConfirmIntro"></localize>
+
+ <umb-button action="vm.openConfirmOverlay('Are your really sure?')"
+ label="Confirm"
+ type="button"
+ button-style="action"></umb-button>
+
+ <umb-button action="vm.openConfirmOverlay('Are your really sure?', 'remove')"
+ label="Confirm remove"
+ type="button"
+ button-style="success"></umb-button>
+
+ <umb-button action="vm.openConfirmOverlay('Are your really sure?', 'delete')"
+ label="Confirm delete"
+ type="button"
+ button-style="danger"></umb-button>
+ </umb-box-content>
+ </umb-box>
+ <umb-box>
+
+ <umb-box-header title-key="exdialog_overlayCustom"
+ description-key="exdialog_overlayCustomDescription">
+ </umb-box-header>
+ <umb-box-content>
+
+ <localize key="exdialog_overlayCustomIntro"></localize>
+
+ <umb-button action="vm.openCustomOverlay()"
+ label="Custom Overlay"
+ type="button"
+ button-style="action"></umb-button>
+
+
+
+ </umb-box-content>
+ </umb-box>
+
+
+</div>

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

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<language alias="en" intName="English (UK)" localName="English (UK)" lcid="" culture="en-GB">
+<area alias="exdialog">
+<key alias="overlayTitle">Overlay Dialogs</key>
+<key alias="overlayDescription">Overlays give you a 'modal' dialog across the whole screen</key>
+
+<key alias="overlayConfirmIntro">
+<![CDATA[<p>The overlay service has a confirm option built, in with this you can quickly create a confirm
+ dialog, to present your users with a simple option.
+ </p>]]>
+</key>
+
+<key alias="overlayCustom">Custom overlay</key>
+<key alias="overlayCustomDescription">Custom overlays give you more control</key>
+
+<key alias="overlayCustomIntro">
+<![CDATA[<p>For more custom options you need to provide a view and a custom controller to manage what
+ happens inside the overlay.</p>
+ <p>With this method you can control the submit and close process so you can (with a little fangling)
+ have muilt-step processes inside the overlay window.</p>]]>
+</key>
+</area>
+</language>

src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/dialogs/overlays/customoverlay.controller.js

@@ -0,0 +1,43 @@
+(function () {
+ 'use strict';
+
+ function customOverlayController($scope) {
+
+ var vm = this;
+ $scope.model.complete = false;
+
+ vm.step = 1;
+
+ vm.icon = 'icon-box';
+
+ vm.content = 'A custom overlay.'
+
+ // add method to model, so we can call it from parent 
+ $scope.model.process = process;
+
+ function process() {
+
+ vm.step++;
+ $scope.model.description = 'Step ' + vm.step;
+
+ switch (vm.step) {
+ case 2:
+ vm.icon = 'icon-sprout';
+ vm.content = 'Do another thing';
+ $scope.model.submitButtonLabel = 'One last thing';
+ break;
+ case 3:
+ vm.icon = 'icon-check color-green';
+ vm.content = 'We are done now';
+ $scope.model.submitButtonLabel = 'Finish';
+ $scope.model.complete = true;
+ break;
+ }
+
+
+ }
+ }
+
+ angular.module('umbraco')
+ .controller('exampleCustomOverlayController', customOverlayController);
+})();

src/Our.Umbraco.UiExamples/App_Plugins/uiexamples/dialogs/overlays/customoverlay.html

@@ -0,0 +1,6 @@
+<div ng-controller="exampleCustomOverlayController as vm">
+ <div class="flex justify-center flex-column items-center">
+ <i class="large icon {{vm.icon}}"></i>
+ <h3>{{vm.content}}</h3>
+ </div>
+</div>

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

@@ -0,0 +1,6 @@
+{
+ "javascript": [
+ "~/app_plugins/uiexamples/dialogs/dialogs.controller.js",
+ "~/app_plugins/uiexamples/dialogs/overlays/customoverlay.controller.js" 
+ ]
+}

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

@@ -30,10 +30,10 @@
  'view': Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/uiexamples/layout/layout.html'
  },
  {
- 'name': 'Tabs',
- 'alias': 'tabs',
- 'icon': 'icon-tab',
- 'view': Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/uiexamples/tabs/tabs.html',
+ 'name': 'Dialogs',
+ 'alias': 'dialogs',
+ 'icon': 'icon-browser-window',
+ 'view': Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/uiexamples/dialogs/dialogs.html',
  },
  {
  'name': 'Icons',
@@ -47,6 +47,12 @@
  'icon': 'icon-checkbox-empty',
  'view': Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/uiexamples/buttons/buttons.html',
  },
+ {
+ 'name': 'Tabs',
+ 'alias': 'tabs',
+ 'icon': 'icon-tab',
+ 'view': Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/uiexamples/tabs/tabs.html',
+ }
  ]
  }
 

src/UIExamples.Website/App_Plugins/uiexamples/dialogs/dialogs.controller.html

@@ -0,0 +1 @@
+(fun)

src/UIExamples.Website/App_Plugins/uiexamples/dialogs/dialogs.controller.js

@@ -0,0 +1,77 @@
+(function () {
+ 'use strict';
+
+
+ function dialogsController($scope, overlayService) {
+
+ var vm = this;
+
+ vm.openConfirmOverlay = openConfirmOverlay;
+ vm.openCustomOverlay = openCustomOverlay;
+
+ function openConfirmOverlay(content, confirmType) {
+
+ var options = {
+ title: 'Simple',
+ content: content,
+ disableBackdropClick: true,
+ disableEscKey: true,
+ confirmType: confirmType, // type of confirmation.
+ submit: function () {
+ overlayService.close();
+ }
+ };
+
+ overlayService.confirm(options);
+
+ }
+
+ function openCustomOverlay() {
+
+
+ var options = {
+ view: Umbraco.Sys.ServerVariables.umbracoSettings.appPluginsPath + '/uiexamples/dialogs/overlays/customOverlay.html',
+ title: 'Custom overlay',
+ description: 'A custom view in an overlay',
+ disableBackdropClick: true,
+ disableEscKey: true,
+ submitButtonLabel: 'Do Things',
+ closeButtonLable: 'Close',
+ submit: function (model) {
+
+ // multi-step overlay, will still call the submit
+ // as its the only button, 
+ // but you can use values in the model, to check
+ // if you are ready to close.
+ // simple example, we have a process function 
+ // (in the overlay's controller) that does stuff
+ // and sets complete when done. 
+
+ // when complete is true, we close the overlay.
+ // until then we keep calling process.
+
+ if (model.complete) {
+ overlayService.close();
+ }
+ else {
+ model.process();
+ }
+
+ },
+ close: function () {
+ overlayService.close();
+ }
+
+ }
+
+ overlayService.open(options);
+
+ }
+
+
+ }
+
+ angular.module('umbraco')
+ .controller('exampleDialogController', dialogsController);
+
+})();

src/UIExamples.Website/App_Plugins/uiexamples/dialogs/dialogs.html

@@ -0,0 +1,47 @@
+<div ng-controller="exampleDialogController as vm">
+
+ <umb-box>
+ <umb-box-header title-key="exdialog_overlayTitle"
+ description-key="exdialog_overlayDescription">
+ </umb-box-header>
+ <umb-box-content>
+
+ <localize key="exdialog_overlayConfirmIntro"></localize>
+
+ <umb-button action="vm.openConfirmOverlay('Are your really sure?')"
+ label="Confirm"
+ type="button"
+ button-style="action"></umb-button>
+
+ <umb-button action="vm.openConfirmOverlay('Are your really sure?', 'remove')"
+ label="Confirm remove"
+ type="button"
+ button-style="success"></umb-button>
+
+ <umb-button action="vm.openConfirmOverlay('Are your really sure?', 'delete')"
+ label="Confirm delete"
+ type="button"
+ button-style="danger"></umb-button>
+ </umb-box-content>
+ </umb-box>
+ <umb-box>
+
+ <umb-box-header title-key="exdialog_overlayCustom"
+ description-key="exdialog_overlayCustomDescription">
+ </umb-box-header>
+ <umb-box-content>
+
+ <localize key="exdialog_overlayCustomIntro"></localize>
+
+ <umb-button action="vm.openCustomOverlay()"
+ label="Custom Overlay"
+ type="button"
+ button-style="action"></umb-button>
+
+
+
+ </umb-box-content>
+ </umb-box>
+
+
+</div>

src/UIExamples.Website/App_Plugins/uiexamples/dialogs/lang/en.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<language alias="en" intName="English (UK)" localName="English (UK)" lcid="" culture="en-GB">
+<area alias="exdialog">
+<key alias="overlayTitle">Overlay Dialogs</key>
+<key alias="overlayDescription">Overlays give you a 'modal' dialog across the whole screen</key>
+
+<key alias="overlayConfirmIntro">
+<![CDATA[<p>The overlay service has a confirm option built, in with this you can quickly create a confirm
+ dialog, to present your users with a simple option.
+ </p>]]>
+</key>
+
+<key alias="overlayCustom">Custom overlay</key>
+<key alias="overlayCustomDescription">Custom overlays give you more control</key>
+
+<key alias="overlayCustomIntro">
+<![CDATA[<p>For more custom options you need to provide a view and a custom controller to manage what
+ happens inside the overlay.</p>
+ <p>With this method you can control the submit and close process so you can (with a little fangling)
+ have muilt-step processes inside the overlay window.</p>]]>
+</key>
+</area>
+</language>