Merge pull request #1100 from NFDI4Chem/issue-#1089

fix: make compound summary sidebar collapsible
NFDI4Chem · Apr 4, 2024 · 54538cf · 54538cf
2 parents 0aa45c8 + 276233b
commit 54538cf
Showing 1 changed file with 78 additions and 2 deletions.
diff --git a/resources/js/Pages/Upload.vue b/resources/js/Pages/Upload.vue
@@ -436,7 +436,8 @@
                                         class="h-[calc(100vh-135px)] overflow-hidden"
                                     >
                                         <div class="flex-1 flex">
-                                            <nav
+                                            <div
+                                                v-if="showSummary"
                                                 aria-label="Sections"
                                                 class="flex-shrink-0 w-64 h-[calc(100vh-135px)] overflow-y-hidden bg-white border-r border-gray-200 md:flex md:flex-col"
                                             >
@@ -649,13 +650,44 @@
                                                         </div>
                                                     </a>
                                                 </div>
-                                            </nav>
+                                            </div>
                                             <div class="flex-1 px-2 bg-white">
                                                 <div
                                                     v-if="
                                                         displaySamplesSummaryInfo
                                                     "
                                                 >
+                                                    <div
+                                                        class="cursor-pointer tooltip m-3 text-gray-500 hover:text-gray-700"
+                                                        @click="
+                                                            toggleSummaryBar()
+                                                        "
+                                                    >
+                                                        <ChevronDoubleLeftIcon
+                                                            class="h-6 w-6"
+                                                            aria-hidden="true"
+                                                            v-if="showSummary"
+                                                        />
+                                                        <ChevronDoubleRightIcon
+                                                            class="h-6 w-6"
+                                                            aria-hidden="true"
+                                                            v-else
+                                                        />
+                                                        <div
+                                                            class="bg-gray-900 text-center text-white px-2 py-1 text-xs font-small shadow-lg rounded-md tooltiptextright"
+                                                        >
+                                                            <span
+                                                                v-if="
+                                                                    !showSummary
+                                                                "
+                                                                >Show Compound
+                                                                Summary</span
+                                                            ><span v-else
+                                                                >Hide Compound
+                                                                Summary</span
+                                                            >
+                                                        </div>
+                                                    </div>
                                                     <div
                                                         class="-mx-2 border-b border-b-gray-900/10 lg:border-t lg:border-t-gray-900/5"
                                                     >
@@ -983,6 +1015,42 @@
                                                                 <div
                                                                     class="px-4 py-1.5 -mx-2 bg-gray-50 border-b px-4 py-3 flex items-center font-semibold text-sm text-slate-900 dark:text-slate-200 bg-slate-50/90 dark:bg-slate-700/90 backdrop-blur-sm ring-1 ring-slate-900/10 dark:ring-black/10"
                                                                 >
+                                                                    <div
+                                                                        class="cursor-pointer tooltip m-3 text-gray-500 hover:text-gray-700"
+                                                                        @click="
+                                                                            toggleSummaryBar()
+                                                                        "
+                                                                    >
+                                                                        <ChevronDoubleLeftIcon
+                                                                            class="h-6 w-6"
+                                                                            aria-hidden="true"
+                                                                            v-if="
+                                                                                showSummary
+                                                                            "
+                                                                        />
+                                                                        <ChevronDoubleRightIcon
+                                                                            class="h-6 w-6"
+                                                                            aria-hidden="true"
+                                                                            v-else
+                                                                        />
+                                                                        <div
+                                                                            class="bg-gray-900 text-center text-white px-2 py-1 text-xs font-small shadow-lg rounded-md tooltiptextright"
+                                                                        >
+                                                                            <span
+                                                                                v-if="
+                                                                                    !showSummary
+                                                                                "
+                                                                                >Show
+                                                                                Compound
+                                                                                Summary</span
+                                                                            ><span
+                                                                                v-else
+                                                                                >Hide
+                                                                                Compound
+                                                                                Summary</span
+                                                                            >
+                                                                        </div>
+                                                                    </div>
                                                                     <h1
                                                                         class="text-2xl font-extrabold text-gray-900"
                                                                     >
@@ -1680,6 +1748,8 @@ import {
     ArrowDownOnSquareStackIcon,
     EyeIcon,
     EyeSlashIcon,
+    ChevronDoubleLeftIcon,
+    ChevronDoubleRightIcon,
 } from "@heroicons/vue/24/solid";
 import SpectraEditor from "@/Shared/SpectraEditor.vue";
 import Depictor from "@/Shared/Depictor.vue";
@@ -1708,6 +1778,8 @@ export default {
         Depictor2D,
         slider,
         VueTagsInput,
+        ChevronDoubleLeftIcon,
+        ChevronDoubleRightIcon,
     },
     props: ["draft_id"],
     setup() {
@@ -1812,6 +1884,7 @@ export default {
                 project_id: this.project ? this.project.id : null,
                 is_public: ref(false),
             }),
+            showSummary: true,
         };
     },
     computed: {
@@ -2672,6 +2745,9 @@ export default {
                 }
             }
         },
+        toggleSummaryBar() {
+            this.showSummary = !this.showSummary;
+        },
     },
 };
 </script>