Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI tweaks, cleanup, indentations, and header spinners #960

Merged
merged 1 commit into from
Mar 30, 2019
Merged

UI tweaks, cleanup, indentations, and header spinners #960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 8 additions & 33 deletions examples/demo.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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