[#3112] added options to pin collections

2023-10-09 14:26:56 +03:00
parent eae16cc42c
commit 1f4bdfb867
36 changed files with 220 additions and 115 deletions
@@ -0,0 +1,65 @@
+<script>
+    import { link } from "svelte-spa-router";
+    import CommonHelper from "@/utils/CommonHelper";
+    import tooltip from "@/actions/tooltip";
+    import { hideControls } from "@/stores/app";
+    import { collections, activeCollection, isCollectionsLoading } from "@/stores/collections";
+    import CollectionUpsertPanel from "@/components/collections/CollectionUpsertPanel.svelte";
+
+    export let collection;
+    export let pinnedIds;
+
+    $: isPinned = pinnedIds.includes(collection.id);
+
+    function toggleCollectionPin(collection) {
+        if (pinnedIds.includes(collection.id)) {
+            CommonHelper.removeByValue(pinnedIds, collection.id);
+        } else {
+            pinnedIds.push(collection.id);
+        }
+
+        pinnedIds = pinnedIds;
+    }
+</script>
+
+<a
+    href="/collections?collectionId={collection.id}"
+    class="sidebar-list-item"
+    title={collection.name}
+    class:active={$activeCollection?.id === collection.id}
+    use:link
+>
+    <i class={CommonHelper.getCollectionTypeIcon(collection.type)} />
+    <span class="txt m-r-auto">{collection.name}</span>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <span
+        class="btn btn-xs btn-circle btn-hint btn-transparent pin-collection"
+        aria-label={"Pin collection"}
+        use:tooltip={{ position: "right", text: (isPinned ? "Unpin" : "Pin") + " collection" }}
+        on:click|preventDefault|stopPropagation={() => toggleCollectionPin(collection)}
+    >
+        {#if isPinned}
+            <i class="ri-unpin-line" />
+        {:else}
+            <i class="ri-pushpin-line m-l-auto" />
+        {/if}
+    </span>
+</a>
+
+<style lang="scss">
+    .pin-collection {
+        margin: 0 -5px 0 -15px;
+        opacity: 0;
+        transition: opacity 0.2s;
+        i {
+            font-size: inherit;
+        }
+    }
+    a:hover .pin-collection {
+        opacity: 0.5;
+        &:hover {
+            opacity: 1;
+        }
+    }
+</style>