feat(Files Sidebar): Show empty state when project contains no files

stencila · May 20, 2021 · eaac750 · eaac750
1 parent 81724f4
commit eaac750
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 1 deletion.
diff --git a/desktop/src/renderer/components.d.ts b/desktop/src/renderer/components.d.ts
@@ -39,6 +39,8 @@ export namespace Components {
     }
     interface AppSettingsSidebar {
     }
+    interface AppSidebarEmpty {
+    }
 }
 declare global {
     interface HTMLAppDocumentPaneElement extends Components.AppDocumentPane, HTMLStencilElement {
@@ -125,6 +127,12 @@ declare global {
         prototype: HTMLAppSettingsSidebarElement;
         new (): HTMLAppSettingsSidebarElement;
     };
+    interface HTMLAppSidebarEmptyElement extends Components.AppSidebarEmpty, HTMLStencilElement {
+    }
+    var HTMLAppSidebarEmptyElement: {
+        prototype: HTMLAppSidebarEmptyElement;
+        new (): HTMLAppSidebarEmptyElement;
+    };
     interface HTMLElementTagNameMap {
         "app-document-pane": HTMLAppDocumentPaneElement;
         "app-document-pane-empty": HTMLAppDocumentPaneEmptyElement;
@@ -140,6 +148,7 @@ declare global {
         "app-settings-plugins": HTMLAppSettingsPluginsElement;
         "app-settings-root": HTMLAppSettingsRootElement;
         "app-settings-sidebar": HTMLAppSettingsSidebarElement;
+        "app-sidebar-empty": HTMLAppSidebarEmptyElement;
     }
 }
 declare namespace LocalJSX {
@@ -176,6 +185,8 @@ declare namespace LocalJSX {
     }
     interface AppSettingsSidebar {
     }
+    interface AppSidebarEmpty {
+    }
     interface IntrinsicElements {
         "app-document-pane": AppDocumentPane;
         "app-document-pane-empty": AppDocumentPaneEmpty;
@@ -191,6 +202,7 @@ declare namespace LocalJSX {
         "app-settings-plugins": AppSettingsPlugins;
         "app-settings-root": AppSettingsRoot;
         "app-settings-sidebar": AppSettingsSidebar;
+        "app-sidebar-empty": AppSidebarEmpty;
     }
 }
 export { LocalJSX as JSX };
@@ -211,6 +223,7 @@ declare module "@stencil/core" {
             "app-settings-plugins": LocalJSX.AppSettingsPlugins & JSXBase.HTMLAttributes<HTMLAppSettingsPluginsElement>;
             "app-settings-root": LocalJSX.AppSettingsRoot & JSXBase.HTMLAttributes<HTMLAppSettingsRootElement>;
             "app-settings-sidebar": LocalJSX.AppSettingsSidebar & JSXBase.HTMLAttributes<HTMLAppSettingsSidebarElement>;
+            "app-sidebar-empty": LocalJSX.AppSidebarEmpty & JSXBase.HTMLAttributes<HTMLAppSidebarEmptyElement>;
         }
     }
 }
diff --git a/...s/app-project/app-project-sidebar/app-project-sidebar-files/app-project-sidebar-files.css b/...s/app-project/app-project-sidebar/app-project-sidebar-files/app-project-sidebar-files.css
@@ -1,5 +1,6 @@
 :host {
   @apply block overflow-scroll resize-x max-w-xs;
+  min-width: 12rem;
 }
 
 ul {

diff --git a/...s/app-project/app-project-sidebar/app-project-sidebar-files/app-project-sidebar-files.tsx b/...s/app-project/app-project-sidebar/app-project-sidebar-files/app-project-sidebar-files.tsx
@@ -55,10 +55,18 @@ export class AppProjectSidebarFiles {
   }
 
   render() {
+    const files = selectProjectRootFiles(state)
     return (
       <Host>
         <div class="app-project-sidebar-files">
-          <ul>{selectProjectRootFiles(state)?.map(this.pathToFileTree)}</ul>
+          {files && files.length > 0 ? (
+            <ul>{files.map(this.pathToFileTree)}</ul>
+          ) : (
+            <app-sidebar-empty>
+              <stencila-icon icon="seedling"></stencila-icon>
+              <h2>This project doesn't contain any files yet…</h2>
+            </app-sidebar-empty>
+          )}
         </div>
       </Host>
     )

diff --git a/desktop/src/renderer/components/sidebar/app-sidebar-empty/app-sidebar-empty.css b/desktop/src/renderer/components/sidebar/app-sidebar-empty/app-sidebar-empty.css
@@ -0,0 +1,12 @@
+:host {
+  @apply block text-xs text-center p-4;
+
+  ::slotted(*) {
+    @apply text-xs text-center font-normal;
+    color: var(--color-neutral-500);
+  }
+
+  ::slotted(stencila-icon) {
+    @apply text-lg;
+  }
+}
diff --git a/desktop/src/renderer/components/sidebar/app-sidebar-empty/app-sidebar-empty.tsx b/desktop/src/renderer/components/sidebar/app-sidebar-empty/app-sidebar-empty.tsx
@@ -0,0 +1,18 @@
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'app-sidebar-empty',
+  styleUrl: 'app-sidebar-empty.css',
+  scoped: true,
+})
+export class AppSidebarEmptyState {
+  render() {
+    return (
+      <Host>
+        <div class="app-sidebar-empty">
+          <slot />
+        </div>
+      </Host>
+    )
+  }
+}