Merge branch 'plain-bg' into 'develop'

Solid color wallpaper support

See merge request pleroma/pleroma-fe!1314
This commit is contained in:
HJ 2020-12-18 08:37:01 +00:00
commit 8d9bf3efc8
15 changed files with 54 additions and 14 deletions

View file

@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Support to input emoji into the search box in reaction picker - Support to input emoji into the search box in reaction picker
- Added some missing unicode emoji - Added some missing unicode emoji
- Added the upload limit to the Features panel in the About page - Added the upload limit to the Features panel in the About page
- Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore
### Fixed ### Fixed
- Fixed the occasional bug where screen would scroll 1px when typing into a reply form - Fixed the occasional bug where screen would scroll 1px when typing into a reply form
@ -21,6 +22,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Fixed error handling when updating various profile images - Fixed error handling when updating various profile images
- Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session - Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session
- Fixed custom emoji not showing in poll options before voting - Fixed custom emoji not showing in poll options before voting
- Fixed link color not applied to instance name in topbar
### Changed ### Changed
- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers - Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
@ -28,6 +30,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Adjusted timeline menu clickable area to match the visible button - Adjusted timeline menu clickable area to match the visible button
- Moved external source link from status heading to the ellipsis menu - Moved external source link from status heading to the ellipsis menu
- Disabled horizontal textarea resize - Disabled horizontal textarea resize
- Wallpaper is now top-aligned, horizontally centered.
## [2.2.1] - 2020-11-11 ## [2.2.1] - 2020-11-11

View file

@ -15,6 +15,7 @@ import UserReportingModal from './components/user_reporting_modal/user_reporting
import PostStatusModal from './components/post_status_modal/post_status_modal.vue' import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue' import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
import { windowWidth, windowHeight } from './services/window_utils/window_utils' import { windowWidth, windowHeight } from './services/window_utils/window_utils'
import { mapGetters } from 'vuex'
export default { export default {
name: 'app', name: 'app',
@ -50,17 +51,18 @@ export default {
}, },
computed: { computed: {
currentUser () { return this.$store.state.users.currentUser }, currentUser () { return this.$store.state.users.currentUser },
background () { userBackground () { return this.currentUser.background_image },
return this.currentUser.background_image || this.$store.state.instance.background instanceBackground () {
return this.mergedConfig.hideInstanceWallpaper
? null
: this.$store.state.instance.background
}, },
background () { return this.userBackground || this.instanceBackground },
bgStyle () { bgStyle () {
return { if (this.background) {
'background-image': `url(${this.background})` return {
} '--body-background-image': `url(${this.background})`
}, }
bgAppStyle () {
return {
'--body-background-image': `url(${this.background})`
} }
}, },
chat () { return this.$store.state.chat.channel.state === 'joined' }, chat () { return this.$store.state.chat.channel.state === 'joined' },
@ -77,7 +79,8 @@ export default {
return { return {
'order': this.$store.state.instance.sidebarRight ? 99 : 0 'order': this.$store.state.instance.sidebarRight ? 99 : 0
} }
} },
...mapGetters(['mergedConfig'])
}, },
methods: { methods: {
updateMobileState () { updateMobileState () {

View file

@ -14,7 +14,9 @@
right: -20px; right: -20px;
background-size: cover; background-size: cover;
background-repeat: no-repeat; 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-'] { i[class^='icon-'] {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -616,6 +616,15 @@
:disabled="underlayOpacityLocal === 'transparent'" :disabled="underlayOpacityLocal === 'transparent'"
/> />
</div> </div>
<div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.wallpaper') }}</h4>
<ColorInput
v-model="wallpaperColorLocal"
name="wallpaper"
:label="$t('settings.style.advanced_colors.wallpaper')"
:fallback="previewTheme.colors.wallpaper"
/>
</div>
<div class="color-item"> <div class="color-item">
<h4>{{ $t('settings.style.advanced_colors.poll') }}</h4> <h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
<ColorInput <ColorInput

View file

@ -329,6 +329,7 @@
"hide_muted_posts": "Hide posts of muted users", "hide_muted_posts": "Hide posts of muted users",
"max_thumbnails": "Maximum amount of thumbnails per post", "max_thumbnails": "Maximum amount of thumbnails per post",
"hide_isp": "Hide instance-specific panel", "hide_isp": "Hide instance-specific panel",
"hide_wallpaper": "Hide instance wallpaper",
"preload_images": "Preload images", "preload_images": "Preload images",
"use_one_click_nsfw": "Open NSFW attachments with just one click", "use_one_click_nsfw": "Open NSFW attachments with just one click",
"hide_post_stats": "Hide post statistics (e.g. the number of favorites)", "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
@ -516,6 +517,7 @@
"inputs": "Input fields", "inputs": "Input fields",
"faint_text": "Faded text", "faint_text": "Faded text",
"underlay": "Underlay", "underlay": "Underlay",
"wallpaper": "Wallpaper",
"poll": "Poll graph", "poll": "Poll graph",
"icons": "Icons", "icons": "Icons",
"highlight": "Highlighted elements", "highlight": "Highlighted elements",

View file

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

View file

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

View file

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

View file

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

View file

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