Display improvements

Use a div instead of a link so we no longer get the highlight when
hovering over the icon.
Remove the javascript hack to center the icon in place of a pure CSS
solution.

Author: ManuelMcLure

octoprint_wifistatus/static/css/wifistatus.css

@@ -1,11 +1,12 @@
-#navbar_plugin_wifistatus_link {
+#navbar_plugin_wifistatus_div {
   box-sizing: border-box;
-  padding-bottom: 0;
   height: auto;
 }
 #navbar_plugin_wifistatus svg {
   fill: currentColor;
   height: 1.4em;
+  margin-bottom: 0.3em;
+  vertical-align: middle;
 }
 #navbar_plugin_wifistatus .popover {
   width: auto !important;
@@ -18,3 +19,6 @@
   width: auto !important;
   white-space: nowrap;
 }
+#navbar_plugin_wifistatus .popover td:last-child {
+  padding-left: 1em;
+}

octoprint_wifistatus/static/js/wifistatus.js

@@ -101,17 +101,6 @@ $(function () {
       self.IconSVG(svg);
       self.popoverContent(wfData);
       self.wifiData(wfData);
-      var navbarHeight =
-        document.getElementById("navbar_systemmenu").offsetHeight;
-      var iconHeight = document
-        .getElementById("navbar_plugin_wifistatus_icon")
-        .getClientRects()[0].height;
-      var link = document.getElementById("navbar_plugin_wifistatus_link");
-      link.style.height = navbarHeight + "px";
-      var topPadding = ((navbarHeight - iconHeight) / 2).toFixed();
-      if (topPadding >= 0) {
-        link.style.paddingTop = topPadding + "px";
-      }
     };
   }
 

octoprint_wifistatus/templates/wifistatus_navbar.jinja2

@@ -1,3 +1,3 @@
-<a title="WiFi Status" id= "navbar_plugin_wifistatus_link" class="pull-right" href="javascript:void(0)" data-bind="popover: {placement: 'bottom', trigger: 'hover', html: true, title: 'WiFi Status', content: popoverContent}" style="position: relative;">
+<div id="navbar_plugin_wifistatus_div" class="pull-right navbar-text" data-bind="popover: {placement: 'bottom', trigger: 'hover', html: true, title: 'WiFi Status', content: popoverContent}">
   <svg id="navbar_plugin_wifistatus_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-bind="html: IconSVG"/>
-</a>
+</div>

setup.py

@@ -5,7 +5,7 @@
 plugin_identifier = "wifistatus"
 plugin_package = "octoprint_{}".format(plugin_identifier)
 plugin_name = "WiFi Status"
-plugin_version = "1.6.1"
+plugin_version = "1.7.0"
 plugin_description = "Displays WiFi status on the navbar"
 plugin_author = "Manuel McLure"
 plugin_author_email = "manuel@mclure.org"