diff --git a/packages/client/src/components/form-dialog.vue b/packages/client/src/components/form-dialog.vue
index 27810d315a033d5b783c1cce9ff695cf9b343c4e..fbf49af5d23b95106a597804882e35041aa0fb6e 100644
--- a/packages/client/src/components/form-dialog.vue
+++ b/packages/client/src/components/form-dialog.vue
@@ -12,66 +12,67 @@
<template #header>
{{ title }}
</template>
- <FormBase class="xkpnjxcv">
- <template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
- <FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1">
- <span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span>
- <template v-if="form[item].description" #desc>{{ form[item].description }}</template>
- </FormInput>
- <FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text">
- <span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span>
- <template v-if="form[item].description" #desc>{{ form[item].description }}</template>
- </FormInput>
- <FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]">
- <span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span>
- <template v-if="form[item].description" #desc>{{ form[item].description }}</template>
- </FormTextarea>
- <FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]">
- <span v-text="form[item].label || item"></span>
- <template v-if="form[item].description" #desc>{{ form[item].description }}</template>
- </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" :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" :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>
- <template v-if="form[item].description" #desc>{{ form[item].description }}</template>
- </FormRange>
- <FormButton v-else-if="form[item].type === 'button'" @click="form[item].action($event, values)">
- <span v-text="form[item].content || item"></span>
- </FormButton>
- </template>
- </FormBase>
+
+ <MkSpacer :margin-min="20" :margin-max="32">
+ <div class="xkpnjxcv _formRoot">
+ <template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
+ <FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1" class="_formBlock">
+ <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+ <template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+ </FormInput>
+ <FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text" class="_formBlock">
+ <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+ <template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+ </FormInput>
+ <FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]" class="_formBlock">
+ <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+ <template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+ </FormTextarea>
+ <FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]" class="_formBlock">
+ <span v-text="form[item].label || item"></span>
+ <template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+ </FormSwitch>
+ <FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]" class="_formBlock">
+ <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" :key="item.value" :value="item.value">{{ item.label }}</option>
+ </FormSelect>
+ <FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]" class="_formBlock">
+ <template #caption><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" :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" class="_formBlock">
+ <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+ <template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+ </FormRange>
+ <MkButton v-else-if="form[item].type === 'button'" @click="form[item].action($event, values)" class="_formBlock">
+ <span v-text="form[item].content || item"></span>
+ </MkButton>
+ </template>
+ </div>
+ </MkSpacer>
</XModalWindow>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import XModalWindow from '@/components/ui/modal-window.vue';
-import FormBase from './debobigego/base.vue';
-import FormInput from './debobigego/input.vue';
-import FormTextarea from './debobigego/textarea.vue';
-import FormSwitch from './debobigego/switch.vue';
-import FormSelect from './debobigego/select.vue';
-import FormRange from './debobigego/range.vue';
-import FormButton from './debobigego/button.vue';
-import FormRadios from './debobigego/radios.vue';
+import FormInput from './form/input.vue';
+import FormTextarea from './form/textarea.vue';
+import FormSwitch from './form/switch.vue';
+import FormSelect from './form/select.vue';
+import FormRange from './form/range.vue';
+import MkButton from './ui/button.vue';
+import FormRadios from './form/radios.vue';
export default defineComponent({
components: {
XModalWindow,
- FormBase,
FormInput,
FormTextarea,
FormSwitch,
FormSelect,
FormRange,
- FormButton,
+ MkButton,
FormRadios,
},
diff --git a/packages/client/src/components/reaction-tooltip.vue b/packages/client/src/components/reaction-tooltip.vue
index a52c295277cad2320f7de7d1870f80c90c894536..dda8e7c6d7391f6bd70ee04cb5681985b83dc708 100644
--- a/packages/client/src/components/reaction-tooltip.vue
+++ b/packages/client/src/components/reaction-tooltip.vue
@@ -41,6 +41,7 @@ export default defineComponent({
> .icon {
display: block;
width: 60px;
+ font-size: 60px; // unicodeãªçµµæ–‡å—ã«ã¤ã„ã¦ã¯widthãŒåŠ¹ã‹ãªã„ãŸã‚
margin: 0 auto;
}
diff --git a/packages/client/src/components/reactions-viewer.details.vue b/packages/client/src/components/reactions-viewer.details.vue
index 63c22b98c45f0f50ec5091c832d40f55d750192c..d6374517a280d4edf5e2cf2007d91836268c77f7 100644
--- a/packages/client/src/components/reactions-viewer.details.vue
+++ b/packages/client/src/components/reactions-viewer.details.vue
@@ -62,6 +62,7 @@ export default defineComponent({
> .icon {
display: block;
width: 60px;
+ font-size: 60px; // unicodeãªçµµæ–‡å—ã«ã¤ã„ã¦ã¯widthãŒåŠ¹ã‹ãªã„ãŸã‚
margin: 0 auto;
}
diff --git a/packages/client/src/components/ui/super-menu.vue b/packages/client/src/components/ui/super-menu.vue
index cb2154c48d2657b66aeec11e2167b5e23081f238..63a1d7063d079956cae2712796ea41a6c368bdb8 100644
--- a/packages/client/src/components/ui/super-menu.vue
+++ b/packages/client/src/components/ui/super-menu.vue
@@ -52,7 +52,7 @@ export default defineComponent({
> .title {
opacity: 0.7;
- margin: 0 0 8px 12px;
+ margin: 0 0 8px 0;
}
> .items {
diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue
index ff1c4c57fca147c5405602bc4a1da55201a0c35a..8df20097b3ba28c4f066ae665c586087493cd318 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -33,7 +33,7 @@
</div>
-->
- <MkPagination #default="{items}" ref="reports" :pagination="pagination" style="margin-top: var(--margin);">
+ <MkPagination v-slot="{items}" ref="reports" :pagination="pagination" style="margin-top: var(--margin);">
<div v-for="report in items" :key="report.id" class="bcekxzvu _card _gap">
<div class="_content target">
<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/>
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index 6f9a955da211590ab094cc5fb94ac20293182ee5..9c9b3b2d4f517d0f40695126bce6d7b6d9f3f5c4 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -7,7 +7,7 @@
</MkInput>
<MkPagination ref="emojis" :pagination="pagination">
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
- <template #default="{items}">
+ <template v-slot="{items}">
<div class="ldhfsamy">
<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="edit(emoji)">
<img :src="emoji.url" class="img" :alt="emoji.name"/>
@@ -31,7 +31,7 @@
</MkInput>
<MkPagination ref="remoteEmojis" :pagination="remotePagination">
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
- <template #default="{items}">
+ <template v-slot="{items}">
<div class="ldhfsamy">
<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
<img :src="emoji.url" class="img" :alt="emoji.name"/>
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index a6b0f8e59e36ad2a8fe1dee93caf78df74ff5882..032e394a667900294baaff7378a1d92f569adef0 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -28,7 +28,7 @@
<template #label>MIME type</template>
</MkInput>
</div>
- <MkPagination #default="{items}" ref="files" :pagination="pagination" class="urempief">
+ <MkPagination v-slot="{items}" ref="files" :pagination="pagination" class="urempief">
<button v-for="file in items" :key="file.id" class="file _panel _button _gap" @click="show(file, $event)">
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
<div class="body">
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index 016a013e513bfecc52ef94d8e4b9aae9ce374804..e7a3437167e61337739534bbfa90273098625aaf 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -36,7 +36,7 @@
</MkInput>
</div>
- <MkPagination #default="{items}" ref="users" :pagination="pagination" class="users">
+ <MkPagination v-slot="{items}" ref="users" :pagination="pagination" class="users">
<button v-for="user in items" :key="user.id" class="user _panel _button _gap" @click="show(user)">
<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
<div class="body">
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index 34879a18bd7d747014d48f409865140e7ae31fce..ca94640ddac2520620386c3d7524e8806632d665 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -1,6 +1,6 @@
<template>
<MkSpacer :content-max="800">
- <MkPagination #default="{items}" :pagination="pagination" class="ruryvtyk _content">
+ <MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _content">
<section v-for="(announcement, i) in items" :key="announcement.id" class="_card announcement">
<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
<div class="_content">
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index a7bd8a018c94fe604f60b32ced6b08e26eccd3eb..a08c2732797a5572860e1c75dbc0afe028624412 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -10,20 +10,20 @@
<div class="_section">
<div v-if="tab === 'featured'" class="_content grwlizim featured">
- <MkPagination #default="{items}" :pagination="featuredPagination">
+ <MkPagination v-slot="{items}" :pagination="featuredPagination">
<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
</MkPagination>
</div>
<div v-if="tab === 'following'" class="_content grwlizim following">
- <MkPagination #default="{items}" :pagination="followingPagination">
+ <MkPagination v-slot="{items}" :pagination="followingPagination">
<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
</MkPagination>
</div>
<div v-if="tab === 'owned'" class="_content grwlizim owned">
<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
- <MkPagination #default="{items}" :pagination="ownedPagination">
+ <MkPagination v-slot="{items}" :pagination="ownedPagination">
<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
</MkPagination>
</div>
diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue
index a868c344785da31f61a1be13340a3b258553bdca..4e5f428ff91d653ce1e4bfc0612e3b473ec83e16 100644
--- a/packages/client/src/pages/federation.vue
+++ b/packages/client/src/pages/federation.vue
@@ -41,7 +41,7 @@
</div>
</div>
- <MkPagination #default="{items}" ref="instances" :key="host + state" :pagination="pagination">
+ <MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
<div class="dqokceoi">
<MkA v-for="instance in items" :key="instance.id" class="instance" :to="`/instance-info/${instance.host}`">
<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index a4de393995d495ac7291d63bd4f9a45fcb45bb9f..54d695091d184a9a11a40cee68c3919260c3eb78 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -7,7 +7,7 @@
<div>{{ $ts.noFollowRequests }}</div>
</div>
</template>
- <template #default="{items}">
+ <template v-slot="{items}">
<div v-for="req in items" :key="req.id" class="user _panel">
<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
<div class="body">
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index a036f4286b6bfc130d3d39f77705e4c18a35052a..cd0d2a40e47dc887fb4ac55def6e85099a18c275 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -9,7 +9,7 @@
<div v-if="tab === 'explore'">
<MkFolder class="_gap">
<template #header><i class="fas fa-clock"></i>{{ $ts.recentPosts }}</template>
- <MkPagination #default="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
+ <MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
<div class="vfpdbgtk">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
@@ -17,7 +17,7 @@
</MkFolder>
<MkFolder class="_gap">
<template #header><i class="fas fa-fire-alt"></i>{{ $ts.popularPosts }}</template>
- <MkPagination #default="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
+ <MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
<div class="vfpdbgtk">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
@@ -25,7 +25,7 @@
</MkFolder>
</div>
<div v-else-if="tab === 'liked'">
- <MkPagination #default="{items}" :pagination="likedPostsPagination">
+ <MkPagination v-slot="{items}" :pagination="likedPostsPagination">
<div class="vfpdbgtk">
<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
</div>
@@ -33,7 +33,7 @@
</div>
<div v-else-if="tab === 'my'">
<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ $ts.postToGallery }}</MkA>
- <MkPagination #default="{items}" :pagination="myPostsPagination">
+ <MkPagination v-slot="{items}" :pagination="myPostsPagination">
<div class="vfpdbgtk">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index f145caf28ef456b0f239ee80422df9ce5e97b0c7..096947e6f80b26f195afe262eb1c77a97858e149 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -36,7 +36,7 @@
<MkAd :prefer="['horizontal', 'horizontal-big']"/>
<MkContainer :max-height="300" :foldable="true" class="other">
<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
- <MkPagination #default="{items}" :pagination="otherPostsPagination">
+ <MkPagination v-slot="{items}" :pagination="otherPostsPagination">
<div class="sdrarzaf">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index 8fc17c36066ef040cd077c32a99f0df033f7d91f..d185e796c38ca7a784276eb76b9a9cd70d0f047a 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -1,15 +1,17 @@
<template>
-<div class="ieepwinx _section">
- <MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+<MkSpacer :content-max="700">
+ <div class="ieepwinx">
+ <MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
- <div class="_content">
- <MkPagination #default="{items}" ref="list" :pagination="pagination">
- <MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
- <div class="name">{{ antenna.name }}</div>
- </MkA>
- </MkPagination>
+ <div class="">
+ <MkPagination v-slot="{items}" ref="list" :pagination="pagination">
+ <MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
+ <div class="name">{{ antenna.name }}</div>
+ </MkA>
+ </MkPagination>
+ </div>
</div>
-</div>
+</MkSpacer>
</template>
<script lang="ts">
@@ -29,6 +31,7 @@ export default defineComponent({
[symbols.PAGE_INFO]: {
title: this.$ts.manageAntennas,
icon: 'fas fa-satellite',
+ bg: 'var(--bg)',
action: {
icon: 'fas fa-plus',
handler: this.create
@@ -45,7 +48,6 @@ export default defineComponent({
<style lang="scss" scoped>
.ieepwinx {
- padding: 16px;
> .add {
margin: 0 auto 16px auto;
diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue
index fc2f6d73801670516fcca1dc844730768444d47a..a5bbc3fd2d00bd80b29b1fe0a905ad4d04f414e6 100644
--- a/packages/client/src/pages/my-clips/index.vue
+++ b/packages/client/src/pages/my-clips/index.vue
@@ -1,16 +1,16 @@
<template>
-<div class="_section qtcaoidl">
- <MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+<MkSpacer :content-max="700">
+ <div class="qtcaoidl">
+ <MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
- <div class="_content">
- <MkPagination #default="{items}" ref="list" :pagination="pagination" class="list">
+ <MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="list">
<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
<b>{{ item.name }}</b>
<div v-if="item.description" class="description">{{ item.description }}</div>
</MkA>
</MkPagination>
</div>
-</div>
+</MkSpacer>
</template>
<script lang="ts">
@@ -31,6 +31,7 @@ export default defineComponent({
[symbols.PAGE_INFO]: {
title: this.$ts.clip,
icon: 'fas fa-paperclip',
+ bg: 'var(--bg)',
action: {
icon: 'fas fa-plus',
handler: this.create
@@ -86,17 +87,15 @@ export default defineComponent({
margin: 0 auto 16px auto;
}
- > ._content {
- > .list {
- > .item {
- display: block;
- padding: 16px;
+ > .list {
+ > .item {
+ display: block;
+ padding: 16px;
- > .description {
- margin-top: 8px;
- padding-top: 8px;
- border-top: solid 0.5px var(--divider);
- }
+ > .description {
+ margin-top: 8px;
+ padding-top: 8px;
+ border-top: solid 0.5px var(--divider);
}
}
}
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index e203b497dfac4563ddd075079ce828fb3266b3e6..c5019a5e5b10117c3093c895a624bff3e7228883 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -12,7 +12,7 @@
<div v-if="tab === 'owned'" class="_content">
<MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="fas fa-plus"></i> {{ $ts.createGroup }}</MkButton>
- <MkPagination #default="{items}" ref="owned" :pagination="ownedPagination">
+ <MkPagination v-slot="{items}" ref="owned" :pagination="ownedPagination">
<div v-for="group in items" :key="group.id" class="_card">
<div class="_title"><MkA :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</MkA></div>
<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
@@ -21,7 +21,7 @@
</div>
<div v-else-if="tab === 'joined'" class="_content">
- <MkPagination #default="{items}" ref="joined" :pagination="joinedPagination">
+ <MkPagination v-slot="{items}" ref="joined" :pagination="joinedPagination">
<div v-for="group in items" :key="group.id" class="_card">
<div class="_title">{{ group.name }}</div>
<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
@@ -30,7 +30,7 @@
</div>
<div v-else-if="tab === 'invites'" class="_content">
- <MkPagination #default="{items}" ref="invitations" :pagination="invitationPagination">
+ <MkPagination v-slot="{items}" ref="invitations" :pagination="invitationPagination">
<div v-for="invitation in items" :key="invitation.id" class="_card">
<div class="_title">{{ invitation.group.name }}</div>
<div class="_content"><MkAvatars :user-ids="invitation.group.userIds"/></div>
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index 645035d4ed25a866f8ead98dfd3d2c409c83a387..94a869b9ff8cf22cbac28b8de44507f52be9494e 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -1,14 +1,16 @@
<template>
-<div class="qkcjvfiv">
- <MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
+<MkSpacer :content-max="700">
+ <div class="qkcjvfiv">
+ <MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
- <MkPagination #default="{items}" ref="list" :pagination="pagination" class="lists _content">
- <MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
- <div class="name">{{ list.name }}</div>
- <MkAvatars :user-ids="list.userIds"/>
- </MkA>
- </MkPagination>
-</div>
+ <MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="lists _content">
+ <MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
+ <div class="name">{{ list.name }}</div>
+ <MkAvatars :user-ids="list.userIds"/>
+ </MkA>
+ </MkPagination>
+ </div>
+</MkSpacer>
</template>
<script lang="ts">
@@ -60,8 +62,6 @@ export default defineComponent({
<style lang="scss" scoped>
.qkcjvfiv {
- padding: 16px;
-
> .add {
margin: 0 auto var(--margin) auto;
}
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
index bf73cdafde555090f2f1606a48bbd1b687d0d0c2..0bfa20514bd20faf0a33e9aa02df3eef2a97468a 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/packages/client/src/pages/my-lists/list.vue
@@ -1,35 +1,37 @@
<template>
-<div class="mk-list-page">
- <transition name="zoom" mode="out-in">
- <div v-if="list" class="_section">
- <div class="_content">
- <MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton>
- <MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton>
- <MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton>
+<MkSpacer :content-max="700">
+ <div class="mk-list-page">
+ <transition name="zoom" mode="out-in">
+ <div v-if="list" class="_section">
+ <div class="_content">
+ <MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton>
+ <MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton>
+ <MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton>
+ </div>
</div>
- </div>
- </transition>
-
- <transition name="zoom" mode="out-in">
- <div v-if="list" class="_section members _gap">
- <div class="_title">{{ $ts.members }}</div>
- <div class="_content">
- <div class="users">
- <div v-for="user in users" :key="user.id" class="user _panel">
- <MkAvatar :user="user" class="avatar" :show-indicator="true"/>
- <div class="body">
- <MkUserName :user="user" class="name"/>
- <MkAcct :user="user" class="acct"/>
- </div>
- <div class="action">
- <button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
+ </transition>
+
+ <transition name="zoom" mode="out-in">
+ <div v-if="list" class="_section members _gap">
+ <div class="_title">{{ $ts.members }}</div>
+ <div class="_content">
+ <div class="users">
+ <div v-for="user in users" :key="user.id" class="user _panel">
+ <MkAvatar :user="user" class="avatar" :show-indicator="true"/>
+ <div class="body">
+ <MkUserName :user="user" class="name"/>
+ <MkAcct :user="user" class="acct"/>
+ </div>
+ <div class="action">
+ <button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
+ </div>
</div>
</div>
</div>
</div>
- </div>
- </transition>
-</div>
+ </transition>
+ </div>
+</MkSpacer>
</template>
<script lang="ts">
@@ -49,6 +51,7 @@ export default defineComponent({
[symbols.PAGE_INFO]: computed(() => this.list ? {
title: this.list.name,
icon: 'fas fa-list-ul',
+ bg: 'var(--bg)',
} : null),
list: null,
users: [],
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index efbdc175d862dadf36ca3eb236b05b786f2feb4c..bcc09b0235c4e38da03996b69c7769a2f37e83da 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -48,7 +48,7 @@
<MkAd :prefer="['horizontal', 'horizontal-big']"/>
<MkContainer :max-height="300" :foldable="true" class="other">
<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
- <MkPagination #default="{items}" :pagination="otherPostsPagination">
+ <MkPagination v-slot="{items}" :pagination="otherPostsPagination">
<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
</MkPagination>
</MkContainer>
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index a8ded5cda990f6b6ef283da03fcd7efdd3a98bd6..f1dd64f1194aea9c9b0da100ab0068a691add6dd 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -1,50 +1,40 @@
<template>
-<MkSpacer>
- <!-- TODO: MkHeaderã«çµ±åˆ -->
- <MkTab v-if="$i" v-model="tab">
- <option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option>
- <option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option>
- <option value="liked"><i class="fas fa-heart"></i> {{ $ts._pages.liked }}</option>
- </MkTab>
-
- <div class="_section">
- <div v-if="tab === 'featured'" class="rknalgpo _content">
- <MkPagination #default="{items}" :pagination="featuredPagesPagination">
- <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
- </MkPagination>
- </div>
+<MkSpacer :content-max="700">
+ <div v-if="tab === 'featured'" class="rknalgpo">
+ <MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
+ <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
+ </MkPagination>
+ </div>
- <div v-if="tab === 'my'" class="rknalgpo _content my">
- <MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
- <MkPagination #default="{items}" :pagination="myPagesPagination">
- <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
- </MkPagination>
- </div>
+ <div v-else-if="tab === 'my'" class="rknalgpo my">
+ <MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
+ <MkPagination v-slot="{items}" :pagination="myPagesPagination">
+ <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
+ </MkPagination>
+ </div>
- <div v-if="tab === 'liked'" class="rknalgpo _content">
- <MkPagination #default="{items}" :pagination="likedPagesPagination">
- <MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
- </MkPagination>
- </div>
+ <div v-else-if="tab === 'liked'" class="rknalgpo">
+ <MkPagination v-slot="{items}" :pagination="likedPagesPagination">
+ <MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
+ </MkPagination>
</div>
</MkSpacer>
</template>
<script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
import MkPagePreview from '@/components/page-preview.vue';
import MkPagination from '@/components/ui/pagination.vue';
import MkButton from '@/components/ui/button.vue';
-import MkTab from '@/components/tab.vue';
import * as symbols from '@/symbols';
export default defineComponent({
components: {
- MkPagePreview, MkPagination, MkButton, MkTab
+ MkPagePreview, MkPagination, MkButton
},
data() {
return {
- [symbols.PAGE_INFO]: {
+ [symbols.PAGE_INFO]: computed(() => ({
title: this.$ts.pages,
icon: 'fas fa-sticky-note',
bg: 'var(--bg)',
@@ -53,7 +43,23 @@ export default defineComponent({
text: this.$ts.create,
handler: this.create,
}],
- },
+ tabs: [{
+ active: this.tab === 'featured',
+ title: this.$ts._pages.featured,
+ icon: 'fas fa-fire-alt',
+ onClick: () => { this.tab = 'featured'; },
+ }, {
+ active: this.tab === 'my',
+ title: this.$ts._pages.my,
+ icon: 'fas fa-edit',
+ onClick: () => { this.tab = 'my'; },
+ }, {
+ active: this.tab === 'liked',
+ title: this.$ts._pages.liked,
+ icon: 'fas fa-heart',
+ onClick: () => { this.tab = 'liked'; },
+ },]
+ })),
tab: 'featured',
featuredPagesPagination: {
endpoint: 'pages/featured',
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index 10b5fc603e447a2d09fd971620ad98b61ca26d38..b5fe4e0aed4a918861b2775bd847d8ce393aedbc 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -7,7 +7,7 @@
<div>{{ $ts.nothing }}</div>
</div>
</template>
- <template #default="{items}">
+ <template v-slot="{items}">
<div v-for="token in items" :key="token.id" class="_debobigegoPanel bfomjevm">
<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
<div class="body">
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 7a22a8dcd9f612511bb8046fd5e9884c7048bebb..bfac1be77d83dd4c8398eb562635cc435737c8df 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -1,7 +1,7 @@
<template>
<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
<div v-if="!narrow || page == null" class="nav">
- <MkSpacer :content-max="700">
+ <MkSpacer :content-max="700" :margin-min="20">
<div class="baaadecd">
<div class="title">{{ $ts.settings }}</div>
<MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo>
diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue
index 4a9633a20dcb6659d642ac2f1f737a48a1c6d7e8..4f42d5e429855493853b2e8bf8f41318b7d2ad2c 100644
--- a/packages/client/src/pages/settings/mute-block.vue
+++ b/packages/client/src/pages/settings/mute-block.vue
@@ -7,7 +7,7 @@
<div v-if="tab === 'mute'">
<MkPagination :pagination="mutingPagination" class="muting">
<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
- <template #default="{items}">
+ <template v-slot="{items}">
<FormGroup>
<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
<MkAcct :user="mute.mutee"/>
@@ -19,7 +19,7 @@
<div v-if="tab === 'block'">
<MkPagination :pagination="blockingPagination" class="blocking">
<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
- <template #default="{items}">
+ <template v-slot="{items}">
<FormGroup>
<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
<MkAcct :user="block.blockee"/>
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 33dc299f5df13cb143128f780381bac5a299d8a9..069f9d964d8cd6c222aff6acfe243a9164fd5db4 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -13,7 +13,7 @@
<FormSection>
<template #label>{{ $ts.signinHistory }}</template>
<FormPagination :pagination="pagination">
- <template #default="{items}">
+ <template v-slot="{items}">
<div>
<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
<header>
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index ac4edbe66eb7f84a3618591558fadec4fd121e59..c605b1eb6450176b0db6fdece447773aaa6c685f 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -1,6 +1,6 @@
<template>
-<FormBase>
- <FormSelect v-model="selectedThemeId">
+<div class="_formRoot">
+ <FormSelect v-model="selectedThemeId" class="_formBlock">
<template #label>{{ $ts.theme }}</template>
<optgroup :label="$ts._theme.installedThemes">
<option v-for="x in installedThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
@@ -10,31 +10,31 @@
</optgroup>
</FormSelect>
<template v-if="selectedTheme">
- <FormInput readonly :modelValue="selectedTheme.author">
- <span>{{ $ts.author }}</span>
+ <FormInput readonly :modelValue="selectedTheme.author" class="_formBlock">
+ <template #label>{{ $ts.author }}</template>
</FormInput>
- <FormTextarea v-if="selectedTheme.desc" readonly :modelValue="selectedTheme.desc">
- <span>{{ $ts._theme.description }}</span>
+ <FormTextarea v-if="selectedTheme.desc" readonly :modelValue="selectedTheme.desc" class="_formBlock">
+ <template #label>{{ $ts._theme.description }}</template>
</FormTextarea>
- <FormTextarea readonly tall :modelValue="selectedThemeCode">
- <span>{{ $ts._theme.code }}</span>
- <template #desc><button class="_textButton" @click="copyThemeCode()">{{ $ts.copy }}</button></template>
+ <FormTextarea readonly tall :modelValue="selectedThemeCode" class="_formBlock">
+ <template #label>{{ $ts._theme.code }}</template>
+ <template #caption><button class="_textButton" @click="copyThemeCode()">{{ $ts.copy }}</button></template>
</FormTextarea>
- <FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" danger @click="uninstall()"><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</FormButton>
+ <FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" class="_formBlock" danger @click="uninstall()"><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</FormButton>
</template>
-</FormBase>
+</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import * as JSON5 from 'json5';
-import FormTextarea from '@/components/debobigego/textarea.vue';
-import FormSelect from '@/components/debobigego/select.vue';
-import FormRadios from '@/components/debobigego/radios.vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormRadios from '@/components/form/radios.vue';
import FormBase from '@/components/debobigego/base.vue';
import FormGroup from '@/components/debobigego/group.vue';
-import FormInput from '@/components/debobigego/input.vue';
-import FormButton from '@/components/debobigego/button.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/ui/button.vue';
import { Theme, builtinThemes } from '@/scripts/theme';
import copyToClipboard from '@/scripts/copy-to-clipboard';
import * as os from '@/os';
diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue
index 9e16bfc45bdd94893b7665ee98081e02f1628872..aad5317ce0fe2090b7a245d56fff1cac54141ae6 100644
--- a/packages/client/src/pages/user/clips.vue
+++ b/packages/client/src/pages/user/clips.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkPagination #default="{items}" ref="list" :pagination="pagination">
+ <MkPagination v-slot="{items}" ref="list" :pagination="pagination">
<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
<b>{{ item.name }}</b>
<div v-if="item.description" class="description">{{ item.description }}</div>
diff --git a/packages/client/src/pages/user/follow-list.vue b/packages/client/src/pages/user/follow-list.vue
index 2cfb8ee1adfe6ce77f3ada566f43ecc3fbd112a0..9fb8943fb827e3248c9dc52716f79330b0d25063 100644
--- a/packages/client/src/pages/user/follow-list.vue
+++ b/packages/client/src/pages/user/follow-list.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkPagination #default="{items}" ref="list" :pagination="pagination" class="mk-following-or-followers">
+ <MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="mk-following-or-followers">
<div class="users _isolated">
<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/>
</div>
diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue
index 9def25c2aeff8dda6d8310196100f390443705f5..860aa9f44f2d2479a937dcda1692e8220480e869 100644
--- a/packages/client/src/pages/user/gallery.vue
+++ b/packages/client/src/pages/user/gallery.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkPagination #default="{items}" :pagination="pagination">
+ <MkPagination v-slot="{items}" :pagination="pagination">
<div class="jrnovfpt">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue
index eb8f10d8aaeb44a4ea35d24e0f5242f520c0d09f..40d1fe3842ef58a595b3fc44d73a135e25ffde65 100644
--- a/packages/client/src/pages/user/pages.vue
+++ b/packages/client/src/pages/user/pages.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkPagination #default="{items}" ref="list" :pagination="pagination">
+ <MkPagination v-slot="{items}" ref="list" :pagination="pagination">
<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
</MkPagination>
</div>
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index eff456372c37827ffad03712324e868afa244f8f..69c27de55b25e171c8b82cb8d54406cfdf1f4c2f 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkPagination #default="{items}" ref="list" :pagination="pagination">
+ <MkPagination v-slot="{items}" ref="list" :pagination="pagination">
<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
<div class="header">
<MkAvatar class="avatar" :user="user"/>
diff --git a/packages/client/src/scripts/use-tooltip.ts b/packages/client/src/scripts/use-tooltip.ts
index 89e6b1be9d64471c9e328f04e627c8eb628f73af..a9bf6d93dba38adb4e43b8c44004700edc29919d 100644
--- a/packages/client/src/scripts/use-tooltip.ts
+++ b/packages/client/src/scripts/use-tooltip.ts
@@ -1,5 +1,6 @@
import { isScreenTouching } from '@/os';
import { Ref, ref } from 'vue';
+import { isDeviceTouch } from './is-device-touch';
export function useTooltip(onShow: (showing: Ref<boolean>) => void) {
let isHovering = false;
@@ -13,7 +14,7 @@ export function useTooltip(onShow: (showing: Ref<boolean>) => void) {
// iOS(Androidも？)ã§ã¯ã€è¦ç´ をタップã—ãŸç›´å¾Œã«(ãŠã›ã£ã‹ã„ã§)mouseoverイベントを発ç«ã•ã›ãŸã‚Šã™ã‚‹ãŸã‚ã€ãã®å¯¾ç–
// ã“ã‚ŒãŒç„¡ã„ã¨ã€ç”»é¢ã«è§¦ã‚Œã¦ãªã„ã®ã«ãƒ„ールãƒãƒƒãƒ—ãŒå‡ºãŸã‚Šã—ã¦ã—ã¾ã†
- if (!isScreenTouching) return;
+ if (isDeviceTouch && !isScreenTouching) return;
const showing = ref(true);
onShow(showing);
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index 2da4dd40b61c3f7055e903f65e167038133b07c3..ee0f11b838b5e29e1aa09fd6a774b5a00ce0ee90 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -16,7 +16,7 @@
</div>
<div class="announcements panel">
<header>{{ $ts.announcements }}</header>
- <MkPagination #default="{items}" :pagination="announcements" class="list">
+ <MkPagination v-slot="{items}" :pagination="announcements" class="list">
<section v-for="announcement in items" :key="announcement.id" class="item">
<div class="title">{{ announcement.title }}</div>
<div class="content">