diff options
Diffstat (limited to 'packages')
33 files changed, 199 insertions, 185 deletions
diff --git a/packages/client/src/components/form-dialog.vue b/packages/client/src/components/form-dialog.vue index 27810d315a..fbf49af5d2 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 a52c295277..dda8e7c6d7 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 63c22b98c4..d6374517a2 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 cb2154c48d..63a1d7063d 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 ff1c4c57fc..8df20097b3 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 6f9a955da2..9c9b3b2d4f 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 a6b0f8e59e..032e394a66 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 016a013e51..e7a3437167 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 34879a18bd..ca94640dda 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 a7bd8a018c..a08c273279 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 a868c34478..4e5f428ff9 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 a4de393995..54d695091d 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 a036f4286b..cd0d2a40e4 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 f145caf28e..096947e6f8 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 8fc17c3606..d185e796c3 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 fc2f6d7380..a5bbc3fd2d 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 e203b497df..c5019a5e5b 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 645035d4ed..94a869b9ff 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 bf73cdafde..0bfa20514b 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> - <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 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 efbdc175d8..bcc09b0235 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 a8ded5cda9..f1dd64f119 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 10b5fc603e..b5fe4e0aed 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 7a22a8dcd9..bfac1be77d 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 4a9633a20d..4f42d5e429 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 33dc299f5d..069f9d964d 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 ac4edbe66e..c605b1eb64 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 9e16bfc45b..aad5317ce0 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 2cfb8ee1ad..9fb8943fb8 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 9def25c2ae..860aa9f44f 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 eb8f10d8aa..40d1fe3842 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 eff456372c..69c27de55b 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 89e6b1be9d..a9bf6d93db 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 2da4dd40b6..ee0f11b838 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"> |