forked from srxl/akkoma-fe
Merge branch 'plain-bg' into 'develop'
Solid color wallpaper support See merge request pleroma/pleroma-fe!1314
This commit is contained in:
commit
8d9bf3efc8
15 changed files with 54 additions and 14 deletions
|
@ -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
|
||||
- Added some missing unicode emoji
|
||||
- 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 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 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 link color not applied to instance name in topbar
|
||||
|
||||
### Changed
|
||||
- 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
|
||||
- Moved external source link from status heading to the ellipsis menu
|
||||
- Disabled horizontal textarea resize
|
||||
- Wallpaper is now top-aligned, horizontally centered.
|
||||
|
||||
|
||||
## [2.2.1] - 2020-11-11
|
||||
|
|
23
src/App.js
23
src/App.js
|
@ -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 GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
|
||||
import { windowWidth, windowHeight } from './services/window_utils/window_utils'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
@ -50,17 +51,18 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
currentUser () { return this.$store.state.users.currentUser },
|
||||
background () {
|
||||
return this.currentUser.background_image || this.$store.state.instance.background
|
||||
userBackground () { return this.currentUser.background_image },
|
||||
instanceBackground () {
|
||||
return this.mergedConfig.hideInstanceWallpaper
|
||||
? null
|
||||
: this.$store.state.instance.background
|
||||
},
|
||||
background () { return this.userBackground || this.instanceBackground },
|
||||
bgStyle () {
|
||||
return {
|
||||
'background-image': `url(${this.background})`
|
||||
}
|
||||
},
|
||||
bgAppStyle () {
|
||||
return {
|
||||
'--body-background-image': `url(${this.background})`
|
||||
if (this.background) {
|
||||
return {
|
||||
'--body-background-image': `url(${this.background})`
|
||||
}
|
||||
}
|
||||
},
|
||||
chat () { return this.$store.state.chat.channel.state === 'joined' },
|
||||
|
@ -77,7 +79,8 @@ export default {
|
|||
return {
|
||||
'order': this.$store.state.instance.sidebarRight ? 99 : 0
|
||||
}
|
||||
}
|
||||
},
|
||||
...mapGetters(['mergedConfig'])
|
||||
},
|
||||
methods: {
|
||||
updateMobileState () {
|
||||
|
|
|
@ -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-'] {
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -5,6 +5,10 @@
|
|||
width: 100%;
|
||||
position: fixed;
|
||||
|
||||
a {
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
}
|
||||
|
||||
.inner-nav {
|
||||
display: grid;
|
||||
grid-template-rows: 50px;
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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%;
|
||||
|
||||
|
|
|
@ -616,6 +616,15 @@
|
|||
:disabled="underlayOpacityLocal === 'transparent'"
|
||||
/>
|
||||
</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">
|
||||
<h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
|
||||
<ColorInput
|
||||
|
|
|
@ -329,6 +329,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)",
|
||||
|
@ -516,6 +517,7 @@
|
|||
"inputs": "Input fields",
|
||||
"faint_text": "Faded text",
|
||||
"underlay": "Underlay",
|
||||
"wallpaper": "Wallpaper",
|
||||
"poll": "Poll graph",
|
||||
"icons": "Icons",
|
||||
"highlight": "Highlighted elements",
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -267,6 +267,7 @@
|
|||
},
|
||||
"colors": {
|
||||
"bg": "#c0c0c0",
|
||||
"wallpaper": "#008080",
|
||||
"text": "#000000",
|
||||
"link": "#0000ff",
|
||||
"accent": "#000080",
|
||||
|
|
|
@ -258,6 +258,7 @@
|
|||
},
|
||||
"colors": {
|
||||
"bg": "#c0c0c0",
|
||||
"wallpaper": "#008080",
|
||||
"text": "#000000",
|
||||
"link": "#0000ff",
|
||||
"accent": "#000080",
|
||||
|
|
|
@ -240,6 +240,7 @@
|
|||
},
|
||||
"colors": {
|
||||
"bg": "#d6d6ce",
|
||||
"wallpaper": "#396ba5",
|
||||
"text": "#000000",
|
||||
"link": "#0000ff",
|
||||
"accent": "#0a246a",
|
||||
|
|
Loading…
Reference in a new issue