Merge pull request #7718 from blink1073/fix-property-inspector

Clean up UX of property inspector
jupyterlab · Jan 3, 2020 · 319f179 · 319f179
2 parents 736503e + 8fc8b8e
commit 319f179
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;
 }