Incremental work on collapsible columns.

This commit is contained in:
Sipke Schoorstra
2015-04-03 18:43:57 +02:00
parent 721004306d
commit ffd68ec5d6
8 changed files with 67 additions and 19 deletions

View File

@@ -1,4 +1,3 @@
using Orchard.Layouts.Framework.Elements;
using Orchard.Layouts.Helpers;
using Orchard.Localization;
@@ -39,5 +38,10 @@ namespace Orchard.Layouts.Elements {
get { return this.Retrieve(x => x.ZoneName); }
set { this.Store(x => x.ZoneName, value); }
}
public bool? Collapsible {
get { return this.Retrieve(x => x.Collapsible); }
set { this.Store(x => x.Collapsible, value); }
}
}
}

View File

@@ -726,13 +726,14 @@ var LayoutEditor;
})(LayoutEditor || (LayoutEditor = {}));
var LayoutEditor;
(function (LayoutEditor) {
LayoutEditor.Column = function (data, htmlId, htmlClass, htmlStyle, isTemplated, width, offset, zoneName, children) {
LayoutEditor.Column = function (data, htmlId, htmlClass, htmlStyle, isTemplated, width, offset, zoneName, collapsible, children) {
LayoutEditor.Element.call(this, "Column", data, htmlId, htmlClass, htmlStyle, isTemplated);
LayoutEditor.Container.call(this, ["Grid", "Content"], children);
this.width = width;
this.offset = offset;
this.zoneName = zoneName;
this.collapsible = collapsible;
var _hasPendingChange = false;
var _origWidth = 0;
@@ -825,6 +826,7 @@ var LayoutEditor;
result.width = this.width;
result.offset = this.offset;
result.zoneName = this.zoneName;
result.collapsible = this.collapsible;
result.children = this.childrenToObject();
return result;
};
@@ -840,6 +842,7 @@ var LayoutEditor;
value.width,
value.offset,
value.zoneName,
value.collapsible,
LayoutEditor.childrenFrom(value.children));
result.toolboxIcon = value.toolboxIcon;
result.toolboxLabel = value.toolboxLabel;
@@ -857,6 +860,7 @@ var LayoutEditor;
width: 12 / value,
offset: 0,
zoneName: null,
collapsible: null,
children: []
});
});

File diff suppressed because one or more lines are too long

View File

@@ -1,12 +1,13 @@
var LayoutEditor;
(function (LayoutEditor) {
LayoutEditor.Column = function (data, htmlId, htmlClass, htmlStyle, isTemplated, width, offset, zoneName, children) {
LayoutEditor.Column = function (data, htmlId, htmlClass, htmlStyle, isTemplated, width, offset, zoneName, collapsible, children) {
LayoutEditor.Element.call(this, "Column", data, htmlId, htmlClass, htmlStyle, isTemplated);
LayoutEditor.Container.call(this, ["Grid", "Content"], children);
this.width = width;
this.offset = offset;
this.zoneName = zoneName;
this.collapsible = collapsible;
var _hasPendingChange = false;
var _origWidth = 0;
@@ -99,6 +100,7 @@
result.width = this.width;
result.offset = this.offset;
result.zoneName = this.zoneName;
result.collapsible = this.collapsible;
result.children = this.childrenToObject();
return result;
};
@@ -114,6 +116,7 @@
value.width,
value.offset,
value.zoneName,
value.collapsible,
LayoutEditor.childrenFrom(value.children));
result.toolboxIcon = value.toolboxIcon;
result.toolboxLabel = value.toolboxLabel;
@@ -131,6 +134,7 @@
width: 12 / value,
offset: 0,
zoneName: null,
collapsible: null,
children: []
});
});

View File

@@ -1,4 +1,5 @@
using Newtonsoft.Json.Linq;
using System;
using Newtonsoft.Json.Linq;
using Orchard.DisplayManagement;
using Orchard.Layouts.Elements;
using Orchard.Layouts.Framework.Display;
@@ -44,6 +45,18 @@ namespace Orchard.Layouts.Services {
element.HtmlStyle = (string)node["htmlStyle"];
element.IsTemplated = (bool)(node["isTemplated"] ?? false);
}
protected bool? ParseBoolean(string value) {
if (String.IsNullOrWhiteSpace(value))
return null;
bool result;
if (Boolean.TryParse(value, out result))
return result;
return null;
}
}
public class CanvasModelMap : LayoutModelMapBase<Canvas> { }
@@ -56,6 +69,7 @@ namespace Orchard.Layouts.Services {
element.Width = (int?)node["width"];
element.Offset = (int?)node["offset"];
element.ZoneName = (string) node["zoneName"];
element.Collapsible = ParseBoolean(node["collapsible"].Value<string>());
}
public override void FromElement(Column element, DescribeElementsContext describeContext, JToken node) {
@@ -63,6 +77,7 @@ namespace Orchard.Layouts.Services {
node["width"] = element.Width;
node["offset"] = element.Offset;
node["zoneName"] = element.ZoneName;
node["collapsible"] = element.Collapsible;
}
}

View File

@@ -1,10 +1,7 @@
using System;
using System.Collections.Generic;
using System.Linq;
namespace Orchard.Layouts.ViewModels {
namespace Orchard.Layouts.ViewModels {
public class LayoutEditorPropertiesItem {
public string Label { get; set; }
public string Model { get; set; }
public string Type { get; set; }
}
}

View File

@@ -1,9 +1,14 @@
@using Orchard.Layouts.ViewModels
@{
var additionalItems = new[] {
new LayoutEditorPropertiesItem() {
new LayoutEditorPropertiesItem {
Label = "Zone Name:",
Model = "element.zoneName"
},
new LayoutEditorPropertiesItem {
Label = "Collapsible",
Model = "element.collapsible",
Type = "boolean"
}
};
}

View File

@@ -3,22 +3,41 @@
<i class="fa fa-edit"></i>
<ul class="layout-popup layout-popup-edit" orc-layout-popup>
<li class="layout-popup-item layout-popup-input">
<label>@T("HTML ID:")</label>
<input type="text" ng-model="element.htmlId" />
<label>
@T("HTML ID:")<br/>
<input type="text" ng-model="element.htmlId" />
</label>
</li>
<li class="layout-popup-item layout-popup-input">
<label>@T("CSS classes:")</label>
<input type="text" ng-model="element.htmlClass" />
<label>
@T("CSS classes:")<br/>
<input type="text" ng-model="element.htmlClass" />
</label>
</li>
<li class="layout-popup-item layout-popup-input">
<label>@T("CSS styles:")</label>
<input type="text" ng-model="element.htmlStyle" />
<label>
@T("CSS styles:")<br/>
<input type="text" ng-model="element.htmlStyle" />
</label>
</li>
@if (Model.Items != null) {
foreach (LayoutEditorPropertiesItem item in Model.Items) {
var type = !String.IsNullOrEmpty(item.Type) ? item.Type : "text";
<li class="layout-popup-item layout-popup-input">
<label>@item.Label</label>
<input type="text" ng-model="@item.Model" />
@if (type == "boolean") {
<label>
<input type="checkbox" ng-model="@item.Model" ng-true-value="true" ng-false-value="false" />
@item.Label
</label>
}
else {
<label>
@item.Label<br />
<input type="@type" ng-model="@item.Model" />
</label>
}
</li>
}
}