mirror/iceshrimp
1
0
Fork 0
mirror of https://iceshrimp.dev/iceshrimp/iceshrimp synced 2024-12-01 00:08:10 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

🎨

Browse Source
This commit is contained in:
syuilo 2018-12-30 14:00:57 +09:00
parent fa6f8ca303
commit 45a265e457
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: "ダークモード"
use-shadow: "UIに影を使用"
rounded-corners: "UIの角を丸める"
line-width: "線の太さ"
line-width-thin: "細い"
line-width-normal: "普通"
line-width-thick: "太い"
circle-icons: "円形のアイコンを使用"
contrasted-acct: "ユーザー名にコントラストを付ける"
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
padding 0 4px
background var(--mfmMention)
border solid 1px var(--mfmMention)
border solid var(--lineWidth) var(--mfmMention)
border-radius 4px 0 0 4px
color var(--mfmMentionForeground)
& + .main
padding 0 4px
border solid 1px var(--mfmMention)
border solid var(--lineWidth) var(--mfmMention)
border-radius 0 4px 4px 0
> .main

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -77,7 +77,7 @@ export default define({
display block
padding 4px 0
color var(--text)
border-bottom dashed 1px var(--faceDivider)
border-bottom dashed var(--lineWidth) var(--faceDivider)
&:last-child
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
color var(--faceHeaderText)
background var(--faceHeader)
box-shadow 0 1px rgba(#000, 0.07)
box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
> [data-icon]
margin-right 4px
@ -199,11 +199,11 @@ export default Vue.extend({
color var(--calendarSaturdayOrSunday)
&[data-today]
box-shadow 0 0 0 1px var(--calendarWeek) inset
box-shadow 0 0 0 var(--lineWidth) var(--calendarWeek) inset
border-radius 6px
&[data-is-donichi]
box-shadow 0 0 0 1px var(--calendarSaturdayOrSunday) inset
box-shadow 0 0 0 var(--lineWidth) var(--calendarSaturdayOrSunday) inset
&.day
cursor pointer

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

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

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

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

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

@ -209,7 +209,7 @@ export default Vue.extend({
text-align center
color var(--dateDividerFg)
background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider)
border-bottom solid var(--lineWidth) var(--faceDivider)
span
margin 0 16px
@ -233,7 +233,7 @@ export default Vue.extend({
text-align center
color #ccc
background var(--face)
border-top solid 1px var(--faceDivider)
border-top solid var(--lineWidth) var(--faceDivider)
border-bottom-left-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
overflow-wrap break-word
font-size 12px
border-bottom solid 1px var(--faceDivider)
border-bottom solid var(--lineWidth) var(--faceDivider)
&:last-child
border-bottom none
@ -332,7 +332,7 @@ export default Vue.extend({
font-size 0.8em
color var(--dateDividerFg)
background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider)
border-bottom solid var(--lineWidth) var(--faceDivider)
span
margin 0 16px
@ -345,7 +345,7 @@ export default Vue.extend({
width 100%
padding 16px
color var(--text)
border-top solid 1px rgba(#000, 0.05)
border-top solid var(--lineWidth) rgba(#000, 0.05)
&:hover
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="roundedCorners">{{ $t('rounded-corners') }}</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="contrastedAcct">{{ $t('contrasted-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 }); }
},
lineWidth: {
get() { return this.$store.state.settings.lineWidth; },
set(value) { this.$store.dispatch('settings/set', { key: 'lineWidth', value }); }
},
fetchOnScroll: {
get() { return this.$store.state.settings.fetchOnScroll; },
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>
.mk-timeline-core
> .mk-friends-maker
border-bottom solid 1px #eee
border-bottom solid var(--lineWidth) #eee
</style>

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

@ -187,7 +187,7 @@ export default Vue.extend({
padding 0 8px
z-index 10
background var(--faceHeader)
box-shadow 0 1px var(--desktopTimelineHeaderShadow)
box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
> .buttons
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
background $bgcolor
border-radius 4px
box-shadow 0 1px 4px rgba(#000, 0.25)
box-shadow 0 var(--lineWidth) 4px rgba(#000, 0.25)
&:before
content ""
@ -261,7 +261,7 @@ export default Vue.extend({
& + ul
padding-top 10px
border-top solid 1px var(--faceDivider)
border-top solid var(--lineWidth) var(--faceDivider)
> li
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-weight bold
color var(--faceHeaderText)
box-shadow 0 1px rgba(#000, 0.07)
box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
> [data-icon]
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
color var(--faceHeaderText)
background var(--faceHeader)
box-shadow 0 1px rgba(#000, 0.15)
box-shadow 0 var(--lineWidth) rgba(#000, 0.15)
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
color var(--dateDividerFg)
background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider)
border-bottom solid var(--lineWidth) var(--faceDivider)
span
margin 0 16px
@ -231,7 +231,7 @@ export default Vue.extend({
text-align center
color #ccc
background var(--face)
border-top solid 1px var(--faceDivider)
border-top solid var(--lineWidth) var(--faceDivider)
border-bottom-left-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
> .notification:not(:last-child)
border-bottom solid 1px var(--faceDivider)
border-bottom solid var(--lineWidth) var(--faceDivider)
> .date
display block
@ -187,7 +187,7 @@ export default Vue.extend({
font-size 12px
color var(--dateDividerFg)
background var(--dateDividerBg)
border-bottom solid 1px var(--faceDivider)
border-bottom solid var(--lineWidth) var(--faceDivider)
span
margin 0 16px
@ -200,7 +200,7 @@ export default Vue.extend({
width 100%
padding 16px
color #555
border-top solid 1px rgba(#000, 0.05)
border-top solid var(--lineWidth) rgba(#000, 0.05)
&:hover
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
grid-template-columns 2fr 2fr 2fr 1fr
margin-top 8px
border-top solid 1px var(--faceDivider)
border-top solid var(--lineWidth) var(--faceDivider)
> div
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
//#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
router.beforeEach((to, from, next) => {
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>
.note
font-size 12px
border-bottom solid 1px var(--faceDivider)
border-bottom solid var(--lineWidth) var(--faceDivider)
&:focus
z-index 1
@ -231,7 +231,7 @@ export default Vue.extend({
> *
padding 16px
border dashed 1px var(--quoteBorder)
border dashed var(--lineWidth) var(--quoteBorder)
border-radius 8px
> .app

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

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

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

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

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

@ -21,6 +21,7 @@ const defaultSettings = {
showClockOnHeader: true,
useShadow: true,
roundedCorners: false,
lineWidth: 1,
circleIcons: true,
contrastedAcct: true,
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);
}
for (let i = 1; i < 100; i++) {
for (let i = 5; i < 100; i += 5) {
const color = primary.clone().lighten(i);
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);
props['primaryDarken' + i] = genValue(color);
}