Table footer left sticky (#2604)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

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%;
+      width: max-content;
-      box-shadow: inset 0 1px 0 0 var(--divider-color);
+      position: sticky;
+      left: 0;
       height: 2.5rem;
       &.padding {
         padding-left: 2.5rem;

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">
+  {#if loading}
-    {#each enabled as attribute, i}
+    <Loading />
-      <div
+  {:else}
-        class="m-0-5 border-radius-1 overflow-label"
+    <div class="flex-row-stretch flex-wrap">
-        style={getStyle(attribute)}
+      {#each enabled as attribute, i}
-        bind:this={elements[i]}
+        <div
-        draggable={true}
+          class="m-0-5 border-radius-1 overflow-label"
-        on:dragover|preventDefault={(ev) => {
+          style={getStyle(attribute)}
-          dragover(ev, i)
+          bind:this={elements[i]}
-        }}
+          draggable={true}
-        on:drop|preventDefault
+          on:dragover|preventDefault={(ev) => {
-        on:dragstart={() => {
+            dragover(ev, i)
-          selected = i
+          }}
-        }}
+          on:drop|preventDefault
-        on:dragend={() => {
+          on:dragstart={() => {
-          selected = undefined
+            selected = i
-        }}
+          }}
-      >
+          on:dragend={() => {
-        <ToggleButton
+            selected = undefined
-          backgroundColor={getColor(attribute)}
+          }}
-          icon={attribute.icon}
+        >
-          label={attribute.label}
+          <ToggleButton
-          bind:value={attribute.enabled}
+            backgroundColor={getColor(attribute)}
-        />
+            icon={attribute.icon}
-      </div>
+            label={attribute.label}
-    {/each}
+            bind:value={attribute.enabled}
-  </div>
+          />
-  <div class="flex-row-stretch flex-wrap">
+        </div>
-    {#each Array.from(classes.keys()) as _class}
+      {/each}
-      <div class="m-0-5">
+    </div>
-        <Button
+    <div class="flex-row-stretch flex-wrap">
-          label={getClassLabel(_class)}
+      {#each Array.from(classes.keys()) as _class}
-          on:click={(e) => {
+        <div class="m-0-5">
-            showPopup(
+          <Button
-              SelectPopup,
+            label={getClassLabel(_class)}
-              {
+            on:click={(e) => {
-                value: classes.get(_class)?.map((it) => ({ id: it.value, label: it.label }))
+              showPopup(
-              },
+                SelectPopup,
-              getEventPositionElement(e),
+                {
-              (val) => {
+                  value: classes.get(_class)?.map((it) => ({ id: it.value, label: it.label }))
-                if (val !== undefined) {
+                },
-                  const value = classes.get(_class)?.find((it) => it.value === val)
+                getEventPositionElement(e),
-                  if (value) {
+                (val) => {
-                    value.enabled = true
+                  if (val !== undefined) {
-                    attributes = attributes
+                    const value = classes.get(_class)?.find((it) => it.value === val)
+                    if (value) {
+                      value.enabled = true
+                      attributes = attributes
+                    }
                   }
                 }
-              }
+              )
-            )
+            }}
-          }}
+          />
-        />
+        </div>
-      </div>
+      {/each}
-    {/each}
+    </div>
-  </div>
+  {/if}
   <svelte:fragment slot="footer">
     <Button label={view.string.RestoreDefaults} on:click={restoreDefault} />
   </svelte:fragment>