Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2018-09-22 20:39:12 +09:00
parent 93e5e4afc0
commit 3e5330a92b
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
17 changed files with 72 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
locales/ja-JP.yml
View file

@ -779,6 +779,8 @@ desktop/views/components/settings.vue:
choose-wallpaper: "壁紙を選択"
delete-wallpaper: "壁紙を削除"
dark-mode: "ダークモード"
use-shadow: "UIに影を使用"
rounded-corners: "UIの角を丸める"
circle-icons: "円形のアイコンを使用"
contrasted-acct: "ユーザー名にコントラストを付ける"
gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"

3
src/client/app/desktop/views/components/calendar.vue
View file

@ -133,7 +133,8 @@ export default Vue.extend({
root(isDark)
color isDark ? #c5ced6 : #777
background isDark ? #282C37 : #fff
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
box-shadow var(--shadow)
border-radius var(--round)
overflow hidden
&[data-melt]

3
src/client/app/desktop/views/components/note-detail.vue
View file

@ -231,7 +231,8 @@ root(isDark)
overflow hidden
text-align left
background isDark ? #282C37 : #fff
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
box-shadow var(--shadow)
border-radius var(--round)
> .read-more
display block

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

@ -60,6 +60,8 @@
<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
<mk-switch v-model="useShadow" text="%i18n:@use-shadow%"/>
<mk-switch v-model="roundedCorners" text="%i18n:@rounded-corners%"/>
<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
<mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/>
<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
@ -316,6 +318,16 @@ export default Vue.extend({
set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
},
useShadow: {
get() { return this.$store.state.settings.useShadow; },
set(value) { this.$store.dispatch('settings/set', { key: 'useShadow', value }); }
},
roundedCorners: {
get() { return this.$store.state.settings.roundedCorners; },
set(value) { this.$store.dispatch('settings/set', { key: 'roundedCorners', value }); }
},
fetchOnScroll: {
get() { return this.$store.state.settings.fetchOnScroll; },
set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }

4
src/client/app/desktop/views/components/timeline.vue
View file

@ -179,7 +179,9 @@ export default Vue.extend({
root(isDark)
background isDark ? #282C37 : #fff
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
box-shadow var(--shadow)
border-radius var(--round)
overflow hidden
> header
padding 0 8px

11
src/client/app/desktop/views/components/ui.header.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="header">
<div class="header" :style="style">
<p class="warn" v-if="env != 'production'">%i18n:common.do-not-use-in-production%</p>
<mk-special-message/>
<div class="main" ref="main">
@ -54,6 +54,14 @@ export default Vue.extend({
};
},
computed: {
style(): any {
return {
'box-shadow': this.$store.state.settings.useShadow ? '0 0px 8px rgba(0, 0, 0, 0.2)' : 'none'
};
}
},
mounted() {
this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
@ -124,7 +132,6 @@ root(isDark)
top 0
z-index 1000
width 100%
box-shadow 0 0px 8px rgba(#000, 0.2)
> .warn
display block

3
src/client/app/desktop/views/components/widget-container.vue
View file

@ -36,7 +36,8 @@ export default Vue.extend({
<style lang="stylus" scoped>
root(isDark)
background isDark ? #282C37 : #fff
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
box-shadow var(--shadow)
border-radius var(--round)
overflow hidden
&.naked

3
src/client/app/desktop/views/pages/user/user.followers-you-know.vue
View file

@ -38,7 +38,8 @@ export default Vue.extend({
<style lang="stylus" scoped>
root(isDark)
background isDark ? #282C37 : #fff
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
box-shadow var(--shadow)
border-radius var(--round)
> .title
z-index 1

3
src/client/app/desktop/views/pages/user/user.friends.vue
View file

@ -42,7 +42,8 @@ export default Vue.extend({
<style lang="stylus" scoped>
root(isDark)
background isDark ? #282C37 : #fff
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
box-shadow var(--shadow)
border-radius var(--round)
overflow hidden
> .title

3
src/client/app/desktop/views/pages/user/user.header.vue
View file

@ -104,7 +104,8 @@ export default Vue.extend({
root(isDark)
background isDark ? #282C37 : #fff
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
box-shadow var(--shadow)
border-radius var(--round)
overflow hidden
&[data-is-dark-background]

3
src/client/app/desktop/views/pages/user/user.photos.vue
View file

@ -41,7 +41,8 @@ export default Vue.extend({
<style lang="stylus" scoped>
root(isDark)
background isDark ? #282C37 : #fff
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
box-shadow var(--shadow)
border-radius var(--round)
overflow hidden
> .title

3
src/client/app/desktop/views/pages/user/user.profile.vue
View file

@ -87,7 +87,8 @@ export default Vue.extend({
<style lang="stylus" scoped>
root(isDark)
background isDark ? #282C37 : #fff
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
box-shadow var(--shadow)
border-radius var(--round)
> *:first-child
border-top none !important

3
src/client/app/desktop/views/pages/user/user.timeline.vue
View file

@ -116,12 +116,13 @@ export default Vue.extend({
root(isDark)
background isDark ? #282C37 : #fff
border-radius var(--round)
overflow hidden
> header
padding 0 8px
z-index 10
background isDark ? #313543 : #fff
border-radius 6px 6px 0 0
box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
> span

10
src/client/app/desktop/views/pages/user/user.vue
View file

@ -88,17 +88,16 @@ root(isDark)
margin-bottom 16px
padding 14px 16px
font-size 14px
border-radius 6px
box-shadow var(--shadow)
border-radius var(--round)
&.is-suspended
color isDark ? #ffb4b4 : #570808
background isDark ? #611d1d : #ffdbdb
border solid 1px isDark ? #d64a4a : #e09696
&.is-remote
color isDark ? #ffbd3e : #573c08
background isDark ? #42321c : #fff0db
border solid 1px isDark ? #90733c : #dcbb7b
> a
font-weight bold
@ -118,7 +117,7 @@ root(isDark)
margin-right 16px
> .timeline
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
box-shadow var(--shadow)
> .side
width 275px
@ -137,7 +136,8 @@ root(isDark)
font-size 12px
color #aaa
background isDark ? #21242f : #fff
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
box-shadow var(--shadow)
border-radius var(--round)
a
color #999

2
src/client/app/desktop/views/pages/welcome.vue
View file

@ -355,7 +355,7 @@ root(isDark)
.block
color isDark ? #fff : #444
background isDark ? #282C37 : #fff
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
box-shadow var(--shadow)
//border-radius 8px
overflow auto

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

@ -125,6 +125,26 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
});
//#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);
os.store.watch(s => {
return s.settings.useShadow;
}, v => {
document.documentElement.style.setProperty('--shadow', v ? shadow : 'none');
});
//#endregion
//#region rounded corners
const round = '6px';
if (os.store.state.settings.roundedCorners) document.documentElement.style.setProperty('--round', round);
os.store.watch(s => {
return s.settings.roundedCorners;
}, v => {
document.documentElement.style.setProperty('--round', v ? round : '0');
});
//#endregion
Vue.mixin({
data() {
return {

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

@ -16,6 +16,8 @@ const defaultSettings = {
showPostFormOnTopOfTl: false,
suggestRecentHashtags: true,
showClockOnHeader: true,
useShadow: true,
roundedCorners: false,
circleIcons: true,
contrastedAcct: true,
showFullAcct: false,