Add keyboard shortcut symbol

janfaracik · Jul 21, 2022 · 83e4b12 · 83e4b12
1 parent 1f5c74e
commit 83e4b12
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 1 deletion.
diff --git a/core/src/main/resources/hudson/model/ManageJenkinsAction/index.jelly b/core/src/main/resources/hudson/model/ManageJenkinsAction/index.jelly
@@ -42,6 +42,10 @@ THE SOFTWARE.
         <st:include page="downgrade.jelly" it="${app}" />
       </section>
 
+      <l:search-bar />
+
+      <br />
+
       <j:forEach var="category" items="${app.categorizedManagementLinks.entrySet()}">
         <section class="jenkins-section jenkins-section--bottom-padding">
           <h2 class="jenkins-section__title">${category.key.label}</h2>

diff --git a/core/src/main/resources/lib/layout/search-bar.jelly b/core/src/main/resources/lib/layout/search-bar.jelly
@@ -44,5 +44,8 @@ THE SOFTWARE.
            autocorrect="off"
            autocapitalize="off"
            spellcheck="false" />
+    <div class="jenkins-search__shortcut" tooltip="Press '/' on your keyboard to focus">
+      <l:icon src="symbol-search-shortcut" />
+    </div>
   </div>
 </j:jelly>
diff --git a/war/src/main/less/form/search.less b/war/src/main/less/form/search.less
@@ -4,7 +4,6 @@
 
   &__input {
     appearance: none;
-    display: block;
     background: var(--input-color);
     border: 2px solid var(--input-border);
     border-radius: var(--form-input-border-radius);
@@ -109,6 +108,40 @@
     }
   }
 
+  &__shortcut {
+    position: absolute;
+    aspect-ratio: 1 / 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1 / 1;
+    transition: 0.15s ease;
+    text-align: center;
+    font-size: 0.75em;
+    font-weight: 500;
+    line-height: 1;
+    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 {
     .jenkins-search__icon {
       svg {
@@ -134,5 +167,10 @@
     .jenkins-search__icon {
       fill: var(--focus-input-border);
     }
+    .jenkins-search__shortcut {
+      opacity: 0;
+      transform: scale(0.9);
+      pointer-events: none;
+    }
   }
 }
diff --git a/war/src/main/resources/images/symbols/search-shortcut.svg b/war/src/main/resources/images/symbols/search-shortcut.svg