http://issues.umbraco.org/issue/U4-10801

Fixes label ui issue on template editor ui.

Updated notification settings ui to use angular instead of web forms.

src/Umbraco.Web.UI.Client/src/common/resources/content.resource.js

@@ -337,6 +337,29 @@ function contentResource($q, $http, umbDataFormatter, umbRequestHelper) {
             'Failed to retrieve data for content id ' + id);
         },
 
+        getNotifySettingsById: function (id) {
+            return umbRequestHelper.resourcePromise(
+                $http.get(
+                    umbRequestHelper.getApiUrl(
+                        "contentApiBaseUrl",
+                        "GetNotificationOptions",
+                        [{ contentId: id }])),
+                'Failed to retrieve data for content id ' + id);
+        },
+
+        setNotifySettingsById: function (id, options) {
+            if (!id) {
+                throw "contentId cannot be null";
+            }
+            return umbRequestHelper.resourcePromise(
+                $http.post(
+                    umbRequestHelper.getApiUrl(
+                        "contentApiBaseUrl",
+                        "SetNotificationOptions",
+                        { contentId: id, notifyOptions: options })),
+                'Failed to set notify settings for content id ' + id);
+        },
+
         /**
           * @ngdoc method
           * @name umbraco.resources.contentResource#getByIds

src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-toggle.less

@@ -1,10 +1,20 @@
 .umb-toggle {
-	display: flex;
-	align-items: center;
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    padding: 0;
+
+    &:focus {
+        outline: 0;
+    }
 }
 
 .umb-toggle__handler {
-    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
     width: 24px;
     height: 24px;
     background-color: @white;
@@ -62,4 +72,4 @@
 .umb-toggle__icon--right {
     right: 7px;
     color: @gray-5;
-}
+}

src/Umbraco.Web.UI.Client/src/less/components/users/umb-permission.less

@@ -16,6 +16,7 @@
 .umb-permission__content {
     display: flex;
     flex-direction: column;
+    justify-content: center;
     flex: 1 1 auto;
     cursor: pointer;
 }
@@ -23,4 +24,4 @@
 .umb-permission__description {
     font-size: 13px;
     color: @gray-5;
-}
+}

src/Umbraco.Web.UI.Client/src/views/common/overlays/contenttypeeditor/editorsettings/editorsettings.html

@@ -7,9 +7,6 @@
 
     <div class="control-group umb-control-group">
     <div class="umb-el-wrap">
-        <label class="control-label" for="dataTypeName">
-            <localize key="name"></localize>
-        </label>
         <div class="controls">
             <input type="text" ng-model="model.dataType.name" class="umb-editor" umb-auto-focus focus-on-filled="true" required />
         </div>

src/Umbraco.Web.UI.Client/src/views/common/overlays/insertfield/insertfield.html

@@ -66,10 +66,8 @@
         <div class="control-group umb-control-group">
             <div class="umb-el-wrap">
                 <div class="controls">
-                    <label class="control-label" >
+                    <label>
                         <localize key="templateEditor_recursive">Recursive</localize>
-                    </label>
-                    <label for="recursive"> 
                         <input id="recursive" type="checkbox" name="recursive" ng-model="vm.recursive">
                         <localize key="templateEditor_recursiveDescr">Yes, make it recursive</localize>
                     </label>
@@ -159,13 +157,11 @@
         <div class="control-group umb-control-group">
             <div class="umb-el-wrap">
                 <div class="controls">
-                    <div>
-                        <label class="control-label" for="linebreaks">
+                    <label>
+                        <span class="control-label">
                             <localize key="templateEditor_convertLineBreaks">Convert line breaks</localize>
                             <small><localize key="templateEditor_convertLineBreaksHelp">Replaces line breaks with break html tag</localize></small>
-                        </label>
-                    </div>
-                    <label for="linebreaks">
+                        </span>
                       <input type="checkbox" id="linebreaks" name="linebreaks" ng-model="vm.convertLinebreaks">
                       <localize key="templateEditor_convertLineBreaksDescription">Yes, convert line breaks</localize>
                     </label>

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

@@ -1,4 +1,4 @@
-<a href="" ng-click="click()" class="umb-toggle dib" ng-class="{'umb-toggle--checked': checked}">
+<button ng-click="click()" class="umb-toggle dib" ng-class="{'umb-toggle--checked': checked}">
 
     <span ng-if="!labelPosition && showLabels === 'true' || labelPosition === 'left' && showLabels === 'true'">
         <span ng-if="!checked" class="umb-toggle__label umb-toggle__label--left">{{ displayLabelOff }}</span>
@@ -16,4 +16,4 @@
         <span ng-if="checked" class="umb-toggle__label umb-toggle__label--right">{{ displayLabelOn }}</span>
     </span>
 
-</a>
+</button>

src/Umbraco.Web.UI.Client/src/views/content/content.notify.controller.js

@@ -0,0 +1,49 @@
+(function () {
+    function CreateNotifyController(
+        $scope,
+        contentResource,
+        notificationsService,
+        navigationService,
+        localizationService,
+        angularHelper) {
+        var vm = this;
+        var currentForm;
+        vm.notifyOptions = [];
+        vm.save = save;
+        vm.cancel = cancel;
+        vm.message = {
+            name: $scope.currentNode.name
+        };;
+        function onInit() {
+            vm.loading = true;
+            contentResource.getNotifySettingsById($scope.currentNode.id).then(function (options) {
+                currentForm = angularHelper.getCurrentForm($scope);
+                vm.loading = false;
+                vm.notifyOptions = options;
+            });
+        }
+        function cancel() {
+            navigationService.hideMenu();
+        };
+        function save(notifyOptions) {
+            vm.saveState = "busy";
+            vm.saveError = false;
+            vm.saveSuccces = false;
+            var selectedSting = "";
+            angular.forEach(notifyOptions, function (option) {
+                if (option.checked === true && option.notifyCode) {
+                    selectedSting += option.notifyCode;
+                }
+            })
+            contentResource.setNotifySettingsById($scope.currentNode.id, selectedSting).then(function () {
+                vm.saveState = "success";
+                vm.saveSuccces = true;
+            }, function (error) {
+                vm.saveState = "error";
+                vm.saveError = error;
+            });
+        }
+        onInit();
+    }
+    angular.module("umbraco").controller("Umbraco.Editors.Content.CreateNotifyController", CreateNotifyController);
+}()); 

src/Umbraco.Web.UI.Client/src/views/content/notify.html

@@ -0,0 +1,44 @@
+<div ng-controller="Umbraco.Editors.Content.CreateNotifyController as vm">
+    <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
+    <div class="umb-pane" ng-show="!vm.loading">
+        <form name="notifyForm"
+              novalidate
+              val-form-manager>
+            <div ng-show="vm.saveError" ng-cloak>
+                <div class="alert alert-error">
+                    <div><strong>{{vm.saveError.errorMsg}}</strong></div>
+                    <div>{{vm.saveError.data.message}}</div>
+                </div>
+            </div>
+            <div ng-show="vm.saveSuccces" ng-cloak>
+                <div class="alert alert-success">
+                    <localize key="notify_notificationsSavedFor"></localize><strong> {{currentNode.name}}</strong>
+                </div>
+            </div>
+            <div ng-cloak>
+                <div class="block-form" ng-show="!vm.loading">
+                    <h5><localize key="notify_notifySet">Set your notification for</localize> {{ currentNode.name }}</h5>
+                    <umb-control-group>
+                        <umb-permission ng-repeat="option in vm.notifyOptions"
+                                        name="option.name"
+                                        description="option.description"
+                                        selected="option.checked">
+                        </umb-permission>
+                    </umb-control-group>
+                </div>
+            </div>
+            <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
+                <umb-button label-key="general_cancel"
+                            action="vm.cancel()"
+                            type="button"
+                            button-style="link">
+                </umb-button>
+                <umb-button label-key="buttons_save"
+                            type="button"
+                            action="vm.save(vm.notifyOptions)"
+                            button-style="success">
+                </umb-button>
+            </div>
+        </form>
+    </div>
+</div>