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

ui-tweaks (#960)

Browse Source
This commit is contained in:
Jeffrey Warren
2019-03-30 12:47:56 -04:00
committed by GitHub
parent bc1151c340
commit 690c126f41
3 changed files with 31 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
examples/demo.css
View File

@@ -18,11 +18,19 @@ body {
background: #f8f8fa; background: #f8f8fa;
} }
footer {
margin-top: 40px;
}
h1 { h1 {
font-family: 'League Spartan'; font-family: 'League Spartan';
color: #445; color: #445;
} }
body > .container,
body > .container-fluid {
}
.center-align { .center-align {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -71,16 +79,6 @@ h1 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.details {
padding-left: 6px;
}
.details h3 {
font-family: monospace;
margin-top: 12px;
font-size: 1.3em;
}
.det { .det {
padding: 10px 16px; padding: 10px 16px;
text-decoration: italic; text-decoration: italic;
@@ -99,11 +97,6 @@ h1 {
color: #444; color: #444;
} }
.load-spin{
position: absolute;
right: 0px;
}
#addStep { #addStep {
max-width: 500px; max-width: 500px;
margin: 20px auto; margin: 20px auto;
@@ -259,21 +252,3 @@ a.name-header{
.trash-container button.btn-xs { .trash-container button.btn-xs {
margin-top: -5px !important; 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;
}
*/

10
examples/index.html
View File

@@ -200,19 +200,17 @@
<div class="col-md-6"> <div class="col-md-6">
<h2>Need Help?</h2> <h2>Need Help?</h2>
<p> <p>
Post a link to this and ask help from other community members on Gitter <a class="btn btn-default" href="https://github.com/publiclab/image-sequencer/issues">Ask a question</a>
</p> <a class="btn btn-default" href="https://publiclab.org/chat">Ask in our chatroom</a>
<p>
<a class="btn btn-primary" href="https://gitter.im/publiclab/publiclab">Ask a question on Gitter</a>
</p> </p>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<h2>Improve this tool</h2> <h2>Improve this tool</h2>
<p> <p>
This is an open source toolkit which you can help add to and improve on Github This is an open source toolkit which you can help improve on Github
</p> </p>
<p> <p>
<a class="btn btn-primary" href="https://github.com/publiclab/image-sequencer">View the code &raquo;</a> <a class="btn btn-default" href="https://github.com/publiclab/image-sequencer">View the code &raquo;</a>
</p> </p>
</div> </div>
</div> </div>

42
examples/lib/defaultHtmlStepUi.js
View File

@@ -25,36 +25,35 @@ function DefaultHtmlStepUi(_sequencer, options) {
step.ui = step.ui =
'\ '\
<div class="main">\ <div class="container-fluid step-container">\
<form class="input-form">\ <form class="input-form">\
<div class="panel panel-default">\ <div class="panel panel-default">\
<div class="panel-heading">\ <div class="panel-heading">\
<div class="trash-container pull-right"></div>\ <div class="trash-container pull-right"></div>\
<h3 class="panel-title">' + <h3 class="panel-title">' +
'<span class="toggle">' +step.name + '<span class="caret"></span>\ '<span class="toggle">' +step.name + ' <span class="caret"></span>\
<span class="load-spin pull-right" style="display:none;padding:1px 8px;"><i class="fa fa-circle-o-notch fa-spin"></i></span>\
</h3>\ </h3>\
</div>\ </div>\
<div class="panel-body cal collapse in">\ <div class="panel-body cal collapse in">\
<div class="row step">\ <div class="row step">\
<div class="col-md-4 details">\ <div class="col-md-4 details container-fluid">\
<h3>\ <div class="cal collapse in"><p>' +
<span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' + '<i>' + (step.description || "") + '</i>' +
'</h3><div class="cal collapse in"><p><i>'+ '</p></div>\
(step.description || "") +
'</i></p></div>\
</div>\ </div>\
<div class="col-md-8 cal collapse in step-column">\ <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="load load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
<div class="step-image">\ <div class="step-image">\
<a class="cal collapse in"><img class="img-thumbnail step-thumbnail"/></a>\ <a class="cal collapse in"><img class="img-thumbnail step-thumbnail"/></a>\
</div>\ </div>\
</div>\ </div>\
</div>\ </div>\
</div>\
<div class="panel-footer cal collapse in"></div>\
</div>\ </div>\
</form>\ <div class="panel-footer cal collapse in"></div>\
</div>'; </div>\
</form>\
</div>';
var tools = var tools =
'<div class="trash">\ '<div class="trash">\
@@ -67,9 +66,9 @@ function DefaultHtmlStepUi(_sequencer, options) {
var parser = new DOMParser(); var parser = new DOMParser();
step.ui = parser.parseFromString(step.ui, "text/html"); step.ui = parser.parseFromString(step.ui, "text/html");
step.ui = step.ui.querySelector("div.main"); step.ui = step.ui.querySelector("div.container-fluid");
step.linkElements = step.ui.querySelectorAll("a"); step.linkElements = step.ui.querySelectorAll("a");
step.imgElement = step.ui.querySelector("a img"); step.imgElement = step.ui.querySelector("a img.img-thumbnail");
if (_sequencer.modulesInfo().hasOwnProperty(step.name)) { if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
var inputs = _sequencer.modulesInfo(step.name).inputs; var inputs = _sequencer.modulesInfo(step.name).inputs;
@@ -135,7 +134,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
); );
$(step.ui.querySelector("div.panel-footer")).prepend( $(step.ui.querySelector("div.panel-footer")).prepend(
'<button class="pull-right btn btn-default btn-sm insert-step" >\ '<button class="pull-right btn btn-default btn-sm insert-step" >\
<i class="fa fa-plus"></i> Insert Module\ <i class="fa fa-plus"></i> Insert Step\
</button>' </button>'
); );
} }
@@ -231,16 +230,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
function onDraw(step) { function onDraw(step) {
$(step.ui.querySelector(".load")).show(); $(step.ui.querySelector(".load")).show();
$(step.ui.querySelector("img")).hide(); $(step.ui.querySelector("img")).hide();
if( $(step.ui.querySelector(".toggleIcon")).hasClass("fa-caret-down") ) $(step.ui.querySelectorAll(".load-spin")).show();
{
$(step.ui.querySelector(".load-spin")).show();
}
} }
function onComplete(step) { function onComplete(step) {
$(step.ui.querySelector(".load")).hide();
$(step.ui.querySelector("img")).show(); $(step.ui.querySelector("img")).show();
$(step.ui.querySelector(".load-spin")).hide(); $(step.ui.querySelectorAll(".load-spin")).hide();
$(step.ui.querySelector(".load")).hide();
step.imgElement.src = (step.name == "load-image") ? step.output.src : step.output; step.imgElement.src = (step.name == "load-image") ? step.output.src : step.output;
var imgthumbnail = step.ui.querySelector(".img-thumbnail"); var imgthumbnail = step.ui.querySelector(".img-thumbnail");