R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Created component for entry

Browse Source
This commit is contained in:
Adam Bem
2023-06-22 14:54:47 +02:00
parent 02e39cb4d0
commit 59e50e4797
3 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue
View File

@@ -14,9 +14,9 @@ function toggleTooltips() {
<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.
<button :class="{ 'mb-2' : !isCategoryHidden }" class="dark:text-slate-100" @click="toggleTooltips()">{{ props.name }}</button>
<div id="content" :class="{'hidden' : isCategoryHidden}" class="flex flex-col gap-4 w-full h-fit p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
<slot></slot>
</div>
</div>
</template>

7
Frontend/src/components/xml/tooltips/TooltipComponent.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { ref } from 'vue';
import tooltipCategoryComponent from '@components/xml/tooltips/TooltipCategoryComponent.vue'
import tooltipEntryComponent from '@components/xml/tooltips/TooltipEntryComponent.vue'
const areTooltipsHidden = ref(true)
function toggleTooltips() {
@@ -13,7 +14,11 @@ function toggleTooltips() {
<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>
<tooltipCategoryComponent name="Category I">
<tooltipEntryComponent name="Test"></tooltipEntryComponent>
<tooltipEntryComponent name="Teścik">Teścik</tooltipEntryComponent>
<tooltipEntryComponent name="Dłuuuuuuuggiiiiii teeeeeeeeeestttt"></tooltipEntryComponent>
</tooltipCategoryComponent>
</div>
</div>
</template>

22
Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue Normal file
View File

@@ -0,0 +1,22 @@
<script setup lang="ts">
import { ref } from 'vue';
const isEntryHidden = ref(true)
const props = defineProps({
name: {type: String, required: true}
})
function toggleTooltips() {
isEntryHidden.value = !isEntryHidden.value;
}
</script>
<template>
<div class="flex p-1 flex-col rounded-xl border border-slate-400 dark:border-slate-400">
<button :class="{ 'mb-2' : !isEntryHidden }" class="dark:text-slate-100" @click="toggleTooltips()">{{ props.name }}</button>
<div id="content" :class="{'hidden' : isEntryHidden}" 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>