Merged Rules with Properties.

src/Orchard.Web/Modules/Orchard.Layouts/Orchard.Layouts.csproj

@@ -637,9 +637,6 @@
   <ItemGroup>
     <Content Include="Views\LayoutEditor.Template.Html.cshtml" />
   </ItemGroup>
-  <ItemGroup>
-    <Content Include="Views\LayoutEditor.Template.Rule.cshtml" />
-  </ItemGroup>
   <ItemGroup>
     <Content Include="Views\Elements\Notifications.cshtml" />
   </ItemGroup>

src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor.css

@@ -762,7 +762,7 @@ table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
   cursor: default;
   white-space: nowrap;
   line-height: normal;
-  width: 300px;
+  min-width: 300px;
 }
 .layout-editor .layout-popup.wide {
   width: 600px;

src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Popup.css

@@ -15,7 +15,7 @@
   cursor: default;
   white-space: nowrap;
   line-height: normal;
-  width: 300px;
+  min-width: 300px;
 }
 .layout-editor .layout-popup.wide {
   width: 600px;

src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Popup.less

@@ -18,7 +18,7 @@
         cursor: default;
         white-space: nowrap;
         line-height: normal;
-        width: 300px;
+        min-width: 300px;
 
         &.wide {
             width: 600px;

src/Orchard.Web/Modules/Orchard.Layouts/Styles/LayoutEditor/Popup.min.css

@@ -1 +1 @@
-.layout-editor .layout-popup{display:none;position:absolute;margin:0;-moz-box-shadow:3px 3px 11px 0 rgba(50,50,50,.5);-webkit-box-shadow:3px 3px 11px 0 rgba(50,50,50,.5);box-shadow:3px 3px 11px 0 rgba(50,50,50,.5);border:1px solid #e4e5e6;padding:2px 0;background-color:#f7f7f7;list-style:none;z-index:20;color:#7c7c7c;text-align:left;cursor:default;white-space:nowrap;line-height:normal;width:300px}.layout-editor .layout-popup.wide{width:600px}.layout-editor .layout-popup .layout-popup-flex{display:flex;padding:2px 5px}.layout-editor .layout-popup .layout-popup-flex .layout-popup-column+.layout-popup-column{margin-left:4px;border-left:1px solid rgba(128,128,128,.15);padding-left:4px}.layout-editor .layout-popup .layout-popup-item{padding:4px 6px}.layout-editor .layout-popup .layout-popup-label{font-size:.9em;font-weight:bold;color:#7c7c7c}.layout-editor .layout-popup .layout-popup-action:hover{background-color:#f3f4f5;cursor:pointer}.layout-editor .layout-popup .layout-popup-input input[type='text'],.layout-editor .layout-popup .layout-popup-input textarea{width:100%}.layout-editor .layout-popup .layout-popup-input>label{display:block;font-size:.9em}
+.layout-editor .layout-popup{display:none;position:absolute;margin:0;-moz-box-shadow:3px 3px 11px 0 rgba(50,50,50,.5);-webkit-box-shadow:3px 3px 11px 0 rgba(50,50,50,.5);box-shadow:3px 3px 11px 0 rgba(50,50,50,.5);border:1px solid #e4e5e6;padding:2px 0;background-color:#f7f7f7;list-style:none;z-index:20;color:#7c7c7c;text-align:left;cursor:default;white-space:nowrap;line-height:normal;min-width:300px}.layout-editor .layout-popup.wide{width:600px}.layout-editor .layout-popup .layout-popup-flex{display:flex;padding:2px 5px}.layout-editor .layout-popup .layout-popup-flex .layout-popup-column+.layout-popup-column{margin-left:4px;border-left:1px solid rgba(128,128,128,.15);padding-left:4px}.layout-editor .layout-popup .layout-popup-item{padding:4px 6px}.layout-editor .layout-popup .layout-popup-label{font-size:.9em;font-weight:bold;color:#7c7c7c}.layout-editor .layout-popup .layout-popup-action:hover{background-color:#f3f4f5;cursor:pointer}.layout-editor .layout-popup .layout-popup-input input[type='text'],.layout-editor .layout-popup .layout-popup-input textarea{width:100%}.layout-editor .layout-popup .layout-popup-input>label{display:block;font-size:.9em}

src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Canvas.cshtml

@@ -3,7 +3,6 @@
         <li class="layout-panel-item layout-panel-label">Canvas</li>
         @Display()
         @Display(New.LayoutEditor_Template_Properties(ElementTypeName: "canvas"))
-        @Display(New.LayoutEditor_Template_Rule(ElementTypeName: "canvas"))
     </ul>
     <div class="layout-container-children-placeholder">
         @T("This layout canvas is empty. To get started, drag a grid element from the toolbox and drop it here.")

src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Column.cshtml

@@ -12,7 +12,6 @@
     <ul class="layout-panel layout-panel-main">
         <li class="layout-panel-item layout-panel-label">Column ({{element.width}})</li>
         @Display(New.LayoutEditor_Template_Properties(ElementTypeName: "column", Items: additionalItems))
-        @Display(New.LayoutEditor_Template_Rule(ElementTypeName: "column"))
         <li class="layout-panel-item layout-panel-action" title="@T("Delete column (Del)")" ng-click="delete(element)"><i class="fa fa-remove"></i></li>
         <li class="layout-panel-item layout-panel-action" title="@T("Move column left (Ctrl+Left)")" ng-click="element.moveUp()" ng-class="{disabled: !element.canMoveUp()}"><i class="fa fa-chevron-left"></i></li>
         <li class="layout-panel-item layout-panel-action" title="@T("Move column right (Ctrl+Right)")" ng-click="element.moveDown()" ng-class="{disabled: !element.canMoveDown()}"><i class="fa fa-chevron-right"></i></li>

src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Content.cshtml

@@ -3,7 +3,6 @@
         <li class="layout-panel-item layout-panel-label">{{::element.contentTypeLabel}}</li>
         <li class="layout-panel-item layout-panel-action layout-panel-action-edit" ng-show="{{element.hasEditor}}" title="Edit {{element.contentTypeLabel.toLowerCase()}} content (Enter)" ng-click="edit()"><i class="fa fa-code"></i></li>
         @Display(New.LayoutEditor_Template_Properties(ElementTypeName: "{{element.contentTypeLabel.toLowerCase()}}"))
-        @Display(New.LayoutEditor_Template_Rule(ElementTypeName: "{{element.contentTypeLabel.toLowerCase()}}"))
         <li class="layout-panel-item layout-panel-action" title="@T("Delete {{element.contentTypeLabel.toLowerCase()}} (Del)")" ng-click="delete(element)"><i class="fa fa-remove"></i></li>
         <li class="layout-panel-item layout-panel-action" title="@T("Move {{element.contentTypeLabel.toLowerCase()}} up (Ctrl+Up)")" ng-click="element.moveUp()" ng-class="{disabled: !element.canMoveUp()}"><i class="fa fa-chevron-up"></i></li>
         <li class="layout-panel-item layout-panel-action" title="@T("Move {{element.contentTypeLabel.toLowerCase()}} down (Ctrl+Down)")" ng-click="element.moveDown()" ng-class="{disabled: !element.canMoveDown()}"><i class="fa fa-chevron-down"></i></li>

src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Grid.cshtml

@@ -2,7 +2,6 @@
     <ul class="layout-panel layout-panel-main">
         <li class="layout-panel-item layout-panel-label">Grid</li>
         @Display(New.LayoutEditor_Template_Properties(ElementTypeName: "grid"))
-        @Display(New.LayoutEditor_Template_Rule(ElementTypeName: "grid"))
         <li class="layout-panel-item layout-panel-action" title="@T("Delete grid (Del)")" ng-click="delete(element)"><i class="fa fa-remove"></i></li>
         <li class="layout-panel-item layout-panel-action" title="@T("Move grid up (Ctrl+Up)")" ng-click="element.moveUp()" ng-class="{disabled: !element.canMoveUp()}"><i class="fa fa-chevron-up"></i></li>
         <li class="layout-panel-item layout-panel-action" title="@T("Move grid down (Ctrl+Down)")" ng-click="element.moveDown()" ng-class="{disabled: !element.canMoveDown()}"><i class="fa fa-chevron-down"></i></li>

src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Html.cshtml

@@ -3,7 +3,6 @@
         <li class="layout-panel-item layout-panel-label">{{::element.contentTypeLabel}}</li>
         <li class="layout-panel-item layout-panel-action layout-panel-action-edit" ng-show="{{element.hasEditor}}" title="Edit {{element.contentTypeLabel.toLowerCase()}} content (Enter)" ng-click="edit()"><i class="fa fa-code"></i></li>
         @Display(New.LayoutEditor_Template_Properties(ElementTypeName: "{{element.contentTypeLabel.toLowerCase()}}"))
-        @Display(New.LayoutEditor_Template_Rule(ElementTypeName: "{{element.contentTypeLabel.toLowerCase()}}"))
         <li class="layout-panel-item layout-panel-action" title="@T("Delete {{element.contentTypeLabel.toLowerCase()}} (Del)")" ng-click="delete(element)"><i class="fa fa-remove"></i></li>
         <li class="layout-panel-item layout-panel-action" title="@T("Move {{element.contentTypeLabel.toLowerCase()}} up (Ctrl+Up)")" ng-click="element.moveUp()" ng-class="{disabled: !element.canMoveUp()}"><i class="fa fa-chevron-up"></i></li>
         <li class="layout-panel-item layout-panel-action" title="@T("Move {{element.contentTypeLabel.toLowerCase()}} down (Ctrl+Down)")" ng-click="element.moveDown()" ng-class="{disabled: !element.canMoveDown()}"><i class="fa fa-chevron-down"></i></li>

src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Properties.cshtml

@@ -22,6 +22,12 @@
                 <textarea rows="3" cols="25" ng-model="element.htmlStyle"></textarea>
             </label>
         </li>
+        <li class="layout-popup-item layout-popup-input">
+            <label>
+                @T("Visibility Rule:")<br />
+                <textarea rows="3" cols="25" ng-model="element.rule"></textarea>
+            </label>
+        </li>
         @if (Model.Items != null) {
             foreach (LayoutEditorPropertiesItem item in Model.Items) {
                 var type = !String.IsNullOrEmpty(item.Type) ? item.Type : "text";

src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Row.cshtml

@@ -2,7 +2,6 @@
     <ul class="layout-panel layout-panel-main">
         <li class="layout-panel-item layout-panel-label">Row</li>
         @Display(New.LayoutEditor_Template_Properties(ElementTypeName: "row"))
-        @Display(New.LayoutEditor_Template_Rule(ElementTypeName: "row"))
         <li class="layout-panel-item layout-panel-action" title="@T("Delete row (Del)")" ng-click="delete(element)">
             <i class="fa fa-remove"></i>
         </li>

src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Rule.cshtml

@@ -1,12 +0,0 @@
-@using Orchard.Layouts.ViewModels
-<li class="layout-panel-item layout-panel-action layout-panel-action-properties layout-popup-trigger" title="@T("Edit {0} rule", Model.ElementTypeName)">
-    <i class="fa fa-codepen"></i>
-    <ul class="layout-popup layout-popup-edit wide" orc-layout-popup>
-        <li class="layout-popup-item layout-popup-input">
-            <label>
-                @T("Rule:")<br/>
-                <textarea rows="3" cols="25" ng-model="element.rule"></textarea>
-            </label>
-        </li>
-    </ul>
-</li>