commit: 8d9bf3efc8825afaf07dca4db69cb19f3dfbe411 parent 3359d4ddf6ee6449bd230eb2056f08edbb3d355e Author: HJ <30-hj@users.noreply.git.pleroma.social> Date: Fri, 18 Dec 2020 08:37:01 +0000 Merge branch 'plain-bg' into 'develop' Solid color wallpaper support See merge request pleroma/pleroma-fe!1314Diffstat:
15 files changed, 54 insertions(+), 14 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md @@ -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 diff --git a/src/App.js b/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 () { diff --git a/src/App.scss b/src/App.scss @@ -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-'] { diff --git a/src/App.vue b/src/App.vue @@ -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 /> diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss @@ -5,6 +5,10 @@ width: 100%; position: fixed; + a { + color: var(--topBarLink, $fallback--link); + } + .inner-nav { display: grid; grid-template-rows: 50px; diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js @@ -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() } } diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue @@ -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"> diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss @@ -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%; diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue @@ -617,6 +617,15 @@ /> </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 v-model="pollColorLocal" diff --git a/src/i18n/en.json b/src/i18n/en.json @@ -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", diff --git a/src/modules/config.js b/src/modules/config.js @@ -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 diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js @@ -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 diff --git a/static/themes/redmond-xx-se.json b/static/themes/redmond-xx-se.json @@ -267,6 +267,7 @@ }, "colors": { "bg": "#c0c0c0", + "wallpaper": "#008080", "text": "#000000", "link": "#0000ff", "accent": "#000080", diff --git a/static/themes/redmond-xx.json b/static/themes/redmond-xx.json @@ -258,6 +258,7 @@ }, "colors": { "bg": "#c0c0c0", + "wallpaper": "#008080", "text": "#000000", "link": "#0000ff", "accent": "#000080", diff --git a/static/themes/redmond-xxi.json b/static/themes/redmond-xxi.json @@ -240,6 +240,7 @@ }, "colors": { "bg": "#d6d6ce", + "wallpaper": "#396ba5", "text": "#000000", "link": "#0000ff", "accent": "#0a246a",