Move rules editing to an overlay

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

@@ -1,5 +1,5 @@
 .umb-stylesheet-rules {
-    width: 600px;
+    max-width: 600px;
 }
 
 .umb-stylesheet-rules__listitem {
@@ -7,17 +7,17 @@
     padding: 6px;
     margin: 10px 0 !important;
     background: @gray-10;
-    cursor: move;
+    cursor: pointer;
 }
 
 .umb-stylesheet-rules__listitem i {
     display: flex;
     align-items: center;
-    margin-right: 5px
+    margin-right: 5px;
+    cursor: move;
 }
 
 .umb-stylesheet-rules__listitem a {
-    cursor: pointer;
     margin-left: auto;
 }
 
@@ -26,29 +26,9 @@
 }
 
 .umb-stylesheet-rules__left {
-    display: block;
+    display: flex;
     flex: 1 1 auto;
     overflow: hidden;
-
-    .control-group {
-        margin: 5px auto;
-
-        .control-label {
-            text-align: left;
-            float: none;
-        }
-
-        .controls {
-            margin-left: 0;
-            display: inline;
-
-            textarea {
-                width: 295px;
-                height: 80px;
-                resize: none;
-            }
-        }
-    }
 }
 
 .umb-stylesheet-rules__right {
@@ -56,3 +36,11 @@
     flex: 0 0 auto;
     align-items: center;
 }
+
+.umb-stylesheet-rule-overlay {
+    textarea {
+        width: 300px;
+        height: 120px;
+        resize: none;
+    }
+}

src/Umbraco.Web.UI.Client/src/views/stylesheets/edit.controller.js

@@ -4,7 +4,6 @@
     function StyleSheetsEditController($scope, $routeParams, $timeout, $http, appState, editorState, navigationService, assetsService, codefileResource, contentEditingHelper, notificationsService, localizationService, templateHelper, angularHelper, umbRequestHelper) {
 
         var vm = this;
-        var currentPosition = null;
 
         vm.page = {};
         vm.page.loading = true;

src/Umbraco.Web.UI.Client/src/views/stylesheets/views/rules/rules.controller.js

@@ -1,10 +1,11 @@
 angular.module("umbraco").controller("Umbraco.Editors.StyleSheets.RulesController",
-    function ($scope, angularHelper) {       
+    function ($scope, localizationService) {       
         $scope.sortableOptions = {
             axis: 'y',
             containment: 'parent',
             cursor: 'move',
             items: 'div.umb-stylesheet-rules__listitem',
+            handle: '.handle',
             tolerance: 'pointer',
             update: function (e, ui) {
                 setDirty();
@@ -14,8 +15,21 @@ angular.module("umbraco").controller("Umbraco.Editors.StyleSheets.RulesControlle
         $scope.add = function (evt) {
             evt.preventDefault();
 
-            $scope.model.stylesheet.rules.push({});
-            setDirty();
+            openOverlay({}, $scope.labels.addRule, (newRule) => {
+                $scope.model.stylesheet.rules.push(newRule);
+                setDirty();
+            });
+        }
+
+        $scope.edit = function(rule, evt) {
+            evt.preventDefault();
+
+            openOverlay(rule, $scope.labels.editRule, (newRule) => {
+                rule.name = newRule.name;
+                rule.selector = newRule.selector;
+                rule.styles = newRule.styles;
+                setDirty();
+            });
         }
 
         $scope.remove = function (rule, evt) {
@@ -25,7 +39,32 @@ angular.module("umbraco").controller("Umbraco.Editors.StyleSheets.RulesControlle
             setDirty();
         }
 
+        function openOverlay(rule, title, onSubmit) {
+            $scope.model.overlay = {
+                title: title,
+                submit: function (model) {
+                    onSubmit(model.rule);
+                    $scope.model.overlay = null;
+                },
+                close: function (oldModel) {
+                    $scope.model.overlay = null;
+                },
+                rule: _.clone(rule)
+            };
+        }
+
         function setDirty() {
             $scope.model.setDirty();
         }
+
+        function init() {
+            localizationService.localizeMany(["stylesheet_overlayTitleAddRule", "stylesheet_overlayTitleEditRule"]).then(function (data) {
+                $scope.labels = {
+                    addRule: data[0],
+                    editRule: data[1]
+                }
+            });
+        }
+
+        init();
     });

src/Umbraco.Web.UI.Client/src/views/stylesheets/views/rules/rules.html

@@ -1,47 +1,41 @@
 <umb-box>
     <umb-box-content>
-        <h5><localize key="stylesheet_editorRules">Rich text editor styles</localize></h5>
-        <small><localize key="stylesheet_editorRulesHelp">Define the styles that should be available in the rich text editor for this stylesheet</localize></small>
-        <div class="umb-property-editor umb-stylesheet-rules form-horizontal" ng-controller="Umbraco.Editors.StyleSheets.RulesController">
-            <div ui-sortable="sortableOptions" ng-model="model.stylesheet.rules">
-                <div class="umb-stylesheet-rules__listitem" ng-repeat="rule in model.stylesheet.rules">
-                    <i class="icon icon-navigation handle"></i>
-                    <div class="umb-stylesheet-rules__left">
-                        <div class="control-group">
-                            <label class="control-label" for="name_{{$index}}">
-                                <localize key="general_name">Name</localize>
-                                <small><localize key="stylesheet_nameHelp">Name to identify the style property in the rich text editor</localize></small>
-                            </label>
-                            <div class="controls">
-                                <input type="text" ng-model="rule.name" id="name_{{$index}}" required />
+        <div class="sub-view-columns">
+            <div class="sub-view-column-left">
+                <h5><localize key="stylesheet_editorRules">Rich text editor styles</localize></h5>
+                <small><localize key="stylesheet_editorRulesHelp">Define the styles that should be available in the rich text editor for this stylesheet</localize></small>
+            </div>
+            <div class="sub-view-column-right">
+                <div class="umb-property-editor umb-stylesheet-rules form-horizontal" ng-controller="Umbraco.Editors.StyleSheets.RulesController">
+                    <div ui-sortable="sortableOptions" ng-model="model.stylesheet.rules">
+                        <div class="umb-stylesheet-rules__listitem" ng-click="edit(rule, $event)" ng-repeat="rule in model.stylesheet.rules">
+                            <i class="icon icon-navigation handle"></i>
+                            <div class="umb-stylesheet-rules__left">
+                                {{rule.name}}
                             </div>
-                        </div>
-                        <div class="control-group">
-                            <label class="control-label" for="selector_{{$index}}">
-                                <localize key="stylesheet_selector">Selector</localize>
-                                <small><localize key="stylesheet_selectorHelp">Uses CSS syntax ex: h1, .redHeader, .blueTex</localize></small>
-                            </label>
-                            <div class="controls">
-                                <input type="text" ng-model="rule.selector" id="selector_{{$index}}" required />
-                            </div>
-                        </div>
-                        <div class="control-group">
-                            <label class="control-label" for="styles_{{$index}}">
-                                <localize key="stylesheet_styles">Styles</localize>
-                            </label>
-                            <div class="controls">
-                                <textarea ng-model="rule.styles" id="styles_{{$index}}" required></textarea>
+                            <div class="umb-stylesheet-rules__right">
+                                <a class="umb-node-preview__action umb-node-preview__action--red" ng-click="remove(rule, $event)"><localize key="general_remove">Remove</localize></a>
                             </div>
                         </div>
                     </div>
-                    <div class="umb-stylesheet-rules__right">
-                        <a class="umb-node-preview__action umb-node-preview__action--red" ng-click="remove(rule, $event)"><localize key="general_remove">Remove</localize></a>
+                    <div class="text-right">
+                        <button class="btn btn-info" ng-click="add($event)"><localize key="general_add">Add</localize></button>
                     </div>
                 </div>
             </div>
-            <div class="text-right">
-                <button class="btn btn-info" ng-click="add($event)"><localize key="general_add">Add</localize></button>
-            </div>
         </div>
+
+        <umb-overlay ng-if="model.overlay" model="model.overlay" position="right" class="umb-stylesheet-rule-overlay">
+            <umb-control-group label="@general_name" description="@stylesheet_nameHelp">
+                <input type="text" ng-model="model.overlay.rule.name" required />
+            </umb-control-group>
+            <umb-control-group label="@stylesheet_selector" description="@stylesheet_selectorHelp">
+                <input type="text" ng-model="model.overlay.rule.selector" required />
+            </umb-control-group>
+            <umb-control-group label="@stylesheet_styles" description="@stylesheet_stylesHelp">
+                <textarea ng-model="model.overlay.rule.styles" required></textarea>
+            </umb-control-group>
+        </umb-overlay>
+
     </umb-box-content>
 </umb-box>

src/Umbraco.Web.UI/Umbraco/config/lang/da.xml

@@ -1041,11 +1041,14 @@ Mange hilsner fra Umbraco robotten
     <key alias="editorRules">Teksteditor-styles</key>
     <key alias="editorRulesHelp">Definér de styles, der skal være tilgængelige i teksteditoren for dette stylesheet</key>
     <key alias="selector">Selector</key>
-    <key alias="selectorHelp">Bruger CSS-syntaks f.eks. h1, .redheader, .blueTex</key>
+    <key alias="selectorHelp">Bruger CSS-syntaks, f.eks. "h1" eller ".redheader"</key>
     <key alias="editstylesheet">Rediger stylesheet</key>
     <key alias="editstylesheetproperty">Rediger CSS-egenskab</key>
+    <key alias="overlayTitleAddRule">Tilføj style</key>
+    <key alias="overlayTitleEditRule">Redigér style</key>
     <key alias="nameHelp">Det navn der vises i teksteditoren</key>
     <key alias="styles">Styles</key>
+    <key alias="stylesHelp">Den CSS der skal anvendes i teksteditoren, f.eks. "color:red;"</key>
     <key alias="tabCode">Kode</key>
     <key alias="tabRules">Editor</key>
   </area>

src/Umbraco.Web.UI/Umbraco/config/lang/en.xml

@@ -1323,9 +1323,12 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="editstylesheet">Edit stylesheet</key>
     <key alias="editstylesheetproperty">Edit stylesheet property</key>
     <key alias="nameHelp">The name displayed in the editor style selector</key>
+    <key alias="overlayTitleAddRule">Add style</key>
+    <key alias="overlayTitleEditRule">Edit style</key>
     <key alias="selector">Selector</key>
-    <key alias="selectorHelp">Uses CSS syntax ex: h1, .redHeader, .blueTex</key>
+    <key alias="selectorHelp">Uses CSS syntax, e.g. "h1" or ".redHeader"</key>
     <key alias="styles">Styles</key>
+    <key alias="stylesHelp">The CSS that should be applied in the rich text editor, e.g. "color:red;"</key>
     <key alias="tabCode">Code</key>
     <key alias="tabRules">Editor</key>
   </area>

src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml

@@ -1344,9 +1344,12 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="editstylesheet">Edit stylesheet</key>
     <key alias="editstylesheetproperty">Edit stylesheet property</key>
     <key alias="nameHelp">The name displayed in the editor style selector</key>
+    <key alias="overlayTitleAddRule">Add style</key>
+    <key alias="overlayTitleEditRule">Edit style</key>
     <key alias="selector">Selector</key>
-    <key alias="selectorHelp">Uses CSS syntax ex: h1, .redHeader, .blueTex</key>
+    <key alias="selectorHelp">Uses CSS syntax, e.g. "h1" or ".redHeader"</key>
     <key alias="styles">Styles</key>
+    <key alias="stylesHelp">The CSS that should be applied in the rich text editor, e.g. "color:red;"</key>
     <key alias="tabCode">Code</key>
     <key alias="tabRules">Editor</key>
   </area>