From 089735baa984061cdd9640f5168eb5adc85dbb14 Mon Sep 17 00:00:00 2001
From: krassowski <krassowski.michal@gmail.com>
Date: Sun, 24 Oct 2021 21:46:46 +0100
Subject: [PATCH] Implement details-below layout

---
 .../jupyterlab-lsp/schema/completion.json     |  7 +++
 .../src/features/completion/completion.ts     |  4 ++
 packages/theme-material/style/completer.css   | 49 +++++++++++++++++++
 3 files changed, 60 insertions(+)

diff --git a/packages/jupyterlab-lsp/schema/completion.json b/packages/jupyterlab-lsp/schema/completion.json
index 1625fca38..84c1c7aa1 100644
--- a/packages/jupyterlab-lsp/schema/completion.json
+++ b/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.",
diff --git a/packages/jupyterlab-lsp/src/features/completion/completion.ts b/packages/jupyterlab-lsp/src/features/completion/completion.ts
index 172182514..9fb36bb3c 100644
--- a/packages/jupyterlab-lsp/src/features/completion/completion.ts
+++ b/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;
diff --git a/packages/theme-material/style/completer.css b/packages/theme-material/style/completer.css
index a35d42ff5..8a389e2f9 100644
--- a/packages/theme-material/style/completer.css
+++ b/packages/theme-material/style/completer.css
@@ -9,3 +9,52 @@
 .lsp-completer-theme-material .jp-Completer-item.jp-mod-active svg path {
   fill: white;
 }
+
+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);
+}
+
+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: 500px;
+}
+
+body[data-lsp-completer-layout='detail-below']
+  .jp-Completer-item.jp-mod-active
+  .jp-Completer-typeExtended {
+  display: block;
+}