Update keyboard shortcut component

janfaracik · Aug 4, 2024 · 08c24de · 08c24de
1 parent ae0685a
commit 08c24de
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 96 deletions.
diff --git a/core/src/main/resources/lib/layout/keyboard-shortcut.jelly b/core/src/main/resources/lib/layout/keyboard-shortcut.jelly
@@ -23,21 +23,48 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define">
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout">
   <st:documentation>
+    <st:attribute name="shortcut" use="required">
+      The shortcut to display
+
+      CMD will automatically be translated to the user's operating system's appropriate variant
+
+      This attribute also supports Jenkins Symbols, values prefixed with 'symbol-' will be displayed as expected
+    </st:attribute>
     <st:attribute name="message">
-      Tooltip message for the shortcut. Use the placeholder {0} escaped (wrapped in '). A minimal message consisting of only the shortcut would be '{0}'.
+      Optional tooltip message for the shortcut. Use the placeholder {0} escaped (wrapped in '). A minimal message consisting of
+      only the shortcut would be '{0}'
     </st:attribute>
-    Displays a keyboard shortcut chip based on the component's body.
-    CMD will automatically be translated to the user's operating system's appropriate variant.
+    Displays a keyboard shortcut chip
   </st:documentation>
 
-  <div class="jenkins-tooltip__keyboard-shortcut">
-    <j:set var="body">
-      <div class="jenkins-tooltip__keyboard-shortcut__symbol">
-        <d:invokeBody trim="true" />
-      </div>
-    </j:set>
-    <j:out value="${h.formatMessage(message, h.translateModifierKeysForUsersPlatform(body))}" />
+  <j:set var="tooltip">
+    <div class="jenkins-keyboard-shortcut__tooltip">
+      <j:set var="body">
+        <div class="jenkins-keyboard-shortcut jenkins-keyboard-shortcut--tooltip">
+          <j:choose>
+            <j:when test="${attrs.shortcut.startsWith('symbol-')}">
+              <l:icon src="${attrs.shortcut}" />
+            </j:when>
+            <j:otherwise>
+              ${attrs.shortcut}
+            </j:otherwise>
+          </j:choose>
+        </div>
+      </j:set>
+      <j:out value="${h.formatMessage(message, h.translateModifierKeysForUsersPlatform(body))}"/>
+    </div>
+  </j:set>
+
+  <div class="jenkins-keyboard-shortcut" data-html-tooltip="${attrs.message != null ? tooltip : null}">
+    <j:choose>
+      <j:when test="${attrs.shortcut.startsWith('symbol-')}">
+        <l:icon src="${attrs.shortcut}" />
+      </j:when>
+      <j:otherwise>
+        ${h.translateModifierKeysForUsersPlatform(attrs.shortcut)}
+      </j:otherwise>
+    </j:choose>
   </div>
 </j:jelly>
diff --git a/core/src/main/resources/lib/layout/search-bar.jelly b/core/src/main/resources/lib/layout/search-bar.jelly
@@ -58,14 +58,7 @@ THE SOFTWARE.
              spellcheck="false"
              disabled="${attrs.enabled == false ? true : null}" />
       <j:if test="${attrs.hasKeyboardShortcut != 'false'}">
-        <j:set var="tooltip">
-          <l:keyboard-shortcut message="${%shortcut}">
-            <l:icon src="symbol-search-shortcut" />
-          </l:keyboard-shortcut>
-        </j:set>
-        <div class="jenkins-search__shortcut" data-html-tooltip="${tooltip}">
-          <l:icon src="symbol-search-shortcut" />
-        </div>
+        <l:keyboard-shortcut shortcut="symbol-search-shortcut" message="${%shortcut}" />
       </j:if>
     </div>
   </div>

diff --git a/war/src/main/scss/components/_tooltips.scss b/war/src/main/scss/components/_tooltips.scss
@@ -29,55 +29,15 @@
     margin: 0;
     width: 450px;
   }
-}
-
-.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);
-  }
-}
-
-// Workaround for NG Warnings which supports modern Tippy tooltips and a custom solution,
-// hide the custom solution
-.jenkins-table .healthReportDetails {
-  display: none !important;
-}
-
-.jenkins-tooltip__keyboard-shortcut {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.6ch;
-
-  &__symbol {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 1.7em;
-    height: 1.7em;
-    padding-inline: 0.5ch;
-
-    &::before,
+  .jenkins-keyboard-shortcut {
     &::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: 0.375rem;
       border: 0.1rem solid var(--text-color-secondary);
       opacity: 0.3;
-    }
-
-    &::after {
       mask-image: linear-gradient(
         -45deg,
         transparent 40%,
@@ -88,11 +48,6 @@
       animation: shortcut-glow-animation 1.25s forwards linear;
     }
 
-    svg {
-      width: 1em;
-      height: 1em;
-    }
-
     @keyframes shortcut-glow-animation {
       0% {
         opacity: 0;
@@ -110,3 +65,56 @@
     }
   }
 }
+
+.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);
+  }
+}
+
+// Workaround for NG Warnings which supports modern Tippy tooltips and a custom solution,
+// hide the custom solution
+.jenkins-table .healthReportDetails {
+  display: none !important;
+}
+
+.jenkins-keyboard-shortcut {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.7em;
+  min-height: 1.7em;
+  padding-inline: 0.55ch;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 0.375rem;
+    border: 0.1rem solid var(--text-color-secondary);
+    opacity: 0.3;
+  }
+
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+}
+
+.jenkins-keyboard-shortcut__tooltip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6ch;
+}
diff --git a/war/src/main/scss/form/_search-bar.scss b/war/src/main/scss/form/_search-bar.scss
@@ -130,37 +130,14 @@
     }
   }
 
-  &__shortcut {
+  .jenkins-keyboard-shortcut {
     position: absolute;
-    aspect-ratio: 1 / 1;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: 0.25s ease;
-    text-align: center;
-    font-size: 0.6875rem;
-    font-weight: 500;
-    line-height: 1;
+    top: calc(50% - 0.6875rem);
+    right: 0.5rem;
+    min-width: 1.375rem;
+    min-height: 1.375rem;
+    padding: 0;
     color: var(--text-color-secondary);
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: calc(50% - 1em);
-      right: calc(50% - 1em);
-      width: 2em;
-      height: 2em;
-      border: 0.1rem solid var(--item-background--active);
-      border-radius: 0.3rem;
-    }
-
-    svg {
-      width: 1.2em;
-      height: 1.2em;
-    }
   }
 
   &--loading {
@@ -190,6 +167,10 @@
     max-width: 50vw;
     margin-block: -6px;
 
+    .jenkins-keyboard-shortcut {
+      right: 0.8125rem;
+    }
+
     &::before {
       content: "";
       position: absolute;
@@ -210,7 +191,7 @@
       fill: var(--focus-input-border);
     }
 
-    .jenkins-search__shortcut {
+    .jenkins-keyboard-shortcut {
       opacity: 0;
       transform: scale(0.9);
       pointer-events: none;
@@ -221,7 +202,7 @@
     color: var(--text-color-secondary);
     opacity: 0.5;
 
-    .jenkins-search__shortcut {
+    .jenkins-keyboard-shortcut {
       display: none;
     }
   }