profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

update linr

Browse source
This commit is contained in:
syuilo 2021-11-19 19:36:12 +09:00
parent b6e3f1c490
commit 5d968afa74
291 changed files with 1176 additions and 1164 deletions
Download patch file Download diff file Expand all files Collapse all files

12
packages/client/.eslintrc.js
View file

@ -14,6 +14,18 @@ module.exports = {
"plugin:vue/vue3-recommended"
],
rules: {
"vue/attributes-order": ["error", {
"alphabetical": false
}],
"vue/no-use-v-if-with-v-for": ["error", {
"allowUsingIterationVar": false
}],
"vue/no-ref-as-operand": "error",
"vue/no-multi-spaces": ["error", {
"ignoreProperties": false
}],
"vue/no-v-html": "error",
"vue/order-in-components": "error",
"vue/html-indent": ["warn", "tab", {
"attribute": 1,
"baseIndent": 0,

2
packages/client/src/components/abuse-report-window.vue
View file

@ -16,7 +16,7 @@
</MkTextarea>
</div>
<div class="_section">
<MkButton @click="send" primary full :disabled="comment.length === 0">{{ $ts.send }}</MkButton>
<MkButton primary full :disabled="comment.length === 0" @click="send">{{ $ts.send }}</MkButton>
</div>
</div>
</XWindow>

2
packages/client/src/components/analog-clock.vue
View file

@ -1,11 +1,11 @@
<template>
<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
<circle v-for="(angle, i) in graduations"
:key="i"
:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
:r="i % 5 == 0 ? 0.125 : 0.05"
:fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor"
:key="i"
/>
<line

28
packages/client/src/components/autocomplete.vue
View file

@ -1,31 +1,31 @@
<template>
<div class="swhvrteh _popup _shadow" @contextmenu.prevent="() => {}">
<ol class="users" ref="suggests" v-if="type === 'user'">
<li v-for="user in users" @click="complete(type, user)" @keydown="onKeydown" tabindex="-1" class="user">
<ol v-if="type === 'user'" ref="suggests" class="users">
<li v-for="user in users" tabindex="-1" class="user" @click="complete(type, user)" @keydown="onKeydown">
<img class="avatar" :src="user.avatarUrl"/>
<span class="name">
<MkUserName :user="user" :key="user.id"/>
<MkUserName :key="user.id" :user="user"/>
</span>
<span class="username">@{{ acct(user) }}</span>
</li>
<li @click="chooseUser()" @keydown="onKeydown" tabindex="-1" class="choose">{{ $ts.selectUser }}</li>
<li tabindex="-1" class="choose" @click="chooseUser()" @keydown="onKeydown">{{ $ts.selectUser }}</li>
</ol>
<ol class="hashtags" ref="suggests" v-else-if="hashtags.length > 0">
<li v-for="hashtag in hashtags" @click="complete(type, hashtag)" @keydown="onKeydown" tabindex="-1">
<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
<li v-for="hashtag in hashtags" tabindex="-1" @click="complete(type, hashtag)" @keydown="onKeydown">
<span class="name">{{ hashtag }}</span>
</li>
</ol>
<ol class="emojis" ref="suggests" v-else-if="emojis.length > 0">
<li v-for="emoji in emojis" @click="complete(type, emoji.emoji)" @keydown="onKeydown" tabindex="-1">
<span class="emoji" v-if="emoji.isCustomEmoji"><img :src="$store.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
<span class="emoji" v-else-if="!$store.state.useOsNativeEmojis"><img :src="emoji.url" :alt="emoji.emoji"/></span>
<span class="emoji" v-else>{{ emoji.emoji }}</span>
<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
<li v-for="emoji in emojis" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
<span v-if="emoji.isCustomEmoji" class="emoji"><img :src="$store.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
<span v-else-if="!$store.state.useOsNativeEmojis" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
<span v-else class="emoji">{{ emoji.emoji }}</span>
<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
<span class="alias" v-if="emoji.aliasOf">({{ emoji.aliasOf }})</span>
<span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span>
</li>
</ol>
<ol class="mfmTags" ref="suggests" v-else-if="mfmTags.length > 0">
<li v-for="tag in mfmTags" @click="complete(type, tag)" @keydown="onKeydown" tabindex="-1">
<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
<li v-for="tag in mfmTags" tabindex="-1" @click="complete(type, tag)" @keydown="onKeydown">
<span class="tag">{{ tag }}</span>
</li>
</ol>

2
packages/client/src/components/channel-follow-button.vue
View file

@ -1,8 +1,8 @@
<template>
<button class="hdcaacmi _button"
:class="{ wait, active: isFollowing, full }"
@click="onClick"
:disabled="wait"
@click="onClick"
>
<template v-if="!wait">
<template v-if="isFollowing">

10
packages/client/src/components/channel-preview.vue
View file

@ -44,6 +44,11 @@ export default defineComponent({
},
},
data() {
return {
};
},
computed: {
bannerStyle() {
if (this.channel.bannerUrl) {
@ -53,11 +58,6 @@ export default defineComponent({
}
}
},
data() {
return {
};
},
});
</script>

4
packages/client/src/components/code-core.vue
View file

@ -1,6 +1,6 @@
<template>
<code v-if="inline" v-html="html" :class="`language-${prismLang}`"></code>
<pre v-else :class="`language-${prismLang}`"><code v-html="html" :class="`language-${prismLang}`"></code></pre>
<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
<pre v-else :class="`language-${prismLang}`"><code :class="`language-${prismLang}`" v-html="html"></code></pre>
</template>
<script lang="ts">

2
packages/client/src/components/debobigego/base.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="rbusrurv" :class="{ wide: forceWide }" v-size="{ max: [400] }">
<div v-size="{ max: [400] }" class="rbusrurv" :class="{ wide: forceWide }">
<slot></slot>
</div>
</template>

4
packages/client/src/components/debobigego/group.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="vrtktovg _debobigegoItem _debobigegoNoConcat" v-size="{ max: [500] }" v-sticky-container>
<div v-size="{ max: [500] }" v-sticky-container class="vrtktovg _debobigegoItem _debobigegoNoConcat">
<div class="_debobigegoLabel"><slot name="label"></slot></div>
<div class="main _debobigego_group" ref="child">
<div ref="child" class="main _debobigego_group">
<slot></slot>
</div>
<div class="_debobigegoCaption"><slot name="caption"></slot></div>

14
packages/client/src/components/debobigego/input.vue
View file

@ -2,12 +2,12 @@
<FormGroup class="_debobigegoItem">
<template #label><slot></slot></template>
<div class="ztzhwixg _debobigegoItem" :class="{ inline, disabled }">
<div class="icon" ref="icon"><slot name="icon"></slot></div>
<div ref="icon" class="icon"><slot name="icon"></slot></div>
<div class="input _debobigegoPanel">
<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
<input ref="inputEl"
:type="type"
v-model="v"
:type="type"
:disabled="disabled"
:required="required"
:readonly="readonly"
@ -16,21 +16,21 @@
:autocomplete="autocomplete"
:spellcheck="spellcheck"
:step="step"
:list="id"
@focus="focused = true"
@blur="focused = false"
@keydown="onKeydown($event)"
@input="onInput"
:list="id"
>
<datalist :id="id" v-if="datalist">
<datalist v-if="datalist" :id="id">
<option v-for="data in datalist" :value="data"/>
</datalist>
<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
<div ref="suffixEl" class="suffix"><slot name="suffix"></slot></div>
</div>
</div>
<template #caption><slot name="desc"></slot></template>
<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
<FormButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormGroup>
</template>

4
packages/client/src/components/debobigego/link.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="qmfkfnzi _debobigegoItem">
<a class="main _button _debobigegoPanel _debobigegoClickable" :href="to" target="_blank" v-if="external">
<a v-if="external" class="main _button _debobigegoPanel _debobigegoClickable" :href="to" target="_blank">
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span>
<span class="right">
@ -8,7 +8,7 @@
<i class="fas fa-external-link-alt icon"></i>
</span>
</a>
<MkA class="main _button _debobigegoPanel _debobigegoClickable" :class="{ active }" :to="to" :behavior="behavior" v-else>
<MkA v-else class="main _button _debobigegoPanel _debobigegoClickable" :class="{ active }" :to="to" :behavior="behavior">
<span class="icon"><slot name="icon"></slot></span>
<span class="text"><slot></slot></span>
<span class="right">

4
packages/client/src/components/debobigego/object-view.vue
View file

@ -3,8 +3,8 @@
<template #label><slot></slot></template>
<div class="drooglns _debobigegoItem" :class="{ tall }">
<div class="input _debobigegoPanel">
<textarea class="_monospace"
v-model="v"
<textarea v-model="v"
class="_monospace"
readonly
:spellcheck="false"
></textarea>

4
packages/client/src/components/debobigego/pagination.vue
View file

@ -2,10 +2,10 @@
<FormGroup class="uljviswt _debobigegoItem">
<template #label><slot name="label"></slot></template>
<slot :items="items"></slot>
<div class="empty" v-if="empty" key="_empty_">
<div v-if="empty" key="_empty_" class="empty">
<slot name="empty"></slot>
</div>
<FormButton v-show="more" class="button" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary>
<FormButton v-show="more" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</FormButton>

2
packages/client/src/components/debobigego/range.vue
View file

@ -3,9 +3,9 @@
<div class="_debobigegoLabel"><slot name="label"></slot></div>
<div class="_debobigegoPanel main">
<input
type="range"
ref="input"
v-model="v"
type="range"
:disabled="disabled"
:min="min"
:max="max"

4
packages/client/src/components/debobigego/select.vue
View file

@ -1,9 +1,9 @@
<template>
<div class="yrtfrpux _debobigegoItem" :class="{ disabled, inline }">
<div class="_debobigegoLabel"><slot name="label"></slot></div>
<div class="icon" ref="icon"><slot name="icon"></slot></div>
<div ref="icon" class="icon"><slot name="icon"></slot></div>
<div class="input _debobigegoPanel _debobigegoClickable" @click="focus">
<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
<div ref="prefix" class="prefix"><slot name="prefix"></slot></div>
<select ref="input"
v-model="v"
:required="required"

6
packages/client/src/components/debobigego/suspense.vue
View file

@ -1,6 +1,6 @@
<template>
<transition name="fade" mode="out-in">
<div class="_debobigegoItem" v-if="pending">
<div v-if="pending" class="_debobigegoItem">
<div class="_debobigegoPanel">
<MkLoading/>
</div>
@ -8,10 +8,10 @@
<div v-else-if="resolved" class="_debobigegoItem">
<slot :result="result"></slot>
</div>
<div class="_debobigegoItem" v-else>
<div v-else class="_debobigegoItem">
<div class="_debobigegoPanel eiurkvay">
<div><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</div>
<MkButton inline @click="retry" class="retry"><i class="fas fa-redo-alt"></i> {{ $ts.retry }}</MkButton>
<MkButton inline class="retry" @click="retry"><i class="fas fa-redo-alt"></i> {{ $ts.retry }}</MkButton>
</div>
</div>
</transition>

4
packages/client/src/components/debobigego/switch.vue
View file

@ -7,12 +7,12 @@
@click.prevent="toggle"
>
<input
type="checkbox"
ref="input"
type="checkbox"
:disabled="disabled"
@keydown.enter="toggle"
>
<span class="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff">
<span v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button">
<span class="handle"></span>
</span>
<span class="label">

6
packages/client/src/components/debobigego/textarea.vue
View file

@ -3,8 +3,8 @@
<template #label><slot></slot></template>
<div class="rivhosbp _debobigegoItem" :class="{ tall, pre }">
<div class="input _debobigegoPanel">
<textarea ref="input" :class="{ code, _monospace: code }"
v-model="v"
<textarea ref="input" v-model="v"
:class="{ code, _monospace: code }"
:required="required"
:readonly="readonly"
:pattern="pattern"
@ -18,7 +18,7 @@
</div>
<template #caption><slot name="desc"></slot></template>
<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
<FormButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
</FormGroup>
</template>

2
packages/client/src/components/debobigego/tuple.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="wthhikgt _debobigegoItem" v-size="{ max: [500] }">
<div v-size="{ max: [500] }" class="wthhikgt _debobigegoItem">
<slot></slot>
</div>
</template>

16
packages/client/src/components/dialog.vue
View file

@ -1,10 +1,10 @@
<template>
<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
<div class="mk-dialog">
<div class="icon" v-if="icon">
<div v-if="icon" class="icon">
<i :class="icon"></i>
</div>
<div class="icon" v-else-if="!input && !select" :class="type">
<div v-else-if="!input && !select" class="icon" :class="type">
<i v-if="type === 'success'" class="fas fa-check"></i>
<i v-else-if="type === 'error'" class="fas fa-times-circle"></i>
<i v-else-if="type === 'warning'" class="fas fa-exclamation-triangle"></i>
@ -13,7 +13,7 @@
<i v-else-if="type === 'waiting'" class="fas fa-spinner fa-pulse"></i>
</div>
<header v-if="title"><Mfm :text="title"/></header>
<div class="body" v-if="text"><Mfm :text="text"/></div>
<div v-if="text" class="body"><Mfm :text="text"/></div>
<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></MkInput>
<MkSelect v-if="select" v-model="selectedValue" autofocus>
<template v-if="select.items">
@ -25,12 +25,12 @@
</optgroup>
</template>
</MkSelect>
<div class="buttons" v-if="(showOkButton || showCancelButton) && !actions">
<MkButton inline @click="ok" v-if="showOkButton" primary :autofocus="!input && !select">{{ (showCancelButton || input || select) ? $ts.ok : $ts.gotIt }}</MkButton>
<MkButton inline @click="cancel" v-if="showCancelButton || input || select">{{ $ts.cancel }}</MkButton>
<div v-if="(showOkButton || showCancelButton) && !actions" class="buttons">
<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? $ts.ok : $ts.gotIt }}</MkButton>
<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ $ts.cancel }}</MkButton>
</div>
<div class="buttons" v-if="actions">
<MkButton v-for="action in actions" inline @click="() => { action.callback(); close(); }" :primary="action.primary" :key="action.text">{{ action.text }}</MkButton>
<div v-if="actions" class="buttons">
<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); close(); }">{{ action.text }}</MkButton>
</div>
</div>
</MkModal>

2
packages/client/src/components/drive-file-thumbnail.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="zdjebgpv" ref="thumbnail">
<div ref="thumbnail" class="zdjebgpv">
<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :style="`object-fit: ${ fit }`"/>
<i v-else-if="is === 'image'" class="fas fa-file-image icon"></i>
<i v-else-if="is === 'video'" class="fas fa-file-video icon"></i>

2
packages/client/src/components/drive-select-dialog.vue
View file

@ -13,7 +13,7 @@
{{ multiple ? ((type === 'file') ? $ts.selectFiles : $ts.selectFolders) : ((type === 'file') ? $ts.selectFile : $ts.selectFolder) }}
<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
</template>
<XDrive :multiple="multiple" @changeSelection="onChangeSelection" @selected="ok()" :select="type"/>
<XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
</XModalWindow>
</template>

12
packages/client/src/components/drive.file.vue
View file

@ -1,22 +1,22 @@
<template>
<div class="ncvczrfv"
:class="{ isSelected }"
draggable="true"
:title="title"
@click="onClick"
@contextmenu.stop="onContextmenu"
draggable="true"
@dragstart="onDragstart"
@dragend="onDragend"
:title="title"
>
<div class="label" v-if="$i.avatarId == file.id">
<div v-if="$i.avatarId == file.id" class="label">
<img src="/client-assets/label.svg"/>
<p>{{ $ts.avatar }}</p>
</div>
<div class="label" v-if="$i.bannerId == file.id">
<div v-if="$i.bannerId == file.id" class="label">
<img src="/client-assets/label.svg"/>
<p>{{ $ts.banner }}</p>
</div>
<div class="label red" v-if="file.isSensitive">
<div v-if="file.isSensitive" class="label red">
<img src="/client-assets/label-red.svg"/>
<p>{{ $ts.nsfw }}</p>
</div>
@ -25,7 +25,7 @@
<p class="name">
<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
<span class="ext" v-if="file.name.lastIndexOf('.') != -1">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
</p>
</div>
</template>

6
packages/client/src/components/drive.folder.vue
View file

@ -1,6 +1,8 @@
<template>
<div class="rghtznwe"
:class="{ draghover }"
draggable="true"
:title="title"
@click="onClick"
@contextmenu.stop="onContextmenu"
@mouseover="onMouseover"
@ -9,17 +11,15 @@
@dragenter.prevent="onDragenter"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
draggable="true"
@dragstart="onDragstart"
@dragend="onDragend"
:title="title"
>
<p class="name">
<template v-if="hover"><i class="fas fa-folder-open fa-fw"></i></template>
<template v-if="!hover"><i class="fas fa-folder fa-fw"></i></template>
{{ folder.name }}
</p>
<p class="upload" v-if="$store.state.uploadFolder == folder.id">
<p v-if="$store.state.uploadFolder == folder.id" class="upload">
{{ $ts.uploadFolder }}
</p>
<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>

32
packages/client/src/components/drive.vue
View file

@ -7,33 +7,33 @@
<span class="separator"><i class="fas fa-angle-right"></i></span>
<XNavFolder :folder="f"/>
</template>
<span class="separator" v-if="folder != null"><i class="fas fa-angle-right"></i></span>
<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
<span v-if="folder != null" class="separator"><i class="fas fa-angle-right"></i></span>
<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
</div>
<button @click="showMenu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
<button class="menu _button" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
</nav>
<div class="main" :class="{ uploading: uploadings.length > 0, fetching }"
ref="main"
<div ref="main" class="main"
:class="{ uploading: uploadings.length > 0, fetching }"
@dragover.prevent.stop="onDragover"
@dragenter="onDragenter"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
@contextmenu.stop="onContextmenu"
>
<div class="contents" ref="contents">
<div class="folders" ref="foldersContainer" v-show="folders.length > 0">
<XFolder v-for="(f, i) in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder" v-anim="i"/>
<div ref="contents" class="contents">
<div v-show="folders.length > 0" ref="foldersContainer" class="folders">
<XFolder v-for="(f, i) in folders" :key="f.id" v-anim="i" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div class="padding" v-for="(n, i) in 16" :key="i"></div>
<MkButton ref="moreFolders" v-if="moreFolders">{{ $ts.loadMore }}</MkButton>
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
<MkButton v-if="moreFolders" ref="moreFolders">{{ $ts.loadMore }}</MkButton>
</div>
<div class="files" ref="filesContainer" v-show="files.length > 0">
<XFile v-for="(file, i) in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile" v-anim="i"/>
<div v-show="files.length > 0" ref="filesContainer" class="files">
<XFile v-for="(file, i) in files" :key="file.id" v-anim="i" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div class="padding" v-for="(n, i) in 16" :key="i"></div>
<MkButton ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles">{{ $ts.loadMore }}</MkButton>
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ $ts.loadMore }}</MkButton>
</div>
<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
<div v-if="files.length == 0 && folders.length == 0 && !fetching" class="empty">
<p v-if="draghover">{{ $t('empty-draghover') }}</p>
<p v-if="!draghover && folder == null"><strong>{{ $ts.emptyDrive }}</strong><br/>{{ $t('empty-drive-description') }}</p>
<p v-if="!draghover && folder != null">{{ $ts.emptyFolder }}</p>
@ -41,7 +41,7 @@
</div>
<MkLoading v-if="fetching"/>
</div>
<div class="dropzone" v-if="draghover"></div>
<div v-if="draghover" class="dropzone"></div>
<input ref="fileInput" type="file" accept="*/*" multiple="multiple" tabindex="-1" @change="onChangeFileInput"/>
</div>
</template>

4
packages/client/src/components/emoji-picker-dialog.vue
View file

@ -1,6 +1,6 @@
<template>
<MkPopup ref="popup" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.popup.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')" #default="{point}">
<MkEmojiPicker class="ryghynhb _popup _shadow" :class="{ pointer: point === 'top' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
<MkPopup ref="popup" #default="{point}" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.popup.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
<MkEmojiPicker ref="picker" class="ryghynhb _popup _shadow" :class="{ pointer: point === 'top' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen"/>
</MkPopup>
</template>

2
packages/client/src/components/emoji-picker.section.vue
View file

@ -5,9 +5,9 @@
</header>
<div v-if="shown">
<button v-for="emoji in emojis"
:key="emoji"
class="_button"
@click="chosen(emoji, $event)"
:key="emoji"
>
<MkEmoji :emoji="emoji" :normal="true"/>
</button>

22
packages/client/src/components/emoji-picker.vue
View file

@ -1,15 +1,15 @@
<template>
<div class="omfetrab" :class="['w' + width, 'h' + height, { big }]">
<input ref="search" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" v-model.trim="q" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()">
<div class="emojis" ref="emojis">
<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()">
<div ref="emojis" class="emojis">
<section class="result">
<div v-if="searchResultCustom.length > 0">
<button v-for="emoji in searchResultCustom"
:key="emoji"
class="_button"
:title="emoji.name"
@click="chosen(emoji, $event)"
:key="emoji"
tabindex="0"
@click="chosen(emoji, $event)"
>
<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>
<img v-else :src="$store.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
@ -17,25 +17,25 @@
</div>
<div v-if="searchResultUnicode.length > 0">
<button v-for="emoji in searchResultUnicode"
:key="emoji.name"
class="_button"
:title="emoji.name"
@click="chosen(emoji, $event)"
:key="emoji.name"
tabindex="0"
@click="chosen(emoji, $event)"
>
<MkEmoji :emoji="emoji.char"/>
</button>
</div>
</section>
<div class="index" v-if="tab === 'index'">
<div v-if="tab === 'index'" class="index">
<section v-if="showPinned">
<div>
<button v-for="emoji in pinned"
class="_button"
@click="chosen(emoji, $event)"
tabindex="0"
:key="emoji"
class="_button"
tabindex="0"
@click="chosen(emoji, $event)"
>
<MkEmoji :emoji="emoji" :normal="true"/>
</button>
@ -46,9 +46,9 @@
<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ $ts.recentUsed }}</header>
<div>
<button v-for="emoji in $store.state.recentlyUsedEmojis"
:key="emoji"
class="_button"
@click="chosen(emoji, $event)"
:key="emoji"
>
<MkEmoji :emoji="emoji" :normal="true"/>
</button>

2
packages/client/src/components/featured-photos.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="xfbouadm" v-if="meta" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
</template>
<script lang="ts">

2
packages/client/src/components/follow-button.vue
View file

@ -1,8 +1,8 @@
<template>
<button class="kpoogebi _button"
:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full, large }"
@click="onClick"
:disabled="wait"
@click="onClick"
>
<template v-if="!wait">
<template v-if="hasPendingFollowRequestFromYou && user.isLocked">

6
packages/client/src/components/forgot-password.vue
View file

@ -7,14 +7,14 @@
>
<template #header>{{ $ts.forgotPassword }}</template>
<form class="bafeceda" @submit.prevent="onSubmit" v-if="$instance.enableEmail">
<form v-if="$instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
<div class="main _formRoot">
<MkInput class="_formBlock" v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
<template #label>{{ $ts.username }}</template>
<template #prefix>@</template>
</MkInput>
<MkInput class="_formBlock" v-model="email" type="email" spellcheck="false" required>
<MkInput v-model="email" class="_formBlock" type="email" spellcheck="false" required>
<template #label>{{ $ts.emailAddress }}</template>
<template #caption>{{ $ts._forgotPassword.enterEmail }}</template>
</MkInput>

4
packages/client/src/components/form-dialog.vue
View file

@ -32,11 +32,11 @@
</FormSwitch>
<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<option v-for="item in form[item].enum" :value="item.value" :key="item.value">{{ item.label }}</option>
<option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
</FormSelect>
<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]">
<template #desc><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<option v-for="item in form[item].options" :value="item.value" :key="item.value">{{ item.label }}</option>
<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
</FormRadios>
<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>

12
packages/client/src/components/form/input.vue
View file

@ -2,10 +2,10 @@
<div class="matxzzsk">
<div class="label" @click="focus"><slot name="label"></slot></div>
<div class="input" :class="{ inline, disabled, focused }">
<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
<input ref="inputEl"
:type="type"
v-model="v"
:type="type"
:disabled="disabled"
:required="required"
:readonly="readonly"
@ -14,20 +14,20 @@
:autocomplete="autocomplete"
:spellcheck="spellcheck"
:step="step"
:list="id"
@focus="focused = true"
@blur="focused = false"
@keydown="onKeydown($event)"
@input="onInput"
:list="id"
>
<datalist :id="id" v-if="datalist">
<datalist v-if="datalist" :id="id">
<option v-for="data in datalist" :value="data"/>
</datalist>
<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
<div ref="suffixEl" class="suffix"><slot name="suffix"></slot></div>
</div>
<div class="caption"><slot name="caption"></slot></div>
<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
<MkButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
</div>
</template>

2
packages/client/src/components/form/range.vue
View file

@ -3,9 +3,9 @@
<div class="icon"><slot name="icon"></slot></div>
<span class="label"><slot name="label"></slot></span>
<input
type="range"
ref="input"
v-model="v"
type="range"
:disabled="disabled"
:min="min"
:max="max"

2
packages/client/src/components/form/section.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="vrtktovh" v-size="{ max: [500] }" v-sticky-container>
<div v-size="{ max: [500] }" v-sticky-container class="vrtktovh">
<div class="label"><slot name="label"></slot></div>
<div class="main">
<slot></slot>

12
packages/client/src/components/form/select.vue
View file

@ -1,10 +1,10 @@
<template>
<div class="vblkjoeq">
<div class="label" @click="focus"><slot name="label"></slot></div>
<div class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick" ref="container">
<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
<select class="select" ref="inputEl"
v-model="v"
<div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick">
<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
<select ref="inputEl" v-model="v"
class="select"
:disabled="disabled"
:required="required"
:readonly="readonly"
@ -15,11 +15,11 @@
>
<slot></slot>
</select>
<div class="suffix" ref="suffixEl"><i class="fas fa-chevron-down"></i></div>
<div ref="suffixEl" class="suffix"><i class="fas fa-chevron-down"></i></div>
</div>
<div class="caption"><slot name="caption"></slot></div>
<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
<MkButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
</div>
</template>

4
packages/client/src/components/form/switch.vue
View file

@ -8,12 +8,12 @@
@click.prevent="toggle"
>
<input
type="checkbox"
ref="input"
type="checkbox"
:disabled="disabled"
@keydown.enter="toggle"
>
<span class="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff">
<span v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button">
<span class="handle"></span>
</span>
<span class="label">

4
packages/client/src/components/form/textarea.vue
View file

@ -3,8 +3,8 @@
<div class="label" @click="focus"><slot name="label"></slot></div>
<div class="input" :class="{ disabled, focused, tall, pre }">
<textarea ref="inputEl"
:class="{ code, _monospace: code }"
v-model="v"
:class="{ code, _monospace: code }"
:disabled="disabled"
:required="required"
:readonly="readonly"
@ -20,7 +20,7 @@
</div>
<div class="caption"><slot name="caption"></slot></div>
<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
<MkButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
</div>
</template>

2
packages/client/src/components/global/acct.vue
View file

@ -1,7 +1,7 @@
<template>
<span class="mk-acct">
<span class="name">@{{ user.username }}</span>
<span class="host" v-if="user.host || detail || $store.state.showFullAcct">@{{ user.host || host }}</span>
<span v-if="user.host || detail || $store.state.showFullAcct" class="host">@{{ user.host || host }}</span>
</span>
</template>

6
packages/client/src/components/global/ad.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="qiivuoyo" v-if="ad">
<div class="main" :class="ad.place" v-if="!showMenu">
<div v-if="ad" class="qiivuoyo">
<div v-if="!showMenu" class="main" :class="ad.place">
<a :href="ad.url" target="_blank">
<img :src="ad.imageUrl">
<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="fas fa-info-circle"></span></button>
</a>
</div>
<div class="menu" v-else>
<div v-else class="menu">
<div class="body">
<div>Ads by {{ host }}</div>
<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->

4
packages/client/src/components/global/avatar.vue
View file

@ -1,9 +1,9 @@
<template>
<span class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :title="acct(user)" @click="onClick">
<img class="inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
</span>
<MkA class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :to="userPage(user)" :title="acct(user)" :target="target">
<img class="inner" :src="url" decoding="async"/>
<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
</MkA>

2
packages/client/src/components/global/error.vue
View file

@ -3,7 +3,7 @@
<div class="mjndxjcg">
<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
<p><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</p>
<MkButton @click="() => $emit('retry')" class="button">{{ $ts.retry }}</MkButton>
<MkButton class="button" @click="() => $emit('retry')">{{ $ts.retry }}</MkButton>
</div>
</transition>
</template>

18
packages/client/src/components/global/header.vue
View file

@ -1,24 +1,24 @@
<template>
<div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick" ref="el">
<div ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick">
<template v-if="info">
<div class="titleContainer" @click="showTabsPopup" v-if="!hideTitle">
<div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup">
<MkAvatar v-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
<i v-else-if="info.icon" class="icon" :class="info.icon"></i>
<div class="title">
<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
<div v-else-if="info.title" class="title">{{ info.title }}</div>
<div class="subtitle" v-if="!narrow && info.subtitle">
<div v-if="!narrow && info.subtitle" class="subtitle">
{{ info.subtitle }}
</div>
<div class="subtitle activeTab" v-if="narrow && hasTabs">
<div v-if="narrow && hasTabs" class="subtitle activeTab">
{{ info.tabs.find(tab => tab.active)?.title }}
<i class="chevron fas fa-chevron-down"></i>
</div>
</div>
</div>
<div class="tabs" v-if="!narrow || hideTitle">
<button class="tab _button" v-for="tab in info.tabs" :class="{ active: tab.active }" @click="tab.onClick" v-tooltip="tab.title">
<div v-if="!narrow || hideTitle" class="tabs">
<button v-for="tab in info.tabs" v-tooltip="tab.title" class="tab _button" :class="{ active: tab.active }" @click="tab.onClick">
<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
</button>
@ -27,11 +27,11 @@
<div class="buttons right">
<template v-if="info && info.actions && !narrow">
<template v-for="action in info.actions">
<MkButton class="fullButton" v-if="action.asFullButton" @click.stop="action.handler" primary><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
<button v-else class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
<MkButton v-if="action.asFullButton" class="fullButton" primary @click.stop="action.handler"><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
<button v-else v-tooltip="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
</template>
</template>
<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
<button v-if="shouldShowMenu" v-tooltip="$ts.menu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag"><i class="fas fa-ellipsis-h"></i></button>
</div>
</div>
</template>

4
packages/client/src/components/global/url.vue
View file

@ -7,12 +7,12 @@
<template v-if="!self">
<span class="schema">{{ schema }}//</span>
<span class="hostname">{{ hostname }}</span>
<span class="port" v-if="port != ''">:{{ port }}</span>
<span v-if="port != ''" class="port">:{{ port }}</span>
</template>
<template v-if="pathname === '/' && self">
<span class="self">{{ hostname }}</span>
</template>
<span class="pathname" v-if="pathname != ''">{{ self ? pathname.substr(1) : pathname }}</span>
<span v-if="pathname != ''" class="pathname">{{ self ? pathname.substr(1) : pathname }}</span>
<span class="query">{{ query }}</span>
<span class="hash">{{ hash }}</span>
<i v-if="target === '_blank'" class="fas fa-external-link-square-alt icon"></i>

2
packages/client/src/components/google.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="mk-google">
<input type="search" v-model="query" :placeholder="q">
<input v-model="query" type="search" :placeholder="q">
<button @click="search"><i class="fas fa-search"></i> {{ $ts.search }}</button>
</div>
</template>

2
packages/client/src/components/img-with-blurhash.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="xubzgfgb" :class="{ cover }" :title="title">
<canvas ref="canvas" :width="size" :height="size" :title="title" v-if="!loaded"/>
<canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/>
<img v-if="src" :src="src" :title="title" :alt="alt" @load="onLoad"/>
</div>
</template>

10
packages/client/src/components/launch-pad.vue
View file

@ -3,12 +3,12 @@
<div class="szkkfdyq _popup">
<div class="main">
<template v-for="item in items">
<button v-if="item.action" class="_button" @click="$event => { item.action($event); close(); }" v-click-anime>
<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
<i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</button>
<MkA v-else :to="item.to" @click.passive="close()" v-click-anime>
<MkA v-else v-click-anime :to="item.to" @click.passive="close()">
<i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
@ -16,15 +16,15 @@
</template>
</div>
<div class="sub">
<a href="https://misskey-hub.net/help.html" target="_blank" @click.passive="close()" v-click-anime>
<a v-click-anime href="https://misskey-hub.net/help.html" target="_blank" @click.passive="close()">
<i class="fas fa-question-circle icon"></i>
<div class="text">{{ $ts.help }}</div>
</a>
<MkA to="/about" @click.passive="close()" v-click-anime>
<MkA v-click-anime to="/about" @click.passive="close()">
<i class="fas fa-info-circle icon"></i>
<div class="text">{{ $t('aboutX', { x: instanceName }) }}</div>
</MkA>
<MkA to="/about-misskey" @click.passive="close()" v-click-anime>
<MkA v-click-anime to="/about-misskey" @click.passive="close()">
<img src="/static-assets/favicon.png" class="icon"/>
<div class="text">{{ $ts.aboutMisskey }}</div>
</MkA>

2
packages/client/src/components/link.vue
View file

@ -1,8 +1,8 @@
<template>
<component :is="self ? 'MkA' : 'a'" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
:title="url"
@mouseover="onMouseover"
@mouseleave="onMouseleave"
:title="url"
>
<slot></slot>
<i v-if="target === '_blank'" class="fas fa-external-link-square-alt icon"></i>

14
packages/client/src/components/media-banner.vue
View file

@ -1,20 +1,20 @@
<template>
<div class="mk-media-banner">
<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
<div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false">
<span class="icon"><i class="fas fa-exclamation-triangle"></i></span>
<b>{{ $ts.sensitive }}</b>
<span>{{ $ts.clickToShow }}</span>
</div>
<div class="audio" v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'">
<audio class="audio"
<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
<audio ref="audio"
class="audio"
:src="media.url"
:title="media.name"
controls
ref="audio"
@volumechange="volumechange"
preload="metadata" />
preload="metadata"
@volumechange="volumechange" />
</div>
<a class="download" v-else
<a v-else class="download"
:href="media.url"
:title="media.name"
:download="media.name"

6
packages/client/src/components/media-caption.vue
View file

@ -7,9 +7,9 @@
<Mfm v-if="title" class="title" :text="title"/>
<span class="text-count" :class="{ over: remainingLength < 0 }">{{ remainingLength }}</span>
</header>
<textarea autofocus v-model="inputValue" :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
<div class="buttons" v-if="(showOkButton || showCancelButton)">
<MkButton inline @click="ok" primary :disabled="remainingLength < 0">{{ $ts.ok }}</MkButton>
<textarea v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
<div v-if="(showOkButton || showCancelButton)" class="buttons">
<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ $ts.ok }}</MkButton>
<MkButton inline @click="cancel" >{{ $ts.cancel }}</MkButton>
</div>
</div>

6
packages/client/src/components/media-image.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="qjewsnkg" v-if="hide" @click="hide = false">
<div v-if="hide" class="qjewsnkg" @click="hide = false">
<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
<div class="text">
<div>
@ -8,13 +8,13 @@
</div>
</div>
</div>
<div class="gqnyydlz" :style="{ background: color }" v-else>
<div v-else class="gqnyydlz" :style="{ background: color }">
<a
:href="image.url"
:title="image.name"
>
<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :title="image.comment" :cover="false"/>
<div class="gif" v-if="image.type === 'image/gif'">GIF</div>
<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
</a>
<i class="fas fa-eye-slash" @click="hide = true"></i>
</div>

8
packages/client/src/components/media-list.vue
View file

@ -1,11 +1,11 @@
<template>
<div class="hoawjimk">
<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :media="media" :key="media.id"/>
<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container">
<div :data-count="mediaList.filter(media => previewable(media)).length" ref="gallery">
<div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length">
<template v-for="media in mediaList">
<XVideo :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
<XImage class="image" :data-id="media.id" :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
<XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/>
<XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/>
</template>
</div>
</div>

4
packages/client/src/components/media-video.vue
View file

@ -1,11 +1,11 @@
<template>
<div class="icozogqfvdetwohsdglrbswgrejoxbdj" v-if="hide" @click="hide = false">
<div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
<div>
<b><i class="fas fa-exclamation-triangle"></i> {{ $ts.sensitive }}</b>
<span>{{ $ts.clickToShow }}</span>
</div>
</div>
<div class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else>
<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
<video
:poster="video.thumbnailUrl"
:title="video.name"

4
packages/client/src/components/mention.vue
View file

@ -1,9 +1,9 @@
<template>
<MkA v-if="url.startsWith('/')" class="ldlomzub" :class="{ isMe }" :to="url" v-user-preview="canonical" :style="{ background: bg }">
<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="ldlomzub" :class="{ isMe }" :to="url" :style="{ background: bg }">
<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
<span class="main">
<span class="username">@{{ username }}</span>
<span class="host" v-if="(host != localHost) || $store.state.showFullAcct">@{{ toUnicode(host) }}</span>
<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
</span>
</MkA>
<a v-else class="ldlomzub" :href="url" target="_blank" rel="noopener" :style="{ background: bg }">

2
packages/client/src/components/modal-page-window.vue
View file

@ -2,7 +2,7 @@
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
<div class="hrmcaedk _window _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
<div class="header" @contextmenu="onContextmenu">
<button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button>
<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
<span v-else style="display: inline-block; width: 20px"></span>
<span v-if="pageInfo" class="title">
<i v-if="pageInfo.icon" class="icon" :class="pageInfo.icon"></i>

66
packages/client/src/components/note-detailed.vue
View file

@ -1,36 +1,36 @@
<template>
<div
class="lxwezrsl _block"
v-if="!muted"
v-show="!isDeleted"
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }"
v-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }"
class="lxwezrsl _block"
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }"
>
<XSub v-for="note in conversation" class="reply-to-more" :key="note.id" :note="note"/>
<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
<div class="renote" v-if="isRenote">
<XSub v-for="note in conversation" :key="note.id" class="reply-to-more" :note="note"/>
<XSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
<div v-if="isRenote" class="renote">
<MkAvatar class="avatar" :user="note.user"/>
<i class="fas fa-retweet"></i>
<I18n :src="$ts.renotedBy" tag="span">
<template #user>
<MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
<MkUserName :user="note.user"/>
</MkA>
</template>
</I18n>
<div class="info">
<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
<MkTime :time="note.createdAt"/>
</button>
<span class="visibility" v-if="note.visibility !== 'public'">
<span v-if="note.visibility !== 'public'" class="visibility">
<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
</span>
<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
<span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
</div>
</div>
<article class="article" @contextmenu.stop="onContextmenu">
@ -38,18 +38,18 @@
<MkAvatar class="avatar" :user="appearNote.user" :show-indicator="true"/>
<div class="body">
<div class="top">
<MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.user.id">
<MkA v-user-preview="appearNote.user.id" class="name" :to="userPage(appearNote.user)">
<MkUserName :user="appearNote.user"/>
</MkA>
<span class="is-bot" v-if="appearNote.user.isBot">bot</span>
<span class="admin" v-if="appearNote.user.isAdmin"><i class="fas fa-bookmark"></i></span>
<span class="moderator" v-if="!appearNote.user.isAdmin && appearNote.user.isModerator"><i class="far fa-bookmark"></i></span>
<span class="visibility" v-if="appearNote.visibility !== 'public'">
<span v-if="appearNote.user.isBot" class="is-bot">bot</span>
<span v-if="appearNote.user.isAdmin" class="admin"><i class="fas fa-bookmark"></i></span>
<span v-if="!appearNote.user.isAdmin && appearNote.user.isModerator" class="moderator"><i class="far fa-bookmark"></i></span>
<span v-if="appearNote.visibility !== 'public'" class="visibility">
<i v-if="appearNote.visibility === 'home'" class="fas fa-home"></i>
<i v-else-if="appearNote.visibility === 'followers'" class="fas fa-unlock"></i>
<i v-else-if="appearNote.visibility === 'specified'" class="fas fa-envelope"></i>
</span>
<span class="localOnly" v-if="appearNote.localOnly"><i class="fas fa-biohazard"></i></span>
<span v-if="appearNote.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
</div>
<div class="username"><MkAcct :user="appearNote.user"/></div>
<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
@ -61,26 +61,26 @@
<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
<XCwButton v-model="showContent" :note="appearNote"/>
</p>
<div class="content" v-show="appearNote.cw == null || showContent">
<div v-show="appearNote.cw == null || showContent" class="content">
<div class="text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
<a class="rp" v-if="appearNote.renote != null">RN:</a>
<div class="translation" v-if="translating || translation">
<a v-if="appearNote.renote != null" class="rp">RN:</a>
<div v-if="translating || translation" class="translation">
<MkLoading v-if="translating" mini/>
<div class="translated" v-else>
<div v-else class="translated">
<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
</div>
</div>
</div>
<div class="files" v-if="appearNote.files.length > 0">
<div v-if="appearNote.files.length > 0" class="files">
<XMediaList :media-list="appearNote.files"/>
</div>
<XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="true" class="url-preview"/>
<div class="renote" v-if="appearNote.renote"><XNoteSimple :note="appearNote.renote"/></div>
<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" class="url-preview"/>
<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
</div>
<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
</div>
@ -88,20 +88,20 @@
<div class="info">
<MkTime class="created-at" :time="appearNote.createdAt" mode="detail"/>
</div>
<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
<button @click="reply()" class="button _button">
<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
<button class="button _button" @click="reply()">
<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
<template v-else><i class="fas fa-reply"></i></template>
<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
</button>
<XRenoteButton class="button" :note="appearNote" :count="appearNote.renoteCount" ref="renoteButton"/>
<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
<i class="fas fa-plus"></i>
</button>
<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton">
<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
<i class="fas fa-minus"></i>
</button>
<button class="button _button" @click="menu()" ref="menuButton">
<button ref="menuButton" class="button _button" @click="menu()">
<i class="fas fa-ellipsis-h"></i>
</button>
</footer>
@ -112,7 +112,7 @@
<div v-else class="_panel muted" @click="muted = false">
<I18n :src="$ts.userSaysSomething" tag="small">
<template #name>
<MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.userId">
<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
<MkUserName :user="appearNote.user"/>
</MkA>
</template>

12
packages/client/src/components/note-header.vue
View file

@ -1,22 +1,22 @@
<template>
<header class="kkwtjztg">
<MkA class="name" :to="userPage(note.user)" v-user-preview="note.user.id">
<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
<MkUserName :user="note.user"/>
</MkA>
<div class="is-bot" v-if="note.user.isBot">bot</div>
<div v-if="note.user.isBot" class="is-bot">bot</div>
<div class="username"><MkAcct :user="note.user"/></div>
<div class="admin" v-if="note.user.isAdmin"><i class="fas fa-bookmark"></i></div>
<div class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><i class="far fa-bookmark"></i></div>
<div v-if="note.user.isAdmin" class="admin"><i class="fas fa-bookmark"></i></div>
<div v-if="!note.user.isAdmin && note.user.isModerator" class="moderator"><i class="far fa-bookmark"></i></div>
<div class="info">
<MkA class="created-at" :to="notePage(note)">
<MkTime :time="note.createdAt"/>
</MkA>
<span class="visibility" v-if="note.visibility !== 'public'">
<span v-if="note.visibility !== 'public'" class="visibility">
<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
</span>
<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
<span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
</div>
</header>
</template>

2
packages/client/src/components/note-preview.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="fefdfafb" v-size="{ min: [350, 500] }">
<div v-size="{ min: [350, 500] }" class="fefdfafb">
<MkAvatar class="avatar" :user="$i"/>
<div class="main">
<div class="header">

6
packages/client/src/components/note-simple.vue
View file

@ -1,14 +1,14 @@
<template>
<div class="yohlumlk" v-size="{ min: [350, 500] }">
<div v-size="{ min: [350, 500] }" class="yohlumlk">
<MkAvatar class="avatar" :user="note.user"/>
<div class="main">
<XNoteHeader class="header" :note="note" :mini="true"/>
<div class="body">
<p v-if="note.cw != null" class="cw">
<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
<span v-if="note.cw != ''" class="text">{{ note.cw }}</span>
<XCwButton v-model="showContent" :note="note"/>
</p>
<div class="content" v-show="note.cw == null || showContent">
<div v-show="note.cw == null || showContent" class="content">
<XSubNote-content class="text" :note="note"/>
</div>
</div>

4
packages/client/src/components/note.sub.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="wrpstxzv" :class="{ children: depth > 1 }" v-size="{ max: [450] }">
<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1 }">
<div class="main">
<MkAvatar class="avatar" :user="note.user"/>
<div class="body">
@ -9,7 +9,7 @@
<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis" />
<XCwButton v-model="showContent" :note="note"/>
</p>
<div class="content" v-show="note.cw == null || showContent">
<div v-show="note.cw == null || showContent" class="content">
<XSubNote-content class="text" :note="note"/>
</div>
</div>

58
packages/client/src/components/note.vue
View file

@ -1,38 +1,38 @@
<template>
<div
class="tkcbzcuz"
v-if="!muted"
v-show="!isDeleted"
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }"
v-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }"
class="tkcbzcuz"
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }"
>
<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
<div class="info" v-if="pinned"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedNote }}</div>
<div class="info" v-if="appearNote._prId_"><i class="fas fa-bullhorn"></i> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <i class="fas fa-times"></i></button></div>
<div class="info" v-if="appearNote._featuredId_"><i class="fas fa-bolt"></i> {{ $ts.featured }}</div>
<div class="renote" v-if="isRenote">
<XSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
<div v-if="pinned" class="info"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedNote }}</div>
<div v-if="appearNote._prId_" class="info"><i class="fas fa-bullhorn"></i> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <i class="fas fa-times"></i></button></div>
<div v-if="appearNote._featuredId_" class="info"><i class="fas fa-bolt"></i> {{ $ts.featured }}</div>
<div v-if="isRenote" class="renote">
<MkAvatar class="avatar" :user="note.user"/>
<i class="fas fa-retweet"></i>
<I18n :src="$ts.renotedBy" tag="span">
<template #user>
<MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
<MkUserName :user="note.user"/>
</MkA>
</template>
</I18n>
<div class="info">
<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
<MkTime :time="note.createdAt"/>
</button>
<span class="visibility" v-if="note.visibility !== 'public'">
<span v-if="note.visibility !== 'public'" class="visibility">
<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
</span>
<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
<span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
</div>
</div>
<article class="article" @contextmenu.stop="onContextmenu">
@ -45,26 +45,26 @@
<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
<XCwButton v-model="showContent" :note="appearNote"/>
</p>
<div class="content" :class="{ collapsed }" v-show="appearNote.cw == null || showContent">
<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed }">
<div class="text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
<a class="rp" v-if="appearNote.renote != null">RN:</a>
<div class="translation" v-if="translating || translation">
<a v-if="appearNote.renote != null" class="rp">RN:</a>
<div v-if="translating || translation" class="translation">
<MkLoading v-if="translating" mini/>
<div class="translated" v-else>
<div v-else class="translated">
<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
</div>
</div>
</div>
<div class="files" v-if="appearNote.files.length > 0">
<div v-if="appearNote.files.length > 0" class="files">
<XMediaList :media-list="appearNote.files"/>
</div>
<XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="false" class="url-preview"/>
<div class="renote" v-if="appearNote.renote"><XNoteSimple :note="appearNote.renote"/></div>
<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
<button v-if="collapsed" class="fade _button" @click="collapsed = false">
<span>{{ $ts.showMore }}</span>
</button>
@ -72,20 +72,20 @@
<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
</div>
<footer class="footer">
<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
<button @click="reply()" class="button _button">
<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
<button class="button _button" @click="reply()">
<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
<template v-else><i class="fas fa-reply"></i></template>
<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
</button>
<XRenoteButton class="button" :note="appearNote" :count="appearNote.renoteCount" ref="renoteButton"/>
<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
<i class="fas fa-plus"></i>
</button>
<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton">
<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
<i class="fas fa-minus"></i>
</button>
<button class="button _button" @click="menu()" ref="menuButton">
<button ref="menuButton" class="button _button" @click="menu()">
<i class="fas fa-ellipsis-h"></i>
</button>
</footer>
@ -95,7 +95,7 @@
<div v-else class="muted" @click="muted = false">
<I18n :src="$ts.userSaysSomething" tag="small">
<template #name>
<MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.userId">
<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
<MkUserName :user="appearNote.user"/>
</MkA>
</template>

10
packages/client/src/components/notes.vue
View file

@ -4,25 +4,25 @@
<MkError v-else-if="error" @retry="init()"/>
<div class="_fullinfo" v-else-if="empty">
<div v-else-if="empty" class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ $ts.noNotes }}</div>
</div>
<div v-else class="giivymft" :class="{ noGap }">
<div v-show="more && reversed" style="margin-bottom: var(--margin);">
<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<MkButton style="margin: 0 auto;" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMoreFeature">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</MkButton>
</div>
<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap" :ad="true" class="notes">
<XNote class="qtqtichx" :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
<XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap" :ad="true" class="notes">
<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note" @update:note="updated(note, $event)"/>
</XList>
<div v-show="more && !reversed" style="margin-top: var(--margin);">
<MkButton style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<MkButton v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" style="margin: 0 auto;" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</MkButton>

8
packages/client/src/components/notification.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="qglefbjs" :class="notification.type" v-size="{ max: [500, 600] }" ref="elRef">
<div ref="elRef" v-size="{ max: [500, 600] }" class="qglefbjs" :class="notification.type">
<div class="head">
<MkAvatar v-if="notification.user" class="icon" :user="notification.user"/>
<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
@ -15,6 +15,7 @@
<i v-else-if="notification.type === 'pollVote'" class="fas fa-poll-h"></i>
<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
<XReactionIcon v-else-if="notification.type === 'reaction'"
ref="reactionRef"
:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
:custom-emojis="notification.note.emojis"
:no-style="true"
@ -22,15 +23,14 @@
@mouseover="onReactionMouseover"
@mouseleave="onReactionMouseleave"
@touchend="onReactionMouseleave"
ref="reactionRef"
/>
</div>
</div>
<div class="tail">
<header>
<MkA v-if="notification.user" class="name" :to="userPage(notification.user)" v-user-preview="notification.user.id"><MkUserName :user="notification.user"/></MkA>
<MkA v-if="notification.user" v-user-preview="notification.user.id" class="name" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
<span v-else>{{ notification.header }}</span>
<MkTime :time="notification.createdAt" v-if="withTime" class="time"/>
<MkTime v-if="withTime" :time="notification.createdAt" class="time"/>
</header>
<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
<i class="fas fa-quote-left"></i>

10
packages/client/src/components/notifications.vue
View file

@ -4,15 +4,15 @@
<MkError v-else-if="error" @retry="init()"/>
<p class="mfcuwfyp" v-else-if="empty">{{ $ts.noNotifications }}</p>
<p v-else-if="empty" class="mfcuwfyp">{{ $ts.noNotifications }}</p>
<div v-else>
<XList class="elsfgstc" :items="items" v-slot="{ item: notification }" :no-gap="true">
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
<XList v-slot="{ item: notification }" class="elsfgstc" :items="items" :no-gap="true">
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" @update:note="noteUpdated(notification.note, $event)"/>
<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
</XList>
<MkButton primary style="margin: var(--margin) auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<MkButton v-show="more" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" primary style="margin: var(--margin) auto;" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore">
<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
<template v-if="moreFetching"><MkLoading inline/></template>
</MkButton>

2
packages/client/src/components/page-preview.vue
View file

@ -1,6 +1,6 @@
<template>
<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _block _isolated" tabindex="-1">
<div class="thumbnail" v-if="page.eyeCatchingImage" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
<div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
<article>
<header>
<h1 :title="page.title">{{ page.title }}</h1>

2
packages/client/src/components/page-window.vue
View file

@ -14,7 +14,7 @@
</template>
</template>
<template #headerLeft>
<button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button>
<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
</template>
<div class="yrolvcoq">
<MkStickyContainer>

2
packages/client/src/components/page/page.block.vue
View file

@ -1,5 +1,5 @@
<template>
<component :is="'x-' + block.type" :block="block" :hpml="hpml" :key="block.id" :h="h"/>
<component :is="'x-' + block.type" :key="block.id" :block="block" :hpml="hpml" :h="h"/>
</template>
<script lang="ts">

2
packages/client/src/components/page/page.button.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<MkButton class="kudkigyw" @click="click()" :primary="block.primary">{{ hpml.interpolate(block.text) }}</MkButton>
<MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
</div>
</template>

2
packages/client/src/components/page/page.if.vue
View file

@ -1,6 +1,6 @@
<template>
<div v-show="hpml.vars.value[block.var]">
<XBlock v-for="child in block.children" :block="child" :hpml="hpml" :key="child.id" :h="h"/>
<XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h"/>
</div>
</template>

4
packages/client/src/components/page/page.note.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="voxdxuby">
<XNote v-if="note && !block.detailed" v-model:note="note" :key="note.id + ':normal'"/>
<XNoteDetailed v-if="note && block.detailed" v-model:note="note" :key="note.id + ':detail'"/>
<XNote v-if="note && !block.detailed" :key="note.id + ':normal'" v-model:note="note"/>
<XNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" v-model:note="note"/>
</div>
</template>

2
packages/client/src/components/page/page.number-input.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<MkInput class="kudkigyw" :model-value="value" @update:modelValue="updateValue($event)" type="number">
<MkInput class="kudkigyw" :model-value="value" type="number" @update:modelValue="updateValue($event)">
<template #label>{{ hpml.interpolate(block.text) }}</template>
</MkInput>
</div>

2
packages/client/src/components/page/page.post.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="ngbfujlo">
<MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea>
<MkButton class="button" primary @click="post()" :disabled="posting || posted">
<MkButton class="button" primary :disabled="posting || posted" @click="post()">
<i v-if="posted" class="fas fa-check"></i>
<i v-else class="fas fa-paper-plane"></i>
</MkButton>

2
packages/client/src/components/page/page.radio-button.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<div>{{ hpml.interpolate(block.title) }}</div>
<MkRadio v-for="item in block.values" :modelValue="value" @update:modelValue="updateValue($event)" :value="item" :key="item">{{ item }}</MkRadio>
<MkRadio v-for="item in block.values" :key="item" :modelValue="value" :value="item" @update:modelValue="updateValue($event)">{{ item }}</MkRadio>
</div>
</template>

2
packages/client/src/components/page/page.section.vue
View file

@ -3,7 +3,7 @@
<component :is="'h' + h">{{ block.title }}</component>
<div class="children">
<XBlock v-for="child in block.children" :block="child" :hpml="hpml" :key="child.id" :h="h + 1"/>
<XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h + 1"/>
</div>
</section>
</template>

2
packages/client/src/components/page/page.text-input.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<MkInput class="kudkigyw" :model-value="value" @update:modelValue="updateValue($event)" type="text">
<MkInput class="kudkigyw" :model-value="value" type="text" @update:modelValue="updateValue($event)">
<template #label>{{ hpml.interpolate(block.text) }}</template>
</MkInput>
</div>

4
packages/client/src/components/page/page.text.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="mrdgzndn">
<Mfm :text="text" :is-note="false" :i="$i" :key="text"/>
<MkUrlPreview v-for="url in urls" :url="url" :key="url" class="url"/>
<Mfm :key="text" :text="text" :is-note="false" :i="$i"/>
<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url"/>
</div>
</template>

4
packages/client/src/components/page/page.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }" v-if="hpml">
<XBlock v-for="child in page.content" :block="child" :hpml="hpml" :key="child.id" :h="2"/>
<div v-if="hpml" class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
<XBlock v-for="child in page.content" :key="child.id" :block="child" :hpml="hpml" :h="2"/>
</div>
</template>

10
packages/client/src/components/poll-editor.vue
View file

@ -1,19 +1,19 @@
<template>
<div class="zmdxowus">
<p class="caution" v-if="choices.length < 2">
<p v-if="choices.length < 2" class="caution">
<i class="fas fa-exclamation-triangle"></i>{{ $ts._poll.noOnlyOneChoice }}
</p>
<ul ref="choices">
<li v-for="(choice, i) in choices" :key="i">
<MkInput class="input" :model-value="choice" @update:modelValue="onInput(i, $event)" :placeholder="$t('_poll.choiceN', { n: i + 1 })">
<MkInput class="input" :model-value="choice" :placeholder="$t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)">
</MkInput>
<button @click="remove(i)" class="_button">
<button class="_button" @click="remove(i)">
<i class="fas fa-times"></i>
</button>
</li>
</ul>
<MkButton class="add" v-if="choices.length < 10" @click="add">{{ $ts.add }}</MkButton>
<MkButton class="add" v-else disabled>{{ $ts._poll.noMore }}</MkButton>
<MkButton v-if="choices.length < 10" class="add" @click="add">{{ $ts.add }}</MkButton>
<MkButton v-else class="add" disabled>{{ $ts._poll.noMore }}</MkButton>
<section>
<MkSwitch v-model="multiple">{{ $ts._poll.canMultipleVote }}</MkSwitch>
<div>

4
packages/client/src/components/poll.vue
View file

@ -1,12 +1,12 @@
<template>
<div class="tivcixzd" :class="{ done: closed || isVoted }">
<ul>
<li v-for="(choice, i) in poll.choices" :key="i" @click="vote(i)" :class="{ voted: choice.voted }">
<li v-for="(choice, i) in poll.choices" :key="i" :class="{ voted: choice.voted }" @click="vote(i)">
<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
<span>
<template v-if="choice.isVoted"><i class="fas fa-check"></i></template>
<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
<span class="votes" v-if="showResult">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
<span v-if="showResult" class="votes">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
</span>
</li>
</ul>

6
packages/client/src/components/post-form-attaches.vue
View file

@ -1,10 +1,10 @@
<template>
<div class="skeikyzd" v-show="files.length != 0">
<XDraggable class="files" v-model="_files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
<div v-show="files.length != 0" class="skeikyzd">
<XDraggable v-model="_files" class="files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
<template #item="{element}">
<div @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
<div class="sensitive" v-if="element.isSensitive">
<div v-if="element.isSensitive" class="sensitive">
<i class="fas fa-exclamation-triangle icon"></i>
</div>
</div>

4
packages/client/src/components/post-form-dialog.vue
View file

@ -1,6 +1,6 @@
<template>
<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')" :position="'top'">
<MkPostForm @posted="$refs.modal.close()" @cancel="$refs.modal.close()" @esc="$refs.modal.close()" v-bind="$attrs"/>
<MkModal ref="modal" :position="'top'" @click="$refs.modal.close()" @closed="$emit('closed')">
<MkPostForm v-bind="$attrs" @posted="$refs.modal.close()" @cancel="$refs.modal.close()" @esc="$refs.modal.close()"/>
</MkModal>
</template>

46
packages/client/src/components/post-form.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="gafaadew" :class="{ modal, _popup: modal }"
v-size="{ max: [310, 500] }"
<div v-size="{ max: [310, 500] }" class="gafaadew"
:class="{ modal, _popup: modal }"
@dragover.stop="onDragover"
@dragenter="onDragenter"
@dragleave="onDragleave"
@ -10,21 +10,21 @@
<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="fas fa-times"></i></button>
<div>
<span class="text-count" :class="{ over: textLength > max }">{{ max - textLength }}</span>
<span class="local-only" v-if="localOnly"><i class="fas fa-biohazard"></i></span>
<button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$ts.visibility" :disabled="channel != null">
<span v-if="localOnly" class="local-only"><i class="fas fa-biohazard"></i></span>
<button ref="visibilityButton" v-tooltip="$ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
<span v-if="visibility === 'public'"><i class="fas fa-globe"></i></span>
<span v-if="visibility === 'home'"><i class="fas fa-home"></i></span>
<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
</button>
<button class="_button preview" @click="showPreview = !showPreview" :class="{ active: showPreview }" v-tooltip="$ts.previewNoteText"><i class="fas fa-file-code"></i></button>
<button class="submit _buttonGradate" :disabled="!canPost" @click="post" data-cy-open-post-form-submit>{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
<button v-tooltip="$ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="fas fa-file-code"></i></button>
<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
</div>
</header>
<div class="form" :class="{ fixed }">
<XNoteSimple class="preview" v-if="reply" :note="reply"/>
<XNoteSimple class="preview" v-if="renote" :note="renote"/>
<div class="with-quote" v-if="quoteId"><i class="fas fa-quote-left"></i> {{ $ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
<XNoteSimple v-if="reply" class="preview" :note="reply"/>
<XNoteSimple v-if="renote" class="preview" :note="renote"/>
<div v-if="quoteId" class="with-quote"><i class="fas fa-quote-left"></i> {{ $ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
<div v-if="visibility === 'specified'" class="to-specified">
<span style="margin-right: 8px;">{{ $ts.recipient }}</span>
<div class="visibleUsers">
@ -32,27 +32,27 @@
<MkAcct :user="u"/>
<button class="_button" @click="removeVisibleUser(u)"><i class="fas fa-times"></i></button>
</span>
<button @click="addVisibleUser" class="_buttonPrimary"><i class="fas fa-plus fa-fw"></i></button>
<button class="_buttonPrimary" @click="addVisibleUser"><i class="fas fa-plus fa-fw"></i></button>
</div>
</div>
<MkInfo warn v-if="hasNotSpecifiedMentions" class="hasNotSpecifiedMentions">{{ $ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ $ts.add }}</button></MkInfo>
<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd" data-cy-post-form-text/>
<input v-show="withHashtags" ref="hashtags" class="hashtags" v-model="hashtags" :placeholder="$ts.hashtags" list="hashtags">
<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ $ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ $ts.add }}</button></MkInfo>
<input v-show="useCw" ref="cw" v-model="cw" class="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
<textarea ref="text" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
<input v-show="withHashtags" ref="hashtags" v-model="hashtags" class="hashtags" :placeholder="$ts.hashtags" list="hashtags">
<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
<XNotePreview class="preview" v-if="showPreview" :text="text"/>
<XNotePreview v-if="showPreview" class="preview" :text="text"/>
<footer>
<button class="_button" @click="chooseFileFrom" v-tooltip="$ts.attachFile"><i class="fas fa-photo-video"></i></button>
<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><i class="fas fa-poll-h"></i></button>
<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$ts.useCw"><i class="fas fa-eye-slash"></i></button>
<button class="_button" @click="insertMention" v-tooltip="$ts.mention"><i class="fas fa-at"></i></button>
<button class="_button" @click="withHashtags = !withHashtags" :class="{ active: withHashtags }" v-tooltip="$ts.hashtags"><i class="fas fa-hashtag"></i></button>
<button class="_button" @click="insertEmoji" v-tooltip="$ts.emoji"><i class="fas fa-laugh-squint"></i></button>
<button class="_button" @click="showActions" v-tooltip="$ts.plugin" v-if="postFormActions.length > 0"><i class="fas fa-plug"></i></button>
<button v-tooltip="$ts.attachFile" class="_button" @click="chooseFileFrom"><i class="fas fa-photo-video"></i></button>
<button v-tooltip="$ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="fas fa-poll-h"></i></button>
<button v-tooltip="$ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="fas fa-eye-slash"></i></button>
<button v-tooltip="$ts.mention" class="_button" @click="insertMention"><i class="fas fa-at"></i></button>
<button v-tooltip="$ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="fas fa-hashtag"></i></button>
<button v-tooltip="$ts.emoji" class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
<button v-if="postFormActions.length > 0" v-tooltip="$ts.plugin" class="_button" @click="showActions"><i class="fas fa-plug"></i></button>
</footer>
<datalist id="hashtags">
<option v-for="hashtag in recentHashtags" :value="hashtag" :key="hashtag"/>
<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
</datalist>
</div>
</div>

2
packages/client/src/components/reaction-tooltip.vue
View file

@ -1,5 +1,5 @@
<template>
<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="340">
<MkTooltip ref="tooltip" :source="source" :max-width="340" @closed="$emit('closed')">
<div class="beeadbfb">
<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
<div class="name">{{ reaction.replace('@.', '') }}</div>

4
packages/client/src/components/reactions-viewer.details.vue
View file

@ -1,12 +1,12 @@
<template>
<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="340">
<MkTooltip ref="tooltip" :source="source" :max-width="340" @closed="$emit('closed')">
<div class="bqxuuuey">
<div class="reaction">
<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
<div class="name">{{ reaction.replace('@.', '') }}</div>
</div>
<div class="users">
<div class="user" v-for="u in users" :key="u.id">
<div v-for="u in users" :key="u.id" class="user">
<MkAvatar class="avatar" :user="u"/>
<MkUserName class="name" :user="u" :nowrap="true"/>
</div>

6
packages/client/src/components/reactions-viewer.reaction.vue
View file

@ -1,15 +1,15 @@
<template>
<button
v-if="count > 0"
ref="buttonRef"
v-particle="canToggle"
class="hkzvhatu _button"
:class="{ reacted: note.myReaction == reaction, canToggle }"
@click="toggleReaction()"
v-if="count > 0"
@touchstart.passive="onMouseover"
@mouseover="onMouseover"
@mouseleave="onMouseleave"
@touchend="onMouseleave"
ref="buttonRef"
v-particle="canToggle"
>
<XReactionIcon :reaction="reaction" :custom-emojis="note.emojis"/>
<span>{{ count }}</span>

2
packages/client/src/components/reactions-viewer.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="tdflqwzn" :class="{ isMe }">
<XReaction v-for="(count, reaction) in note.reactions" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note" :key="reaction"/>
<XReaction v-for="(count, reaction) in note.reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/>
</div>
</template>

4
packages/client/src/components/renote-button.vue
View file

@ -1,15 +1,15 @@
<template>
<button v-if="canRenote"
ref="buttonRef"
class="eddddedb _button canRenote"
@click="renote()"
@touchstart.passive="onMouseover"
@mouseover="onMouseover"
@mouseleave="onMouseleave"
@touchend="onMouseleave"
ref="buttonRef"
>
<i class="fas fa-retweet"></i>
<p class="count" v-if="count > 0">{{ count }}</p>
<p v-if="count > 0" class="count">{{ count }}</p>
</button>
<button v-else class="eddddedb _button">
<i class="fas fa-ban"></i>

4
packages/client/src/components/renote.details.vue
View file

@ -1,7 +1,7 @@
<template>
<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="250">
<MkTooltip ref="tooltip" :source="source" :max-width="250" @closed="$emit('closed')">
<div class="beaffaef">
<div class="user" v-for="u in users" :key="u.id">
<div v-for="u in users" :key="u.id" class="user">
<MkAvatar class="avatar" :user="u"/>
<MkUserName class="name" :user="u" :nowrap="true"/>
</div>

24
packages/client/src/components/signin.vue
View file

@ -1,31 +1,31 @@
<template>
<form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
<div class="auth _section _formRoot">
<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
<div class="normal-signin" v-if="!totpLogin">
<MkInput class="_formBlock" v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange" data-cy-signin-username>
<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }"></div>
<div v-if="!totpLogin" class="normal-signin">
<MkInput v-model="username" class="_formBlock" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
<template #prefix>@</template>
<template #suffix>@{{ host }}</template>
</MkInput>
<MkInput class="_formBlock" v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required data-cy-signin-password>
<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="$ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password>
<template #prefix><i class="fas fa-lock"></i></template>
<template #caption><button class="_textButton" @click="resetPassword" type="button">{{ $ts.forgotPassword }}</button></template>
<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ $ts.forgotPassword }}</button></template>
</MkInput>
<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
</div>
<div class="2fa-signin" v-if="totpLogin" :class="{ securityKeys: user && user.securityKeys }">
<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
<div v-if="user && user.securityKeys" class="twofa-group tap-group">
<p>{{ $ts.tapSecurityKey }}</p>
<MkButton @click="queryKey" v-if="!queryingKey">
<MkButton v-if="!queryingKey" @click="queryKey">
{{ $ts.retry }}
</MkButton>
</div>
<div class="or-hr" v-if="user && user.securityKeys">
<div v-if="user && user.securityKeys" class="or-hr">
<p class="or-msg">{{ $ts.or }}</p>
</div>
<div class="twofa-group totp-group">
<p style="margin-bottom:0;">{{ $ts.twoStepAuthentication }}</p>
<MkInput v-model="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" :with-password-toggle="true" required>
<template #label>{{ $ts.password }}</template>
<template #prefix><i class="fas fa-lock"></i></template>
</MkInput>
@ -38,9 +38,9 @@
</div>
</div>
<div class="social _section">
<a class="_borderButton _gap" v-if="meta && meta.enableTwitterIntegration" :href="`${apiUrl}/signin/twitter`"><i class="fab fa-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
<a class="_borderButton _gap" v-if="meta && meta.enableGithubIntegration" :href="`${apiUrl}/signin/github`"><i class="fab fa-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
<a class="_borderButton _gap" v-if="meta && meta.enableDiscordIntegration" :href="`${apiUrl}/signin/discord`"><i class="fab fa-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="fab fa-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="fab fa-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="fab fa-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
</div>
</form>
</template>

22
packages/client/src/components/signup.vue
View file

@ -1,12 +1,12 @@
<template>
<form class="qlvuhzng _formRoot" @submit.prevent="onSubmit" :autocomplete="Math.random()">
<form class="qlvuhzng _formRoot" :autocomplete="Math.random()" @submit.prevent="onSubmit">
<template v-if="meta">
<MkInput class="_formBlock" v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
<MkInput v-if="meta.disableRegistration" v-model="invitationCode" class="_formBlock" type="text" :autocomplete="Math.random()" spellcheck="false" required>
<template #label>{{ $ts.invitationCode }}</template>
<template #prefix><i class="fas fa-key"></i></template>
</MkInput>
<MkInput class="_formBlock" v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername" data-cy-signup-username>
<template #label>{{ $ts.username }} <div class="_button _help" v-tooltip:dialog="$ts.usernameInfo"><i class="far fa-question-circle"></i></div></template>
<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
<template #label>{{ $ts.username }} <div v-tooltip:dialog="$ts.usernameInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
<template #prefix>@</template>
<template #suffix>@{{ host }}</template>
<template #caption>
@ -19,8 +19,8 @@
<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
</template>
</MkInput>
<MkInput v-if="meta.emailRequiredForSignup" class="_formBlock" v-model="email" :debounce="true" type="email" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeEmail" data-cy-signup-email>
<template #label>{{ $ts.emailAddress }} <div class="_button _help" v-tooltip:dialog="$ts._signup.emailAddressInfo"><i class="far fa-question-circle"></i></div></template>
<MkInput v-if="meta.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :autocomplete="Math.random()" spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
<template #label>{{ $ts.emailAddress }} <div v-tooltip:dialog="$ts._signup.emailAddressInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
<template #prefix><i class="fas fa-envelope"></i></template>
<template #caption>
<span v-if="emailState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ $ts.checking }}</span>
@ -34,7 +34,7 @@
<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
</template>
</MkInput>
<MkInput class="_formBlock" v-model="password" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePassword" data-cy-signup-password>
<MkInput v-model="password" class="_formBlock" type="password" :autocomplete="Math.random()" required data-cy-signup-password @update:modelValue="onChangePassword">
<template #label>{{ $ts.password }}</template>
<template #prefix><i class="fas fa-lock"></i></template>
<template #caption>
@ -43,7 +43,7 @@
<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</span>
</template>
</MkInput>
<MkInput class="_formBlock" v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePasswordRetype" data-cy-signup-password-retype>
<MkInput v-model="retypedPassword" class="_formBlock" type="password" :autocomplete="Math.random()" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
<template #label>{{ $ts.password }} ({{ $ts.retype }})</template>
<template #prefix><i class="fas fa-lock"></i></template>
<template #caption>
@ -52,15 +52,15 @@
</template>
</MkInput>
<label v-if="meta.tosUrl" class="_formBlock tou">
<input type="checkbox" v-model="ToSAgreement">
<input v-model="ToSAgreement" type="checkbox">
<I18n :src="$ts.agreeTo">
<template #0>
<a :href="meta.tosUrl" class="_link" target="_blank">{{ $ts.tos }}</a>
</template>
</I18n>
</label>
<captcha v-if="meta.enableHcaptcha" class="_formBlock captcha" provider="hcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
<captcha v-if="meta.enableRecaptcha" class="_formBlock captcha" provider="recaptcha" ref="recaptcha" v-model="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
<captcha v-if="meta.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="meta.hcaptchaSiteKey"/>
<captcha v-if="meta.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="meta.recaptchaSiteKey"/>
<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ $ts.start }}</MkButton>
</template>
</form>

4
packages/client/src/components/sub-note-content.vue
View file

@ -3,9 +3,9 @@
<div class="body">
<span v-if="note.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
<span v-if="note.deletedAt" style="opacity: 0.5">({{ $ts.deleted }})</span>
<MkA class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
<MkA class="rp" v-if="note.renoteId" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
</div>
<details v-if="note.files.length > 0">
<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>

8
packages/client/src/components/taskmanager.vue
View file

@ -12,7 +12,7 @@
</MkTab>
<div class="content">
<div v-if="tab === 'windows'" class="windows" v-follow>
<div v-if="tab === 'windows'" v-follow class="windows">
<div class="header">
<div>#ID</div>
<div>Component</div>
@ -24,7 +24,7 @@
<div><button class="_textButton" @click="killPopup(p)">Kill</button></div>
</div>
</div>
<div v-if="tab === 'stream'" class="stream" v-follow>
<div v-if="tab === 'stream'" v-follow class="stream">
<div class="header">
<div>#ID</div>
<div>Ch</div>
@ -41,7 +41,7 @@
<div>{{ c.out }}</div>
</div>
</div>
<div v-if="tab === 'streamPool'" class="streamPool" v-follow>
<div v-if="tab === 'streamPool'" v-follow class="streamPool">
<div class="header">
<div>#ID</div>
<div>Ch</div>
@ -53,7 +53,7 @@
<div>{{ p.users }}</div>
</div>
</div>
<div v-if="tab === 'api'" class="api" v-follow>
<div v-if="tab === 'api'" v-follow class="api">
<div class="header">
<div>#ID</div>
<div>Endpoint</div>

2
packages/client/src/components/timeline.vue
View file

@ -1,5 +1,5 @@
<template>
<XNotes :no-gap="!$store.state.showGapBetweenNotesInTimeline" ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
<XNotes ref="tl" :no-gap="!$store.state.showGapBetweenNotesInTimeline" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
</template>
<script lang="ts">

2
packages/client/src/components/toast.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="mk-toast">
<transition name="notification-slide" appear @after-leave="$emit('closed')">
<XNotification :notification="notification" class="notification _acrylic" v-if="showing"/>
<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
</transition>
</div>
</template>

6
packages/client/src/components/ui/container.vue
View file

@ -1,10 +1,10 @@
<template>
<div class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380] }">
<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
<header v-if="showHeader" ref="header">
<div class="title"><slot name="header"></slot></div>
<div class="sub">
<slot name="func"></slot>
<button class="_button" v-if="foldable" @click="() => showBody = !showBody">
<button v-if="foldable" class="_button" @click="() => showBody = !showBody">
<template v-if="showBody"><i class="fas fa-angle-up"></i></template>
<template v-else><i class="fas fa-angle-down"></i></template>
</button>
@ -16,7 +16,7 @@
@leave="leave"
@after-leave="afterLeave"
>
<div v-show="showBody" class="content" :class="{ omitted }" ref="content">
<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
<slot></slot>
<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
<span>{{ $ts.showMore }}</span>

2
packages/client/src/components/ui/context-menu.vue
View file

@ -1,7 +1,7 @@
<template>
<transition :name="$store.state.animation ? 'fade' : ''" appear>
<div class="nvlagfpb" @contextmenu.prevent.stop="() => {}">
<MkMenu :items="items" @close="$emit('closed')" class="_popup _shadow" :align="'left'"/>
<MkMenu :items="items" class="_popup _shadow" :align="'left'" @close="$emit('closed')"/>
</div>
</transition>
</template>

4
packages/client/src/components/ui/folder.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="ssazuxis" v-size="{ max: [500] }">
<header @click="showBody = !showBody" class="_button" :style="{ background: bg }">
<div v-size="{ max: [500] }" class="ssazuxis">
<header class="_button" :style="{ background: bg }" @click="showBody = !showBody">
<div class="title"><slot name="header"></slot></div>
<div class="divider"></div>
<button class="_button">

14
packages/client/src/components/ui/menu.vue
View file

@ -1,9 +1,9 @@
<template>
<div class="rrevdjwt" :class="{ center: align === 'center' }"
<div ref="items" v-hotkey="keymap"
class="rrevdjwt"
:class="{ center: align === 'center' }"
:style="{ width: width ? width + 'px' : null }"
ref="items"
@contextmenu.self="e => e.preventDefault()"
v-hotkey="keymap"
>
<template v-for="(item, i) in items2">
<div v-if="item === null" class="divider"></div>
@ -13,22 +13,22 @@
<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
<span><MkEllipsis/></span>
</span>
<MkA v-else-if="item.type === 'link'" :to="item.to" @click.passive="close()" :tabindex="i" class="_button item">
<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close()">
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
<span>{{ item.text }}</span>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</MkA>
<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" @click="close()" :tabindex="i" class="_button item">
<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close()">
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<span>{{ item.text }}</span>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</a>
<button v-else-if="item.type === 'user'" @click="clicked(item.action, $event)" :tabindex="i" class="_button item">
<button v-else-if="item.type === 'user'" :tabindex="i" class="_button item" @click="clicked(item.action, $event)">
<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</button>
<button v-else @click="clicked(item.action, $event)" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active">
<button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)">
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
<span>{{ item.text }}</span>

12
packages/client/src/components/ui/modal-window.vue
View file

@ -1,20 +1,20 @@
<template>
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
<div class="ebkgoccj _window _narrow_" @keydown="onKeydown" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }">
<div class="ebkgoccj _window _narrow_" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
<div class="header">
<button class="_button" v-if="withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button>
<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="fas fa-times"></i></button>
<span class="title">
<slot name="header"></slot>
</span>
<button class="_button" v-if="!withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button>
<button class="_button" v-if="withOkButton" @click="$emit('ok')" :disabled="okButtonDisabled"><i class="fas fa-check"></i></button>
<button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="fas fa-times"></i></button>
<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="fas fa-check"></i></button>
</div>
<div class="body" v-if="padding">
<div v-if="padding" class="body">
<div class="_section">
<slot></slot>
</div>
</div>
<div class="body" v-else>
<div v-else class="body">
<slot></slot>
</div>
</div>

4
packages/client/src/components/ui/modal.vue
View file

@ -1,8 +1,8 @@
<template>
<transition :name="$store.state.animation ? popup ? 'modal-popup' : 'modal' : ''" :duration="$store.state.animation ? popup ? 500 : 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
<div v-show="manualShowing != null ? manualShowing : showing" class="qzhlnise" :class="{ front }" v-hotkey.global="keymap" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" class="qzhlnise" :class="{ front }" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<div class="bg _modalBg" @click="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
<div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content">
<div ref="content" class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick">
<slot></slot>
</div>
</div>

Some files were not shown because too many files have changed in this diff Show more