WB

janfaracik · Mar 15, 2022 · 09e9109 · 09e9109
1 parent db1928d
commit 09e9109
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 39 deletions.
diff --git a/core/src/main/resources/lib/hudson/buildHealth.jelly b/core/src/main/resources/lib/hudson/buildHealth.jelly
@@ -36,8 +36,34 @@ THE SOFTWARE.
     <j:set var="buildHealth" value="${empty(healthReports) ? emptyHealthReport : healthReports[0]}"/>
     <j:if test="${td}"><j:set var="useTdElement" value="x"/></j:if>
     <x:element name="${useTdElement!=null?'td':'div'}">
-        <x:attribute name="data">${buildHealth.score}</x:attribute>
-        <x:attribute name="class">jenkins-table__cell--tight jenkins-table__icon healthReport</x:attribute>
+      <x:attribute name="data">${buildHealth.score}</x:attribute>
+      <x:attribute name="class">jenkins-table__cell--tight jenkins-table__icon</x:attribute>
+      <x:attribute name="html-tooltip">
+        <j:if test="${!empty(healthReports)}">
+          <table class="jenkins-table">
+            <thead>
+              <tr>
+                <th align="left">W</th>
+                <th align="left">${%Description}</th>
+                <th align="right">%</th>
+              </tr>
+            </thead>
+            <tbody>
+              <j:forEach var="rpt" items="${healthReports}">
+                <tr>
+                  <td align="left" class="jenkins-table__cell--tight jenkins-table__icon">
+                    <div class="jenkins-table__cell__button-wrapper">
+                      <l:icon class="${rpt.iconClassName} icon-sm" />
+                    </div>
+                  </td>
+                  <td>${rpt.localizableDescription}</td>
+                  <td align="right">${rpt.score}</td>
+                </tr>
+              </j:forEach>
+            </tbody>
+          </table>
+        </j:if>
+      </x:attribute>
         <j:if test="${buildHealth!=null}">
             <div class="jenkins-table__cell__button-wrapper">
                 <j:if test="${iconSizeClass == null}">
@@ -62,29 +88,5 @@ THE SOFTWARE.
                 </j:choose>
             </div>
         </j:if>
-        <j:if test="${!empty(healthReports)}">
-            <div class="jenkins-tooltip healthReportDetails">
-                <table class="jenkins-table">
-                    <thead>
-                        <tr>
-                            <th align="left">W</th>
-                            <th align="left">${%Description}</th>
-                            <th align="right">%</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <j:forEach var="rpt" items="${healthReports}">
-                            <tr>
-                                <td align="left">
-                                    <l:icon class="${rpt.iconClassName} icon-sm" />
-                                </td>
-                                <td align="left">${rpt.localizableDescription}</td>
-                                <td align="right">${rpt.score}</td>
-                            </tr>
-                        </j:forEach>
-                    </tbody>
-                </table>
-            </div>
-        </j:if>
     </x:element>
 </j:jelly>
diff --git a/war/src/main/less/base/layout-commons.less b/war/src/main/less/base/layout-commons.less
@@ -1,14 +1,12 @@
 @import '../abstracts/theme.less';
 
 html {
-  position: relative;
   height: 100%;
   box-sizing: border-box;
-  min-height: none;
 }
 
 body {
-  height: 100%;
+  min-height: 100vh;
   margin: 0;
   display: flex;
   flex-direction: column;

diff --git a/war/src/main/less/modules/tooltips.less b/war/src/main/less/modules/tooltips.less
@@ -1,12 +1,38 @@
-.jenkins-tooltip {
-  position: absolute;
-  padding: 5px 10px;
+.tippy-box[data-theme~='tooltip'] {
+  background: var(--tooltip-background);
+  color: var(--tooltip-foreground);
+  padding: 0.55rem 0.8rem;
   border-radius: 10px;
-  background: var(--tooltip-background-color);
   box-shadow: var(--tooltip-shadow);
-  color: var(--tooltip-foreground-color);
-  font-size: 0.8rem;
-  z-index: 1001 !important;
-  overflow: hidden;
-  max-width: none !important;
+  font-weight: 500;
+  font-size: 0.75rem;
+  backdrop-filter: saturate(2) blur(10px);
+  max-width: unset !important;
+
+  .tippy-content {
+    padding: 0;
+  }
+
+  // We style tables as they have additional margin/border radius when in tooltips
+  .jenkins-table {
+    --table-background: rgba(black, 0.05);
+    --table-border-radius: 8px;
+    margin: calc(-0.55rem + 5px) calc(-0.8rem + 5px);
+    width: 400px;
+  }
+}
+
+.tippy-box[data-animation='tooltip'][data-state='hidden'] {
+  opacity: 0;
+  transform: scale(0.995);
+
+  &[data-placement^="top"] {
+    transform-origin: bottom;
+    transform: translateY(2px) scale(0.995);
+  }
+
+  &[data-placement^="bottom"] {
+    transform-origin: top;
+    transform: translateY(-2px) scale(0.995);
+  }
 }
diff --git a/war/src/main/webapp/scripts/prototype.js b/war/src/main/webapp/scripts/prototype.js
@@ -853,7 +853,9 @@ var Enumerable = (function() {
         iterator.call(context, value, index++);
       });
     } catch (e) {
-      if (e != $break) throw e;
+      // This breaks Tippy for some reason?
+      // TypeError: undefined is not an object (evaluating 'self.indexOf')
+      // if (e != $break) throw e;
     }
     return this;
   }