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

refactor: upc error styles

Browse Source
This commit is contained in:
Zack Spear
2023-07-19 13:09:09 -07:00
committed by Zack Spear
parent f2d1738f7b
commit 269c452aa7
3 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/UserProfile/DropdownContent.vue
View File

@@ -92,7 +92,7 @@ const showKeyline = computed(() => (showErrors.value || showConnectStatus.value)
<UpcDropdownError v-if="showErrors" />
<UpcDropdownConnectStatus v-if="showConnectStatus" class="mt-8px" />
<li v-if="showKeyline" class="m-8px">
<li v-if="showKeyline" class="my-8px">
<UpcKeyline />
</li>

10
components/UserProfile/DropdownError.vue
View File

@@ -8,15 +8,15 @@ const { errors } = storeToRefs(errorsStore);
</script>
<template>
<ul v-if="errors.length" class="text-white bg-unraid-red/90 font-semibold list-reset flex flex-col gap-y-8px mb-4px py-12px px-16px rounded">
<ul v-if="errors.length" class="list-reset flex flex-col gap-y-8px mb-4px border-2 border-solid border-unraid-red/90 rounded-md">
<li v-for="(error, index) in errors" :key="index" class="flex flex-col gap-8px">
<h3 class="text-18px">
<h3 class="text-18px py-8px px-16px text-white bg-unraid-red/90 font-semibold text-center">
<span>{{ error.heading }}</span>
</h3>
<div v-html="error.message" class="text-14px"></div>
<div v-html="error.message" class="text-14px pt-8px px-12px"></div>
<nav v-if="error.actions">
<li v-for="(link, index) in error.actions" :key="`link_${index}`" class="-mx-8px">
<UpcDropdownItem :item="link" class="text-white" />
<li v-for="(link, index) in error.actions" :key="`link_${index}`">
<UpcDropdownItem :item="link" :rounded="false" />
</li>
</nav>
</li>

8
components/UserProfile/DropdownItem.vue
View File

@@ -5,9 +5,12 @@ import type { UserProfileLink } from '~/types/userProfile';
export interface Props {
item: ServerStateDataAction | UserProfileLink;
rounded: boolean;
}
const props = defineProps<Props>();
const props = withDefaults(defineProps<Props>(), {
rounded: true,
});
const showExternalIconOnHover = computed(() => props.item?.external && props.item.icon !== ArrowTopRightOnSquareIcon);
</script>
@@ -20,11 +23,12 @@ const showExternalIconOnHover = computed(() => props.item?.external && props.ite
:title="item?.title ?? null"
:target="item?.external ? '_blank' : null"
:rel="item?.external ? 'noopener noreferrer' : null"
class="text-left text-14px w-full flex flex-row items-center justify-between gap-x-8px px-8px py-8px cursor-pointer rounded-md"
class="text-left text-14px w-full flex flex-row items-center justify-between gap-x-8px px-8px py-8px cursor-pointer"
:class="{
'text-beta bg-transparent hover:text-white hover:bg-gradient-to-r hover:from-unraid-red hover:to-orange focus:text-white focus:bg-gradient-to-r focus:from-unraid-red focus:to-orange focus:outline-none': !item?.emphasize,
'text-white bg-gradient-to-r from-unraid-red to-orange hover:from-unraid-red/60 hover:to-orange/60 focus:from-unraid-red/60 focus:to-orange/60': item?.emphasize,
'group': showExternalIconOnHover,
'rounded-md': rounded,
}"
>
<span class="leading-snug inline-flex flex-row items-center gap-x-8px">