usbharu
/
misskey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2025-04-17 16:22:20 +09:00
parent 96de18b096
commit 73eb8cac18
20 changed files with 66 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/components/MkButton.vue
View File

@ -124,7 +124,7 @@ function onMousedown(evt: MouseEvent): void {
display: block;
min-width: 100px;
width: max-content;
padding: 7px 14px;
padding: 9px 14px;
text-align: center;
font-weight: normal;
font-size: 95%;

2
packages/frontend/src/components/MkCodeEditor.vue
View File

@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<XCode :class="$style.codeEditorHighlighter" :codeEditor="true" :code="v" :lang="lang"/>
</div>
</div>
<div :class="$style.caption"><slot name="caption"></slot></div>
<div :class="$style.caption" class="_mt"><slot name="caption"></slot></div>
<MkButton v-if="manualSave && changed" primary :class="$style.save" @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div>
</template>

2
packages/frontend/src/components/MkColorInput.vue
View File

@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@input="onInput"
>
</div>
<div :class="$style.caption"><slot name="caption"></slot></div>
<div :class="$style.caption" class="_mt"><slot name="caption"></slot></div>
</div>
</template>

4
packages/frontend/src/components/MkDialog.vue
View File

@ -25,8 +25,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<i v-else-if="type === 'question'" :class="$style.iconInner" class="ti ti-help-circle"></i>
<MkLoading v-else-if="type === 'waiting'" :class="$style.iconInner" :em="true"/>
</div>
<header v-if="title" :class="$style.title" class="_selectable"><Mfm :text="title"/></header>
<div v-if="text" :class="$style.text" class="_selectable"><Mfm :text="text"/></div>
<header v-if="title" :class="$style.title" class="_selectable _mt"><Mfm :text="title"/></header>
<div v-if="text" :class="$style.text" class="_selectable _mt"><Mfm :text="text"/></div>
<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" :autocomplete="input.autocomplete" @keydown="onInputKeydown">
<template v-if="input.type === 'password'" #prefix><i class="ti ti-lock"></i></template>
<template #caption>

7
packages/frontend/src/components/MkFolder.vue
View File

@ -10,10 +10,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<button :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle">
<div :class="$style.headerIcon"><slot name="icon"></slot></div>
<div :class="$style.headerText">
<div :class="$style.headerTextMain">
<div :class="$style.headerTextMain" class="_1t">
<MkCondensedLine :minScale="2 / 3"><slot name="label"></slot></MkCondensedLine>
</div>
<div :class="$style.headerTextSub">
<div v-if="$slots.caption" :class="$style.headerTextSub" class="_1t">
<slot name="caption"></slot>
</div>
</div>
@ -143,7 +143,7 @@ onMounted(() => {
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 9px 12px 9px 12px;
padding: 10px 12px 10px 12px;
background: var(--MI_THEME-folderHeaderBg);
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
@ -209,6 +209,7 @@ onMounted(() => {
}
.headerTextSub {
margin-top: 4px;
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
font-size: .85em;
}

2
packages/frontend/src/components/MkInfo.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="[$style.root, { [$style.warn]: warn }]" class="_selectable">
<div :class="[$style.root, { [$style.warn]: warn }]" class="_selectable _mt">
<i v-if="warn" class="ti ti-alert-triangle" :class="$style.i"></i>
<i v-else class="ti ti-info-circle" :class="$style.i"></i>
<div><slot></slot></div>

2
packages/frontend/src/components/MkInput.vue
View File

@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</datalist>
<div ref="suffixEl" :class="$style.suffix"><slot name="suffix"></slot></div>
</div>
<div :class="$style.caption"><slot name="caption"></slot></div>
<div :class="$style.caption" class="_mt"><slot name="caption"></slot></div>
<MkButton v-if="manualSave && changed" primary :class="$style.save" @click="updated"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
</div>

34
packages/frontend/src/components/MkMenu.vue
View File

@ -31,9 +31,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-for="item in (items2 ?? [])">
<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
<span style="opacity: 0.7;">{{ item.text }}</span>
</span>
<div v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label]">
<span>{{ item.text }}</span>
</div>
<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
<span><MkEllipsis/></span>
@ -484,9 +484,9 @@ onBeforeUnmount(() => {
min-width: 230px;
> .item {
padding: 6px 20px;
padding: 0 20px;
min-height: 35px;
font-size: 0.95em;
line-height: 24px;
}
}
}
@ -541,12 +541,12 @@ onBeforeUnmount(() => {
display: flex;
align-items: center;
position: relative;
padding: 5px 16px;
padding: 0 16px;
min-height: 30px;
width: 100%;
box-sizing: border-box;
white-space: nowrap;
font-size: 0.9em;
line-height: 20px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
@ -619,12 +619,6 @@ onBeforeUnmount(() => {
--menuActiveBg: var(--MI_THEME-accentedBg);
}
&.label {
pointer-events: none;
font-size: 0.7em;
padding-bottom: 4px;
}
&.pending {
pointer-events: none;
opacity: 0.7;
@ -674,7 +668,6 @@ onBeforeUnmount(() => {
.icon {
margin-right: 8px;
line-height: 1;
}
.caret {
@ -699,6 +692,19 @@ onBeforeUnmount(() => {
border-top: solid 0.5px var(--MI_THEME-divider);
}
.label {
position: relative;
padding: 6px 16px;
box-sizing: border-box;
white-space: nowrap;
font-size: 0.7em;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.7;
pointer-events: none;
}
.radioIcon {
display: inline-block;
position: relative;

4
packages/frontend/src/components/MkNote.vue
View File

@ -74,13 +74,13 @@ SPDX-License-Identifier: AGPL-3.0-only
:emojiUrls="appearNote.emojis"
:enableEmojiMenu="true"
:enableEmojiMenuReaction="true"
class="_selectable"
class="_selectable _mt"
/>
<div v-if="translating || translation" :class="$style.translation">
<MkLoading v-if="translating" mini/>
<div v-else-if="translation">
<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable _mt"/>
</div>
</div>
</div>

4
packages/frontend/src/components/MkNoteDetailed.vue
View File

@ -97,14 +97,14 @@ SPDX-License-Identifier: AGPL-3.0-only
:emojiUrls="appearNote.emojis"
:enableEmojiMenu="true"
:enableEmojiMenuReaction="true"
class="_selectable"
class="_selectable _mt"
/>
<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
<div v-if="translating || translation" :class="$style.translation">
<MkLoading v-if="translating" mini/>
<div v-else-if="translation">
<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable _mt"/>
</div>
</div>
<div v-if="appearNote.files && appearNote.files.length > 0">

2
packages/frontend/src/components/MkSelect.vue
View File

@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div ref="suffixEl" :class="$style.suffix"><i class="ti ti-chevron-down" :class="[$style.chevron, { [$style.chevronOpening]: opening }]"></i></div>
</div>
<div :class="$style.caption"><slot name="caption"></slot></div>
<div :class="$style.caption" class="_mt"><slot name="caption"></slot></div>
</div>
</template>

2
packages/frontend/src/components/MkSuperMenu.vue
View File

@ -235,7 +235,7 @@ function searchOnKeyDown(ev: KeyboardEvent) {
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 9px 16px 9px 8px;
padding: 10px 16px 10px 8px;
border-radius: 9px;
font-size: 0.9em;

2
packages/frontend/src/components/MkSwitch.vue
View File

@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</span>
<span v-if="helpText" v-tooltip:dialog="helpText" class="_button _help" :class="$style.help"><i class="ti ti-help-circle"></i></span>
</span>
<p :class="$style.caption"><slot name="caption"></slot></p>
<p :class="$style.caption" class="_mt"><slot name="caption"></slot></p>
</span>
</div>
</template>

5
packages/frontend/src/components/MkTextarea.vue
View File

@ -19,13 +19,14 @@ SPDX-License-Identifier: AGPL-3.0-only
:pattern="pattern"
:autocomplete="autocomplete"
:spellcheck="spellcheck"
class="_mt"
@focus="focused = true"
@blur="focused = false"
@keydown="onKeydown($event)"
@input="onInput"
></textarea>
</div>
<div :class="$style.caption"><slot name="caption"></slot></div>
<div :class="$style.caption" class="_mt"><slot name="caption"></slot></div>
<button v-if="mfmPreview" style="font-size: 0.85em;" class="_textButton" type="button" @click="preview = !preview">{{ i18n.ts.preview }}</button>
<div v-if="mfmPreview" v-show="preview" v-panel :class="$style.mfmPreview">
<Mfm :text="v"/>
@ -177,7 +178,7 @@ onUnmounted(() => {
min-height: 130px;
margin: 0;
padding: 12px;
font: inherit;
font-family: inherit;
font-weight: normal;
font-size: 1em;
color: var(--MI_THEME-fg);

8
packages/frontend/src/components/MkVisibilityPicker.vue
View File

@ -11,28 +11,28 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<button key="public" :disabled="isSilenced || isReplyVisibilitySpecified" class="_button" :class="[$style.item, { [$style.active]: v === 'public' }]" data-index="1" @click="choose('public')">
<div :class="$style.icon"><i class="ti ti-world"></i></div>
<div :class="$style.body">
<div :class="$style.body" class="_mt">
<span :class="$style.itemTitle">{{ i18n.ts._visibility.public }}</span>
<span :class="$style.itemDescription">{{ i18n.ts._visibility.publicDescription }}</span>
</div>
</button>
<button key="home" :disabled="isReplyVisibilitySpecified" class="_button" :class="[$style.item, { [$style.active]: v === 'home' }]" data-index="2" @click="choose('home')">
<div :class="$style.icon"><i class="ti ti-home"></i></div>
<div :class="$style.body">
<div :class="$style.body" class="_mt">
<span :class="$style.itemTitle">{{ i18n.ts._visibility.home }}</span>
<span :class="$style.itemDescription">{{ i18n.ts._visibility.homeDescription }}</span>
</div>
</button>
<button key="followers" :disabled="isReplyVisibilitySpecified" class="_button" :class="[$style.item, { [$style.active]: v === 'followers' }]" data-index="3" @click="choose('followers')">
<div :class="$style.icon"><i class="ti ti-lock"></i></div>
<div :class="$style.body">
<div :class="$style.body" class="_mt">
<span :class="$style.itemTitle">{{ i18n.ts._visibility.followers }}</span>
<span :class="$style.itemDescription">{{ i18n.ts._visibility.followersDescription }}</span>
</div>
</button>
<button key="specified" :disabled="localOnly" class="_button" :class="[$style.item, { [$style.active]: v === 'specified' }]" data-index="4" @click="choose('specified')">
<div :class="$style.icon"><i class="ti ti-mail"></i></div>
<div :class="$style.body">
<div :class="$style.body" class="_mt">
<span :class="$style.itemTitle">{{ i18n.ts._visibility.specified }}</span>
<span :class="$style.itemDescription">{{ i18n.ts._visibility.specifiedDescription }}</span>
</div>

2
packages/frontend/src/components/form/slot.vue
View File

@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div>
<slot></slot>
</div>
<div :class="$style.caption"><slot name="caption"></slot></div>
<div :class="$style.caption" class="_mt"><slot name="caption"></slot></div>
</div>
</template>

4
packages/frontend/src/pages/announcement.vue
View File

@ -23,10 +23,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--MI_THEME-error);"></i>
<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--MI_THEME-success);"></i>
</span>
<Mfm :text="announcement.title"/>
<Mfm :text="announcement.title" class="_selectable _mt"/>
</div>
<div :class="$style.content">
<Mfm :text="announcement.text"/>
<Mfm :text="announcement.text" class="_selectable _mt"/>
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
<div style="margin-top: 8px; opacity: 0.7; font-size: 85%;">
{{ i18n.ts.createdAt }}: <MkTime :time="announcement.createdAt" mode="detail"/>

2
packages/frontend/src/pages/announcements.vue
View File

@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkA :to="`/announcements/${announcement.id}`"><span>{{ announcement.title }}</span></MkA>
</div>
<div :class="$style.content">
<Mfm :text="announcement.text"/>
<Mfm :text="announcement.text" class="_selectable _mt"/>
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
<MkA :to="`/announcements/${announcement.id}`">
<div style="margin-top: 8px; opacity: 0.7; font-size: 85%;">

8
packages/frontend/src/pages/user/home.vue
View File

@ -51,7 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="user.followedMessage != null" class="followedMessage">
<MkFukidashi class="fukidashi" :tail="narrow ? 'none' : 'left'" negativeMargin>
<div class="messageHeader">{{ i18n.ts.messageToFollower }}</div>
<div><MkSparkle><Mfm :plain="true" :text="user.followedMessage" :author="user"/></MkSparkle></div>
<div><MkSparkle><Mfm :plain="true" :text="user.followedMessage" :author="user" class="_selectable _mt"/></MkSparkle></div>
</MkFukidashi>
</div>
<div v-if="user.roles.length > 0" class="roles">
@ -84,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div class="description">
<MkOmit>
<Mfm v-if="user.description" :text="user.description" :isNote="false" :author="user"/>
<Mfm v-if="user.description" :text="user.description" :isNote="false" :author="user" class="_selectable _mt"/>
<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
</MkOmit>
</div>
@ -105,10 +105,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="user.fields.length > 0" class="fields">
<dl v-for="(field, i) in user.fields" :key="i" class="field">
<dt class="name">
<Mfm :text="field.name" :author="user" :plain="true" :colored="false"/>
<Mfm :text="field.name" :author="user" :plain="true" :colored="false" class="_selectable"/>
</dt>
<dd class="value">
<Mfm :text="field.value" :author="user" :colored="false"/>
<Mfm :text="field.value" :author="user" :colored="false" class="_selectable"/>
<i v-if="user.verifiedLinks.includes(field.value)" v-tooltip:dialog="i18n.ts.verifiedLink" class="ti ti-circle-check" :class="$style.verifiedLink"></i>
</dd>
</dl>

16
packages/frontend/src/style.scss
View File

@ -32,7 +32,7 @@ html {
overflow-wrap: break-word;
font-family: 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
font-size: 14px;
line-height: 1.35;
line-height: 1;
text-size-adjust: 100%;
tab-size: 2;
-webkit-text-size-adjust: 100%;
@ -163,11 +163,12 @@ rt {
.ti {
width: 1.28em;
vertical-align: -12%;
line-height: 1em;
vertical-align: -20%;
line-height: 0.5;
&::before {
font-size: 128%;
line-height: 0.5;
}
}
@ -176,6 +177,15 @@ rt {
text-align: center;
}
// one-line text
._1t {
line-height: 1;
}
// multi-line text
line-height: 1.35;
}
._pageContainer {
container-type: size;
contain: strict;