dark mode logo

This commit is contained in:
Čarodej
2022-03-15 18:03:28 +01:00
parent f6f4184fb2
commit aa5742dafa
20 changed files with 185 additions and 79 deletions

View File

@@ -47,6 +47,14 @@
/>
</AppInputText>
<AppInputText :title="$t('App Logo Dark Mode (optional)')">
<ImageInput
@input="$updateImage('/admin/settings', 'app_logo_dark', app.logo_dark)"
:image="$getImage(app.logo_dark)"
v-model="app.logo_dark"
/>
</AppInputText>
<AppInputText :title="$t('admin_settings.appearance.logo_horizontal')">
<ImageInput
@input="$updateImage('/admin/settings', 'app_logo_horizontal', app.logo_horizontal)"
@@ -55,6 +63,14 @@
/>
</AppInputText>
<AppInputText :title="$t('App Logo Horizontal Dark Mode (optional)')">
<ImageInput
@input="$updateImage('/admin/settings', 'app_logo_horizontal_dark', app.logo_horizontal_dark)"
:image="$getImage(app.logo_horizontal_dark)"
v-model="app.logo_horizontal_dark"
/>
</AppInputText>
<AppInputText :title="$t('admin_settings.appearance.favicon')">
<ImageInput
@input="$updateImage('/admin/settings', 'app_favicon', app.favicon)"
@@ -124,17 +140,19 @@ export default {
axios
.get('/api/admin/settings', {
params: {
column: 'app_title|app_description|app_logo|app_favicon|app_logo_horizontal|app_color|app_og_image|app_touch_icon',
column: 'app_title|app_description|app_logo|app_logo_dark|app_favicon|app_logo_horizontal|app_logo_horizontal_dark|app_color|app_og_image|app_touch_icon',
},
})
.then((response) => {
this.app = {
logo_horizontal: response.data.app_logo_horizontal,
logo_horizontal_dark: response.data.app_logo_horizontal_dark,
description: response.data.app_description,
favicon: response.data.app_favicon,
title: response.data.app_title,
color: response.data.app_color,
logo: response.data.app_logo,
logo_dark: response.data.app_logo_dark,
og_image: response.data.app_og_image,
touch_icon: response.data.app_touch_icon,
}

View File

@@ -2,11 +2,11 @@
<div id="single-page">
<div id="page-content" v-if="!isLoading && data">
<!--Headline-->
<div v-if="config.isAdminVueFileManagerBar" class="mb-4 hidden justify-between md:mb-6 md:block md:flex">
<div v-if="config.isAdminVueFileManagerBar" class="mb-4 hidden justify-between items-center md:mb-6 md:block md:flex">
<!--VueFileManager logo-->
<a href="https://vuefilemanager.com" target="_blank">
<img
src="/assets/images/vuefilemanager-horizontal-logo.svg"
:src="isDarkMode ? '/assets/images/vuefilemanager-horizontal-logo-dark.svg' : '/assets/images/vuefilemanager-horizontal-logo.svg'"
alt="VueFileManager"
class="light-mode"
/>
@@ -223,7 +223,7 @@ export default {
Spinner,
},
computed: {
...mapGetters(['config']),
...mapGetters(['config', 'isDarkMode']),
},
data() {
return {

View File

@@ -101,11 +101,7 @@
<!--Password reset successfully-->
<AuthContent name="password-reset-successfully" :visible="false">
<img v-if="config.app_logo" class="logo mx-auto" :src="$getImage(config.app_logo)" :alt="config.app_name" />
<b v-if="!config.app_logo" class="auth-logo-text">{{ config.app_name }}</b>
<h1>{{ $t('page_forgotten_password.pass_reseted_title') }}</h1>
<h2>{{ $t('page_forgotten_password.pass_reseted_subtitle') }}</h2>
<Headline :title="$t('page_forgotten_password.pass_reseted_title')" :description="$t('page_forgotten_password.pass_reseted_subtitle')" />
<router-link :to="{ name: 'SignIn' }">
<AuthButton icon="chevron-right" :text="$t('page_forgotten_password.pass_reseted_signin')" />

View File

@@ -8,8 +8,8 @@
<!--Image logo-->
<img
v-if="config.app_logo"
class="mx-auto mb-6 w-28 md:w-32"
:src="$getImage(config.app_logo)"
class="mx-auto mb-6 h-16 md:h-20 mb-10"
:src="$getImage(logoSrc)"
:alt="config.app_name"
/>
@@ -35,7 +35,10 @@ export default {
name: 'Headline',
props: ['description', 'title'],
computed: {
...mapGetters(['config']),
...mapGetters(['config', 'isDarkMode']),
logoSrc() {
return this.isDarkMode && this.config.app_logo ? this.config.app_logo_dark : this.config.app_logo
}
},
}
</script>

View File

@@ -7,7 +7,7 @@
<img
v-if="config.app_logo_horizontal"
class="mx-auto w-44"
:src="$getImage(config.app_logo_horizontal)"
:src="$getImage(logoSrc)"
:alt="config.app_name"
/>
@@ -26,7 +26,7 @@
<img
v-if="config.app_logo_horizontal"
class="mx-auto w-44"
:src="$getImage(config.app_logo_horizontal)"
:src="$getImage(logoSrc)"
:alt="config.app_name"
/>
@@ -93,7 +93,10 @@ export default {
Video,
},
computed: {
...mapGetters(['config']),
...mapGetters(['config', 'isDarkMode']),
logoSrc() {
return this.isDarkMode && this.config.app_logo_horizontal ? this.config.app_logo_horizontal_dark : this.config.app_logo_horizontal
},
isVideo() {
return this.file.data.type === 'video'
},