graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-23 13:23:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-09-29 00:01:11 +09:00
parent 1fa4d0d3f8
commit 6a82e94c54
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
15 changed files with 287 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
locales/ja-JP.yml
View file

@ -285,6 +285,28 @@ common/views/components/media-banner.vue:
sensitive: "閲覧注意"
click-to-show: "クリックして表示"
common/views/components/theme.vue:
light-theme: "非ダークモード時に使用するテーマ"
dark-theme: "ダークモード時に使用するテーマ"
install-a-theme: "テーマのインストール"
theme-code: "テーマコード"
install: "インストール"
create-a-theme: "テーマの作成"
save-created-theme: "テーマを保存"
primary-color: "プライマリ カラー"
secondary-color: "セカンダリ カラー"
text-color: "文字色"
base-theme: "ベーステーマ"
base-theme-light: "Light"
base-theme-dark: "Dark"
theme-name: "テーマ名"
preview-created-theme: "プレビュー"
invalid-theme: "テーマが正しくありません。"
already-installed: "既にそのテーマはインストールされています。"
saved: "保存しました"
installed-themes: "インストールされたテーマ"
select-theme: "テーマを選択してください"
common/views/components/cw-button.vue:
hide: "隠す"
show: "もっと見る"
@ -762,6 +784,7 @@ desktop/views/components/settings.vue:
2fa: "二段階認証"
other: "その他"
license: "ライセンス"
theme: "テーマ"
behaviour: "動作"
fetch-on-scroll: "スクロールで自動読み込み"
@ -1417,6 +1440,7 @@ mobile/views/pages/settings.vue:
notification-position: "通知の表示"
notification-position-bottom: "下"
notification-position-top: "上"
theme: "テーマ"
behavior: "動作"
fetch-on-scroll: "スクロールで自動読み込み"
note-visibility: "投稿の公開範囲"

1
package.json
View file

@ -208,6 +208,7 @@
"v-animate-css": "0.0.2",
"vue": "2.5.17",
"vue-chartjs": "3.4.0",
"vue-color": "2.6.0",
"vue-cropperjs": "2.2.2",
"vue-js-modal": "1.3.26",
"vue-json-tree-view": "2.1.4",

12
src/client/app/app.vue
View file

@ -14,8 +14,7 @@ export default Vue.extend({
keymap(): any {
return {
'h|slash': this.help,
'd': this.dark,
'x': this.test
'd': this.dark
};
}
},
@ -26,11 +25,10 @@ export default Vue.extend({
},
dark() {
applyTheme(darkTheme);
},
test() {
applyTheme(halloweenTheme);
this.$store.commit('device/set', {
key: 'darkmode',
value: !this.$store.state.device.darkmode
});
}
}
});

2
src/client/app/common/views/components/avatar.vue
View file

@ -59,7 +59,9 @@ export default Vue.extend({
}
},
mounted() {
if (this.user.avatarColor) {
this.$el.style.color = `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`;
}
},
methods: {
onClick(e) {

2
src/client/app/common/views/components/index.ts
View file

@ -1,5 +1,6 @@
import Vue from 'vue';
import theme from './theme.vue';
import instance from './instance.vue';
import cwButton from './cw-button.vue';
import tagCloud from './tag-cloud.vue';
@ -43,6 +44,7 @@ import uiSelect from './ui/select.vue';
import formButton from './ui/form/button.vue';
import formRadio from './ui/form/radio.vue';
Vue.component('mk-theme', theme);
Vue.component('mk-instance', instance);
Vue.component('mk-cw-button', cwButton);
Vue.component('mk-tag-cloud', tagCloud);

179
src/client/app/common/views/components/theme.vue Normal file
View file

@ -0,0 +1,179 @@
<template>
<div class="nicnklzforebnpfgasiypmpdaaglujqm">
<label>
<span>%i18n:@light-theme%</span>
<ui-select v-model="light" placeholder="%i18n:@light-theme%">
<option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
</ui-select>
</label>
<label>
<span>%i18n:@dark-theme%</span>
<ui-select v-model="dark" placeholder="%i18n:@dark-theme%">
<option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
</ui-select>
</label>
<details class="creator">
<summary>%i18n:@create-a-theme%</summary>
<div>
<span>%i18n:@base-theme%:</span>
<ui-radio v-model="myThemeBase" value="light">%i18n:@base-theme-light%</ui-radio>
<ui-radio v-model="myThemeBase" value="dark">%i18n:@base-theme-dark%</ui-radio>
</div>
<div>
<ui-input v-model="myThemeName">
<span>%i18n:@theme-name%</span>
</ui-input>
</div>
<div>
<div style="padding-bottom:8px;">%i18n:@primary-color%:</div>
<color-picker v-model="myThemePrimary"/>
</div>
<div>
<div style="padding-bottom:8px;">%i18n:@secondary-color%:</div>
<color-picker v-model="myThemeSecondary"/>
</div>
<div>
<div style="padding-bottom:8px;">%i18n:@text-color%:</div>
<color-picker v-model="myThemeText"/>
</div>
<ui-button @click="preview()">%i18n:@preview-created-theme%</ui-button>
<ui-button primary @click="gen()">%i18n:@save-created-theme%</ui-button>
</details>
<details>
<summary>%i18n:@install-a-theme%</summary>
<ui-textarea v-model="installThemeCode">
<span>%i18n:@theme-code%</span>
</ui-textarea>
<ui-button @click="install()">%i18n:@install%</ui-button>
</details>
<details>
<summary>%i18n:@installed-themes%</summary>
<ui-select v-model="selectedInstalledTheme" placeholder="%i18n:@select-theme%">
<option v-for="x in installedThemes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
</ui-select>
<ui-textarea readonly :value="selectedInstalledThemeCode">
<span>%i18n:@theme-code%</span>
</ui-textarea>
</details>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { apiUrl, docsUrl } from '../../../config';
import { lightTheme, darkTheme, builtinThemes, applyTheme } from '../../../theme';
import { Chrome } from 'vue-color';
import * as uuid from 'uuid';
import * as tinycolor from 'tinycolor2';
export default Vue.extend({
components: {
ColorPicker: Chrome
},
data() {
return {
installThemeCode: null,
selectedInstalledTheme: null,
myThemeBase: 'light',
myThemeName: '',
myThemePrimary: lightTheme.meta.vars.primary,
myThemeSecondary: lightTheme.meta.vars.secondary,
myThemeText: lightTheme.meta.vars.text
};
},
computed: {
themes(): any {
return this.$store.state.device.themes.concat(builtinThemes);
},
installedThemes(): any {
return this.$store.state.device.themes;
},
light: {
get() { return this.$store.state.device.lightTheme; },
set(value) { this.$store.commit('device/set', { key: 'lightTheme', value }); }
},
dark: {
get() { return this.$store.state.device.darkTheme; },
set(value) { this.$store.commit('device/set', { key: 'darkTheme', value }); }
},
selectedInstalledThemeCode() {
if (this.selectedInstalledTheme == null) return null;
return JSON.stringify(this.installedThemes.find(x => x.meta.id == this.selectedInstalledTheme));
},
myTheme(): any {
return {
meta: {
name: this.myThemeName,
author: this.$store.state.i.name,
base: this.myThemeBase,
vars: {
primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(),
secondary: tinycolor(typeof this.myThemeSecondary == 'string' ? this.myThemeSecondary : this.myThemeSecondary.rgba).toRgbString(),
text: tinycolor(typeof this.myThemeText == 'string' ? this.myThemeText : this.myThemeText.rgba).toRgbString()
}
}
};
}
},
watch: {
myThemeBase(v) {
const theme = v == 'light' ? lightTheme : darkTheme;
this.myThemePrimary = theme.meta.vars.primary;
this.myThemeSecondary = theme.meta.vars.secondary;
this.myThemeText = theme.meta.vars.text;
}
},
methods: {
install() {
const theme = JSON.parse(this.installThemeCode);
if (theme.meta == null || theme.meta.id == null) {
alert('%i18n:@invalid-theme%');
return;
}
if (this.$store.state.device.themes.some(t => t.meta.id == theme.meta.id)) {
alert('%i18n:@already-installed%');
return;
}
const themes = this.$store.state.device.themes.concat(theme);
this.$store.commit('device/set', {
key: 'themes', value: themes
});
},
preview() {
applyTheme(this.myTheme, false);
},
gen() {
const theme = this.myTheme;
theme.meta.id = uuid();
const themes = this.$store.state.device.themes.concat(theme);
this.$store.commit('device/set', {
key: 'themes', value: themes
});
alert('%i18n:@saved%');
}
}
});
</script>
<style lang="stylus" scoped>
.nicnklzforebnpfgasiypmpdaaglujqm
> .creator
> div
padding 16px 0
border-bottom solid 1px var(--faceDivider)
</style>

12
src/client/app/common/views/components/ui/button.vue
View file

@ -27,14 +27,6 @@ export default Vue.extend({
return {
styl: 'fill'
};
},
inject: {
isCardChild: { default: false }
},
created() {
if (this.isCardChild) {
this.styl = 'line';
}
}
});
</script>
@ -43,6 +35,7 @@ export default Vue.extend({
.dmtdnykelhudezerjlfpbhgovrgnqqgr
display block
width 100%
min-height 40px
margin 0
padding 0
font-weight normal
@ -52,6 +45,9 @@ export default Vue.extend({
outline none
box-shadow none
&:not(.inline) + .dmtdnykelhudezerjlfpbhgovrgnqqgr
margin-top 16px
&.inline
display inline-block
width auto

5
src/client/app/desktop/views/components/settings.vue
View file

@ -19,6 +19,11 @@
<x-profile/>
</section>
<section class="web" v-show="page == 'web'">
<h1>%i18n:@theme%</h1>
<mk-theme/>
</section>
<section class="web" v-show="page == 'web'">
<h1>%i18n:@behaviour%</h1>
<ui-switch v-model="fetchOnScroll">

35
src/client/app/init.ts
View file

@ -14,11 +14,11 @@ import App from './app.vue';
import checkForUpdate from './common/scripts/check-for-update';
import MiOS, { API } from './mios';
import { version, codename, lang } from './config';
import applyTheme from './common/scripts/theme';
const defaultTheme = require('../theme/light.json');
import { builtinThemes, applyTheme } from './theme';
const lightTheme = require('../theme/light.json');
if (localStorage.getItem('theme') == null) {
applyTheme(defaultTheme);
applyTheme(lightTheme);
}
Vue.use(Vuex);
@ -92,6 +92,35 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
const launch = (router: VueRouter, api?: (os: MiOS) => API) => {
os.apis = api ? api(os) : null;
//#region theme
os.store.watch(s => {
return s.device.darkmode;
}, v => {
const themes = os.store.state.device.themes.concat(builtinThemes);
const dark = themes.find(t => t.meta.id == os.store.state.device.darkTheme);
const light = themes.find(t => t.meta.id == os.store.state.device.lightTheme);
applyTheme(v ? dark : light);
});
os.store.watch(s => {
return s.device.lightTheme;
}, v => {
const themes = os.store.state.device.themes.concat(builtinThemes);
const theme = themes.find(t => t.meta.id == v);
if (!os.store.state.device.darkmode) {
applyTheme(theme);
}
});
os.store.watch(s => {
return s.device.darkTheme;
}, v => {
const themes = os.store.state.device.themes.concat(builtinThemes);
const theme = themes.find(t => t.meta.id == v);
if (os.store.state.device.darkmode) {
applyTheme(theme);
}
});
//#endregion
//#region shadow
const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadow', shadow);

7
src/client/app/mobile/views/pages/settings.vue
View file

@ -23,6 +23,13 @@
<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
</section>
<section>
<header>%i18n:@theme%</header>
<div>
<mk-theme/>
</div>
</section>
<section>
<header>%i18n:@timeline%</header>
<div>

3
src/client/app/store.ts
View file

@ -44,6 +44,9 @@ const defaultDeviceSettings = {
apiViaStream: true,
autoPopout: false,
darkmode: false,
darkTheme: 'dark',
lightTheme: 'light',
themes: [],
enableSounds: true,
soundVolume: 0.5,
lang: null,

25
src/client/app/common/scripts/theme.ts → src/client/app/theme.ts
View file

@ -1,22 +1,21 @@
import * as tinycolor from 'tinycolor2';
const lightTheme = require('../../../theme/light');
const darkTheme = require('../../../theme/dark');
type Theme = {
meta: {
id: string;
name: string;
inherit: string;
author: string;
base?: string;
vars: any;
};
} & {
[key: string]: string;
};
export default function(theme: Theme) {
if (theme.meta.inherit) {
const inherit = [lightTheme, darkTheme].find(x => x.meta.id == theme.meta.inherit);
theme = Object.assign({}, inherit, theme);
export function applyTheme(theme: Theme, persisted = true) {
if (theme.meta.base) {
const base = [lightTheme, darkTheme].find(x => x.meta.id == theme.meta.base);
theme = Object.assign({}, base, theme);
}
const props = compile(theme);
@ -26,8 +25,10 @@ export default function(theme: Theme) {
document.documentElement.style.setProperty(`--${k}`, v.toString());
});
if (persisted) {
localStorage.setItem('theme', JSON.stringify(props));
}
}
function compile(theme: Theme): { [key: string]: string } {
function getColor(code: string): tinycolor.Instance {
@ -87,3 +88,13 @@ function compile(theme: Theme): { [key: string]: string } {
function genValue(c: tinycolor.Instance): string {
return c.toRgbString();
}
export const lightTheme = require('../theme/light.json');
export const darkTheme = require('../theme/dark.json');
export const halloweenTheme = require('../theme/halloween.json');
export const builtinThemes = [
lightTheme,
darkTheme,
halloweenTheme
];

2
src/client/theme/dark.json
View file

@ -1,6 +1,6 @@
{
"meta": {
"id": "9978f7f9-5616-44fd-a704-cc5985efdd63",
"id": "dark",
"name": "Dark",
"author": "syuilo",
"vars": {

3
src/client/theme/halloween.json
View file

@ -3,10 +3,9 @@
"id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
"name": "Halloween",
"author": "syuilo",
"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63",
"base": "dark",
"vars": {
"primary": "#d67036",
"primaryForeground": "#fff",
"secondary": "#1f1d30",
"text": "#b1bee3"
}

2
src/client/theme/light.json
View file

@ -1,6 +1,6 @@
{
"meta": {
"id": "406cfea3-a4e7-486c-9057-30ede1353c3f",
"id": "light",
"name": "Light",
"author": "syuilo",
"vars": {