Added fill all fields tip in autocomplete.

Closes #690.
altair-graphql · Apr 6, 2019 · 0cdab7f · 0cdab7f
1 parent 3cc70a0
commit 0cdab7f
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 3 deletions.
diff --git a/src/app/components/query-editor/query-editor.component.ts b/src/app/components/query-editor/query-editor.component.ts
@@ -113,7 +113,7 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
           <span class="query-editor__autocomplete-item__text">${cur.text}</span>
           <span class="query-editor__autocomplete-item__type">${cur.typeDetail}</span>
         `.trim().replace(/ +/g, ' ');
-        debug.log(elt, data, cur);
+        // debug.log(elt, data, cur);
       }
     },
     info: {

diff --git a/src/app/utils/codemirror/graphql-has-completion.ts b/src/app/utils/codemirror/graphql-has-completion.ts
@@ -22,6 +22,7 @@ export const onHasCompletion = (cm, data, { onHintInformationRender = null, onCl
 
   let information: HTMLElement;
   let deprecation: HTMLElement;
+  let fillAllFieldsOption: HTMLElement;
 
   // When a hint result is selected, we augment the UI with information.
   CodeMirror.on(data, 'select', (ctx, el) => {
@@ -46,6 +47,15 @@ export const onHasCompletion = (cm, data, { onHintInformationRender = null, onCl
       deprecation.className = 'CodeMirror-hint-deprecation';
       hintsUl.appendChild(deprecation);
 
+      // This "fillAllFieldsOption" node will contain the fill all fields option.
+      fillAllFieldsOption = document.createElement('div');
+      fillAllFieldsOption.className = 'CodeMirror-hint-fill-all-fields';
+      fillAllFieldsOption.innerHTML = `
+        <span class="query-editor__autocomplete-item__text">Fill all fields</span>
+        <span class="query-editor__autocomplete-item__shortcut">Ctrl+Shift+Enter</span>
+      `.trim().replace(/ +/g, ' ');
+      hintsUl.appendChild(fillAllFieldsOption);
+
       // When CodeMirror attempts to remove the hint UI, we detect that it was
       // removed and in turn remove the information nodes.
       let onRemoveFn;
@@ -59,6 +69,7 @@ export const onHasCompletion = (cm, data, { onHintInformationRender = null, onCl
             hintsUl.removeEventListener('DOMNodeRemoved', onRemoveFn);
             information = null;
             deprecation = null;
+            fillAllFieldsOption = null;
             onRemoveFn = null;
           }
         }),

diff --git a/src/app/utils/codemirror/graphql-hint.ts b/src/app/utils/codemirror/graphql-hint.ts
@@ -64,7 +64,7 @@ CodeMirror.registerHelper('hint', 'graphql', (editor, options) => {
   const results = {
     list: rawResults.map(item => ({
       text: item.label,
-      type: schema.getType(item.detail.replace(/[\[\]!]/g, '')),
+      type: item.detail && schema.getType(item.detail.replace(/[\[\]!]/g, '')),
       description: item.documentation,
       isDeprecated: item.isDeprecated,
       deprecationReason: item.deprecationReason,

diff --git a/src/scss/_codemirror.scss b/src/scss/_codemirror.scss
@@ -81,14 +81,27 @@
   white-space: normal;
   line-height: 1.4;
   padding: 5px 10px;
-  background: var(--white-color);
+  background: var(--theme-bg-color);
+  color: var(--theme-off-font-color);
 }
 
 .CodeMirror-hint-information {
   cursor: pointer;
 }
+.CodeMirror-hint-fill-all-fields {
+  display: flex;
+  justify-content: space-between;
+  order: -1;
+  border-bottom: 1px solid var(--theme-border-color);
+  background: var(--theme-bg-color);
+  color: var(--theme-font-color);
+  line-height: 1.4;
+  padding: 5px 10px;
+}
 
 .CodeMirror-hints {
+  display: flex;
+  flex-direction: column;
   font-family: inherit;
   box-shadow: 0 0 5px rgba(var(--rgb-black), .1);
   z-index: 1050;

diff --git a/src/scss/components/_editor.scss b/src/scss/components/_editor.scss
@@ -33,6 +33,10 @@ app-query-editor {
   color: var(--orange-color);
 }
 
+.query-editor__autocomplete-item__shortcut {
+  color: var(--theme-off-font-color);
+}
+
 .query-result__normal-container {
   position: relative;