eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-13 20:00:05 +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

25
examples/demo.css
View File

@@ -72,7 +72,6 @@ h1 {
}
.details {
border-top: 3px solid #444;
padding-left: 6px;
}
@@ -208,7 +207,7 @@ h1 {
.savesequencemsg{
display: none;
text-align: center;
}
}
.notification {
background-color: #808b96;
@@ -256,3 +255,25 @@ a.name-header{
align-content: center;
justify-content: center;
}
.trash-container button.btn-xs {
margin-top: -5px !important;
}
/*
.panel-footer .insert-step{
margin-left:10px;
border-radius:6px;
background-color:#fff;
border:solid #bababa 1.1px;
}
.col-md-4{
padding-left: 30px;
}
.panel-heading{
height:45px;
}
.panel-footer{
height: 45px;
}
*/

4
examples/index.html
View File

@@ -185,8 +185,8 @@
<option>Save sequence</option>
<option>Save sequence string</option>
</select>
<button id="saveButton" class="btn btn-primary btn-lg" style="margin-top:20px; margin-bottom:0px;align:center; width:100%;">Save</button>
<button class="btn btn-default btn-lg js-view-as-gif" id="gif" style="margin: 0px 35px 0px 35px;width:100%;">Preview GIF</button>
<p><button id="saveButton" class="btn btn-primary btn-lg" style="margin-top:20px; margin-bottom:0px;align:center; width:100%;">Save</button></p>
<p><button class="btn btn-default js-view-as-gif" id="gif" style="align:center;">Preview GIF</button></p>
</div>
</div>
</div>

47
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="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 = "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>"'+
<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>\
<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">\
'<div class="trash">\
<button confirm="Are you sure?" class="remove btn btn-default btn-xs">\
<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>';
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) });
// Insert the step's UI in the right place
if (stepOptions.index == _sequencer.steps.length) {
stepsEl.appendChild(step.ui);
@@ -320,6 +326,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
$('#'+id).fadeIn(500).delay(200).fadeOut(500);
}
return {
getPreview: getPreview,
onSetup: onSetup,