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

Merge branch 'devel' into dev/gcodeScripts

Browse source
This commit is contained in:
Gina Häußge 2015-03-01 14:28:09 +01:00
commit a88a781d38
11 changed files with 109 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/octoprint/server/api/settings.py
View file

@ -38,7 +38,8 @@ def getSettings():
},
"appearance": {
"name": s.get(["appearance", "name"]),
"color": s.get(["appearance", "color"])
"color": s.get(["appearance", "color"]),
"colorTransparent": s.getBoolean(["appearance", "colorTransparent"])
},
"printer": {
"defaultExtrusionLength": s.getInt(["printerParameters", "defaultExtrusionLength"])
@ -131,6 +132,7 @@ def setSettings():
if "appearance" in data.keys():
if "name" in data["appearance"].keys(): s.set(["appearance", "name"], data["appearance"]["name"])
if "color" in data["appearance"].keys(): s.set(["appearance", "color"], data["appearance"]["color"])
if "colorTransparent" in data["appearance"].keys(): s.setBoolean(["appearance", "colorTransparent"], data["appearance"]["colorTransparent"])
if "printer" in data.keys():
if "defaultExtrusionLength" in data["printer"]: s.setInt(["printerParameters", "defaultExtrusionLength"], data["printer"]["defaultExtrusionLength"])

3
src/octoprint/settings.py
View file

@ -118,7 +118,8 @@ default_settings = {
},
"appearance": {
"name": "",
"color": "default"
"color": "default",
"colorTransparent": False
},
"controls": [],
"system": {

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

File diff suppressed because one or more lines are too long

BIN
src/octoprint/static/img/trans-background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

1
src/octoprint/static/js/app/viewmodels/appearance.js
View file

@ -4,6 +4,7 @@ $(function() {
self.name = parameters[0].appearance_name;
self.color = parameters[0].appearance_color;
self.colorTransparent = parameters[0].appearance_colorTransparent;
self.brand = ko.computed(function() {
if (self.name())

8
src/octoprint/static/js/app/viewmodels/navigation.js
View file

@ -9,6 +9,14 @@ $(function() {
self.systemActions = self.settings.system_actions;
self.appearanceClasses = ko.computed(function() {
var classes = self.appearance.color();
if (self.appearance.colorTransparent()) {
classes += " transparent";
}
return classes;
});
self.triggerAction = function(action) {
var callback = function() {
$.ajax({

10
src/octoprint/static/js/app/viewmodels/settings.js
View file

@ -12,6 +12,7 @@ $(function() {
self.appearance_name = ko.observable(undefined);
self.appearance_color = ko.observable(undefined);
self.appearance_colorTransparent = ko.observable();
self.settingsDialog = undefined;
@ -23,7 +24,8 @@ $(function() {
{key: "green", name: gettext("green")},
{key: "blue", name: gettext("blue")},
{key: "violet", name: gettext("violet")},
{key: "black", name: gettext("black")}
{key: "black", name: gettext("black")},
{key: "white", name: gettext("white")},
]);
self.appearance_colorName = function(color) {
@ -42,6 +44,8 @@ $(function() {
return gettext("violet");
case "black":
return gettext("black");
case "white":
return gettext("white");
case "default":
return gettext("default");
default:
@ -182,6 +186,7 @@ $(function() {
self.appearance_name(response.appearance.name);
self.appearance_color(response.appearance.color);
self.appearance_colorTransparent(response.appearance.colorTransparent);
self.printer_defaultExtrusionLength(response.printer.defaultExtrusionLength);
@ -247,7 +252,8 @@ $(function() {
},
"appearance" : {
"name": self.appearance_name(),
"color": self.appearance_color()
"color": self.appearance_color(),
"colorTransparent": self.appearance_colorTransparent()
},
"printer": {
"defaultExtrusionLength": self.printer_defaultExtrusionLength()

14
src/octoprint/static/less/mixins.less Normal file
View file

@ -0,0 +1,14 @@
// Gradients with background images
#imggradient {
.vertical(@startColor: #555, @endColor: #333, @image) {
background-color: mix(@startColor, @endColor, 60%);
background-image: @image; // fallback
background-image: -moz-linear-gradient(top, @startColor, @endColor), url(@image); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)), url(@image); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor), url(@image); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor), url(@image); // Opera 11.10
background-image: linear-gradient(to bottom, @startColor, @endColor), url(@image); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
}
}

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

@ -3,6 +3,7 @@
@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";
@import "variables.less";
@import "mixins.less";
// Body
body {
@ -10,12 +11,12 @@ body {
}
// Navigation bar
.navbar-inner-text (@base) {
.navbar-inner-text (@base, @text-color) {
text-shadow: 0 1px 0 contrast(@base, lighten(@base, 15%), darken(@base, 15%));
color: @text-color;
@caret-color: average(@base, @text-color);
@caret-hover-color: average(@caret-color, @text-color);
.caret {
border-bottom-color: @caret-color;
border-top-color: @caret-color;
@ -65,20 +66,29 @@ body {
}
}
.navbar-inner-color (@base) {
.navbar-background-color (@top, @bottom, @image) when (isstring(@image)) {
#imggradient > .vertical(@top, @bottom, @image);
}
.navbar-background-color(@top, @bottom, @image) when not (isstring(@image)) {
#gradient > .vertical(@top, @bottom);
}
.navbar-inner-color (@base, @gradientalpha: 100%, @image: false) {
@top: lighten(@base, 25%);
@bottom: darken(@base, 15%);
@text-color-light: #f2f2f2;
@text-color-dark: #333333;
@text-color: contrast(@base, @text-color-dark, @text-color-light);
@text-color: contrast(@bottom, @text-color-dark, @text-color-light);
#gradient > .vertical(@top, @bottom);
.navbar-background-color(fade(@top, @gradientalpha), fade(@bottom, @gradientalpha), @image);
.brand, .nav>li>a {
.navbar-inner-text(@base);
.navbar-inner-text(@base, @text-color);
}
.brand {
.brand(@text-color, @text-color-dark, @text-color-light);
}
@ -86,7 +96,7 @@ body {
.nav {
li.dropdown.open>.dropdown-toggle, li.dropdown.active>.dropdown-toggle, li.dropdown.open.active>.dropdown-toggle {
// invert for dropdown
#gradient > .vertical(@bottom, @top);
.navbar-background-color(fade(@bottom, @gradientalpha), fade(@top, @gradientalpha), @image);
}
}
}
@ -95,35 +105,75 @@ body {
@base: #F2F2F2;
.navbar-inner-color(@base);
&.transparent {
.navbar-inner-color(@base, 60%, "../img/trans-background.png");
}
&.red {
@base: #F22828;
@base: #bd362f;
.navbar-inner-color(@base);
&.transparent {
.navbar-inner-color(@base, 60%, "../img/trans-background.png");
}
}
&.orange {
@base: #F27728;
.navbar-inner-color(@base);
&.transparent {
.navbar-inner-color(@base, 60%, "../img/trans-background.png");
}
}
&.yellow {
@base: #F2DE28;
.navbar-inner-color(@base);
&.transparent {
.navbar-inner-color(@base, 60%, "../img/trans-background.png");
}
}
&.green {
@base: #77FF28;
.navbar-inner-color(@base);
&.transparent {
.navbar-inner-color(@base, 60%, "../img/trans-background.png");
}
}
&.blue {
@base: #2877FF;
@base: #04c;
.navbar-inner-color(@base);
&.transparent {
.navbar-inner-color(@base, 60%, "../img/trans-background.png");
}
}
&.violet {
@base: #7728FF;
.navbar-inner-color(@base);
&.transparent {
.navbar-inner-color(@base, 60%, "../img/trans-background.png");
}
}
&.black {
@base: #383838;
.navbar-inner-color(@base);
&.transparent {
.navbar-inner-color(@base, 60%, "../img/trans-background.png");
}
}
&.white {
@base: #eeeeee;
.navbar-inner-color(@base);
&.transparent {
.navbar-inner-color(@base, 60%, "../img/trans-background.png");
}
}
.brand span {
background-size: 20px 20px;
background-position: left center;

11
src/octoprint/templates/dialogs/settings/appearance.jinja2
View file

@ -1,15 +1,22 @@
<form class="form-horizontal">
<div class="control-group">
<div class="control-group" title="{{ _('Name of this OctoPrint instance, will be shown in the navigation bar and broadcast on the network') }}">
<label class="control-label" for="settings-appearanceName">{{ _('Title') }}</label>
<div class="controls">
<input type="text" class="input-block-level" data-bind="value: appearance_name" id="settings-appearanceName">
</div>
</div>
<div class="control-group">
<div class="control-group" title="{{ _('Personalize the color of the navigation bar - maybe to match your printer?') }}">
<label class="control-label" for="settings-appearanceColor">{{ _('Color') }}</label>
<div class="controls">
<select id="settings-appearanceColor" data-bind="value: appearance_color, options: appearance_available_colors, optionsText: 'name', optionsValue: 'key'">
</select>
</div>
</div>
<div class="control-group" title="{{ _('For acrylic printers ;)') }}">
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: appearance_colorTransparent"> {{ _('Transparent Color') }}
</label>
</div>
</div>
</form>

2
src/octoprint/templates/index.jinja2
View file

@ -12,7 +12,7 @@
</head>
<body>
<div id="navbar" class="navbar navbar-static-top">
<div class="navbar-inner" data-bind="css: appearance.color">
<div class="navbar-inner" data-bind="css: appearanceClasses">
<div class="container">
<a class="brand" href="#"> <span data-bind="text: appearance.brand">OctoPrint</span></a>
<div class="nav-collapse">