Hide detail controls when there is only the asset viewer to show

ssciwr · Oct 7, 2024 · 5b2d688 · 5b2d688
1 parent 029fb17
commit 5b2d688
Showing 1 changed file with 42 additions and 22 deletions.
diff --git a/src/components/logic/DetailControls.svelte b/src/components/logic/DetailControls.svelte
@@ -37,29 +37,49 @@
     }
     return false;
   }
+
+  function calculate(ids) {
+    let ret = [];
+
+    if(ids.length > 1) {
+      ret.push("back");
+    }
+
+    if(hasRelations()) {
+      ret.push("hierarchy");
+    }
+
+    return ret
+  }
+
+  $: displayedButtons = calculate($systemidStore);
+
+  console.log(displayedButtons);
 </script>
 
-<ButtonGroup class="pb-2">
-  {#if $systemidStore.length > 1}
-    <Button id="back-nav" on:click={popSystemID}>
-      <BackwardStepOutline class="inline-block w-6 h-6"/>
-    </Button>
-    <Tooltip triggeredBy="#back-nav" placement="bottom" class="z-10">
-      {l10n.returntext[$appLanguageStore]}{$systemidStore.at(-2)}
-    </Tooltip>
-  {/if}
-  {#if hasRelations()}
-    <Button id="hierarchy-nav" on:click={() => { viewerPanelStateStore.set("hierarchy"); }}>
-      <RectangleListOutline class="inline-block w-6 h-6"/>
+{#if displayedButtons.length > 0}
+  <ButtonGroup class="pb-2">
+    {#if displayedButtons.includes("back")}
+      <Button id="back-nav" on:click={popSystemID}>
+        <BackwardStepOutline class="inline-block w-6 h-6"/>
+      </Button>
+      <Tooltip triggeredBy="#back-nav" placement="bottom" class="z-10">
+        {l10n.returntext[$appLanguageStore]}{$systemidStore.at(-2)}
+      </Tooltip>
+    {/if}
+    {#if displayedButtons.includes("hierarchy")}
+      <Button id="hierarchy-nav" on:click={() => { viewerPanelStateStore.set("hierarchy"); }}>
+        <RectangleListOutline class="inline-block w-6 h-6"/>
+      </Button>
+      <Tooltip triggeredBy="#hierarchy-nav" placement="bottom" class="z-10">
+        {l10n.hierarchytext[$appLanguageStore]}
+      </Tooltip>
+    {/if}
+    <Button id="assets-nav" on:click={() => { viewerPanelStateStore.set("asset"); }}>
+      <ImageOutline class="inline-block w-6 h-6"/>
     </Button>
-    <Tooltip triggeredBy="#hierarchy-nav" placement="bottom" class="z-10">
-      {l10n.hierarchytext[$appLanguageStore]}
+    <Tooltip triggeredBy="#assets-nav" placement="bottom" class="z-10">
+      {l10n.assettext[$appLanguageStore]}
     </Tooltip>
-  {/if}
-  <Button id="assets-nav" on:click={() => { viewerPanelStateStore.set("asset"); }}>
-    <ImageOutline class="inline-block w-6 h-6"/>
-  </Button>
-  <Tooltip triggeredBy="#assets-nav" placement="bottom" class="z-10">
-    {l10n.assettext[$appLanguageStore]}
-  </Tooltip>
-</ButtonGroup>
+  </ButtonGroup>
+{/if}