Clean up UX of property inspector

jupyterlab · Jan 2, 2020 · 8fc8b8e · 8fc8b8e
1 parent 2648e13
commit 8fc8b8e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/packages/property-inspector/src/index.ts b/packages/property-inspector/src/index.ts
@@ -154,8 +154,12 @@ export class SideBarPropertyInspectorProvider extends PropertyInspectorProvider
     if (placeholder) {
       this._placeholder = placeholder;
     } else {
-      this._placeholder = new Widget();
-      this._placeholder.node.textContent = 'No properties to inspect.';
+      const node = document.createElement('div');
+      const content = document.createElement('div');
+      content.textContent = 'No properties to inspect.';
+      content.className = 'jp-PropertyInspector-placeholderContent';
+      node.appendChild(content);
+      this._placeholder = new Widget({ node });
       this._placeholder.addClass('jp-PropertyInspector-placeholder');
     }
     layout.widget = this._placeholder;

diff --git a/packages/property-inspector/style/base.css b/packages/property-inspector/style/base.css
@@ -6,12 +6,20 @@
 
 .jp-PropertyInspector {
   display: flex;
-  align-items: center;
-  justify-content: center;
   color: var(--jp-ui-font-color1);
   background: var(--jp-layout-color1);
 }
 
+.jp-PropertyInspector-content {
+  flex-grow: 1;
+}
+
 .jp-PropertyInspector-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.jp-PropertyInspector-placeholderContent {
   padding: 8px;
 }