Add UI for empty folder and use odcAvailable instead of deviceAvailab…

…le for new panels
rokucommunity · Feb 29, 2024 · a3cb028 · a3cb028
1 parent b2990d9
commit a3cb028
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 37 deletions.
diff --git a/webviews/src/views/RokuAppOverlaysView/RokuAppOverlaysView.svelte b/webviews/src/views/RokuAppOverlaysView/RokuAppOverlaysView.svelte
@@ -196,10 +196,10 @@
         }
     });
 
-    let deviceAvailable = false;
+    let odcAvailable = false;
     intermediary.observeEvent(ViewProviderEvent.onDeviceAvailabilityChange, async (message) => {
-        deviceAvailable = message.context.deviceAvailable;
-        if (deviceAvailable) {
+        odcAvailable = message.context.odcAvailable;
+        if (odcAvailable) {
             for (const [index, overlay] of overlays.entries()) {
                 await conditionallyDeployOverlay(overlay, index);
             }
@@ -223,7 +223,7 @@
 
 
 <div id="container">
-    {#if deviceAvailable}
+    {#if odcAvailable}
         {#if overlays.length }
             <table>
                 {#each overlays as overlay, index}

diff --git a/webviews/src/views/RokuFileSystemView/RokuFileSystemView.svelte b/webviews/src/views/RokuFileSystemView/RokuFileSystemView.svelte
@@ -222,10 +222,10 @@
         }
     });
 
-    let deviceAvailable = false;
+    let odcAvailable = false;
     intermediary.observeEvent(ViewProviderEvent.onDeviceAvailabilityChange, async (message) => {
-        deviceAvailable = message.context.deviceAvailable;
-        if (deviceAvailable) {
+        odcAvailable = message.context.odcAvailable;
+        if (odcAvailable) {
             await refresh();
         }
     });
@@ -235,11 +235,6 @@
 </script>
 
 <style>
-    #container  {
-        --headerHeight: 36px;
-        padding-top: var(--headerHeight);
-    }
-
     #breadcrumbs {
         position: fixed;
         top: 0;
@@ -249,17 +244,28 @@
         z-index: 1;
     }
 
+    #currentPathContents {
+        --headerHeight: 36px;
+        padding-top: var(--headerHeight);
+    }
+
+    #emptyFolder {
+        padding: 10px;
+    }
+
     #headerRow {
         position: sticky;
         top: var(--headerHeight);
         z-index: 1000;
         background-color: var(--vscode-sideBar-background);
     }
-</style>
 
-
-<div id="container" bind:clientWidth={containerWidth}>
-    {#if deviceAvailable}
+    .hide {
+        display: none;
+    }
+</style>
+<div bind:clientWidth={containerWidth}>
+    {#if odcAvailable}
         {#if loading}
             <Loader />
         {:else}
@@ -272,27 +278,31 @@
                     {/if}
                 {/each}
             </div>
-
-            <vscode-data-grid grid-template-columns={gridTemplateColumns}>
-                <vscode-data-grid-row id="headerRow" row-type="header">
-                    {#if columnsToShow.name}
-                        <SortableGridHeader on:click={onSortColumnChange} title="Name" column={2} />
-                    {/if}
-                    {#if columnsToShow.size}
-                        <SortableGridHeader on:click={onSortColumnChange} title="Size" column={3} />
-                    {/if}
-                    {#if columnsToShow.dateModified}
-                        <SortableGridHeader on:click={onSortColumnChange} title="Date Modified" column={4} />
-                    {/if}
-                    {#if columnsToShow.dateCreated}
-                        <SortableGridHeader on:click={onSortColumnChange} title="Date Created" column={5} />
-                    {/if}
-                </vscode-data-grid-row>
-
-                {#each currentPathContentsInfo as entry}
-                    <FileSystemEntry on:open={onOpen} entry={entry} columnsToShow={columnsToShow} />
-                {/each}
-            </vscode-data-grid>
+            <div id="currentPathContents">
+                <div id="emptyFolder" class:hide={currentPathContentsInfo.length > 0}>
+                    This folder is empty.
+                </div>
+                <vscode-data-grid class:hide={currentPathContentsInfo.length === 0} grid-template-columns={gridTemplateColumns}>
+                    <vscode-data-grid-row id="headerRow" row-type="header">
+                        {#if columnsToShow.name}
+                            <SortableGridHeader on:click={onSortColumnChange} title="Name" column={2} />
+                        {/if}
+                        {#if columnsToShow.size}
+                            <SortableGridHeader on:click={onSortColumnChange} title="Size" column={3} />
+                        {/if}
+                        {#if columnsToShow.dateModified}
+                            <SortableGridHeader on:click={onSortColumnChange} title="Date Modified" column={4} />
+                        {/if}
+                        {#if columnsToShow.dateCreated}
+                            <SortableGridHeader on:click={onSortColumnChange} title="Date Created" column={5} />
+                        {/if}
+                    </vscode-data-grid-row>
+
+                    {#each currentPathContentsInfo as entry}
+                        <FileSystemEntry on:open={onOpen} entry={entry} columnsToShow={columnsToShow} />
+                    {/each}
+                </vscode-data-grid>
+            </div>
         {/if}
     {:else}
         <OdcSetupSteps />