More Work on Collapsing + Some cleaning
This commit is contained in:
Marc
parent
ce165e11fb
commit
03a85d24d0
@ -1 +1 @@
|
||||
#customControls .custom_section_horizontal{display:inline-block}#customControls .custom_section_vertical_section{min-width:15px;min-height:15px;margin:8px;padding:8px;border:1px dashed #000}#customControls .custom_section_horizontal_section{float:left;min-width:15px;min-height:15px;margin:8px;padding:8px;border:1px dashed #000}
|
||||
#customControls .custom_section_horizontal{display:inline-block}#customControls .custom_section_vertical_section{min-width:15px;min-height:15px;margin:8px;padding:8px;border:1px dashed #000}#customControls .custom_section_horizontal_section{float:left}#customControls .accordion-toggle h1{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:40px;color:#333;border:0;border-bottom:1px solid #E5E5E5;font-weight:400}
|
||||
@ -86,15 +86,10 @@
|
||||
control.id = ko.observable("settingsCustomControl_id" + self.staticID++);
|
||||
control.parent = parent;
|
||||
|
||||
if (control.hasOwnProperty("template") && control.hasOwnProperty("regex")) {
|
||||
if (control.processed) {
|
||||
control.template(control.template());
|
||||
control.regex(control.regex());
|
||||
}
|
||||
else {
|
||||
control.template = ko.observable(control.template);
|
||||
control.regex = ko.observable(control.regex);
|
||||
}
|
||||
if (control.hasOwnProperty("template") && control.hasOwnProperty("regex") && control.hasOwnProperty("deflt")) {
|
||||
control.template = ko.observable(control.template);
|
||||
control.regex = ko.observable(control.regex);
|
||||
control.deflt = ko.observable(control.deflt);
|
||||
}
|
||||
|
||||
if (control.hasOwnProperty("children")) {
|
||||
@ -102,8 +97,11 @@
|
||||
control.children(self._processControls(control, control.children()));
|
||||
if (control.hasOwnProperty("layout") && !(control.layout() == "vertical" || control.layout() == "horizontal" || control.layout() == "horizontal_grid"))
|
||||
control.layout("vertical");
|
||||
else if (!control.hasOwnProperty("layout"))
|
||||
control.layout = ko.observable("vertical");
|
||||
|
||||
if (control.hasOwnProperty("name") && control.name() != "") {
|
||||
if (!control.hasOwnProperty("collapsable"))
|
||||
control.collapsable = ko.observable(false);
|
||||
}
|
||||
}
|
||||
else {
|
||||
control.children = ko.observableArray(self._processControls(control, control.children));
|
||||
@ -111,12 +109,21 @@
|
||||
control.layout = ko.observable("vertical");
|
||||
else
|
||||
control.layout = ko.observable(control.layout);
|
||||
|
||||
if (control.hasOwnProperty("name") && control.name != "") {
|
||||
if (control.hasOwnProperty("collapsable"))
|
||||
control.collapsable = ko.observable(control.collapsable);
|
||||
else
|
||||
control.collapsable = ko.observable(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!control.processed) {
|
||||
if (control.hasOwnProperty("name"))
|
||||
control.name = ko.observable(control.name);
|
||||
else
|
||||
control.name = ko.observable("");
|
||||
|
||||
control.width = ko.observable(control.hasOwnProperty("width") ? control.width : "2");
|
||||
control.offset = ko.observable(control.hasOwnProperty("offset") ? control.offset : "");
|
||||
@ -155,7 +162,7 @@
|
||||
|
||||
self.displayMode = function (customControl) {
|
||||
if (customControl.hasOwnProperty("children")) {
|
||||
return "settingsCustomControls_containerTemplate";
|
||||
return (customControl.hasOwnProperty("name") && customControl.name() != "") ? "settingsCustomControls_containerTemplate_accordion" : "settingsCustomControls_containerTemplate";
|
||||
} else {
|
||||
return "settingsCustomControls_controlTemplate";
|
||||
}
|
||||
@ -231,7 +238,7 @@
|
||||
});
|
||||
}
|
||||
self.editElement = function (invokedOn, contextParent, selectedMenu) {
|
||||
var element = self.searchElement(self.controlsFromServer, contextParent.attr('id'));
|
||||
var element = self.element = self.searchElement(self.controlsFromServer, contextParent.attr('id'));
|
||||
if (element == undefined) {
|
||||
self._showPopup({
|
||||
title: gettext("Something went wrong while creating the new Element"),
|
||||
@ -246,8 +253,10 @@
|
||||
parent: element.parent,
|
||||
};
|
||||
|
||||
if (element.hasOwnProperty("name"))
|
||||
if (element.hasOwnProperty("name")) {
|
||||
data.name = element.name();
|
||||
data.collapsable = element.hasOwnProperty("collapsable") ? element.collapsable() : false;
|
||||
}
|
||||
if (element.hasOwnProperty("layout")) {
|
||||
data.layout = element.layout();
|
||||
title = "Edit Container";
|
||||
@ -277,6 +286,8 @@
|
||||
}
|
||||
if (element.hasOwnProperty("regex"))
|
||||
data.regex = element.regex();
|
||||
if (element.hasOwnProperty("deflt"))
|
||||
data.deflt = element.deflt();
|
||||
|
||||
if (element.hasOwnProperty("width"))
|
||||
data.width = element.width();
|
||||
@ -288,10 +299,47 @@
|
||||
self.customControlDialogViewModel.type(type);
|
||||
|
||||
self.customControlDialogViewModel.show(function (ret) {
|
||||
var element = self.element;
|
||||
|
||||
switch (self.customControlDialogViewModel.type()) {
|
||||
case "container": {
|
||||
element.name(ret.name);
|
||||
if (ret.hasOwnProperty("name"))
|
||||
element.name(ret.name);
|
||||
|
||||
element.layout(ret.layout);
|
||||
|
||||
if (ret.hasOwnProperty("collapsable") != "") {
|
||||
if (element.hasOwnProperty("collapsable")) {
|
||||
if (!ret.collapsable) {
|
||||
var e = $('#toggle_' + element.id());
|
||||
if (e)
|
||||
e.height("auto");
|
||||
|
||||
e = $('#' + element.id() + ' div.accordion-heading a h1');
|
||||
if (e)
|
||||
e.removeClass('icon-caret-right');
|
||||
}
|
||||
|
||||
element.collapsable(ret.collapsable);
|
||||
}
|
||||
else
|
||||
element.collapsable = ko.observable(ret.collapsable);
|
||||
}
|
||||
else {
|
||||
if (element.hasOwnProperty("collapsable")) {
|
||||
element.collapsable(false);
|
||||
delete element.collapsable;
|
||||
}
|
||||
|
||||
var e = $('#toggle_' + element.id());
|
||||
if (e)
|
||||
e.height("auto");
|
||||
|
||||
e = $('#' + element.id() + ' div.accordion-heading a h1');
|
||||
if (e)
|
||||
e.removeClass('icon-caret-right');
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "command": {
|
||||
if (ret.hasOwnProperty("name"))
|
||||
@ -315,10 +363,12 @@
|
||||
case "output": {
|
||||
element.template(ret.template);
|
||||
element.regex(ret.regex);
|
||||
element.deflt(ret.deflt);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (element.parent.layout() == "horizontal_grid") {
|
||||
if (element.parent && element.parent.layout() == "horizontal_grid") {
|
||||
if (ret.width != undefined && ret.width != "")
|
||||
element.width(ret.width);
|
||||
|
||||
@ -371,7 +421,7 @@
|
||||
|
||||
self.recursiveDeleteProperties = function (list) {
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
if (list[i].parent && list[i].parent.hasOwnProperty("layout") && list[i].parent.layout() != "horizontal_grid")
|
||||
if (!list[i].parent || (list[i].parent.hasOwnProperty("layout") && list[i].parent.layout() != "horizontal_grid"))
|
||||
{
|
||||
delete list[i].width;
|
||||
delete list[i].offset;
|
||||
@ -381,6 +431,18 @@
|
||||
delete list[i].parent;
|
||||
delete list[i].processed;
|
||||
delete list[i].output;
|
||||
delete list[i].key;
|
||||
delete list[i].template_key;
|
||||
|
||||
if (list[i].hasOwnProperty("width") && list[i].width() == "")
|
||||
delete list[i].width;
|
||||
if (list[i].hasOwnProperty("offset") && list[i].offset() == "")
|
||||
delete list[i].offset;
|
||||
|
||||
if (!list[i].hasOwnProperty("name") || list[i].name() == "") {
|
||||
delete list[i].name;
|
||||
delete list[i].collapsable;
|
||||
}
|
||||
|
||||
if (list[i].hasOwnProperty("children"))
|
||||
self.recursiveDeleteProperties(list[i].children());
|
||||
|
||||
@ -2,22 +2,7 @@
|
||||
function customControlDialogViewModel(parameters) {
|
||||
var self = this;
|
||||
|
||||
self.element = ko.observable(ko.mapping.fromJS({
|
||||
name: undefined,
|
||||
commands: "",
|
||||
script: "",
|
||||
javascript: "",
|
||||
enabled: "",
|
||||
children: [],
|
||||
input: [],
|
||||
layout: "vertical",
|
||||
regex: "",
|
||||
template: "",
|
||||
confirm: "",
|
||||
width: "2",
|
||||
offset: "",
|
||||
parent: undefined
|
||||
}));
|
||||
self.element = ko.observable();
|
||||
|
||||
self.title = ko.observable(gettext("Create Container"));
|
||||
self.type = ko.observable("container");
|
||||
@ -67,7 +52,9 @@
|
||||
self.reset = function (data) {
|
||||
var element = {
|
||||
name: undefined,
|
||||
collapsable: true,
|
||||
commands: "",
|
||||
deflt: "",
|
||||
script: "",
|
||||
javascript: "",
|
||||
enabled: "",
|
||||
@ -99,6 +86,9 @@
|
||||
case "container": {
|
||||
el.name = obj.name;
|
||||
el.layout = obj.layout;
|
||||
if (obj.name != "")
|
||||
el.collapsable = obj.collapsable;
|
||||
|
||||
el.children = [];
|
||||
|
||||
el.width = obj.width;
|
||||
@ -142,6 +132,7 @@
|
||||
case "output": {
|
||||
el.template = obj.template;
|
||||
el.regex = obj.regex;
|
||||
el.deflt = obj.deflt;
|
||||
|
||||
el.width = obj.width;
|
||||
el.offset = obj.offset;
|
||||
|
||||
@ -12,8 +12,18 @@
|
||||
border:1px dashed #000000;
|
||||
}
|
||||
.custom_section_horizontal_section {
|
||||
float:left;
|
||||
|
||||
.custom_section_vertical_section();
|
||||
float:left;
|
||||
}
|
||||
.accordion-toggle h1 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
font-size: 21px;
|
||||
line-height: 40px;
|
||||
color: #333;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
@ -8,7 +8,7 @@
|
||||
<div class="control-group">
|
||||
<label class="control-label">{{ _('Name') }}</label>
|
||||
<div class="controls">
|
||||
<input data-bind="value: name, valueAllowUnset: true"></input>
|
||||
<input style="width: 97%" data-bind="value: name, valueAllowUnset: true"></input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
@ -19,13 +19,13 @@
|
||||
<select data-bind="options: $root.layouts, optionsText: 'name', optionsValue: 'key', value: layout, valueAllowUnset: false"></select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ko if: name && name() != "" -->
|
||||
<div class="control-group">
|
||||
<label class="control-label"><input type="checkbox" data-bind="checked: collapsable"></input>{{ _('Make Collapsable') }}</label>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
<!--<div class="control-group">
|
||||
<label class="control-label">{{ _('Type') }}</label>
|
||||
<div class="controls">
|
||||
<select data-bind="options: $root.types, optionsText: 'name', optionsValue: 'key', value: $root.type, valueAllowUnset: false"></select>
|
||||
</div>
|
||||
</div>-->
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: $root.type() == "command" -->
|
||||
<div class="control-group">
|
||||
<label class="control-label">{{ _('Commands') }}</label>
|
||||
@ -76,13 +76,19 @@
|
||||
<div class="control-group">
|
||||
<label class="control-label">{{ _('Regex') }}</label>
|
||||
<div class="controls">
|
||||
<input data-bind="value: regex"></input>
|
||||
<input style="width: 97%" data-bind="value: regex"></input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label">{{ _('Template') }}</label>
|
||||
<div class="controls">
|
||||
<textarea style="width: 97%; height: auto" data-bind="value: template"></textarea>
|
||||
<input style="width: 97%" data-bind="value: template"></input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label">{{ _('Default Message') }}</label>
|
||||
<div class="controls">
|
||||
<input style="width: 97%" data-bind="value: deflt"></input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<h4>{{ _('Control') }}</h4>
|
||||
|
||||
<div style="min-height:15px; margin: 0px 16px; border:1px solid #00e500" id="base" data-bind="contextMenu: { menuSelector: '#controlContextMenu', menuSelected: $root.controlContextMenu }, visible: loginState.isUser">
|
||||
<div style="min-height:15px; margin: 16px 16px; border:1px solid #00e500" id="base" data-bind="contextMenu: { menuSelector: '#controlContextMenu', menuSelected: $root.controlContextMenu }, visible: loginState.isUser">
|
||||
</div>
|
||||
|
||||
<div style="clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
|
||||
@ -44,24 +44,49 @@
|
||||
</ul>
|
||||
|
||||
<!-- Templates for custom controls -->
|
||||
<script type="text/html" id="settingsCustomControls_containerTemplate">
|
||||
<div class="custom_container" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_vertical_section': !($parent && $parent.layout && $parent.layout() == 'horizontal'), 'custom_section_horizontal_section': $parent && $parent.layout && $parent.layout() == 'horizontal' }">
|
||||
<script type="text/html" id="settingsCustomControls_containerTemplate">
|
||||
<div class="custom_container custom_section_vertical_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }">
|
||||
<!-- ko if: layout() == 'vertical' -->
|
||||
<div class="custom_section custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: layout() == 'horizontal' -->
|
||||
<div class="custom_section custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: layout() == 'horizontal_grid' -->
|
||||
<div class="row-fluid custom_section custom_section_horizontal_grid">
|
||||
<!-- ko foreach: children -->
|
||||
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/html" id="settingsCustomControls_containerTemplate_accordion">
|
||||
<div class="custom_container accordion-group" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }, css: { 'custom_section_horizontal_section': ($parent && $parent.layout && $parent.layout() == 'horizontal') }">
|
||||
<!-- ko if: name -->
|
||||
<h1 data-bind="text: name"></h1>
|
||||
<div class="accordion-heading">
|
||||
<a class="accordion-toggle" style="display: block; text-decoration: none" data-bind="style: { 'cursor': collapsable() ? '' : 'default' }, attr: { 'data-target': collapsable() ? '#toggle_' + id() : '', 'data-toggle': collapsable() ? 'collapse' : '', 'onclick': collapsable() ? '$(this).children().toggleClass(\'icon-caret-down icon-caret-right\')' : '' }">
|
||||
<h1 data-bind="text: name, css: { 'icon-caret-down': collapsable }"></h1>
|
||||
</a>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: layout() == 'vertical' -->
|
||||
<div class="custom_section custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: layout() == 'horizontal' -->
|
||||
<div class="custom_section custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
|
||||
<!-- /ko -->
|
||||
|
||||
<!-- ko if: layout() == 'horizontal_grid' -->
|
||||
<div class="row-fluid custom_section custom_section_horizontal_grid">
|
||||
<!-- ko foreach: children -->
|
||||
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
|
||||
<!-- ko if: layout -->
|
||||
<div class="accordion-body" data-bind="attr: { 'id': 'toggle_' + id() }, css: { 'collapse in': collapsable }">
|
||||
<!-- ko if: layout() == 'vertical' -->
|
||||
<div class="custom_section custom_section_vertical accordion-inner" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
|
||||
<!-- /ko -->
|
||||
<!-- ko if: layout() == 'horizontal' -->
|
||||
<div class="custom_section custom_section_horizontal accordion-inner" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
|
||||
<!-- /ko -->
|
||||
<!-- ko if: layout() == 'horizontal_grid' -->
|
||||
<div class="row-fluid custom_section custom_section_horizontal_grid accordion-inner">
|
||||
<!-- ko foreach: children -->
|
||||
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
@ -71,7 +96,7 @@
|
||||
<form class="form-inline control-tab custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }">
|
||||
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko -->
|
||||
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_command', data: $data, if: $data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript') } --><!-- /ko -->
|
||||
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('template') } --><!-- /ko -->
|
||||
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('deflt') } --><!-- /ko -->
|
||||
</form>
|
||||
</script>
|
||||
<script type="text/html" id="settingsCustomControls_controlTemplate_input">
|
||||
@ -86,7 +111,7 @@
|
||||
<!-- /ko -->
|
||||
</script>
|
||||
<script type="text/html" id="settingsCustomControls_controlTemplate_output">
|
||||
<label style="cursor: default" data-bind="text: template"></label>
|
||||
<label style="cursor: default" data-bind="text: deflt"></label>
|
||||
</script>
|
||||
<script type="text/html" id="settingsCustomControls_controlTemplate_command">
|
||||
<button class="btn" data-bind="text: name"></button>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user