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

69
examples/demo.css
View File

@@ -1,14 +1,14 @@
/* https://github.com/theleagueof/league-spartan */ /* https://github.com/theleagueof/league-spartan */
@font-face { @font-face {
font-family: 'League Spartan'; font-family: 'League Spartan';
src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot'); src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot');
src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'), src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff2') format('woff2'), url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff2') format('woff2'),
url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff') format('woff'), url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff') format('woff'),
url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.ttf') format('truetype'), url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.ttf') format('truetype'),
url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.svg#league_spartanbold') format('svg'); url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
body { body {
@@ -72,7 +72,6 @@ h1 {
} }
.details { .details {
border-top: 3px solid #444;
padding-left: 6px; padding-left: 6px;
} }
@@ -159,19 +158,19 @@ h1 {
} }
#move-up { #move-up {
position: fixed; position: fixed;
bottom: 50px; bottom: 50px;
right: 40px; right: 40px;
z-index: 550; z-index: 550;
display: none; display: none;
background:transparent; background:transparent;
border:none; border:none;
} }
#move-up i { #move-up i {
font-size:60px; font-size:60px;
opacity:0.7; opacity:0.7;
color:#BABABA; color:#BABABA;
} }
.btn-circle{ .btn-circle{
@@ -208,7 +207,7 @@ h1 {
.savesequencemsg{ .savesequencemsg{
display: none; display: none;
text-align: center; text-align: center;
} }
.notification { .notification {
background-color: #808b96; background-color: #808b96;
@@ -252,7 +251,29 @@ a.name-header{
} }
.step-column{ .step-column{
display:flex; display:flex;
align-content: center; align-content: center;
justify-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;
}
*/

16
examples/index.html
View File

@@ -179,14 +179,14 @@
<div class="panel-body"> <div class="panel-body">
<div style="text-align:center;"> <div style="text-align:center;">
<h2 style="margin-top:20px">Save</h2> <h2 style="margin-top:20px">Save</h2>
<select class="form-control input-md" id="selectSaveOption" style="margin-top:20px"> <select class="form-control input-md" id="selectSaveOption" style="margin-top:20px">
<option>Save as PNG</option> <option>Save as PNG</option>
<option>Save as GIF (all steps)</option> <option>Save as GIF (all steps)</option>
<option>Save sequence</option> <option>Save sequence</option>
<option>Save sequence string</option> <option>Save sequence string</option>
</select> </select>
<button id="saveButton" class="btn btn-primary btn-lg" style="margin-top:20px; margin-bottom:0px;align:center; width:100%;">Save</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>
<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 class="btn btn-default js-view-as-gif" id="gif" style="align:center;">Preview GIF</button></p>
</div> </div>
</div> </div>
</div> </div>

83
examples/lib/defaultHtmlStepUi.js
View File

@@ -26,36 +26,41 @@ function DefaultHtmlStepUi(_sequencer, options) {
step.ui = step.ui =
'\ '\
<div class="container">\ <div class="container">\
<div class="row step">\ <form class="input-form">\
<form class="input-form">\ <div class="panel panel-default">\
<div class="col-md-4 details">\ <div class="panel-heading">\
<h3>\ <div class="trash-container pull-right"></div>\
<span class = "toggle">' +step.name + ' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span>' + <h3 class="panel-title">' +
'<span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' + '<span class="toggle">' +step.name + '<span class="caret"></span>\
'</h3><div class="cal collapse in"><p><i>"'+ </h3>\
(step.description || "") + </div>\
'</i></p></div>\ <div class="panel-body cal collapse in">\
</div>\ <div class="row step">\
</form>\ <div class="col-md-4 details">\
<div class="col-md-8 cal collapse in step-column">\ <h3>\
<div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\ <span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' +
<div class="step-image">\ '</h3><div class="cal collapse in"><p><i>'+
<a class="cal collapse in"><img alt="" class="img-thumbnail step-thumbnail"/></a>\ (step.description || "") +
</div>\ '</i></p></div>\
</div>\ </div>\
</div>\ <div class="col-md-8 cal collapse in step-column">\
</div>\ <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
</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 = var tools =
'<div class="cal collapse in"><div class="tools btn-group">\ '<div class="trash">\
<button confirm="Are you sure?" class="remove btn btn btn-default">\ <button confirm="Are you sure?" class="remove btn btn-default btn-xs">\
<i class="fa fa-trash"></i>\ <i class="fa fa-trash"></i>\
</button>\ </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>'; </div>';
var util = intermediateHtmlStepUi(_sequencer, step); var util = intermediateHtmlStepUi(_sequencer, step);
@@ -125,23 +130,24 @@ function DefaultHtmlStepUi(_sequencer, options) {
</div>"; </div>";
step.ui.querySelector("div.details").appendChild(div); step.ui.querySelector("div.details").appendChild(div);
} }
$(step.ui.querySelector("div.panel-footer")).append(
$(step.ui.querySelector("div.details")).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>'
'<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")).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") { if (step.name != "load-image") {
step.ui step.ui
.querySelector("div.details") .querySelector("div.trash-container")
.appendChild( .prepend(
parser.parseFromString(tools, "text/html").querySelector("div") parser.parseFromString(tools, "text/html").querySelector("div")
); );
$(step.ui.querySelectorAll(".remove")).on('click', function() {notify('Step Removed','remove-notification')}); $(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 // Insert the step's UI in the right place
if (stepOptions.index == _sequencer.steps.length) { if (stepOptions.index == _sequencer.steps.length) {
stepsEl.appendChild(step.ui); stepsEl.appendChild(step.ui);
@@ -319,7 +325,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
$('#'+id).fadeIn(500).delay(200).fadeOut(500); $('#'+id).fadeIn(500).delay(200).fadeOut(500);
} }
return { return {
getPreview: getPreview, getPreview: getPreview,
onSetup: onSetup, onSetup: onSetup,