From bd8e96047d53d70def129fdb6f21d06d43e7a7da Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 22 Jun 2023 14:40:33 +0200
Subject: [PATCH] Added component for tooltips and categories

---
 .../xml/tooltips/TooltipCategoryComponent.vue | 22 +++++++++++++++++++
 .../xml/tooltips/TooltipComponent.vue         | 19 ++++++++++++++++
 .../xml/tooltips/TooltipController.vue        | 11 ----------
 Frontend/src/views/XPathView.vue              |  4 ++--
 4 files changed, 43 insertions(+), 13 deletions(-)
 create mode 100644 Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue
 create mode 100644 Frontend/src/components/xml/tooltips/TooltipComponent.vue
 delete mode 100644 Frontend/src/components/xml/tooltips/TooltipController.vue

diff --git a/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue b/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue
new file mode 100644
index 0000000..64b8e32
--- /dev/null
+++ b/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const isCategoryHidden = ref(true)
+
+const props = defineProps({
+    name: {type: String, required: true}
+})
+
+function toggleTooltips() {
+    isCategoryHidden.value = !isCategoryHidden.value;
+}
+
+</script>
+
+<template>
+    <div class="flex p-2 flex-col rounded-xl bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900">
+        <button :class="{ 'mb-2' : !isCategoryHidden }" class="text-white" @click="toggleTooltips()">{{ props.name }}</button>
+        <div id="content" :class="{'hidden' : isCategoryHidden}" class="w-full p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
+            Ultrices purus convallis pretium. Velit adipiscing curabitur facilisis proin, dis elit fames conubia lacinia adipiscing massa montes. Nec gravida volutpat viverra viverra et eu ac morbi id proin donec. Dis sollicitudin egestas sociis metus cras inceptos vehicula auctor felis vestibulum? Non potenti platea elit morbi suscipit eleifend, condimentum phasellus aliquet condimentum eros sodales. Mus pretium adipiscing, tempor gravida. Sapien.
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/tooltips/TooltipComponent.vue b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
new file mode 100644
index 0000000..4d4d1b6
--- /dev/null
+++ b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import tooltipCategoryComponent from '@components/xml/tooltips/TooltipCategoryComponent.vue'
+const areTooltipsHidden = ref(true)
+
+function toggleTooltips() {
+    areTooltipsHidden.value = !areTooltipsHidden.value;
+}
+
+</script>
+
+<template>
+    <div :class="{ 'w-1/2' : !areTooltipsHidden }" class="flex items-stretch p-2 flex-row rounded-xl bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900">
+        <button class="rotate-90 text-xl w-8 text-white" @click="toggleTooltips()">Tooltips</button>
+        <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
+            <tooltipCategoryComponent name="Category I"></tooltipCategoryComponent>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/tooltips/TooltipController.vue b/Frontend/src/components/xml/tooltips/TooltipController.vue
deleted file mode 100644
index 7123964..0000000
--- a/Frontend/src/components/xml/tooltips/TooltipController.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-
-</script>
-
-<template>
-    <div class="flex flex-row">
-        <button class="grow-0 tool-button ">&lt;</button>
-        <div id="content" class="w-1/3">fdfgjoejgioej</div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/Frontend/src/views/XPathView.vue b/Frontend/src/views/XPathView.vue
index ac804cb..51d9a61 100644
--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
 import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
-import tooltipController from '@/components/xml/tooltips/TooltipController.vue';
+import tooltipComponent from '@/components/xml/tooltips/TooltipComponent.vue';
 import { ref } from 'vue';
 
 
@@ -17,6 +17,6 @@ const query = ref('');
             <xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
         </div>
         <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
-        <tooltipController></tooltipController>
+        <tooltipComponent></tooltipComponent>
     </div>
 </template>
\ No newline at end of file