worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

enhance(client): フォントサイズスライダー左右にフォントサイズを直観的に表示

Browse source
This commit is contained in:
NoriDev 2023-05-27 20:02:32 +09:00
parent cc3ed30943
commit b10a706f51
2 changed files with 51 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
packages/frontend/src/components/MkUserSetupDialog.FontSize.vue
View file

@ -25,7 +25,8 @@
<div v-else-if="fontSize === 19" style="font-size: 25px;">{{ i18n.ts._mfm.dummy }}</div> <div v-else-if="fontSize === 19" style="font-size: 25px;">{{ i18n.ts._mfm.dummy }}</div>
</div> </div>
<div :class="$style.fontSize_slider"> <div :class="$style.fontSize_slider">
<MkRange v-model="fontSize" :min="1" :max="19" :step="1" easing :textConverter="(v) => <div :class="$style.fontSize_left">Aa</div>
<MkRange v-model="fontSize" style="position: initial !important; width: 100%; margin: 0 -10px;" :min="1" :max="19" :step="1" easing :textConverter="(v) =>
v === 1 ? '7px' : v === 1 ? '7px' :
v === 2 ? '8px' : v === 2 ? '8px' :
v === 3 ? '9px' : v === 3 ? '9px' :
@ -47,6 +48,7 @@
v === 19 ? '25px' : ''" v === 19 ? '25px' : ''"
> >
</MkRange> </MkRange>
<div :class="$style.fontSize_right">Aa</div>
</div> </div>
<MkInfo v-if="fontSize != fontSizeBefore" style="margin-top: 10px;">{{ i18n.ts.reloadToApplySetting2 }}</MkInfo> <MkInfo v-if="fontSize != fontSizeBefore" style="margin-top: 10px;">{{ i18n.ts.reloadToApplySetting2 }}</MkInfo>
<MkSwitch v-model="useBoldFont" style="margin-top: .75em;">{{ i18n.ts.useBoldFont }}</MkSwitch> <MkSwitch v-model="useBoldFont" style="margin-top: .75em;">{{ i18n.ts.useBoldFont }}</MkSwitch>
@ -122,6 +124,31 @@ onMounted(() => {
} }
.fontSize_slider { .fontSize_slider {
display: flex;
margin-top: 8px; margin-top: 8px;
} }
.fontSize_left, .fontSize_right {
position: relative;
background: var(--panel);
font-weight: normal;
line-height: 20px;
border: solid 1px var(--divider);
}
.fontSize_left {
padding: 7px 6px 7px 18px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border-right-style: none;
font-size: 12px;
}
.fontSize_right {
padding: 7px 18px 7px 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-left-style: none;
font-size: 18px;
}
</style> </style>

24
packages/frontend/src/pages/settings/general.vue
View file

@ -159,7 +159,8 @@
<div v-else-if="fontSize === 19" style="font-size: 25px;">{{ i18n.ts._mfm.dummy }}</div> <div v-else-if="fontSize === 19" style="font-size: 25px;">{{ i18n.ts._mfm.dummy }}</div>
</div> </div>
<div class="fontSize_slider"> <div class="fontSize_slider">
<MkRange v-model="fontSize" :min="1" :max="19" :step="1" easing :textConverter="(v) => <div class="fontSize_left">Aa</div>
<MkRange v-model="fontSize" style="position: initial !important; width: 100%; margin: 0 -10px;" :min="1" :max="19" :step="1" easing :textConverter="(v) =>
v === 1 ? '7px' : v === 1 ? '7px' :
v === 2 ? '8px' : v === 2 ? '8px' :
v === 3 ? '9px' : v === 3 ? '9px' :
@ -181,6 +182,7 @@
v === 19 ? '25px' : ''" v === 19 ? '25px' : ''"
> >
</MkRange> </MkRange>
<div class="fontSize_right">Aa</div>
</div> </div>
<MkInfo v-if="fontSize != fontSizeBefore" style="margin-top: 10px;">{{ i18n.ts.reloadToApplySetting2 }}</MkInfo> <MkInfo v-if="fontSize != fontSizeBefore" style="margin-top: 10px;">{{ i18n.ts.reloadToApplySetting2 }}</MkInfo>
<MkSwitch v-model="useBoldFont" style="margin-top: .75em;">{{ i18n.ts.useBoldFont }}</MkSwitch> <MkSwitch v-model="useBoldFont" style="margin-top: .75em;">{{ i18n.ts.useBoldFont }}</MkSwitch>
@ -375,7 +377,27 @@ definePageMetadata({
} }
.fontSize_slider { .fontSize_slider {
display: flex;
margin-top: -8px; margin-top: -8px;
border-top: solid .5px var(--divider); border-top: solid .5px var(--divider);
> .fontSize_left, .fontSize_right {
position: relative;
background: var(--panel);
font-weight: normal;
line-height: 20px;
}
> .fontSize_left {
padding: 7px 6px 7px 18px;
border-bottom-left-radius: 6px;
font-size: 12px;
}
> .fontSize_right {
padding: 7px 18px 7px 6px;
border-bottom-right-radius: 6px;
font-size: 18px;
}
} }
</style> </style>