Merge pull request jupyter-lsp#698 from jupyter-lsp/details-below-layout

Implement details-below completer layout

Author: krassowski

packages/completion-theme/style/index.css

@@ -24,18 +24,21 @@
   overflow: auto;
 }
 
+.jp-Completer {
+  --lsp-completer-max-label-width: 300px;
+  --lsp-completer-max-detail-width: 200px;
+}
+
 .jp-Completer-match {
-  max-width: 400px;
+  max-width: var(--lsp-completer-max-label-width);
   overflow-x: hidden;
   white-space: nowrap;
   display: block;
   text-overflow: ellipsis;
 }
 
 .jp-mod-active .jp-Completer-match {
-  max-width: 600px;
-  white-space: break-spaces;
-  height: auto;
+  text-overflow: clip;
 }
 
 .lsp-completer-placeholder:after {
@@ -47,3 +50,73 @@
 .jp-Completer-docpanel pre code {
   font-size: 90%;
 }
+
+body[data-lsp-completer-layout='detail-below'] .jp-Completer-item {
+  --lsp-completer-label-height: 24px;
+  --lsp-completer-detail-height: 20px;
+  --lsp-completer-icon-width: 16px;
+  height: var(--lsp-completer-label-height);
+  display: grid;
+  grid-template-areas:
+    'icon label'
+    'detail detail';
+  grid-template-columns: min-content 1fr;
+}
+
+body[data-lsp-completer-layout='detail-below']
+  .jp-Completer-item.jp-mod-active {
+  height: calc(
+    var(--lsp-completer-detail-height) + var(--lsp-completer-label-height)
+  );
+}
+
+body[data-lsp-completer-layout='detail-below'] .jp-Completer-icon {
+  grid-area: icon;
+  width: var(--lsp-completer-icon-width);
+}
+
+body[data-lsp-completer-layout='detail-below'] .jp-Completer-match {
+  grid-area: label;
+  overflow: hidden;
+  height: var(--lsp-completer-label-height);
+}
+
+.jp-Completer-item .jp-Completer-typeExtended {
+  max-width: var(--lsp-completer-max-detail-width);
+  min-height: 50px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.jp-mod-active .jp-Completer-typeExtended {
+  text-overflow: clip;
+}
+
+body[data-lsp-completer-layout='detail-below'] .jp-Completer-typeExtended {
+  grid-area: detail;
+  text-align: left;
+  padding-left: calc(var(--lsp-completer-icon-width) + 8px);
+  height: var(--lsp-completer-detail-height);
+  line-height: var(--lsp-completer-detail-height);
+  display: none;
+  position: relative;
+  top: -2px;
+  overflow: hidden;
+  max-width: calc(
+    var(--lsp-completer-max-label-width) + var(--lsp-completer-max-detail-width)
+  );
+}
+
+body[data-lsp-completer-layout='detail-below'] .jp-Completer-match {
+  overflow: hidden;
+  max-width: calc(
+    var(--lsp-completer-max-label-width) + var(--lsp-completer-max-detail-width)
+  );
+}
+
+body[data-lsp-completer-layout='detail-below']
+  .jp-Completer-item.jp-mod-active
+  .jp-Completer-typeExtended {
+  display: block;
+}

packages/jupyterlab-lsp/schema/completion.json

@@ -83,6 +83,13 @@
       "enum": ["detail", "type", "source", "auto"],
       "description": "What to display next to the completion label, one of: 'detail', 'type', 'source', 'auto'. The default 'auto' will display whichever information is available."
     },
+    "layout": {
+      "title": "Completer layout",
+      "default": "side-by-side",
+      "type": "string",
+      "enum": ["detail-below", "side-by-side"],
+      "description": "Layout of the completer, one of: 'detail-below', 'side-by-side'"
+    },
     "typesMap": {
       "title": "Mapping of custom kernel types to valid completion kind names",
       "description": "Mapping used for icon selection. The kernel types (keys) are case-insensitive. Accepted values are the names of CompletionItemKind and 'Kernel' literal. The defaults aim to provide good initial experience for Julia, Python and R kernels.",

packages/jupyterlab-lsp/src/features/completion/completion.ts

@@ -121,6 +121,10 @@ export class CompletionLabIntegration implements IFeatureLabIntegration {
       completionThemeManager.set_icons_overrides(
         this.settings.composite.typesMap
       );
+      if (!settings.composite.disable) {
+        document.body.dataset.lspCompleterLayout =
+          this.settings.composite.layout;
+      }
       if (this.current_completion_handler) {
         this.model.settings.caseSensitive =
           this.settings.composite.caseSensitive;