Basic no-wallpaper support

This commit is contained in:
Henry Jameson 2020-12-16 18:25:07 +02:00
parent 674c302350
commit c197756767
13 changed files with 38 additions and 11 deletions

View file

@ -54,14 +54,17 @@ export default {
return this.currentUser.background_image || this.$store.state.instance.background
},
bgStyle () {
return {
'background-image': `url(${this.background})`
}
},
bgAppStyle () {
if (
this.currentUser.background_image ||
(
this.$store.state.instance.background &&
!this.$store.getters.mergedConfig.hideInstanceWallpaper
)
) {
return {
'--body-background-image': `url(${this.background})`
}
}
},
chat () { return this.$store.state.chat.channel.state === 'joined' },
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },

View file

@ -14,7 +14,9 @@
right: -20px;
background-size: cover;
background-repeat: no-repeat;
background-position: 0 50%;
background-color: var(--wallpaper);
background-image: var(--body-background-image);
background-position: 50% 50px;
}
i[class^='icon-'] {

View file

@ -1,12 +1,11 @@
<template>
<div
id="app"
:style="bgAppStyle"
:style="bgStyle"
>
<div
id="app_bg_wrapper"
class="app-bg-wrapper"
:style="bgStyle"
/>
<MobileNav v-if="isMobileLayout" />
<DesktopNav v-else />

View file

@ -5,6 +5,10 @@
width: 100%;
position: fixed;
a {
color: var(--topBarLink, $fallback--link);
}
.inner-nav {
display: grid;
grid-template-rows: 50px;

View file

@ -34,6 +34,10 @@ const GeneralTab = {
return this.$store.state.instance.postFormats || []
},
instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
instanceWallpaperUsed () {
return this.$store.state.instance.background &&
!this.$store.state.users.currentUser.background_image
},
...SharedComputedObject()
}
}

View file

@ -11,6 +11,11 @@
{{ $t('settings.hide_isp') }}
</Checkbox>
</li>
<li v-if="instanceWallpaperUsed">
<Checkbox v-model="hideInstanceWallpaper">
{{ $t('settings.hide_wallpaper') }}
</Checkbox>
</li>
</ul>
</div>
<div class="setting-item">

View file

@ -165,7 +165,8 @@
border-color: var(--border, $fallback--border);
margin: 1em 0;
padding: 1em;
background: var(--body-background-image);
background-color: var(--wallpaper);
background-image: var(--body-background-image);
background-size: cover;
background-position: 50% 50%;

View file

@ -328,6 +328,7 @@
"hide_muted_posts": "Hide posts of muted users",
"max_thumbnails": "Maximum amount of thumbnails per post",
"hide_isp": "Hide instance-specific panel",
"hide_wallpaper": "Hide instance wallpaper",
"preload_images": "Preload images",
"use_one_click_nsfw": "Open NSFW attachments with just one click",
"hide_post_stats": "Hide post statistics (e.g. the number of favorites)",

View file

@ -20,6 +20,7 @@ export const defaultState = {
customTheme: undefined,
customThemeSource: undefined,
hideISP: false,
hideInstanceWallpaper: false,
// bad name: actually hides posts of muted USERS
hideMutedPosts: undefined, // instance default
collapseMessageWithSubject: undefined, // instance default

View file

@ -84,6 +84,10 @@ export const SLOT_INHERITANCE = {
opacity: 'bg',
priority: 1
},
wallpaper: {
depends: ['bg'],
color: (mod, bg) => brightness(-2 * mod, bg).rgb
},
fg: {
depends: [],
priority: 1

View file

@ -267,6 +267,7 @@
},
"colors": {
"bg": "#c0c0c0",
"wallpaper": "#008080",
"text": "#000000",
"link": "#0000ff",
"accent": "#000080",

View file

@ -258,6 +258,7 @@
},
"colors": {
"bg": "#c0c0c0",
"wallpaper": "#008080",
"text": "#000000",
"link": "#0000ff",
"accent": "#000080",

View file

@ -240,6 +240,7 @@
},
"colors": {
"bg": "#d6d6ce",
"wallpaper": "#396ba5",
"text": "#000000",
"link": "#0000ff",
"accent": "#0a246a",