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

Add Dropdown Transitions (#881)

Browse Source 
* Add Dropdown Transitions

* Add Dropdown Transitions

* Update defaultHtmlStepUi.js

* Add Dropdown Transitions

* Add Dropdown Transitions

* Add Dropdown Transitions
This commit is contained in:
MAYANK CHHIPA
2019-03-20 00:58:05 +05:30
committed by Jeffrey Warren
parent 951afdbc4f
commit 21ff486618
2 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
dist/image-sequencer-ui.js vendored
View File

@@ -388,15 +388,15 @@ function DefaultHtmlStepUi(_sequencer, options) {
<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"><p><i>"'+
'</h3><div class="cal collapse in"><p><i>"'+
(step.description || "") +
'</i></p></div>\
</div>\
</form>\
<div class="col-md-8 cal 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="step-image">\
<a><img alt="" class="img-thumbnail step-thumbnail"/></a>\
<a class="cal collapse in"><img alt="" class="img-thumbnail step-thumbnail"/></a>\
</div>\
</div>\
</div>\
@@ -404,7 +404,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
</div>';
var tools =
'<div class="cal"><div class="tools btn-group">\
'<div class="cal collapse in"><div class="tools btn-group">\
<button confirm="Are you sure?" class="remove btn btn btn-default">\
<i class="fa fa-trash"></i>\
</button>\
@@ -469,7 +469,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
div.setAttribute("name", paramName);
var description = inputs[paramName].desc || paramName;
div.innerHTML =
"<div class='det cal'>\
"<div class='det cal collapse in'>\
<label for='" +
paramName +
"'>" +
@@ -483,7 +483,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
}
$(step.ui.querySelector("div.details")).append(
'<div class="cal"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></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>'
);
@@ -513,7 +513,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
}
$(step.ui.querySelector(".toggle")).on("click", () => {
$(step.ui.querySelector('.toggleIcon')).toggleClass('fa-caret-up').toggleClass('fa-caret-down');
$(step.ui.querySelectorAll(".cal")).toggleClass("collapse");
$(step.ui.querySelectorAll(".cal")).collapse('toggle');
});
$(step.imgElement).on("mousemove", _.debounce(() => imageHover(step), 150));

16
examples/lib/defaultHtmlStepUi.js
View File

@@ -32,21 +32,23 @@ function DefaultHtmlStepUi(_sequencer, options) {
<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"><p><i>"'+
'</h3><div class="cal collapse in"><p><i>"'+
(step.description || "") +
'</i></p></div>\
</div>\
</form>\
<div class="col-md-8 cal 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>\
<a><img alt="" class="img-thumbnail step-thumbnail"/></a>\
<div class="step-image">\
<a class="cal collapse in"><img alt="" class="img-thumbnail step-thumbnail"/></a>\
</div>\
</div>\
</div>\
</div>\
</div>';
var tools =
'<div class="cal"><div class="tools btn-group">\
'<div class="cal collapse in"><div class="tools btn-group">\
<button confirm="Are you sure?" class="remove btn btn btn-default">\
<i class="fa fa-trash"></i>\
</button>\
@@ -111,7 +113,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
div.setAttribute("name", paramName);
var description = inputs[paramName].desc || paramName;
div.innerHTML =
"<div class='det cal'>\
"<div class='det cal collapse in'>\
<label for='" +
paramName +
"'>" +
@@ -125,7 +127,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
}
$(step.ui.querySelector("div.details")).append(
'<div class="cal"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></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>'
);
@@ -155,7 +157,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
}
$(step.ui.querySelector(".toggle")).on("click", () => {
$(step.ui.querySelector('.toggleIcon')).toggleClass('fa-caret-up').toggleClass('fa-caret-down');
$(step.ui.querySelectorAll(".cal")).toggleClass("collapse");
$(step.ui.querySelectorAll(".cal")).collapse('toggle');
});
$(step.imgElement).on("mousemove", _.debounce(() => imageHover(step), 150));