Switch to using popover instead of tooltip (#184)

* Switch to using popover instead of tooltip * Set hidden on page generation. * Use the magic of the '+' selector. * Set initial class Co-authored-by: Manuel McLure <manuel@debian-vm-ulthar.internal.mclure.org>
jneilliii · Jul 1, 2022 · 5d6fa85 · 5d6fa85
1 parent 5837877
commit 5d6fa85
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 11 deletions.
diff --git a/octoprint_tasmota/__init__.py b/octoprint_tasmota/__init__.py
@@ -304,7 +304,7 @@ def get_assets(self):
 
 	def get_template_configs(self):
 		return [
-			{'type': "navbar", 'custom_bindings': True},
+			{'type': "navbar", 'custom_bindings': True, 'classes': ["hide_popover_content"]},
 			{'type': "settings", 'custom_bindings': True},
 			{'type': "tab", 'custom_bindings': True},
 			{'type': "sidebar", 'icon': "plug", 'custom_bindings': True, 'data_bind': "visible: show_sidebar",

diff --git a/octoprint_tasmota/static/css/tasmota.css b/octoprint_tasmota/static/css/tasmota.css
@@ -81,3 +81,29 @@ input[type="datetime-local"].alert-error {
 .navbar .nav > li > a.tasmota_button {
     float: left;
 }
+
+/* For popover */
+#navbar_plugin_tasmota div.popover {
+    width: auto !important;
+    max-width: 100em;
+}
+#navbar_plugin_tasmota div.popover table {
+    width: auto !important;
+    table-layout: auto !important;
+}
+#navbar_plugin_tasmota div.popover td {
+    width: auto !important;
+    white-space: nowrap;
+}
+#navbar_plugin_tasmota div.popover td:last-child {
+    padding-left: 1em;
+}
+#navbar_plugin_tasmota div.popover h3.popover-title {
+    white-space: nowrap;
+}
+#navbar_plugin_tasmota a.hide_popover_content + div.popover > h3.popover-title {
+    border: none;
+}
+#navbar_plugin_tasmota a.hide_popover_content + div.popover > div.popover-content {
+    display: none;
+}
diff --git a/octoprint_tasmota/static/js/tasmota.js b/octoprint_tasmota/static/js/tasmota.js
@@ -391,18 +391,25 @@ $(function() {
 					console.log('plug data:'+ko.toJSON(plug));
 				}
 
-				var tooltip = plug.label();
-				if(data.sensor_data) {
-					for(let k in data.sensor_data) {
-						tooltip += '<br>' + k + ': ' + data.sensor_data[k]
+
+				var tooltip = '';
+				if (data.sensor_data || data.energy_data) {
+					tooltip += '<table style="width: 100%"><thead></thead><tbody>';
+					if(data.sensor_data) {
+						for(let k in data.sensor_data) {
+							tooltip += '<tr><td>' + k + ':</td><td>' + data.sensor_data[k] + '</td></tr>';
+						}
 					}
-				}
-				if(data.energy_data) {
-					for(let k in data.energy_data) {
-						tooltip += '<br>' + k + ': ' + data.energy_data[k]
+					if(data.energy_data) {
+						for(let k in data.energy_data) {
+							tooltip += '<tr><td>' + k + ':</td><td>' + data.energy_data[k] + '</td></tr>';
+						}
 					}
+					tooltip += '</tbody></table>';
+					$(('#tasmota_button_link_'+data.ip+'_'+data.idx).replace(/[.:]/g,'_')).removeClass('hide_popover_content');
+				} else {
+					$(('#tasmota_button_link_'+data.ip+'_'+data.idx).replace(/[.:]/g,'_')).addClass('hide_popover_content');
 				}
-				//plug.label_extended = ko.observable(tooltip);
                 try {
                     self.arrSmartplugsTooltips.set(data.ip+'_'+data.idx, tooltip);
                 } catch (error) {

diff --git a/octoprint_tasmota/templates/tasmota_navbar.jinja2 b/octoprint_tasmota/templates/tasmota_navbar.jinja2
@@ -1,5 +1,5 @@
 <!-- ko foreach: settings.settings.plugins.tasmota.arrSmartplugs -->
-<a class="tasmota_button" href="#" data-toggle="tooltip" data-html="true" data-bind="click: $root.toggleRelay,visible: $root.loginState.loggedIn(), tooltip: {title: $root.arrSmartplugsTooltips.get(ip()+'_'+idx()), placement: 'bottom'}" style="display: none;"><i class="icon" data-bind="css: [$root.arrSmartplugsStates.get(ip()+'_'+idx())(), icon(),(($root.processing().indexOf(ip()) > -1) ? 'icon-spin' : '')].join(' '), style: {color: $root.get_color($data)}" aria-hidden="true"></i><div class="tasmota_label" data-bind="text: $data.label_extended"></div></a>
+<a class="tasmota_button hide_popover_content" href="#" data-bind="click: $root.toggleRelay,visible: $root.loginState.loggedIn(), popover: {title: $data.label, html: true, content: $root.arrSmartplugsTooltips.get(ip()+'_'+idx()), placement: 'bottom', trigger: 'hover'}, attr: { id: ('tasmota_button_link_'+ip()+'_'+idx()).replace(/[.:]/g, '_')}" style="display: none;"><i class="icon" data-bind="css: [$root.arrSmartplugsStates.get(ip()+'_'+idx())(), icon(),(($root.processing().indexOf(ip()) > -1) ? 'icon-spin' : '')].join(' '), style: {color: $root.get_color($data)}" aria-hidden="true"></i><div class="tasmota_label" data-bind="text: $data.label_extended"></div></a>
 <!-- /ko -->
 <div id="TasmotaWarning" data-bind="with: selectedPlug" class="modal hide fade">
     <div class="modal-header">