Merge branch 'master' into devel

Conflicts:
	octoprint/static/css/octoprint.less

octoprint/static/css/octoprint.less

@@ -5,13 +5,48 @@ body {
 }
 
 .navbar-inner-text (@base) {
-  text-shadow: 0 1px 0 lighten(@base, 15%);
-  color: contrast(@base, #333333, #f2f2f2);
+  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;
+  }
+  
+  &:hover .caret, &:focus .caret {
+	  border-bottom-color: @caret-hover-color;
+	  border-top-color: @caret-hover-color;
+  }
+}
+
+.brand (@color, @dark, @light) when (@color = @dark) {
+	span {
+	  background-image: url(../img/tentacle-20x20.png);
+	  
+	  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+	    background-image: url(../img/tentacle-20x20@2x.png);
+	  }
+	}
+}
+.brand (@color, @dark, @light) when (@color = @light) {
+	span {
+	  background-image: url(../img/tentacle-20x20-light.png);
+	  
+	  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+	    background-image: url(../img/tentacle-20x20-light@2x.png);
+	  }
+    }
 }
 
 .navbar-inner-color (@base) {
   @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);
 
   background-color: @base; /* fallback color if gradients are not supported */
   background-image: -webkit-linear-gradient(top, @top, @bottom); /* For Chrome and Safari */
@@ -23,6 +58,10 @@ body {
   .brand, .nav>li>a {
     .navbar-inner-text(@base);
   }
+  
+  .brand {
+  		.brand(@text-color, @text-color-dark, @text-color-light);
+  }
 
   .nav {
     li.dropdown.open>.dropdown-toggle, li.dropdown.active>.dropdown-toggle, li.dropdown.open.active>.dropdown-toggle {
@@ -65,9 +104,16 @@ body {
     @base: #7728FF;
     .navbar-inner-color(@base);
   }
-
-  .brand img {
-    vertical-align: bottom;
+  &.black {
+    @base: #383838;
+    .navbar-inner-color(@base);
+  }
+  
+  .brand span {
+	  background-size: 20px 20px;
+	  background-position: left center;
+	  padding-left: 24px;
+	  background-repeat: no-repeat;
   }
 }
 

octoprint/static/js/ui.js

@@ -999,8 +999,7 @@ function TimelapseViewModel(loginStateViewModel) {
         self.isLoading(data.flags.loading);
     }
 
-    self.removeFile = function() {
-        var filename = this.name;
+    self.removeFile = function(filename) {
         $.ajax({
             url: AJAX_BASEURL + "timelapse/" + filename,
             type: "DELETE",
@@ -1300,7 +1299,7 @@ function SettingsViewModel(loginStateViewModel, usersViewModel) {
     self.appearance_color = ko.observable(undefined);
 
     /* I did attempt to allow arbitrary gradients but cross browser support via knockout or jquery was going to be horrible */
-    self.appearance_available_colors = ko.observable(["default", "red", "orange", "yellow", "green", "blue", "violet"]);
+    self.appearance_available_colors = ko.observable(["default", "red", "orange", "yellow", "green", "blue", "violet", "black"]);
 
     self.printer_movementSpeedX = ko.observable(undefined);
     self.printer_movementSpeedY = ko.observable(undefined);

octoprint/templates/index.jinja2

@@ -35,7 +35,7 @@
         <div id="navbar" class="navbar navbar-fixed-top">
             <div class="navbar-inner" data-bind="css: appearance.color">
                 <div class="container">
-                    <a class="brand" href="#"><img src="{{ url_for('static', filename='img/tentacle-20x20.png') }}"> <span data-bind="text: appearance.brand">OctoPrint</span></a>
+                    <a class="brand" href="#"> <span data-bind="text: appearance.brand">OctoPrint</span></a>
                     <div class="nav-collapse">
                         <ul class="nav pull-right">
                             <li style="display: none;" data-bind="visible: loginState.isAdmin">
@@ -542,7 +542,7 @@
                                     <tr data-bind="attr: {title: name}">
                                         <td class="timelapse_files_name" data-bind="text: name"></td>
                                         <td class="timelapse_files_size" data-bind="text: size"></td>
-                                        <td class="timelapse_files_action"><a href="#" class="icon-trash" data-bind="click: function() { if ($root.loginState.isUser()) { $parent.removeFile(); } else { return; } }, css: {disabled: !$root.loginState.isUser()}"></a>&nbsp;|&nbsp;<a href="#" class="icon-download" data-bind="attr: {href: url}"></a></td>
+                                        <td class="timelapse_files_action"><a href="#" class="icon-trash" data-bind="click: function() { if ($root.loginState.isUser()) { $parent.removeFile($data.name); } else { return; } }, css: {disabled: !$root.loginState.isUser()}"></a>&nbsp;|&nbsp;<a href="#" class="icon-download" data-bind="attr: {href: url}"></a></td>
                                     </tr>
                                 </tbody>
                             </table>
@@ -575,7 +575,8 @@
         {% include 'settings.jinja2' %}
         {% include 'dialogs.jinja2' %}
 
-        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
+        <!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>-->
+        <script type="text/javascript" src="{{ url_for('static', filename='js/jquery/jquery.min.js') }}"></script>
         <script type="text/javascript" src="{{ url_for('static', filename='js/modernizr.custom.js') }}"></script>
         <script type="text/javascript" src="{{ url_for('static', filename='js/underscore.js') }}"></script>
         <script type="text/javascript" src="{{ url_for('static', filename='js/knockout.js') }}"></script>