Small fixes on the layer buttons

Removed unnecessary (and broken) call to event.preventDefault,
moved styles to less/css and also made sure to disable the buttons
not currently usable.
This commit is contained in:
Gina Häußge 2016-08-31 17:20:23 +02:00
parent d2b0387994
commit e42ef3d070
4 changed files with 36 additions and 16 deletions

File diff suppressed because one or more lines are too long

View file

@ -53,7 +53,9 @@ $(function() {
self.reader_sortLayers = ko.observable(true);
self.reader_hideEmptyLayers = ko.observable(true);
self.layerSelectionEnabled = ko.observable(false)
self.layerSelectionEnabled = ko.observable(false);
self.layerUpEnabled = ko.observable(false);
self.layerDownEnabled = ko.observable(false);
self.synchronizeOptions = function(additionalRendererOptions, additionalReaderOptions) {
var renderer = {
@ -221,6 +223,7 @@ $(function() {
self.currentLayer = undefined;
self.currentCommand = undefined;
self.maxLayer = undefined;
self.initialize = function() {
var layerSliderElement = $("#gcode_slider_layers");
@ -428,8 +431,11 @@ $(function() {
self.layerSlider.slider("setMax", 1);
self.layerSlider.slider("setValue", 0);
self.layerSelectionEnabled(false);
self.layerDownEnabled(false);
self.layerUpEnabled(false);
}
self.currentLayer = 0;
self.maxLayer = 0;
} else {
var output = [];
output.push(gettext("Model size") + ": " + model.width.toFixed(2) + "mm × " + model.depth.toFixed(2) + "mm × " + model.height.toFixed(2) + "mm");
@ -439,11 +445,14 @@ $(function() {
self.ui_modelInfo(output.join("<br>"));
self.maxLayer = model.layersPrinted - 1;
if (self.layerSlider != undefined) {
self.layerSlider.slider("enable");
self.layerSlider.slider("setMax", model.layersPrinted - 1);
self.layerSlider.slider("setMax", self.maxLayer);
self.layerSlider.slider("setValue", 0);
self.layerSelectionEnabled(true);
self.layerDownEnabled(false);
self.layerUpEnabled(self.maxLayer > 0);
}
}
};
@ -455,6 +464,9 @@ $(function() {
self.layerCommandSlider.slider("disable");
self.layerCommandSlider.slider("setMax", 1);
self.layerCommandSlider.slider("setValue", [0, 1]);
self.layerDownEnabled(false);
self.layerUpEnabled(false);
}
self.currentCommand = [0, 1];
} else {
@ -475,10 +487,14 @@ $(function() {
self.ui_layerInfo(output.join("<br>"));
console.log("#### Layer number:", layer.number, ", max layer:", self.maxLayer);
if (self.layerCommandSlider != undefined) {
self.layerCommandSlider.slider("enable");
self.layerCommandSlider.slider("setMax", layer.commands - 1);
self.layerCommandSlider.slider("setValue", [0, layer.commands - 1]);
self.layerDownEnabled(layer.number > 0);
self.layerUpEnabled(layer.number < self.maxLayer);
}
}
};
@ -561,8 +577,6 @@ $(function() {
self.shiftLayer = function(value){
if (value != self.currentLayer) {
event.preventDefault();
self.layerSlider.slider('setValue', value);
value = self.layerSlider.slider('getValue');
//This sets the scroll bar to the appropriate position.

View file

@ -651,7 +651,7 @@ ul.dropdown-menu li a {
#gcode {
.progress {
width: 582px;
width: 588px;
.bar {
.transition(width 0s linear);
@ -665,6 +665,11 @@ ul.dropdown-menu li a {
}
}
.layer-buttons {
padding-top: 5px;
padding-bottom: 7px;
}
#gcode_layer_slider {
position: absolute;
right: 0;

View file

@ -3,16 +3,17 @@
<input id="gcode_slider_layers" type="text">
<canvas id="gcode_canvas" width="568" height="568"></canvas>
<input id="gcode_slider_commands" type="text" style="width: 554px">
<div id ="button_control" class="btn-group-toolbar" style="width: 100%; padding-bottom: 7px; padding-top: 5px;text-align: center;">
<button id = "btn_layer_up" type="button" class="btn btn-primary btn-medium" style="width:48%" data-bind = "click: incrementLayer, enable: layerSelectionEnabled">
<i class="icon-white icon-arrow-up"></i>
<span>{{ _('Layer up') }}</span>
</button>
<button id = "btn_layer_down" type="button" class="btn btn-primary btn-medium" style="width:48%" data-bind = "click: decrementLayer, enable: layerSelectionEnabled">
<i class="icon-white icon-arrow-down"></i>
<span>{{ _('Layer Down') }}</span>
</button>
</div>
</div>
<div class="layer-buttons btn-group-toolbar row-fluid">
<button type="button" class="btn btn-primary btn-medium span6" data-bind = "click: incrementLayer, enable: layerSelectionEnabled() && layerUpEnabled()">
<i class="icon-white icon-arrow-up"></i>
<span>{{ _('Layer Up') }}</span>
</button>
<button type="button" class="btn btn-primary btn-medium span6" data-bind = "click: decrementLayer, enable: layerSelectionEnabled() && layerDownEnabled()">
<i class="icon-white icon-arrow-down"></i>
<span>{{ _('Layer Down') }}</span>
</button>
</div>
<div class="progress progress-text-centered">