pingu_98/MrDraw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add LESS/CSS for (centered) text in progress bars & knockout helper

Browse source
This commit is contained in:
Gina Häußge 2016-07-27 15:04:07 +02:00
parent ec8427cbb8
commit eb822c83a3
3 changed files with 91 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/octoprint/static/css/octoprint.css
View file

File diff suppressed because one or more lines are too long

38
src/octoprint/static/js/app/main.js
View file

@ -348,6 +348,44 @@ $(function() {
}
};
ko.bindingHandlers.copyWidth = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var node = ko.bindingHandlers.copyWidth._getReferenceNode(element, valueAccessor);
ko.bindingHandlers.copyWidth._setWidth(node, element);
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var node = ko.bindingHandlers.copyWidth._getReferenceNode(element, valueAccessor);
ko.bindingHandlers.copyWidth._setWidth(node, element);
},
_setWidth: function(node, element) {
var width = node.width();
if (!width) return;
if ($(element).width() == width) return;
element.style.width = width + "px";
},
_getReferenceNode: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (!value) return;
var parts = value.split(" ");
var node = $(element);
while (parts.length > 0) {
var part = parts.shift();
if (part == ":parent") {
node = node.parent();
} else {
var selector = part;
if (parts.length > 0) {
selector += " " + parts.join(" ");
}
node = $(selector, node);
break;
}
}
return node;
}
};
ko.bindingHandlers.contextMenu = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var val = ko.utils.unwrapObservable(valueAccessor());

52
src/octoprint/static/less/octoprint.less
View file

@ -1054,3 +1054,55 @@ _::-webkit-full-page-media, _:future, :root .full-sized-box {
input[type=number] {
text-align: right;
}
// Progress bars with text
//
// .progress-text-front will also need to have the full width of the enclosing
// progress wrapper applied (e.g. via copyWidth knockout binding)
.progress-text,
.progress-text-centered {
position: relative;
.progress-text-front,
.progress-text-back {
white-space: nowrap;
}
.progress-text-front {
box-sizing: border-box;
padding: 0 10px;
width: 100%;
display: block;
}
.progress-text-back {
position: absolute;
font-size: 12px;
line-height: 20px;
display: block;
box-sizing: border-box;
text-align: center;
padding: 0 10px;
}
.bar {
position: absolute;
overflow: hidden;
}
}
.progress-text-centered {
.progress-text-front {
position: absolute;
font-size: 12px;
line-height: 20px;
display: block;
text-align: center;
color: #fff;
}
.progress-text-back {
width: 100%;
}
}