design improvement bug fixes

Author: cameron-toy

src/widget.ts

@@ -4,6 +4,8 @@ import { CodeCell, MarkdownCell } from '@jupyterlab/cells';
 
 import { Widget } from '@lumino/widgets';
 
+import { MessageLoop } from '@lumino/messaging';
+
 import { UUID, MimeData } from '@lumino/coreutils';
 
 import { ArrayExt } from '@lumino/algorithm';
@@ -130,8 +132,20 @@ export class DashboardWidget extends Widget {
         this.node.style.opacity = '0';
 
         container.classList.add(DASHBOARD_WIDGET_CHILD_CLASS);
-        container.appendChild(clone.node);
-        this.node.appendChild(container);
+
+        // Fake an attach in order to render LaTeX properly.
+        // Note: This is not how you should use Lumino widgets.
+        if (this.parent) {
+          if (this.parent!.isAttached) {
+            MessageLoop.sendMessage(clone, Widget.Msg.BeforeAttach);
+            container.appendChild(clone.node);
+            this.node.appendChild(container);
+            if (this.parent!.isAttached) {
+              MessageLoop.sendMessage(clone, Widget.Msg.AfterAttach);
+            }
+          }
+        }
+
         this._content = clone;
 
         const done = (): void => {
@@ -421,7 +435,7 @@ export class DashboardWidget extends Widget {
    * Fit widget width/height to the width/height of the underlying content.
    */
   fitContent(): void {
-    const element = this._content.node;
+    const element = this._content.node.firstChild as HTMLElement;
     // Pixels are added to prevent weird wrapping issues. Kind of a hack.
     this.pos = {
       width: element.clientWidth + 3,

style/base.css

@@ -4,8 +4,6 @@
 
 .pr-DashboardWidget {
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .pr-DashboardWidget .pr-MarkdownOutput {
@@ -14,7 +12,7 @@
 
 .pr-EditableWidget {
   outline: var(--jp-border-width) solid var(--jp-inverse-layout-color4);
-  outline-offset: calc( -1 * var(--jp-border-width));
+  outline-offset: calc(-1 * var(--jp-border-width));
   background: var(--jp-layout-color0);
   overflow: visible;
 }
@@ -25,12 +23,12 @@
 
 .pr-EditableWidget:focus {
   outline: var(--jp-border-width) solid var(--jp-brand-color1);
-  outline-offset: calc( -1 * var(--jp-border-width));
+  outline-offset: calc(-1 * var(--jp-border-width));
 }
 
 .pr-EditableWidget:hover {
   outline: var(--jp-border-width) solid var(--jp-brand-color1);
-  outline-offset: calc( -1 * var(--jp-border-width));
+  outline-offset: calc(-1 * var(--jp-border-width));
   cursor: move;
 }
 
@@ -77,7 +75,12 @@
 }
 
 .pr-DashboardWidgetChild {
-  display: inline-block;
+  /* width: 100%;
+  height: 100%; */
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .pr-EditableWidget:focus .pr-Resizer {
@@ -89,18 +92,24 @@
 }
 
 .pr-Canvas.pr-FreeLayout {
-  background-image:
-    linear-gradient(to right, #E5E5E5 1px, transparent 1px),
-    linear-gradient(to bottom, #E5E5E5 1px, transparent 1px);
-  background-color: white;
+  background-image: linear-gradient(
+      to right,
+      var(--jp-border-color2) 1px,
+      transparent 1px
+    ),
+    linear-gradient(to bottom, var(--jp-border-color2) 1px, transparent 1px);
+  background-color: var(--jp-cell-editor-background);
   background-size: 10px 10px;
 }
 
 .pr-Canvas.pr-TiledLayout {
-  background-image:
-    linear-gradient(to right, #E5E5E5 1px, transparent 1px),
-    linear-gradient(to bottom, #E5E5E5 1px, transparent 1px);
-  background-color: white;
+  background-image: linear-gradient(
+      to right,
+      var(--jp-border-color2) 1px,
+      transparent 1px
+    ),
+    linear-gradient(to bottom, var(--jp-border-color2) 1px, transparent 1px);
+  background-color: var(--jp-cell-editor-background);
   background-size: 32px 32px;
 }
 
@@ -144,5 +153,5 @@ select.pr-ToolbarSelector.jp-mod-styled {
 .pr-DragImage {
   box-shadow: var(--jp-elevation-z1);
   outline: var(--jp-border-width) solid var(--jp-brand-color1);
-  outline-offset: calc( -1 * var(--jp-border-width));
+  outline-offset: calc(-1 * var(--jp-border-width));
 }