Skip to content

Commit

Permalink
perf: 🚀 ✨ Changed to use floating vue
Browse files Browse the repository at this point in the history
  • Loading branch information
@JamsRepos
JamsRepos committed Apr 6, 2024
1 parent e648cea commit ce0b92f
Show file tree
Hide file tree
Showing 8 changed files with 65 additions and 63 deletions.
20 changes: 0 additions & 20 deletions apps/wizarr-frontend/src/assets/scss/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,24 +182,4 @@ button[disabled],
.Vue-Toastification__toast {
margin-bottom: 0px !important;
}
}


button {
position: relative;
}
button .ext-label {
position: absolute;
background: #1f2937;
color: white;
border-radius: 5px;
left: -100%;
top: 100%;
padding: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 200ms;
}
button:hover .ext-label {
opacity: 1;
}
18 changes: 11 additions & 7 deletions apps/wizarr-frontend/src/components/Buttons/AccountButton.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
<template>
<RouterLink as="button" to="/admin/settings/account" class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button">
<div class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
<i class="fa-solid fa-md fa-user"></i>
</div>

<span class="ext-label">Account</span>
</RouterLink>
<VTooltip>
<RouterLink as="button" to="/admin/settings/account" class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button">
<div class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
<i class="fa-solid fa-md fa-user"></i>
</div>
</RouterLink>

<template #popper>
<span>{{ __("Account") }}</span>
</template>
</VTooltip>
</template>
17 changes: 11 additions & 6 deletions apps/wizarr-frontend/src/components/Buttons/LanguageSelector.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
<template>
<button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="createModal">
<div :class="iconClasses" class="flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
<i class="fa-solid fa-md fa-globe"></i>
</div>
<span class="ext-label">Change Language</span>
</button>
<VTooltip>
<button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="createModal">
<div :class="iconClasses" class="flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
<i class="fa-solid fa-md fa-globe"></i>
</div>
</button>

<template #popper>
<span>{{ __("Language") }}</span>
</template>
</VTooltip>
</template>

<script lang="ts">
Expand Down
16 changes: 10 additions & 6 deletions apps/wizarr-frontend/src/components/Buttons/LogoutButton.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
<template>
<button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="logout">
<div class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
<i class="fa-solid fa-lg fa-right-from-bracket"></i>
</div>
</button>
<VTooltip>
<button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="logout">
<div class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
<i class="fa-solid fa-lg fa-right-from-bracket"></i>
</div>
</button>

<span class="ext-label">Logout</span>
<template #popper>
<span>{{ __("Logout") }}</span>
</template>
</VTooltip>
</template>

<script lang="ts">
Expand Down
21 changes: 13 additions & 8 deletions apps/wizarr-frontend/src/components/Buttons/ThemeToggle.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
<template>
<button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="toggleTheme">
<div :class="iconClasses" class="flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
<i v-if="theme == DARK_VALUE" class="fa-solid fa-md fa-cloud-moon"></i>
<i v-if="theme == LIGHT_VALUE" class="fa-solid fa-md fa-sun"></i>
<i v-if="theme == SYSTEM_VALUE" class="fa-solid fa-md fa-desktop"></i>
</div>
<span class="ext-label">Change Theme</span>
</button>
<VTooltip>
<button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="toggleTheme">
<div :class="iconClasses" class="flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
<i v-if="theme == DARK_VALUE" class="fa-solid fa-md fa-cloud-moon"></i>
<i v-if="theme == LIGHT_VALUE" class="fa-solid fa-md fa-sun"></i>
<i v-if="theme == SYSTEM_VALUE" class="fa-solid fa-md fa-desktop"></i>
</div>
</button>

<template #popper>
<span>{{ __("Change Theme") }}</span>
</template>
</VTooltip>
</template>


Expand Down
22 changes: 13 additions & 9 deletions apps/wizarr-frontend/src/components/Buttons/ViewToggle.vue
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
<template>
<button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="toggleBoxView">
<div class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
<!-- Box Icon -->
<i v-if="boxView" class="fas fa-box"></i>
<VTooltip>
<button class="text-gray-500 dark:text-gray-400 focus:outline-none text-sm" type="button" @click="toggleBoxView">
<div class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 hover:dark:bg-gray-700">
<!-- Box Icon -->
<i v-if="boxView" class="fas fa-box"></i>

<!-- List Icon -->
<i v-else class="fas fa-list"></i>
</div>
<!-- List Icon -->
<i v-else class="fas fa-list"></i>
</div>
</button>

<span class="ext-label">Toggle Box View</span>
</button>
<template #popper>
<span>{{ __("Toggle View") }}</span>
</template>
</VTooltip>
</template>

<script lang="ts">
Expand Down
12 changes: 6 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
"currency-symbol-map": "^5.1.0",
"feather-icons": "^4.29.1",
"firebase": "^10.3.1",
"floating-vue": "^2.0.0-beta.24",
"floating-vue": "^2.0.0",
"flowbite": "^1.8.1",
"gridstack": "^9.2.0",
"jenesius-vue-modal": "^1.9.2",
Expand Down

0 comments on commit ce0b92f

Please sign in to comment.