eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-11 19:00:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Bootstrap panel (#942)

Browse Source 
* Bootstrap panel

* Indentation.

* css tidying

* more tweaks
This commit is contained in:
Harshith pabbati
2019-03-29 06:29:21 +05:30
committed by Jeffrey Warren
parent 8ad171ee56
commit 9f524615a5
3 changed files with 98 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
examples/lib/defaultHtmlStepUi.js
View File

@@ -26,36 +26,41 @@ function DefaultHtmlStepUi(_sequencer, options) {
step.ui =
'\
<div class="container">\
<div class="row step">\
<form class="input-form">\
<div class="col-md-4 details">\
<h3>\
<span class = "toggle">' +step.name + ' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span>' +
'<span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' +
'</h3><div class="cal collapse in"><p><i>"'+
(step.description || "") +
'</i></p></div>\
</div>\
</form>\
<div class="col-md-8 cal collapse in step-column">\
<div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
<div class="step-image">\
<a class="cal collapse in"><img alt="" class="img-thumbnail step-thumbnail"/></a>\
</div>\
</div>\
</div>\
</div>\
</div>';
<form class="input-form">\
<div class="panel panel-default">\
<div class="panel-heading">\
<div class="trash-container pull-right"></div>\
<h3 class="panel-title">' +
'<span class="toggle">' +step.name + '<span class="caret"></span>\
</h3>\
</div>\
<div class="panel-body cal collapse in">\
<div class="row step">\
<div class="col-md-4 details">\
<h3>\
<span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' +
'</h3><div class="cal collapse in"><p><i>'+
(step.description || "") +
'</i></p></div>\
</div>\
<div class="col-md-8 cal collapse in step-column">\
<div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
<div class="step-image">\
<a class="cal collapse in"><img class="img-thumbnail step-thumbnail"/></a>\
</div>\
</div>\
</div>\
</div>\
<div class="panel-footer cal collapse in"></div>\
</div>\
</form>\
</div>';
var tools =
'<div class="cal collapse in"><div class="tools btn-group">\
<button confirm="Are you sure?" class="remove btn btn btn-default">\
<i class="fa fa-trash"></i>\
</button>\
<button class="btn insert-step" style="margin-left:10px;border-radius:6px;background-color:#fff;border:solid #bababa 1.1px;" >\
<i class="fa fa-plus"></i> Add\
</button>\
</div>\
'<div class="trash">\
<button confirm="Are you sure?" class="remove btn btn-default btn-xs">\
<i class="fa fa-trash"></i>\
</button>\
</div>';
var util = intermediateHtmlStepUi(_sequencer, step);
@@ -125,23 +130,24 @@ function DefaultHtmlStepUi(_sequencer, options) {
</div>";
step.ui.querySelector("div.details").appendChild(div);
}
$(step.ui.querySelector("div.details")).append(
'<div class="cal collapse in"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>'
$(step.ui.querySelector("div.panel-footer")).append(
'<div class="cal collapse in"><button type="submit" class="btn btn-sm btn-default btn-save" disabled = "true" >Apply</button> <small style="padding-top:2px;">Press apply to see changes</small></div>'
);
$(step.ui.querySelector("div.panel-footer")).prepend(
'<button class="pull-right btn btn-default btn-sm insert-step" >\
<i class="fa fa-plus"></i> Insert Module\
</button>'
);
}
if (step.name != "load-image") {
step.ui
.querySelector("div.details")
.appendChild(
.querySelector("div.trash-container")
.prepend(
parser.parseFromString(tools, "text/html").querySelector("div")
);
$(step.ui.querySelectorAll(".remove")).on('click', function() {notify('Step Removed','remove-notification')});
$(step.ui.querySelectorAll(".insert-step")).on('click', function() { util.insertStep(step.ID) });
$(step.ui.querySelectorAll(".insert-step")).on('click', function() { util.insertStep(step.ID) });
// Insert the step's UI in the right place
if (stepOptions.index == _sequencer.steps.length) {
stepsEl.appendChild(step.ui);
@@ -319,7 +325,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
$('#'+id).fadeIn(500).delay(200).fadeOut(500);
}
return {
getPreview: getPreview,
onSetup: onSetup,