Add label to autocomplete results (elixir-lang#1795)

sodapopcan · Oct 26, 2023 · 8de5061 · 8de5061
1 parent 121037c
commit 8de5061
Show file tree

Hide file tree

Showing 19 changed files with 45 additions and 29 deletions.
diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css
@@ -24,13 +24,13 @@
 .autocomplete-results {
   list-style: none;
   margin: 0;
-  padding: 20px;
+  padding: 15px;
   display: flex;
   justify-content: space-between;
   color: var(--autocompleteResults);
   font-family: var(--sansFontFamily);
   font-weight: 300;
-  font-size: 16px;
+  font-size: 0.9rem;
   gap: 3%;
 }
 
@@ -57,12 +57,12 @@
   background-color: var(--autocompleBackground);
   border-radius: 8px;
   position: absolute;
-  top: 20px;
+  top: 15px;
   width: 100%;
   z-index: 200;
   box-shadow: 0px 15px 99px 0px var(--autocompleteBorder);
   overflow-y: auto; 
-  max-height: 320px; 
+  max-height: 450px; 
   padding: 0 0 10px 0;
   margin-right: 10px;
   white-space: normal;
@@ -76,6 +76,7 @@
   text-decoration: none;
   transition: background-color .3s ease-in-out;
   border-bottom: 1px solid var(--suggestionBorder);
+  font-size: 0.9rem;
 }
 
 .autocomplete-suggestion:hover,
@@ -94,8 +95,15 @@
 }
 
 .autocomplete-suggestion .label {
-  padding-left: 2px;
-  opacity: .75;
+  background-color: var(--autocompleteLabelBack);
+  opacity: 0.6;
+  color: var(--autocompleteLabelFont);
+  padding: 4px 8px 4px 8px;
+  border-radius: 4px;
+  margin-left: 10px;
+  text-transform: uppercase;
+  font-family: var(--sansFontFamily);
+  font-size: 0.7rem;
 }
 
 .autocomplete-suggestion .title,

diff --git a/assets/css/custom-props/_elixir.css b/assets/css/custom-props/_elixir.css
@@ -4,4 +4,6 @@
   --main-darkened-20:   hsl(250, 68%, 49%);
   --main-lightened-05:  hsl(250, 68%, 74%);
   --main-lightened-10:  hsl(250, 68%, 79%);
+  --searchBarFocusColor: #8E7CE6;
+  --searchBarBorderColor: rgba(142, 124, 230, 0.25);
 }
diff --git a/assets/css/custom-props/_erlang.css b/assets/css/custom-props/_erlang.css
@@ -4,4 +4,6 @@
   --main-darkened-20:   hsl(0, 100%, 44%);
   --main-lightened-05:  hsl(0, 100%, 69%);
   --main-lightened-10:  hsl(0, 100%, 74%);
+  --searchBarFocusColor: hsl(0, 100%, 70%);
+  --searchBarBorderColor: rgb(255,71,71, 0.1);
 }
diff --git a/assets/css/custom-props/theme-dark.css b/assets/css/custom-props/theme-dark.css
@@ -97,4 +97,6 @@ body.dark {
   --autocompleteResultsBold:     var(--gray100);
   --autocompleteSrollbarThumb:   var(--gray600);
   --autocompleteSrollbarTrack:   var(--gray850);
+  --autocompleteLabelBack:       var(--gray600);
+  --autocompleteLabelFont:       rgba(255, 255, 255, 0.8);
 }
diff --git a/assets/css/custom-props/theme-light.css b/assets/css/custom-props/theme-light.css
@@ -97,4 +97,6 @@
   --autocompleteResultsBold:     var(--gray700);
   --autocompleteSrollbarThumb:   var(--gray200);
   --autocompleteSrollbarTrack:   var(--gray50);
+  --autocompleteLabelBack:       var(--gray100);
+  --autocompleteLabelFont:       var(--gray500);
 }
diff --git a/assets/css/search-bar.css b/assets/css/search-bar.css
@@ -33,11 +33,11 @@
 }
 
 .top-search .search-bar .search-input:focus {
-  border: 1px solid #8E7CE6; 
+  border: 1px solid var(--searchBarFocusColor); 
   border-radius: 8px;
   height: 48px;
   position: relative;
-  box-shadow: 0px 4px 20px 0px rgba(142, 124, 230, 0.25) inset;
+  box-shadow: 0px 4px 20px 0px var(--searchBarBorderColor) inset;
 }
 
 .top-search .search-bar .search-label {

diff --git a/assets/js/autocomplete/suggestions.js b/assets/js/autocomplete/suggestions.js
@@ -28,7 +28,7 @@ const SUGGESTION_CATEGORY = {
  * @param {Number} limit The maximum number of results to return.
  * @returns {Suggestion[]} List of suggestions sorted and limited.
  */
-export function getSuggestions (query, limit = 5) {
+export function getSuggestions (query, limit = 8) {
   if (isBlank(query)) {
     return []
   }
@@ -174,7 +174,7 @@ function nodeGroupKeyToLabel (key) {
   switch (key) {
     case 'callbacks': return 'callback'
     case 'types': return 'type'
-    default: return null
+    default: return 'function'
   }
 }
 

diff --git a/assets/js/handlebars/templates/autocomplete-suggestions.handlebars b/assets/js/handlebars/templates/autocomplete-suggestions.handlebars
@@ -19,7 +19,7 @@
         {{/if}}
 
         {{#if label}}
-          <span class="label">({{label}})</span>
+          <span class="label">{{label}}</span>
         {{/if}}
       </div>
 

diff --git a/assets/test/autocomplete/suggestions.spec.js b/assets/test/autocomplete/suggestions.spec.js
@@ -107,8 +107,8 @@ describe('getSuggestions', () => {
       expect(getSuggestions('My ExCePtIoN')).to.eql(getSuggestions('my exception'))
     })
 
-    it('returns max 5 results', () => {
-      expect(getSuggestions('e').length).to.eql(5)
+    it('returns max 8 results', () => {
+      expect(getSuggestions('e').length).to.eql(8)
     })
 
     it('returns no results if no match found', () => {

diff --git a/formatters/epub/dist/epub-elixir-MVBSFDL2.css b/formatters/epub/dist/epub-elixir-MVBSFDL2.css
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,7 @@ @@
             {{/if}}
             {{#if label}}
-              <span class="label">({{label}})</span>
+              <span class="label">{{label}}</span>
             {{/if}}
           </div>
@@ Expand Down @@