fix: compactrow now defaults correctly

runar-rkmedia · Oct 17, 2022 · 4cb2c61 · 4cb2c61
1 parent ae6ffe9
commit 4cb2c61
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 38 deletions.
diff --git a/frontend/src/components/CategoryItem.svelte b/frontend/src/components/CategoryItem.svelte
@@ -147,9 +147,10 @@
           {/each}
         {:else}
           <paper>
-            <table>
+            <table class="compactHeader">
               <thead>
                 <th
+                  title="Toggle key/title"
                   on:click={() => {
                     state.update((s) => ({
                       ...s,
@@ -167,32 +168,34 @@
                     Key
                   {/if}
                 </th>
-                <th
-                  on:click={() => {
-                    state.update((s) => {
-                      let loc = selectedLocale
-
-                      if (!loc) {
-                        loc = locales[0]
-                      } else {
+                {#each $state.columns.valueForLocale as l, i}
+                  <th
+                    title="Toggle locale"
+                    on:click={() => {
+                      state.update((s) => {
+                        let loc = l
                         const index = locales.findIndex((f) => f.id === loc.id)
                         if (index < 0) {
                           loc = locales[0]
                         }
                         loc = locales[(index + 1) % locales.length]
-                      }
-                      return {
-                        ...s,
-                        columns: {
-                          ...s.columns,
-                          valueForLocale: [loc],
-                        },
-                      }
-                    })
-                  }}
-                  >Value
-                  <LocaleFlag locale={selectedLocale} />
-                  {selectedLocale?.title}</th>
+                        const v = s.columns.valueForLocale
+                        v[i] = loc
+                        return {
+                          ...s,
+                          columns: {
+                            ...s.columns,
+                            valueForLocale: v,
+                          },
+                        }
+                      })
+                    }}
+                    >Value
+                    <span class="flag">
+                      <LocaleFlag locale={l} />
+                    </span>
+                    {l.title}</th>
+                {/each}
               </thead>
               <tbody>
                 {#each sortedTranslations as translation}
@@ -231,6 +234,10 @@
 </div>
 
 <style>
+  .compactHeader th:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
   .item {
     display: flex;
     flex-direction: column;

diff --git a/frontend/src/components/CategoryList.svelte b/frontend/src/components/CategoryList.svelte
@@ -15,17 +15,26 @@
       Object.values($db.category).filter((c) => c.project_id === projectID),
       ($state.categorySortAsc ? '' : '-') + $state.categorySortOn
     )
+  $: {
+    if (locales?.length) {
+      if (!$state.columns.valueForLocale) {
+        $state.columns.valueForLocale = [locales[0]]
+      }
+    }
+  }
 </script>
 
 <Dialogs {projectID} />
-{#if categories && categories?.length}
-  {#each categories as category (category.id)}
-    <CategoryItem
-      bind:category
-      bind:locales
-      bind:projectKey={projectID}
-      bind:selectedTranslation
-      bind:expandedCategory
-      forceExpand={false} />
-  {/each}
+{#if locales?.length}
+  {#if categories && categories?.length}
+    {#each categories as category (category.id)}
+      <CategoryItem
+        bind:category
+        bind:locales
+        bind:projectKey={projectID}
+        bind:selectedTranslation
+        bind:expandedCategory
+        forceExpand={false} />
+    {/each}
+  {/if}
 {/if}
diff --git a/frontend/src/components/TranslationItemCompactRow.svelte b/frontend/src/components/TranslationItemCompactRow.svelte
@@ -3,7 +3,6 @@
   import { db } from 'api'
   import Icon from './Icon.svelte'
   import { showDialog } from 'state'
-  import { fade, fly, scale, slide } from 'svelte/transition'
   export let translation: ApiDef.Translation
   export let columns: {
     title: boolean

diff --git a/frontend/src/components/TranslationItemLegacy.svelte b/frontend/src/components/TranslationItemLegacy.svelte
@@ -158,10 +158,6 @@
   .desc > :last-child {
     text-align: right;
   }
-  th {
-    padding-inline: var(--size-4);
-    padding-block: var(--size-2);
-  }
   code {
     white-space: pre;
     display: inline-block;

diff --git a/frontend/src/entry.css b/frontend/src/entry.css
@@ -320,6 +320,8 @@ table tr:nth-child(even) {
 table th {
   background-color: var(--color-grey-700);
   color: var(--color-grey-100);
+  padding-inline: var(--size-4);
+  padding-block: var(--size-2);
 }
 
 

diff --git a/frontend/src/state.ts b/frontend/src/state.ts
@@ -21,7 +21,7 @@ export const state = createStore({
     columns: {
       title: true,
       key: false,
-      valueForLocale: null,
+      valueForLocale: null as null | ApiDef.Locale[],
     },
     pageSize: 50,
     searchQuery: '',