Improve wallpaper feature

This commit is contained in:
syuilo 2020-02-15 08:29:59 +09:00
parent 1dce62e42a
commit 37c80e8ef5
9 changed files with 32 additions and 48 deletions

View File

@ -91,7 +91,7 @@
</nav> </nav>
</transition> </transition>
<div class="contents" ref="contents"> <div class="contents" ref="contents" :class="{ wallpaper }">
<main ref="main"> <main ref="main">
<div class="content"> <div class="content">
<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition"> <transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
@ -189,6 +189,7 @@ export default Vue.extend({
isDesktop: window.innerWidth >= 1100, isDesktop: window.innerWidth >= 1100,
canBack: false, canBack: false,
disconnectedDialog: null as Promise<void> | null, disconnectedDialog: null as Promise<void> | null,
wallpaper: localStorage.getItem('wallpaper') != null,
faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer
}; };
}, },
@ -972,6 +973,10 @@ export default Vue.extend({
margin: 0 auto; margin: 0 auto;
min-width: 0; min-width: 0;
&.wallpaper {
background: var(--wallpaperOverlay);
}
> main { > main {
width: $main-width; width: $main-width;
min-width: $main-width; min-width: $main-width;

View File

@ -136,8 +136,6 @@ document.body.innerHTML = '<div id="app"></div>';
const os = new MiOS(); const os = new MiOS();
os.init(async () => { os.init(async () => {
if (os.store.state.settings.wallpaper) document.documentElement.style.backgroundImage = `url(${os.store.state.settings.wallpaper})`;
if ('Notification' in window && os.store.getters.isSignedIn) { if ('Notification' in window && os.store.getters.isSignedIn) {
// 許可を得ていなかったらリクエスト // 許可を得ていなかったらリクエスト
if (Notification.permission === 'default') { if (Notification.permission === 'default') {

View File

@ -2,12 +2,8 @@
<section class="_card"> <section class="_card">
<div class="_title"><fa :icon="faCog"/> {{ $t('general') }}</div> <div class="_title"><fa :icon="faCog"/> {{ $t('general') }}</div>
<div class="_content"> <div class="_content">
<mk-input type="file" @change="onWallpaperChange"> <mk-button primary v-if="wallpaper == null" @click="setWallpaper">{{ $t('setWallpaper') }}</mk-button>
<span>{{ $t('wallpaper') }}</span> <mk-button primary v-else @click="wallpaper = null">{{ $t('removeWallpaper') }}</mk-button>
<template #icon><fa :icon="faImage"/></template>
<template #desc v-if="wallpaperUploading">{{ $t('uploading') }}<mk-ellipsis/></template>
</mk-input>
<mk-button primary :disabled="$store.state.settings.wallpaper == null" @click="delWallpaper()">{{ $t('removeWallpaper') }}</mk-button>
</div> </div>
<div class="_content"> <div class="_content">
<mk-switch v-model="autoReload"> <mk-switch v-model="autoReload">
@ -56,7 +52,8 @@ import MkSwitch from '../../components/ui/switch.vue';
import MkSelect from '../../components/ui/select.vue'; import MkSelect from '../../components/ui/select.vue';
import MkRadio from '../../components/ui/radio.vue'; import MkRadio from '../../components/ui/radio.vue';
import i18n from '../../i18n'; import i18n from '../../i18n';
import { apiUrl, langs } from '../../config'; import { langs } from '../../config';
import { selectFile } from '../../scripts/select-file';
export default Vue.extend({ export default Vue.extend({
i18n, i18n,
@ -74,17 +71,12 @@ export default Vue.extend({
langs, langs,
lang: localStorage.getItem('lang'), lang: localStorage.getItem('lang'),
fontSize: localStorage.getItem('fontSize'), fontSize: localStorage.getItem('fontSize'),
wallpaperUploading: false, wallpaper: localStorage.getItem('wallpaper'),
faImage, faCog faImage, faCog
} }
}, },
computed: { computed: {
wallpaper: {
get() { return this.$store.state.settings.wallpaper; },
set(value) { this.$store.dispatch('settings/set', { key: 'wallpaper', value }); }
},
autoReload: { autoReload: {
get() { return this.$store.state.device.autoReload; }, get() { return this.$store.state.device.autoReload; },
set(value) { this.$store.commit('device/set', { key: 'autoReload', value }); } set(value) { this.$store.commit('device/set', { key: 'autoReload', value }); }
@ -120,39 +112,23 @@ export default Vue.extend({
localStorage.setItem('fontSize', this.fontSize); localStorage.setItem('fontSize', this.fontSize);
} }
location.reload(); location.reload();
},
wallpaper() {
if (this.wallpaper == null) {
localStorage.removeItem('wallpaper');
} else {
localStorage.setItem('wallpaper', this.wallpaper);
}
location.reload();
} }
}, },
methods: { methods: {
onWallpaperChange([file]) { setWallpaper(e) {
this.wallpaperUploading = true; selectFile(this, e.currentTarget || e.target, null, false).then(file => {
this.wallpaper = file.url;
const data = new FormData();
data.append('file', file);
data.append('i', this.$store.state.i.token);
fetch(apiUrl + '/drive/files/create', {
method: 'POST',
body: data
})
.then(response => response.json())
.then(f => {
this.wallpaper = f.url;
this.wallpaperUploading = false;
document.documentElement.style.backgroundImage = `url(${this.$store.state.settings.wallpaper})`;
})
.catch(e => {
this.wallpaperUploading = false;
this.$root.dialog({
type: 'error',
text: e
}); });
});
},
delWallpaper() {
this.wallpaper = null;
document.documentElement.style.backgroundImage = 'none';
}, },
onChangeAutoWatch(v) { onChangeAutoWatch(v) {

View File

@ -35,7 +35,6 @@ export default Vue.extend({
data() { data() {
return { return {
wallpaperUploading: false,
faPalette faPalette
} }
}, },

View File

@ -13,7 +13,6 @@ const defaultSettings = {
defaultNoteLocalOnly: false, defaultNoteLocalOnly: false,
uploadFolder: null, uploadFolder: null,
pastedFileName: 'yyyy-MM-dd HH-mm-ss [{{number}}]', pastedFileName: 'yyyy-MM-dd HH-mm-ss [{{number}}]',
wallpaper: null,
memo: null, memo: null,
reactions: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'], reactions: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'],
}; };

View File

@ -9,8 +9,8 @@ export type Theme = {
props: { [key: string]: string }; props: { [key: string]: string };
}; };
export const lightTheme: Theme = require('./themes/light.json5'); export const lightTheme: Theme = require('./themes/_light.json5');
export const darkTheme: Theme = require('./themes/dark.json5'); export const darkTheme: Theme = require('./themes/_dark.json5');
export const builtinThemes = [ export const builtinThemes = [
lightTheme, lightTheme,

View File

@ -46,6 +46,7 @@
inputBorder: '#959da2', inputBorder: '#959da2',
listItemHoverBg: 'rgba(255, 255, 255, 0.03)', listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
driveFolderBg: ':alpha<0.3<@accent', driveFolderBg: ':alpha<0.3<@accent',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
bonzsgfz: ':alpha<0<@bg', bonzsgfz: ':alpha<0<@bg',
pcncwizz: ':darken<2<@panel', pcncwizz: ':darken<2<@panel',
vocsgcxy: 'rgba(0, 0, 0, 0.5)', vocsgcxy: 'rgba(0, 0, 0, 0.5)',

View File

@ -46,6 +46,7 @@
inputBorder: '#dae0e4', inputBorder: '#dae0e4',
listItemHoverBg: 'rgba(0, 0, 0, 0.03)', listItemHoverBg: 'rgba(0, 0, 0, 0.03)',
driveFolderBg: ':alpha<0.3<@accent', driveFolderBg: ':alpha<0.3<@accent',
wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
bonzsgfz: ':alpha<0<@bg', bonzsgfz: ':alpha<0<@bg',
pcncwizz: ':darken<2<@panel', pcncwizz: ':darken<2<@panel',
vocsgcxy: 'rgba(255, 255, 255, 0.5)', vocsgcxy: 'rgba(255, 255, 255, 0.5)',

View File

@ -53,6 +53,11 @@ html
document.documentElement.classList.add('f-' + fontSize); document.documentElement.classList.add('f-' + fontSize);
} }
const wallpaper = localStorage.getItem('wallpaper');
if (wallpaper) {
document.documentElement.style.backgroundImage = `url(${wallpaper})`;
}
body body
noscript: p noscript: p
| JavaScriptを有効にしてください | JavaScriptを有効にしてください