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

🎨

Browse source
This commit is contained in:
syuilo 2018-12-30 14:00:57 +09:00
parent 12286f4915
commit 4f76acd249
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
30 changed files with 67 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
locales/ja-JP.yml
View file

@ -878,6 +878,10 @@ desktop/views/components/settings.vue:
dark-mode: "ダークモード" dark-mode: "ダークモード"
use-shadow: "UIに影を使用" use-shadow: "UIに影を使用"
rounded-corners: "UIの角を丸める" rounded-corners: "UIの角を丸める"
line-width: "線の太さ"
line-width-thin: "細い"
line-width-normal: "普通"
line-width-thick: "太い"
circle-icons: "円形のアイコンを使用" circle-icons: "円形のアイコンを使用"
contrasted-acct: "ユーザー名にコントラストを付ける" contrasted-acct: "ユーザー名にコントラストを付ける"
post-form-on-timeline: "タイムライン上部に投稿フォームを表示する" post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"

4
src/client/app/common/views/components/mention.vue
View file

@ -54,13 +54,13 @@ export default Vue.extend({
user-select none user-select none
padding 0 4px padding 0 4px
background var(--mfmMention) background var(--mfmMention)
border solid 1px var(--mfmMention) border solid var(--lineWidth) var(--mfmMention)
border-radius 4px 0 0 4px border-radius 4px 0 0 4px
color var(--mfmMentionForeground) color var(--mfmMentionForeground)
& + .main & + .main
padding 0 4px padding 0 4px
border solid 1px var(--mfmMention) border solid var(--lineWidth) var(--mfmMention)
border-radius 0 4px 4px 0 border-radius 0 4px 4px 0
> .main > .main

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

@ -186,7 +186,7 @@ export default Vue.extend({
> div > div
margin 8px 0 margin 8px 0
height 1px height var(--lineWidth)
background var(--faceDivider) background var(--faceDivider)
</style> </style>

2
src/client/app/common/views/components/reaction-picker.vue
View file

@ -254,7 +254,7 @@ export default Vue.extend({
padding 8px 10px padding 8px 10px
font-size 14px font-size 14px
color var(--popupFg) color var(--popupFg)
border-bottom solid 1px var(--faceDivider) border-bottom solid var(--lineWidth) var(--faceDivider)
> div > div
padding 4px padding 4px

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

@ -342,7 +342,7 @@ export default Vue.extend({
margin-bottom 16px margin-bottom 16px
> details > details
border-top solid 1px var(--faceDivider) border-top solid var(--lineWidth) var(--faceDivider)
> summary > summary
padding 16px 0 padding 16px 0
@ -353,5 +353,5 @@ export default Vue.extend({
> .creator > .creator
> div > div
padding 16px 0 padding 16px 0
border-bottom solid 1px var(--faceDivider) border-bottom solid var(--lineWidth) var(--faceDivider)
</style> </style>

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

@ -41,7 +41,7 @@ export default Vue.extend({
> section > section
padding 20px 16px padding 20px 16px
border-top solid 1px var(--faceDivider) border-top solid var(--lineWidth) var(--faceDivider)
@media (min-width 500px) @media (min-width 500px)
padding 32px padding 32px

1
src/client/app/common/views/components/ui/radio.vue
View file

@ -29,7 +29,6 @@ export default Vue.extend({
required: false required: false
}, },
value: { value: {
type: String,
required: false required: false
}, },
disabled: { disabled: {

2
src/client/app/common/views/components/url-preview.vue
View file

@ -207,7 +207,7 @@ export default Vue.extend({
> a > a
display block display block
font-size 14px font-size 14px
border solid 1px var(--urlPreviewBorder) border solid var(--lineWidth) var(--urlPreviewBorder)
border-radius 4px border-radius 4px
overflow hidden overflow hidden

2
src/client/app/common/views/widgets/memo.vue
View file

@ -72,7 +72,7 @@ export default define({
color var(--inputText) color var(--inputText)
background var(--face) background var(--face)
border none border none
border-bottom solid 1px var(--faceDivider) border-bottom solid var(--lineWidth) var(--faceDivider)
border-radius 0 border-radius 0
> button > button

2
src/client/app/common/views/widgets/rss.vue
View file

@ -77,7 +77,7 @@ export default define({
display block display block
padding 4px 0 padding 4px 0
color var(--text) color var(--text)
border-bottom dashed 1px var(--faceDivider) border-bottom dashed var(--lineWidth) var(--faceDivider)
&:last-child &:last-child
border-bottom none border-bottom none

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

@ -151,7 +151,7 @@ export default Vue.extend({
font-weight bold font-weight bold
color var(--faceHeaderText) color var(--faceHeaderText)
background var(--faceHeader) background var(--faceHeader)
box-shadow 0 1px rgba(#000, 0.07) box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
> [data-icon] > [data-icon]
margin-right 4px margin-right 4px
@ -199,11 +199,11 @@ export default Vue.extend({
color var(--calendarSaturdayOrSunday) color var(--calendarSaturdayOrSunday)
&[data-today] &[data-today]
box-shadow 0 0 0 1px var(--calendarWeek) inset box-shadow 0 0 0 var(--lineWidth) var(--calendarWeek) inset
border-radius 6px border-radius 6px
&[data-is-donichi] &[data-is-donichi]
box-shadow 0 0 0 1px var(--calendarSaturdayOrSunday) inset box-shadow 0 0 0 var(--lineWidth) var(--calendarSaturdayOrSunday) inset
&.day &.day
cursor pointer cursor pointer

2
src/client/app/desktop/views/components/context-menu.menu.vue
View file

@ -46,7 +46,7 @@ export default Vue.extend({
&.divider &.divider
margin-top $padding margin-top $padding
padding-top $padding padding-top $padding
border-top solid 1px var(--faceDivider) border-top solid var(--lineWidth) var(--faceDivider)
&.nest &.nest
> p > p

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

@ -140,7 +140,7 @@ export default Vue.extend({
margin 0 margin 0
padding 0 padding 0
background var(--face) background var(--face)
border-bottom solid 1px var(--faceDivider) border-bottom solid var(--lineWidth) var(--faceDivider)
&.mini &.mini
font-size 13px font-size 13px
@ -261,7 +261,7 @@ export default Vue.extend({
> * > *
padding 16px padding 16px
border dashed 1px var(--quoteBorder) border dashed var(--lineWidth) var(--quoteBorder)
border-radius 8px border-radius 8px
> footer > footer

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

@ -209,7 +209,7 @@ export default Vue.extend({
text-align center text-align center
color var(--dateDividerFg) color var(--dateDividerFg)
background var(--dateDividerBg) background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider) border-bottom solid var(--lineWidth) var(--faceDivider)
span span
margin 0 16px margin 0 16px
@ -233,7 +233,7 @@ export default Vue.extend({
text-align center text-align center
color #ccc color #ccc
background var(--face) background var(--face)
border-top solid 1px var(--faceDivider) border-top solid var(--lineWidth) var(--faceDivider)
border-bottom-left-radius 6px border-bottom-left-radius 6px
border-bottom-right-radius 6px border-bottom-right-radius 6px

6
src/client/app/desktop/views/components/notifications.vue
View file

@ -248,7 +248,7 @@ export default Vue.extend({
padding 16px padding 16px
overflow-wrap break-word overflow-wrap break-word
font-size 12px font-size 12px
border-bottom solid 1px var(--faceDivider) border-bottom solid var(--lineWidth) var(--faceDivider)
&:last-child &:last-child
border-bottom none border-bottom none
@ -332,7 +332,7 @@ export default Vue.extend({
font-size 0.8em font-size 0.8em
color var(--dateDividerFg) color var(--dateDividerFg)
background var(--dateDividerBg) background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider) border-bottom solid var(--lineWidth) var(--faceDivider)
span span
margin 0 16px margin 0 16px
@ -345,7 +345,7 @@ export default Vue.extend({
width 100% width 100%
padding 16px padding 16px
color var(--text) color var(--text)
border-top solid 1px rgba(#000, 0.05) border-top solid var(--lineWidth) rgba(#000, 0.05)
&:hover &:hover
background rgba(#000, 0.025) background rgba(#000, 0.025)

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

@ -97,6 +97,12 @@
<ui-switch v-model="useShadow">{{ $t('use-shadow') }}</ui-switch> <ui-switch v-model="useShadow">{{ $t('use-shadow') }}</ui-switch>
<ui-switch v-model="roundedCorners">{{ $t('rounded-corners') }}</ui-switch> <ui-switch v-model="roundedCorners">{{ $t('rounded-corners') }}</ui-switch>
<ui-switch v-model="circleIcons">{{ $t('circle-icons') }}</ui-switch> <ui-switch v-model="circleIcons">{{ $t('circle-icons') }}</ui-switch>
<section>
<header>{{ $t('line-width') }}</header>
<ui-radio v-model="lineWidth" :value="0.5">{{ $t('line-width-thin') }}</ui-radio>
<ui-radio v-model="lineWidth" :value="1">{{ $t('line-width-normal') }}</ui-radio>
<ui-radio v-model="lineWidth" :value="2">{{ $t('line-width-thick') }}</ui-radio>
</section>
<ui-switch v-model="reduceMotion">{{ $t('@.reduce-motion') }}</ui-switch> <ui-switch v-model="reduceMotion">{{ $t('@.reduce-motion') }}</ui-switch>
<ui-switch v-model="contrastedAcct">{{ $t('contrasted-acct') }}</ui-switch> <ui-switch v-model="contrastedAcct">{{ $t('contrasted-acct') }}</ui-switch>
<ui-switch v-model="showFullAcct">{{ $t('@.show-full-acct') }}</ui-switch> <ui-switch v-model="showFullAcct">{{ $t('@.show-full-acct') }}</ui-switch>
@ -405,6 +411,11 @@ export default Vue.extend({
set(value) { this.$store.dispatch('settings/set', { key: 'roundedCorners', value }); } set(value) { this.$store.dispatch('settings/set', { key: 'roundedCorners', value }); }
}, },
lineWidth: {
get() { return this.$store.state.settings.lineWidth; },
set(value) { this.$store.dispatch('settings/set', { key: 'lineWidth', value }); }
},
fetchOnScroll: { fetchOnScroll: {
get() { return this.$store.state.settings.fetchOnScroll; }, get() { return this.$store.state.settings.fetchOnScroll; },
set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); } set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }

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

@ -173,7 +173,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-timeline-core .mk-timeline-core
> .mk-friends-maker > .mk-friends-maker
border-bottom solid 1px #eee border-bottom solid var(--lineWidth) #eee
</style> </style>

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

@ -187,7 +187,7 @@ export default Vue.extend({
padding 0 8px padding 0 8px
z-index 10 z-index 10
background var(--faceHeader) background var(--faceHeader)
box-shadow 0 1px var(--desktopTimelineHeaderShadow) box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
> .buttons > .buttons
position absolute position absolute

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

@ -227,7 +227,7 @@ export default Vue.extend({
font-size 0.8em font-size 0.8em
background $bgcolor background $bgcolor
border-radius 4px border-radius 4px
box-shadow 0 1px 4px rgba(#000, 0.25) box-shadow 0 var(--lineWidth) 4px rgba(#000, 0.25)
&:before &:before
content "" content ""
@ -261,7 +261,7 @@ export default Vue.extend({
& + ul & + ul
padding-top 10px padding-top 10px
border-top solid 1px var(--faceDivider) border-top solid var(--lineWidth) var(--faceDivider)
> li > li
display block display block

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

@ -46,7 +46,7 @@ export default Vue.extend({
font-size 0.9em font-size 0.9em
font-weight bold font-weight bold
color var(--faceHeaderText) color var(--faceHeaderText)
box-shadow 0 1px rgba(#000, 0.07) box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
> [data-icon] > [data-icon]
margin-right 6px margin-right 6px

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

@ -373,7 +373,7 @@ export default Vue.extend({
font-size 14px font-size 14px
color var(--faceHeaderText) color var(--faceHeaderText)
background var(--faceHeader) background var(--faceHeader)
box-shadow 0 1px rgba(#000, 0.15) box-shadow 0 var(--lineWidth) rgba(#000, 0.15)
cursor pointer cursor pointer
&, * &, *

4
src/client/app/desktop/views/pages/deck/deck.notes.vue
View file

@ -214,7 +214,7 @@ export default Vue.extend({
text-align center text-align center
color var(--dateDividerFg) color var(--dateDividerFg)
background var(--dateDividerBg) background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider) border-bottom solid var(--lineWidth) var(--faceDivider)
span span
margin 0 16px margin 0 16px
@ -231,7 +231,7 @@ export default Vue.extend({
text-align center text-align center
color #ccc color #ccc
background var(--face) background var(--face)
border-top solid 1px var(--faceDivider) border-top solid var(--lineWidth) var(--faceDivider)
border-bottom-left-radius 6px border-bottom-left-radius 6px
border-bottom-right-radius 6px border-bottom-right-radius 6px

6
src/client/app/desktop/views/pages/deck/deck.notifications.vue
View file

@ -177,7 +177,7 @@ export default Vue.extend({
> .notifications > .notifications
> .notification:not(:last-child) > .notification:not(:last-child)
border-bottom solid 1px var(--faceDivider) border-bottom solid var(--lineWidth) var(--faceDivider)
> .date > .date
display block display block
@ -187,7 +187,7 @@ export default Vue.extend({
font-size 12px font-size 12px
color var(--dateDividerFg) color var(--dateDividerFg)
background var(--dateDividerBg) background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider) border-bottom solid var(--lineWidth) var(--faceDivider)
span span
margin 0 16px margin 0 16px
@ -200,7 +200,7 @@ export default Vue.extend({
width 100% width 100%
padding 16px padding 16px
color #555 color #555
border-top solid 1px rgba(#000, 0.05) border-top solid var(--lineWidth) rgba(#000, 0.05)
&:hover &:hover
background rgba(#000, 0.025) background rgba(#000, 0.025)

2
src/client/app/desktop/views/pages/deck/deck.user-column.vue
View file

@ -462,7 +462,7 @@ export default Vue.extend({
display grid display grid
grid-template-columns 2fr 2fr 2fr 1fr grid-template-columns 2fr 2fr 2fr 1fr
margin-top 8px margin-top 8px
border-top solid 1px var(--faceDivider) border-top solid var(--lineWidth) var(--faceDivider)
> div > div
padding 8px 8px 0 8px padding 8px 8px 0 8px

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

@ -413,6 +413,15 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS]) => void,
}); });
//#endregion //#endregion
//#region line width
document.documentElement.style.setProperty('--lineWidth', `${os.store.state.settings.lineWidth}px`);
os.store.watch(s => {
return s.settings.lineWidth;
}, v => {
document.documentElement.style.setProperty('--lineWidth', `${os.store.state.settings.lineWidth}px`);
});
//#endregion
// Navigation hook // Navigation hook
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
next(os.store.state.navHook && os.store.state.navHook(to) ? false : undefined); next(os.store.state.navHook && os.store.state.navHook(to) ? false : undefined);

4
src/client/app/mobile/views/components/note.vue
View file

@ -98,7 +98,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.note .note
font-size 12px font-size 12px
border-bottom solid 1px var(--faceDivider) border-bottom solid var(--lineWidth) var(--faceDivider)
&:focus &:focus
z-index 1 z-index 1
@ -231,7 +231,7 @@ export default Vue.extend({
> * > *
padding 16px padding 16px
border dashed 1px var(--quoteBorder) border dashed var(--lineWidth) var(--quoteBorder)
border-radius 8px border-radius 8px
> .app > .app

4
src/client/app/mobile/views/components/notes.vue
View file

@ -210,7 +210,7 @@ export default Vue.extend({
font-size 0.9em font-size 0.9em
color var(--dateDividerFg) color var(--dateDividerFg)
background var(--dateDividerBg) background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider) border-bottom solid var(--lineWidth) var(--faceDivider)
span span
margin 0 16px margin 0 16px
@ -240,7 +240,7 @@ export default Vue.extend({
> footer > footer
text-align center text-align center
border-top solid 1px var(--faceDivider) border-top solid var(--lineWidth) var(--faceDivider)
&:empty &:empty
display none display none

6
src/client/app/mobile/views/components/notifications.vue
View file

@ -152,7 +152,7 @@ export default Vue.extend({
> .notifications > .notifications
> .mk-notification:not(:last-child) > .mk-notification:not(:last-child)
border-bottom solid 1px var(--faceDivider) border-bottom solid var(--lineWidth) var(--faceDivider)
> .date > .date
display block display block
@ -162,7 +162,7 @@ export default Vue.extend({
font-size 0.8em font-size 0.8em
color var(--dateDividerFg) color var(--dateDividerFg)
background var(--dateDividerBg) background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider) border-bottom solid var(--lineWidth) var(--faceDivider)
span span
margin 0 16px margin 0 16px
@ -175,7 +175,7 @@ export default Vue.extend({
width 100% width 100%
padding 16px padding 16px
color var(--text) color var(--text)
border-top solid 1px rgba(#000, 0.05) border-top solid var(--lineWidth) rgba(#000, 0.05)
> [data-icon] > [data-icon]
margin-right 4px margin-right 4px

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

@ -21,6 +21,7 @@ const defaultSettings = {
showClockOnHeader: true, showClockOnHeader: true,
useShadow: true, useShadow: true,
roundedCorners: false, roundedCorners: false,
lineWidth: 1,
circleIcons: true, circleIcons: true,
contrastedAcct: true, contrastedAcct: true,
showFullAcct: false, showFullAcct: false,

4
src/client/app/theme.ts
View file

@ -99,12 +99,12 @@ function compile(theme: Theme): { [key: string]: string } {
props['primaryAlpha0' + i] = genValue(color); props['primaryAlpha0' + i] = genValue(color);
} }
for (let i = 1; i < 100; i++) { for (let i = 5; i < 100; i += 5) {
const color = primary.clone().lighten(i); const color = primary.clone().lighten(i);
props['primaryLighten' + i] = genValue(color); props['primaryLighten' + i] = genValue(color);
} }
for (let i = 1; i < 100; i++) { for (let i = 5; i < 100; i += 5) {
const color = primary.clone().darken(i); const color = primary.clone().darken(i);
props['primaryDarken' + i] = genValue(color); props['primaryDarken' + i] = genValue(color);
} }