Merge pull request #8435 from janfaracik/keyboard-shortcut-animation

Update appearance of keyboard shortcut tooltips
jenkinsci · Dec 8, 2024 · d046516 · d046516
2 parents 9965f04 + 34f77dd
commit d046516
Show file tree

Hide file tree

Showing 8 changed files with 197 additions and 36 deletions.
diff --git a/core/src/main/java/hudson/Functions.java b/core/src/main/java/hudson/Functions.java
@@ -124,6 +124,7 @@
 import java.nio.charset.StandardCharsets;
 import java.text.DateFormat;
 import java.text.DecimalFormat;
+import java.text.MessageFormat;
 import java.time.ZoneId;
 import java.time.ZonedDateTime;
 import java.time.format.DateTimeFormatter;
@@ -2576,4 +2577,25 @@ static String guessIcon(String iconGuess, String rootURL) {
     public static String generateItemId() {
         return String.valueOf(Math.floor(Math.random() * 3000));
     }
+
+    /**
+     * @param keyboardShortcut the shortcut to be translated
+     * @return the translated shortcut, e.g. CMD+K to ⌘+K for macOS, CTRL+K for Windows
+     */
+    @Restricted(NoExternalUse.class)
+    public static String translateModifierKeysForUsersPlatform(String keyboardShortcut) {
+        StaplerRequest2 currentRequest = Stapler.getCurrentRequest2();
+        currentRequest.getWebApp().getDispatchValidator().allowDispatch(currentRequest, Stapler.getCurrentResponse2());
+        String userAgent = currentRequest.getHeader("User-Agent");
+
+        List<String> platformsThatUseCommand = List.of("MAC", "IPHONE", "IPAD");
+        boolean useCmdKey = platformsThatUseCommand.stream().anyMatch(e -> userAgent.toUpperCase().contains(e));
+
+        return keyboardShortcut.replace("CMD", useCmdKey ? "⌘" : "CTRL");
+    }
+
+    @Restricted(NoExternalUse.class)
+    public static String formatMessage(String format, Object args) {
+        return MessageFormat.format(format, args);
+    }
 }
diff --git a/core/src/main/resources/lib/layout/keyboard-shortcut.jelly b/core/src/main/resources/lib/layout/keyboard-shortcut.jelly
@@ -0,0 +1,70 @@
+<!--
+The MIT License
+
+Copyright (c) 2023, Jenkins Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+-->
+
+<?jelly escape-by-default='true'?>
+<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">
+      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
+  </st:documentation>
+
+  <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,9 +58,7 @@ THE SOFTWARE.
              spellcheck="false"
              disabled="${attrs.enabled == false ? true : null}" />
       <j:if test="${attrs.hasKeyboardShortcut != 'false'}">
-        <div class="jenkins-search__shortcut" tooltip="${%Press / on your keyboard to focus}">
-          <l:icon src="symbol-search-shortcut" />
-        </div>
+        <l:keyboard-shortcut shortcut="symbol-search-shortcut" message="${%shortcut}" />
       </j:if>
     </div>
   </div>

diff --git a/core/src/main/resources/lib/layout/search-bar.properties b/core/src/main/resources/lib/layout/search-bar.properties
@@ -0,0 +1,23 @@
+# The MIT License
+#
+# Copyright (c) 2023, Damian Szczepanik
+#
+# Permission is hereby granted, free of charge, to any person obtaining a copy
+# of this software and associated documentation files (the "Software"), to deal
+# in the Software without restriction, including without limitation the rights
+# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+# copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions:
+#
+# The above copyright notice and this permission notice shall be included in
+# all copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+# THE SOFTWARE.
+
+shortcut=Press '{0}' on your keyboard to focus
diff --git a/core/src/main/resources/lib/layout/search-bar_pl.properties b/core/src/main/resources/lib/layout/search-bar_pl.properties
@@ -20,4 +20,4 @@
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
 
-Press\ /\ on\ your\ keyboard\ to\ focus=Naciśnij / na klawiaturze, aby przesunąć tutaj kursor
+shortcut=Naciśnij '{0}' na klawiaturze, aby przesunąć tutaj kursor
diff --git a/core/src/main/resources/lib/layout/search-bar_pt_BR.properties b/core/src/main/resources/lib/layout/search-bar_pt_BR.properties
@@ -21,4 +21,4 @@
 # THE SOFTWARE.
 
 Search=Busca
-Press\ /\ on\ your\ keyboard\ to\ focus=Digite /\ no seu teclado para realçar
+shortcut=Digite '{0}' no seu teclado para realçar
diff --git a/src/main/scss/components/_tooltips.scss b/src/main/scss/components/_tooltips.scss
@@ -30,6 +30,41 @@
     margin: 0;
     width: 450px;
   }
+
+  .jenkins-keyboard-shortcut {
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 0.375rem;
+      border: 0.1rem solid var(--text-color-secondary);
+      opacity: 0.3;
+      mask-image: linear-gradient(
+        -45deg,
+        transparent 40%,
+        white,
+        transparent 60%
+      );
+      mask-size: 200% 200%;
+      animation: shortcut-glow-animation 1.25s forwards linear;
+    }
+
+    @keyframes shortcut-glow-animation {
+      0% {
+        opacity: 0;
+        mask-position: 100% 100%;
+      }
+
+      50% {
+        opacity: 1;
+      }
+
+      100% {
+        opacity: 0;
+        mask-position: 0;
+      }
+    }
+  }
 }
 
 .tippy-box[data-animation="tooltip"][data-state="hidden"] {
@@ -52,3 +87,35 @@
 .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/src/main/scss/form/_search-bar.scss b/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;
     }
   }