Merge branch 'tbulva-kbd-shortcut-in-header-search' into 'master'

Increase the visibility of the keyboard shortcut for Global Search

See merge request gitlab-org/gitlab!84085

app/assets/javascripts/header_search/components/app.vue

@@ -112,6 +112,9 @@ export default {
             count: this.searchOptions.length,
           });
     },
+    headerSearchActivityDescriptor() {
+      return this.showDropdown ? 'is-active' : 'is-not-active';
+    },
   },
   methods: {
     ...mapActions(['setSearch', 'fetchAutocompleteOptions', 'clearAutocomplete']),
@@ -143,7 +146,8 @@ export default {
     v-outside="closeDropdown"
     role="search"
     :aria-label="$options.i18n.searchGitlab"
-    class="header-search gl-relative"
+    class="header-search gl-relative gl-rounded-base"
+    :class="headerSearchActivityDescriptor"
   >
     <gl-search-box-by-type
       id="search"

app/assets/stylesheets/pages/search.scss

@@ -45,6 +45,36 @@ input[type='checkbox']:hover {
     transition: border-color ease-in-out $default-transition-duration,
       background-color ease-in-out $default-transition-duration;
   }
+
+  &.is-not-active {
+    .btn.gl-clear-icon-button {
+      display: none;
+    }
+
+    &::after {
+      content: '/';
+      display: inline-block;
+      position: absolute;
+      top: 0;
+      right: 8px;
+      transform: translateY(calc(50% - 4px));
+      padding: 4px 5px;
+      font-size: $gl-font-size-small;
+      font-family: $monospace-font;
+      line-height: 1;
+      vertical-align: middle;
+      border-width: 0;
+      border-style: solid;
+      border-image: none;
+      border-radius: 3px;
+      box-shadow: none;
+      white-space: pre-wrap;
+      // Safari
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      word-break: keep-all;
+    }
+  }
 }
 
 .header-search-dropdown-menu {

app/assets/stylesheets/startup/startup-dark.scss

@@ -1516,6 +1516,29 @@ svg.s16 {
 .header-search {
   width: 320px;
 }
+.header-search.is-not-active::after {
+  content: "/";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 8px;
+  transform: translateY(calc(50% - 4px));
+  padding: 4px 5px;
+  font-size: 12px;
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  line-height: 1;
+  vertical-align: middle;
+  border-width: 0;
+  border-style: solid;
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: keep-all;
+}
 .search {
   margin: 0 8px;
 }
@@ -1854,6 +1877,10 @@ body.gl-dark .header-search input::placeholder {
 body.gl-dark .header-search input:active::placeholder {
   color: #868686;
 }
+body.gl-dark .header-search.is-not-active::after {
+  color: #fafafa;
+  background-color: rgba(250, 250, 250, 0.2);
+}
 body.gl-dark .search form {
   background-color: rgba(250, 250, 250, 0.2);
 }

app/assets/stylesheets/startup/startup-general.scss

@@ -1502,6 +1502,29 @@ svg.s16 {
 .header-search {
   width: 320px;
 }
+.header-search.is-not-active::after {
+  content: "/";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 8px;
+  transform: translateY(calc(50% - 4px));
+  padding: 4px 5px;
+  font-size: 12px;
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  line-height: 1;
+  vertical-align: middle;
+  border-width: 0;
+  border-style: solid;
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: keep-all;
+}
 .search {
   margin: 0 8px;
 }

app/assets/stylesheets/themes/theme_helper.scss

@@ -176,6 +176,11 @@
         }
       }
     }
+
+    &.is-not-active::after {
+      color: $search-and-nav-links;
+      background-color: rgba($search-and-nav-links, 0.2);
+    }
   }
 
   .search {

app/views/layouts/_header_search.html.haml

-#js-header-search.header-search{ data: { 'search-context' => header_search_context.to_json,
+#js-header-search.header-search.is-not-active.gl-relative{ data: { 'search-context' => header_search_context.to_json,
 'search-path' => search_path,
 'issues-path' => issues_dashboard_path,
 'mr-path' => merge_requests_dashboard_path,

ee/app/assets/stylesheets/startup/startup-dark.scss

@@ -1516,6 +1516,29 @@ svg.s16 {
 .header-search {
   width: 320px;
 }
+.header-search.is-not-active::after {
+  content: "/";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 8px;
+  transform: translateY(calc(50% - 4px));
+  padding: 4px 5px;
+  font-size: 12px;
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  line-height: 1;
+  vertical-align: middle;
+  border-width: 0;
+  border-style: solid;
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: keep-all;
+}
 .search {
   margin: 0 8px;
 }
@@ -1854,6 +1877,10 @@ body.gl-dark .header-search input::placeholder {
 body.gl-dark .header-search input:active::placeholder {
   color: #868686;
 }
+body.gl-dark .header-search.is-not-active::after {
+  color: #fafafa;
+  background-color: rgba(250, 250, 250, 0.2);
+}
 body.gl-dark .search form {
   background-color: rgba(250, 250, 250, 0.2);
 }

ee/app/assets/stylesheets/startup/startup-general.scss

@@ -1502,6 +1502,29 @@ svg.s16 {
 .header-search {
   width: 320px;
 }
+.header-search.is-not-active::after {
+  content: "/";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 8px;
+  transform: translateY(calc(50% - 4px));
+  padding: 4px 5px;
+  font-size: 12px;
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  line-height: 1;
+  vertical-align: middle;
+  border-width: 0;
+  border-style: solid;
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: keep-all;
+}
 .search {
   margin: 0 8px;
 }