Add floating tooltip with suffix

elgatosf · May 27, 2019 · d7b8b2b · d7b8b2b
1 parent f790aa8
commit d7b8b2b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/Sources/com.elgato.pisamples.sdPlugin/css/sdpi.css b/Sources/com.elgato.pisamples.sdPlugin/css/sdpi.css
@@ -643,6 +643,26 @@ details.message h1 {
   color: var(--sdpi-color);
 }
 
+.sdpi-bottom-bar {
+  display: flex;
+  align-self: right;
+  margin-left: auto;
+  position: fixed;
+  right: 17px;
+  bottom: 0px;
+  user-select: none;
+}
+
+.sdpi-bottom-bar.right {
+  right: 0px;
+}
+
+.sdpi-bottom-bar button {
+  min-height: 20px !important;
+  height: 20px !important;
+}
+
+
 .sdpi-more-info-button {
   display: flex;
   align-self: right;

diff --git a/Sources/com.elgato.pisamples.sdPlugin/index_pi.html b/Sources/com.elgato.pisamples.sdPlugin/index_pi.html
@@ -204,7 +204,7 @@
                 <div class="sdpi-item-label">Range (with label)</div>
                 <div class="sdpi-item-value">
                     <span class="clickable" value=0>0</span>
-                    <input class="floating-tooltip" type="range" min="0" max="100" value=74>
+                    <input class="floating-tooltip" data-suffix="K" type="range" min="5" max="100" value=74>
                     <span class="clickable" value="100">100</span>
                 </div>
             </div>

diff --git a/Sources/com.elgato.pisamples.sdPlugin/index_pi.js b/Sources/com.elgato.pisamples.sdPlugin/index_pi.js
@@ -705,7 +705,7 @@ function prettify(node, level) {
 }
 
 function rangeToPercent(value, min, max) {
-    return ((value - min) / (max - min));
+    return (value / (max - min));
 };
 function initToolTips() {
     console.log("INITTOOLTIPS")
@@ -723,12 +723,12 @@ function initToolTip(element, tooltip) {
     const suffix = element.getAttribute('data-suffix') || '';
 
     const fn = () => {
-        const elementRect = element.getBoundingClientRect();
-        const w = elementRect.width - tw / 2;
+      const elementRect = element.getBoundingClientRect();
+      const w = elementRect.width - tw / 2;
       const percnt = rangeToPercent(element.value, element.min, element.max);
       tooltip.textContent = suffix != "" ? `${element.value} ${suffix}` : String(element.value);
-        tooltip.style.left = `${elementRect.left + Math.round(w * percnt) - tw / 4}px`;
-        tooltip.style.top = `${elementRect.top - 32}px`;
+      tooltip.style.left = `${elementRect.left + Math.round(w * percnt) - tw / 4}px`;
+      tooltip.style.top = `${elementRect.top - 32}px`;
     };
 
     if (element) {