From da7ea2a734f931c3ff9e59b3448570868549f393 Mon Sep 17 00:00:00 2001
From: Denis Bykhov <bykhov.denis@gmail.com>
Date: Wed, 8 Feb 2023 16:27:25 +0600
Subject: [PATCH] Table footer left sticky (#2604)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
---
 .../src/components/Table.svelte               |   7 +-
 .../src/components/ViewletSetting.svelte      | 113 ++++++++++--------
 2 files changed, 65 insertions(+), 55 deletions(-)

diff --git a/plugins/view-resources/src/components/Table.svelte b/plugins/view-resources/src/components/Table.svelte
index 8d9e2b2a31..e7236b964c 100644
--- a/plugins/view-resources/src/components/Table.svelte
+++ b/plugins/view-resources/src/components/Table.svelte
@@ -362,6 +362,7 @@
 
 <style lang="scss">
   .footer {
+    width: 100%;
     background-color: var(--body-color);
     display: flex;
     align-items: flex-end;
@@ -369,12 +370,14 @@
     z-index: 2;
     position: sticky;
     bottom: 0;
+    box-shadow: inset 0 1px 0 0 var(--divider-color);
 
     .content {
       display: flex;
       align-items: center;
-      width: 100%;
-      box-shadow: inset 0 1px 0 0 var(--divider-color);
+      width: max-content;
+      position: sticky;
+      left: 0;
       height: 2.5rem;
       &.padding {
         padding-left: 2.5rem;
diff --git a/plugins/view-resources/src/components/ViewletSetting.svelte b/plugins/view-resources/src/components/ViewletSetting.svelte
index cacaefc6bd..b7371b6bad 100644
--- a/plugins/view-resources/src/components/ViewletSetting.svelte
+++ b/plugins/view-resources/src/components/ViewletSetting.svelte
@@ -21,6 +21,7 @@
     Button,
     getEventPositionElement,
     getPlatformColorForText,
+    Loading,
     SelectPopup,
     showPopup,
     ToggleButton
@@ -45,6 +46,7 @@
       (res) => {
         preference = res[0]
         attributes = getConfig(viewlet, preference)
+        loading = false
       },
       { limit: 1 }
     )
@@ -55,7 +57,8 @@
   const client = getClient()
   const hierarchy = client.getHierarchy()
   const dispatch = createEventDispatcher()
-  let attributes = getConfig(viewlet, preference)
+  let attributes: AttributeConfig[] = []
+  let loading = true
 
   interface AttributeConfig {
     enabled: boolean
@@ -307,60 +310,64 @@
     dispatch('close')
   }}
 >
-  <div class="flex-row-stretch flex-wrap">
-    {#each enabled as attribute, i}
-      <div
-        class="m-0-5 border-radius-1 overflow-label"
-        style={getStyle(attribute)}
-        bind:this={elements[i]}
-        draggable={true}
-        on:dragover|preventDefault={(ev) => {
-          dragover(ev, i)
-        }}
-        on:drop|preventDefault
-        on:dragstart={() => {
-          selected = i
-        }}
-        on:dragend={() => {
-          selected = undefined
-        }}
-      >
-        <ToggleButton
-          backgroundColor={getColor(attribute)}
-          icon={attribute.icon}
-          label={attribute.label}
-          bind:value={attribute.enabled}
-        />
-      </div>
-    {/each}
-  </div>
-  <div class="flex-row-stretch flex-wrap">
-    {#each Array.from(classes.keys()) as _class}
-      <div class="m-0-5">
-        <Button
-          label={getClassLabel(_class)}
-          on:click={(e) => {
-            showPopup(
-              SelectPopup,
-              {
-                value: classes.get(_class)?.map((it) => ({ id: it.value, label: it.label }))
-              },
-              getEventPositionElement(e),
-              (val) => {
-                if (val !== undefined) {
-                  const value = classes.get(_class)?.find((it) => it.value === val)
-                  if (value) {
-                    value.enabled = true
-                    attributes = attributes
+  {#if loading}
+    <Loading />
+  {:else}
+    <div class="flex-row-stretch flex-wrap">
+      {#each enabled as attribute, i}
+        <div
+          class="m-0-5 border-radius-1 overflow-label"
+          style={getStyle(attribute)}
+          bind:this={elements[i]}
+          draggable={true}
+          on:dragover|preventDefault={(ev) => {
+            dragover(ev, i)
+          }}
+          on:drop|preventDefault
+          on:dragstart={() => {
+            selected = i
+          }}
+          on:dragend={() => {
+            selected = undefined
+          }}
+        >
+          <ToggleButton
+            backgroundColor={getColor(attribute)}
+            icon={attribute.icon}
+            label={attribute.label}
+            bind:value={attribute.enabled}
+          />
+        </div>
+      {/each}
+    </div>
+    <div class="flex-row-stretch flex-wrap">
+      {#each Array.from(classes.keys()) as _class}
+        <div class="m-0-5">
+          <Button
+            label={getClassLabel(_class)}
+            on:click={(e) => {
+              showPopup(
+                SelectPopup,
+                {
+                  value: classes.get(_class)?.map((it) => ({ id: it.value, label: it.label }))
+                },
+                getEventPositionElement(e),
+                (val) => {
+                  if (val !== undefined) {
+                    const value = classes.get(_class)?.find((it) => it.value === val)
+                    if (value) {
+                      value.enabled = true
+                      attributes = attributes
+                    }
                   }
                 }
-              }
-            )
-          }}
-        />
-      </div>
-    {/each}
-  </div>
+              )
+            }}
+          />
+        </div>
+      {/each}
+    </div>
+  {/if}
   <svelte:fragment slot="footer">
     <Button label={view.string.RestoreDefaults} on:click={restoreDefault} />
   </svelte:fragment>