mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-04 23:50:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor(upc): dropdown button opacity transition

Browse Source
This commit is contained in:
Zack Spear
2023-08-16 14:27:37 -07:00
parent ad0a83608b
commit d432f795fc
3 changed files with 13 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/UserProfile.ce.vue
View File

@@ -92,7 +92,7 @@ onBeforeMount(() => {
<span class="text-right text-12px sm:text-18px hidden 2xs:block">{{ description }}</span>
<span class="text-gamma hidden md:inline-block px-8px">&bull;</span>
</template>
<button :title="t('Click to Copy LAN IP {0}', [lanIp])" @click="copyLanIp()" class="opacity-100 hover:opacity-75 focus:opacity-75">
<button :title="t('Click to Copy LAN IP {0}', [lanIp])" @click="copyLanIp()" class="opacity-100 hover:opacity-75 focus:opacity-75 transition-opacity">
{{ name }}
</button>
<span

15
web/components/UserProfile/DropdownTrigger.vue
View File

@@ -1,6 +1,12 @@
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { InformationCircleIcon, ExclamationTriangleIcon, ShieldExclamationIcon } from '@heroicons/vue/24/solid';
import {
Bars3Icon,
Bars3BottomRightIcon,
ExclamationTriangleIcon,
InformationCircleIcon,
ShieldExclamationIcon,
} from '@heroicons/vue/24/solid';
import { useDropdownStore } from '~/store/dropdown';
import { useErrorsStore } from '~/store/errors';
@@ -29,7 +35,7 @@ const title = computed((): string => {
<template>
<button
class="group text-18px border-0 relative flex flex-row justify-end items-center h-full gap-x-8px opacity-100 hover:opacity-75 focus:opacity-75 hover:text-alpha focus:text-alpha"
class="group text-18px border-0 relative flex flex-row justify-end items-center h-full gap-x-8px opacity-100 hover:opacity-75 focus:opacity-75 hover:text-alpha focus:text-alpha transition-opacity"
:title="title"
@click="dropdownStore.dropdownToggle()"
>
@@ -42,7 +48,10 @@ const title = computed((): string => {
<span>{{ text }}</span>
<span class="absolute bottom-[-3px] inset-x-0 h-2px w-full bg-gradient-to-r from-unraid-red to-orange rounded opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity" />
</span>
<UpcDropdownTriggerMenuIcon :open="dropdownVisible" />
<Bars3Icon v-if="!dropdownVisible" class="w-20px" />
<Bars3BottomRightIcon v-else class="w-20px" />
<BrandAvatar />
</button>
</template>

14
web/components/UserProfile/DropdownTriggerMenuIcon.vue
View File

@@ -1,14 +0,0 @@
<script setup lang="ts">
import { Bars3Icon, Bars3BottomRightIcon } from '@heroicons/vue/24/solid';
export interface Props {
open?: boolean;
}
withDefaults(defineProps<Props>(), {
open: false,
});
</script>
<template>
<Bars3Icon v-if="!open" class="w-20px" />
<Bars3BottomRightIcon v-else class="w-20px" />
</template>