Improve wallpaper feature
This commit is contained in:
parent
1dce62e42a
commit
37c80e8ef5
|
@ -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;
|
||||||
|
|
|
@ -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') {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -35,7 +35,6 @@ export default Vue.extend({
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
wallpaperUploading: false,
|
|
||||||
faPalette
|
faPalette
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -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: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'],
|
||||||
};
|
};
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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)',
|
|
@ -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)',
|
|
@ -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を有効にしてください
|
||||||
|
|
Loading…
Reference in New Issue