From 37c80e8ef50c833f30fc96635ff8317155a79a45 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 15 Feb 2020 08:29:59 +0900 Subject: Improve wallpaper feature --- src/client/app.vue | 7 +++- src/client/init.ts | 2 -- src/client/pages/settings/general.vue | 58 +++++++++--------------------- src/client/pages/settings/theme.vue | 1 - src/client/store.ts | 1 - src/client/theme.ts | 4 +-- src/client/themes/_dark.json5 | 66 +++++++++++++++++++++++++++++++++++ src/client/themes/_light.json5 | 66 +++++++++++++++++++++++++++++++++++ src/client/themes/dark.json5 | 65 ---------------------------------- src/client/themes/light.json5 | 65 ---------------------------------- src/server/web/views/base.pug | 5 +++ 11 files changed, 162 insertions(+), 178 deletions(-) create mode 100644 src/client/themes/_dark.json5 create mode 100644 src/client/themes/_light.json5 delete mode 100644 src/client/themes/dark.json5 delete mode 100644 src/client/themes/light.json5 diff --git a/src/client/app.vue b/src/client/app.vue index d2707cdf01..fdd050c714 100644 --- a/src/client/app.vue +++ b/src/client/app.vue @@ -91,7 +91,7 @@ -
+
@@ -189,6 +189,7 @@ export default Vue.extend({ isDesktop: window.innerWidth >= 1100, canBack: false, disconnectedDialog: null as Promise | 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 }; }, @@ -972,6 +973,10 @@ export default Vue.extend({ margin: 0 auto; min-width: 0; + &.wallpaper { + background: var(--wallpaperOverlay); + } + > main { width: $main-width; min-width: $main-width; diff --git a/src/client/init.ts b/src/client/init.ts index b013637f7f..69f071ddcf 100644 --- a/src/client/init.ts +++ b/src/client/init.ts @@ -136,8 +136,6 @@ document.body.innerHTML = '
'; const os = new MiOS(); 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.permission === 'default') { diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue index 6ebda9efeb..6b4825c7a9 100644 --- a/src/client/pages/settings/general.vue +++ b/src/client/pages/settings/general.vue @@ -2,12 +2,8 @@
{{ $t('general') }}
- - {{ $t('wallpaper') }} - - - - {{ $t('removeWallpaper') }} + {{ $t('setWallpaper') }} + {{ $t('removeWallpaper') }}
@@ -56,7 +52,8 @@ import MkSwitch from '../../components/ui/switch.vue'; import MkSelect from '../../components/ui/select.vue'; import MkRadio from '../../components/ui/radio.vue'; import i18n from '../../i18n'; -import { apiUrl, langs } from '../../config'; +import { langs } from '../../config'; +import { selectFile } from '../../scripts/select-file'; export default Vue.extend({ i18n, @@ -74,17 +71,12 @@ export default Vue.extend({ langs, lang: localStorage.getItem('lang'), fontSize: localStorage.getItem('fontSize'), - wallpaperUploading: false, + wallpaper: localStorage.getItem('wallpaper'), faImage, faCog } }, computed: { - wallpaper: { - get() { return this.$store.state.settings.wallpaper; }, - set(value) { this.$store.dispatch('settings/set', { key: 'wallpaper', value }); } - }, - autoReload: { get() { return this.$store.state.device.autoReload; }, set(value) { this.$store.commit('device/set', { key: 'autoReload', value }); } @@ -120,41 +112,25 @@ export default Vue.extend({ localStorage.setItem('fontSize', this.fontSize); } location.reload(); + }, + + wallpaper() { + if (this.wallpaper == null) { + localStorage.removeItem('wallpaper'); + } else { + localStorage.setItem('wallpaper', this.wallpaper); + } + location.reload(); } }, methods: { - onWallpaperChange([file]) { - this.wallpaperUploading = true; - - 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 - }); + setWallpaper(e) { + selectFile(this, e.currentTarget || e.target, null, false).then(file => { + this.wallpaper = file.url; }); }, - delWallpaper() { - this.wallpaper = null; - document.documentElement.style.backgroundImage = 'none'; - }, - onChangeAutoWatch(v) { this.$root.api('i/update', { autoWatch: v diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue index ecedb83626..e8f11fb03c 100644 --- a/src/client/pages/settings/theme.vue +++ b/src/client/pages/settings/theme.vue @@ -35,7 +35,6 @@ export default Vue.extend({ data() { return { - wallpaperUploading: false, faPalette } }, diff --git a/src/client/store.ts b/src/client/store.ts index 485eb5b691..13722c1bb8 100644 --- a/src/client/store.ts +++ b/src/client/store.ts @@ -13,7 +13,6 @@ const defaultSettings = { defaultNoteLocalOnly: false, uploadFolder: null, pastedFileName: 'yyyy-MM-dd HH-mm-ss [{{number}}]', - wallpaper: null, memo: null, reactions: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'], }; diff --git a/src/client/theme.ts b/src/client/theme.ts index 3ece30d47e..c446528f06 100644 --- a/src/client/theme.ts +++ b/src/client/theme.ts @@ -9,8 +9,8 @@ export type Theme = { props: { [key: string]: string }; }; -export const lightTheme: Theme = require('./themes/light.json5'); -export const darkTheme: Theme = require('./themes/dark.json5'); +export const lightTheme: Theme = require('./themes/_light.json5'); +export const darkTheme: Theme = require('./themes/_dark.json5'); export const builtinThemes = [ lightTheme, diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5 new file mode 100644 index 0000000000..76d078cf98 --- /dev/null +++ b/src/client/themes/_dark.json5 @@ -0,0 +1,66 @@ +{ + id: 'dark', + + name: 'Dark', + author: 'syuilo', + desc: 'Default dark theme', + kind: 'dark', + + props: { + accent: '#86b300', + accentDarken: ':darken<10<@accent', + accentLighten: ':lighten<10<@accent', + accentShadow: ':alpha<0.3<@accent', + focus: ':alpha<0.3<@accent', + bg: '#000', + fg: '#c7d1d8', + fgHighlighted: ':lighten<3<@fg', + panel: '#111213', + shadow: 'rgba(0, 0, 0, 0.1)', + header: 'rgba(20, 20, 20, 0.75)', + navBg: '@panel', + navFg: '@fg', + navActive: '@accent', + navIndicator: '@accent', + link: '#44a4c1', + hashtag: '#ff9156', + mention: '@accent', + renote: '#229e82', + modalBg: 'rgba(0, 0, 0, 0.5)', + divider: 'rgba(255, 255, 255, 0.1)', + scrollbarHandle: 'rgba(255, 255, 255, 0.2)', + scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', + dateLabelBg: 'rgba(255, 255, 255, 0.08)', + dateLabelFg: '#fff', + infoBg: '#253142', + infoFg: '#fff', + infoWarnBg: '#42321c', + infoWarnFg: '#ffbd3e', + cwBg: '#687390', + cwFg: '#393f4f', + cwHoverBg: '#707b97', + toastBg: 'rgba(0, 0, 0, 0.5)', + toastFg: '#c7d1d8', + buttonBg: 'rgba(255, 255, 255, 0.05)', + buttonHoverBg: 'rgba(255, 255, 255, 0.1)', + inputBorder: '#959da2', + listItemHoverBg: 'rgba(255, 255, 255, 0.03)', + driveFolderBg: ':alpha<0.3<@accent', + wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', + bonzsgfz: ':alpha<0<@bg', + pcncwizz: ':darken<2<@panel', + vocsgcxy: 'rgba(0, 0, 0, 0.5)', + yrnqrguo: 'rgba(255, 255, 255, 0.05)', + nwjktjjq: 'rgba(255, 255, 255, 0.1)', + geavgsxy: 'rgba(255, 255, 255, 0.05)', + nhzhphzx: 'rgba(255, 255, 255, 0.15)', + tyvedwbe: 'rgba(0, 0, 0, 0.5)', + bwqtlupy: 'rgba(255, 255, 255, 0.05)', + jkhztclx: ':lighten<5<@accent', + zbqjwygh: ':darken<5<@accent', + xxubwiul: ':alpha<0.4<@accent', + aupeazdm: 'rgba(0, 0, 0, 0.3)', + jvhmlskx: 'rgba(255, 255, 255, 0.1)', + yakfpmhl: 'rgba(255, 255, 255, 0.15)', + }, +} diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5 new file mode 100644 index 0000000000..6156282ef7 --- /dev/null +++ b/src/client/themes/_light.json5 @@ -0,0 +1,66 @@ +{ + id: 'light', + + name: 'Light', + author: 'syuilo', + desc: 'Default light theme', + kind: 'light', + + props: { + accent: '#86b300', + accentDarken: ':darken<10<@accent', + accentLighten: ':lighten<10<@accent', + accentShadow: ':alpha<0.4<@accent', + focus: ':alpha<0.3<@accent', + bg: '#fafafa', + fg: '#5c6a73', + fgHighlighted: ':darken<3<@fg', + panel: '#fff', + shadow: 'rgba(0, 0, 0, 0.1)', + header: 'rgba(255, 255, 255, 0.75)', + navBg: '@panel', + navFg: '@fg', + navActive: '@accent', + navIndicator: '@accent', + link: '#44a4c1', + hashtag: '#ff9156', + mention: '@accent', + renote: '#229e82', + modalBg: 'rgba(0, 0, 0, 0.3)', + divider: 'rgba(0, 0, 0, 0.1)', + scrollbarHandle: 'rgba(0, 0, 0, 0.2)', + scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)', + dateLabelBg: 'rgba(0, 0, 0, 0.5)', + dateLabelFg: '#fff', + infoBg: '#e5f5ff', + infoFg: '#72818a', + infoWarnBg: '#fff0db', + infoWarnFg: '#573c08', + cwBg: '#b1b9c1', + cwFg: '#fff', + cwHoverBg: '#bbc4ce', + toastBg: 'rgba(255, 255, 255, 0.5)', + toastFg: '#0c0c0c', + buttonBg: 'rgba(0, 0, 0, 0.05)', + buttonHoverBg: 'rgba(0, 0, 0, 0.1)', + inputBorder: '#dae0e4', + listItemHoverBg: 'rgba(0, 0, 0, 0.03)', + driveFolderBg: ':alpha<0.3<@accent', + wallpaperOverlay: 'rgba(255, 255, 255, 0.5)', + bonzsgfz: ':alpha<0<@bg', + pcncwizz: ':darken<2<@panel', + vocsgcxy: 'rgba(255, 255, 255, 0.5)', + yrnqrguo: 'rgba(0, 0, 0, 0.05)', + nwjktjjq: 'rgba(0, 0, 0, 0.1)', + geavgsxy: 'rgba(0, 0, 0, 0.05)', + nhzhphzx: 'rgba(0, 0, 0, 0.25)', + tyvedwbe: 'rgba(0, 0, 0, 0.1)', + bwqtlupy: 'rgba(0, 0, 0, 0.05)', + jkhztclx: ':lighten<5<@accent', + zbqjwygh: ':darken<5<@accent', + xxubwiul: ':alpha<0.4<@accent', + aupeazdm: 'rgba(0, 0, 0, 0.1)', + jvhmlskx: 'rgba(0, 0, 0, 0.1)', + yakfpmhl: 'rgba(0, 0, 0, 0.15)', + }, +} diff --git a/src/client/themes/dark.json5 b/src/client/themes/dark.json5 deleted file mode 100644 index 7cb95b4beb..0000000000 --- a/src/client/themes/dark.json5 +++ /dev/null @@ -1,65 +0,0 @@ -{ - id: 'dark', - - name: 'Dark', - author: 'syuilo', - desc: 'Default dark theme', - kind: 'dark', - - props: { - accent: '#86b300', - accentDarken: ':darken<10<@accent', - accentLighten: ':lighten<10<@accent', - accentShadow: ':alpha<0.3<@accent', - focus: ':alpha<0.3<@accent', - bg: '#000', - fg: '#c7d1d8', - fgHighlighted: ':lighten<3<@fg', - panel: '#111213', - shadow: 'rgba(0, 0, 0, 0.1)', - header: 'rgba(20, 20, 20, 0.75)', - navBg: '@panel', - navFg: '@fg', - navActive: '@accent', - navIndicator: '@accent', - link: '#44a4c1', - hashtag: '#ff9156', - mention: '@accent', - renote: '#229e82', - modalBg: 'rgba(0, 0, 0, 0.5)', - divider: 'rgba(255, 255, 255, 0.1)', - scrollbarHandle: 'rgba(255, 255, 255, 0.2)', - scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', - dateLabelBg: 'rgba(255, 255, 255, 0.08)', - dateLabelFg: '#fff', - infoBg: '#253142', - infoFg: '#fff', - infoWarnBg: '#42321c', - infoWarnFg: '#ffbd3e', - cwBg: '#687390', - cwFg: '#393f4f', - cwHoverBg: '#707b97', - toastBg: 'rgba(0, 0, 0, 0.5)', - toastFg: '#c7d1d8', - buttonBg: 'rgba(255, 255, 255, 0.05)', - buttonHoverBg: 'rgba(255, 255, 255, 0.1)', - inputBorder: '#959da2', - listItemHoverBg: 'rgba(255, 255, 255, 0.03)', - driveFolderBg: ':alpha<0.3<@accent', - bonzsgfz: ':alpha<0<@bg', - pcncwizz: ':darken<2<@panel', - vocsgcxy: 'rgba(0, 0, 0, 0.5)', - yrnqrguo: 'rgba(255, 255, 255, 0.05)', - nwjktjjq: 'rgba(255, 255, 255, 0.1)', - geavgsxy: 'rgba(255, 255, 255, 0.05)', - nhzhphzx: 'rgba(255, 255, 255, 0.15)', - tyvedwbe: 'rgba(0, 0, 0, 0.5)', - bwqtlupy: 'rgba(255, 255, 255, 0.05)', - jkhztclx: ':lighten<5<@accent', - zbqjwygh: ':darken<5<@accent', - xxubwiul: ':alpha<0.4<@accent', - aupeazdm: 'rgba(0, 0, 0, 0.3)', - jvhmlskx: 'rgba(255, 255, 255, 0.1)', - yakfpmhl: 'rgba(255, 255, 255, 0.15)', - }, -} diff --git a/src/client/themes/light.json5 b/src/client/themes/light.json5 deleted file mode 100644 index b72fcaa2e4..0000000000 --- a/src/client/themes/light.json5 +++ /dev/null @@ -1,65 +0,0 @@ -{ - id: 'light', - - name: 'Light', - author: 'syuilo', - desc: 'Default light theme', - kind: 'light', - - props: { - accent: '#86b300', - accentDarken: ':darken<10<@accent', - accentLighten: ':lighten<10<@accent', - accentShadow: ':alpha<0.4<@accent', - focus: ':alpha<0.3<@accent', - bg: '#fafafa', - fg: '#5c6a73', - fgHighlighted: ':darken<3<@fg', - panel: '#fff', - shadow: 'rgba(0, 0, 0, 0.1)', - header: 'rgba(255, 255, 255, 0.75)', - navBg: '@panel', - navFg: '@fg', - navActive: '@accent', - navIndicator: '@accent', - link: '#44a4c1', - hashtag: '#ff9156', - mention: '@accent', - renote: '#229e82', - modalBg: 'rgba(0, 0, 0, 0.3)', - divider: 'rgba(0, 0, 0, 0.1)', - scrollbarHandle: 'rgba(0, 0, 0, 0.2)', - scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)', - dateLabelBg: 'rgba(0, 0, 0, 0.5)', - dateLabelFg: '#fff', - infoBg: '#e5f5ff', - infoFg: '#72818a', - infoWarnBg: '#fff0db', - infoWarnFg: '#573c08', - cwBg: '#b1b9c1', - cwFg: '#fff', - cwHoverBg: '#bbc4ce', - toastBg: 'rgba(255, 255, 255, 0.5)', - toastFg: '#0c0c0c', - buttonBg: 'rgba(0, 0, 0, 0.05)', - buttonHoverBg: 'rgba(0, 0, 0, 0.1)', - inputBorder: '#dae0e4', - listItemHoverBg: 'rgba(0, 0, 0, 0.03)', - driveFolderBg: ':alpha<0.3<@accent', - bonzsgfz: ':alpha<0<@bg', - pcncwizz: ':darken<2<@panel', - vocsgcxy: 'rgba(255, 255, 255, 0.5)', - yrnqrguo: 'rgba(0, 0, 0, 0.05)', - nwjktjjq: 'rgba(0, 0, 0, 0.1)', - geavgsxy: 'rgba(0, 0, 0, 0.05)', - nhzhphzx: 'rgba(0, 0, 0, 0.25)', - tyvedwbe: 'rgba(0, 0, 0, 0.1)', - bwqtlupy: 'rgba(0, 0, 0, 0.05)', - jkhztclx: ':lighten<5<@accent', - zbqjwygh: ':darken<5<@accent', - xxubwiul: ':alpha<0.4<@accent', - aupeazdm: 'rgba(0, 0, 0, 0.1)', - jvhmlskx: 'rgba(0, 0, 0, 0.1)', - yakfpmhl: 'rgba(0, 0, 0, 0.15)', - }, -} diff --git a/src/server/web/views/base.pug b/src/server/web/views/base.pug index 94f5a8e0e2..20c3a64988 100644 --- a/src/server/web/views/base.pug +++ b/src/server/web/views/base.pug @@ -53,6 +53,11 @@ html document.documentElement.classList.add('f-' + fontSize); } + const wallpaper = localStorage.getItem('wallpaper'); + if (wallpaper) { + document.documentElement.style.backgroundImage = `url(${wallpaper})`; + } + body noscript: p | JavaScriptを有効にしてください -- cgit v1.2.3-freya