fix(ui): adapt setup page to fluid logo

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
This commit is contained in:
Christoph Wurst
2025-08-29 12:57:49 +02:00
parent 61df47864d
commit bff428d7c7
3 changed files with 6087 additions and 18 deletions

6046
img/mail-fluid.svg Normal file

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 263 KiB

View File

@ -0,0 +1,2 @@
SPDX-FileCopyrightText: Jo Myoung Hee
SPDX-License-Identifier: CC-BY-SA-4.0

View File

@ -5,18 +5,20 @@
<template>
<NcContent app-name="mail">
<Navigation v-if="hasAccounts" />
<AppContent class="container">
<div v-if="allowNewMailAccounts">
<EmptyContent :name="t('mail', 'Connect your mail account')">
<template #icon>
<IconMail />
</template>
</EmptyContent>
<AccountForm :display-name="displayName"
:email="email"
:error.sync="error"
@account-created="onAccountCreated" />
</div>
<AppContent>
<EmptyContent v-if="allowNewMailAccounts"
class="setup__form-content"
:name="t('mail', 'Connect your mail account')">
<template #icon>
<div class="setup__form-content__svg-wrapper" v-html="FluidMail" />
</template>
<template #action>
<AccountForm :display-name="displayName"
:email="email"
:error.sync="error"
@account-created="onAccountCreated" />
</template>
</EmptyContent>
<EmptyContent v-else :name="t('mail', 'To add a mail account, please contact your administrator.')">
<template #icon>
<IconMail />
@ -31,7 +33,7 @@ import { NcContent, NcAppContent as AppContent, NcEmptyContent as EmptyContent }
import { loadState } from '@nextcloud/initial-state'
import AccountForm from '../components/AccountForm.vue'
import IconMail from 'vue-material-design-icons/Email.vue'
import FluidMail from '../../img/mail-fluid.svg'
import Navigation from '../components/Navigation.vue'
import logger from '../logger.js'
import { mapStores } from 'pinia'
@ -44,13 +46,13 @@ export default {
AccountForm,
NcContent,
EmptyContent,
IconMail,
Navigation,
},
data() {
return {
displayName: loadState('mail', 'prefill_displayName'),
email: loadState('mail', 'prefill_email'),
FluidMail,
allowNewMailAccounts: loadState('mail', 'allow-new-accounts', true),
error: null,
}
@ -72,9 +74,28 @@ export default {
}
</script>
<style>
.container{
display: flex;
justify-content: center;
<style scoped>
.setup__form-content {
min-height: 100%;
}
/* overrides for custom icon size and full opacity */
:deep(.empty-content__icon) {
width: 128px !important;
height: 128px !important;
opacity: 1 !important;
.setup__form-content__svg-wrapper {
width: 128px;
height: 128px;
}
:deep(svg) {
width: 128px !important;
height: 128px !important;
max-width: 128px !important;
max-height: 128px !important;
}
}
</style>