Skip to content

Commit

Permalink
ui-tweaks (#960)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jywarren
jywarren authored Mar 30, 2019
1 parent bc1151c commit 690c126
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 62 deletions.
41 changes: 8 additions & 33 deletions examples/demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,19 @@ body {
background: #f8f8fa;
}

footer {
margin-top: 40px;
}

h1 {
font-family: 'League Spartan';
color: #445;
}

body > .container,
body > .container-fluid {
}

.center-align {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -71,16 +79,6 @@ h1 {
margin-bottom: 20px;
}

.details {
padding-left: 6px;
}

.details h3 {
font-family: monospace;
margin-top: 12px;
font-size: 1.3em;
}

.det {
padding: 10px 16px;
text-decoration: italic;
Expand All @@ -99,11 +97,6 @@ h1 {
color: #444;
}

.load-spin{
position: absolute;
right: 0px;
}

#addStep {
max-width: 500px;
margin: 20px auto;
Expand Down Expand Up @@ -259,21 +252,3 @@ a.name-header{
.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;
}
*/
10 changes: 4 additions & 6 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,19 +200,17 @@ <h2 style="margin-top:20px">Save</h2>
<div class="col-md-6">
<h2>Need Help?</h2>
<p>
Post a link to this and ask help from other community members on Gitter
</p>
<p>
<a class="btn btn-primary" href="https://gitter.im/publiclab/publiclab">Ask a question on Gitter</a>
<a class="btn btn-default" href="https://github.com/publiclab/image-sequencer/issues">Ask a question</a>
<a class="btn btn-default" href="https://publiclab.org/chat">Ask in our chatroom</a>
</p>
</div>
<div class="col-md-6">
<h2>Improve this tool</h2>
<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>
<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>
</div>
</div>
Expand Down
42 changes: 19 additions & 23 deletions examples/lib/defaultHtmlStepUi.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,36 +25,35 @@ function DefaultHtmlStepUi(_sequencer, options) {

step.ui =
'\
<div class="main">\
<div class="container-fluid step-container">\
<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>\
'<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>\
</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 class="col-md-4 details container-fluid">\
<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="col-md-8 cal collapse in step-column">\
<div class="load load-spin" 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>';
<div class="panel-footer cal collapse in"></div>\
</div>\
</form>\
</div>';

var tools =
'<div class="trash">\
Expand All @@ -67,9 +66,9 @@ function DefaultHtmlStepUi(_sequencer, options) {

var parser = new DOMParser();
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.imgElement = step.ui.querySelector("a img");
step.imgElement = step.ui.querySelector("a img.img-thumbnail");

if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
var inputs = _sequencer.modulesInfo(step.name).inputs;
Expand Down Expand Up @@ -135,7 +134,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
);
$(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\
<i class="fa fa-plus"></i> Insert Step\
</button>'
);
}
Expand Down Expand Up @@ -231,16 +230,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
function onDraw(step) {
$(step.ui.querySelector(".load")).show();
$(step.ui.querySelector("img")).hide();
if( $(step.ui.querySelector(".toggleIcon")).hasClass("fa-caret-down") )
{
$(step.ui.querySelector(".load-spin")).show();
}
$(step.ui.querySelectorAll(".load-spin")).show();
}

function onComplete(step) {
$(step.ui.querySelector(".load")).hide();
$(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;
var imgthumbnail = step.ui.querySelector(".img-thumbnail");
Expand Down

0 comments on commit 690c126

Please sign in to comment.