pingu_98/MrDraw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Suggestion for custom controls to allow for collapsable sections while keeping close to the same visual appearance

Browse source
This commit is contained in:
Gina Häußge 2015-04-22 19:27:44 +02:00
parent 7c4c8485b4
commit 19918b7221
4 changed files with 48 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/octoprint/static/css/octoprint.css
View file

File diff suppressed because one or more lines are too long

10
src/octoprint/static/js/app/viewmodels/control.js
View file

@ -152,8 +152,8 @@ $(function() {
control.layout = "vertical";
}
if (!control.hasOwnProperty("collapsable")) {
control.collapsable = false;
if (!control.hasOwnProperty("collapsed")) {
control.collapsed = false;
}
}
@ -344,7 +344,11 @@ $(function() {
self.displayMode = function (customControl) {
if (customControl.hasOwnProperty("children")) {
return (customControl.hasOwnProperty("name") && customControl.name != "") ? "customControls_containerTemplate_accordion" : "customControls_containerTemplate";
if (customControl.name) {
return "customControls_containerTemplate_collapsable";
} else {
return "customControls_containerTemplate_nameless";
}
} else {
return "customControls_controlTemplate";
}

19
src/octoprint/static/less/octoprint.less
View file

@ -595,12 +595,23 @@ ul.dropdown-menu li a {
margin-top: -3px;
}
.custom_section {
h1 {
cursor: pointer;
a, a:hover {
text-decoration: none;
color: inherit;
}
}
}
.custom_section_horizontal .custom_control {
display: inline-block;
}
.custom_section_vertical .custom_control {
display:block;
}
.custom_section_vertical .custom_control {
display:block;
}
.custom_control {

52
src/octoprint/templates/tabs/control.jinja2
View file

@ -105,36 +105,34 @@
<div style="clear: both; display: none;" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
<!-- Templates for custom controls -->
<script type="text/html" id="customControls_containerTemplate">
<div class="custom_section" data-bind="attr: { 'id': id }, css: { 'accordion-body': name && name != '', 'collapse in': collapsable }">
<!-- ko if: layout == 'vertical' -->
<div class="custom_section custom_section_vertical" data-bind="css: { 'accordion-inner': name && name != '' }, template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko -->
<!-- ko if: layout == 'horizontal' -->
<div class="custom_section custom_section_horizontal" data-bind="css: { 'accordion-inner': name && name != '' }, template: { name: $root.displayMode, foreach: children }"></div>
<!-- /ko -->
<!-- ko if: layout == 'horizontal_grid' -->
<div class="row-fluid custom_section custom_section_horizontal_grid" data-bind="css: { 'accordion-inner': name }">
<!-- 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="customControls_containerTemplate_accordion">
<div class="custom_section accordion-group">
<!-- ko if: name -->
<div class="accordion-heading">
<a class="accordion-toggle" style="display: block; text-decoration: none" data-bind="style: { 'cursor': collapsable ? '' : 'default' }, attr: { 'data-target': collapsable ? '#' + id() : '', 'data-toggle': collapsable ? 'collapse' : '', 'onclick': collapsable ? '$(this).children().toggleClass(\'icon-caret-right icon-caret-down\')' : '' }"><h1 data-bind="text: name, css: { 'icon-caret-down': collapsable }"></h1></a>
</div>
<!-- /ko -->
<script type="text/html" id="customControls_containerTemplate_nameless">
<div class="custom_section" data-bind="attr: { 'id': id }">
<!-- ko template: { name: 'customControls_containerTemplate', data: $data } --><!-- /ko -->
</div>
</script>
<script type="text/html" id="customControls_containerTemplate_collapsable">
<div class="custom_section" data-bind="attr: { 'id': id }">
<h1><a onclick="$(this).children().first().toggleClass('icon-caret-down icon-caret-right').parent().parent().next().slideToggle('fast')"><i data-bind="css: {'icon-caret-down': !collapsed, 'icon-caret-right': collapsed}"></i> <span data-bind="text: name"></span></a></h1>
<!-- ko template: { name: 'customControls_containerTemplate', data: $data } --><!-- /ko -->
</div>
</script>
<script type="text/html" id="customControls_containerTemplate">
<!-- ko if: layout == 'vertical' -->
<div class="custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed && name}"></div>
<!-- /ko -->
<!-- ko if: layout == 'horizontal' -->
<div class="custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed && name}"></div>
<!-- /ko -->
<!-- ko if: layout == 'horizontal_grid' -->
<div class="row-fluid custom_section_horizontal_grid" data-bind="css: {hide: collapsed && name}">
<!-- ko foreach: children -->
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
<!-- /ko -->
</div>
<!-- /ko -->
</script>
<script type="text/html" id="customControls_controlTemplate">
<form class="form-inline custom_control">
<!-- ko template: { name: 'customControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko -->