graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-09 03:33:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

client: tweak ui

Browse source
This commit is contained in:
syuilo 2021-12-02 20:09:12 +09:00
parent 4cc2a561d5
commit f38b6a1806
33 changed files with 199 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,66 +12,67 @@
<template #header> <template #header>
{{ title }} {{ title }}
</template> </template>
<FormBase class="xkpnjxcv">
<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)"> <MkSpacer :margin-min="20" :margin-max="32">
<FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1"> <div class="xkpnjxcv _formRoot">
<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span> <template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
<template v-if="form[item].description" #desc>{{ form[item].description }}</template> <FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1" class="_formBlock">
</FormInput> <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text"> <template v-if="form[item].description" #caption>{{ form[item].description }}</template>
<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span> </FormInput>
<template v-if="form[item].description" #desc>{{ form[item].description }}</template> <FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text" class="_formBlock">
</FormInput> <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]"> <template v-if="form[item].description" #caption>{{ form[item].description }}</template>
<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span> </FormInput>
<template v-if="form[item].description" #desc>{{ form[item].description }}</template> <FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]" class="_formBlock">
</FormTextarea> <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]"> <template v-if="form[item].description" #caption>{{ form[item].description }}</template>
<span v-text="form[item].label || item"></span> </FormTextarea>
<template v-if="form[item].description" #desc>{{ form[item].description }}</template> <FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]" class="_formBlock">
</FormSwitch> <span v-text="form[item].label || item"></span>
<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]"> <template v-if="form[item].description" #caption>{{ form[item].description }}</template>
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> </FormSwitch>
<option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option> <FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]" class="_formBlock">
</FormSelect> <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]"> <option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
<template #desc><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> </FormSelect>
<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option> <FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]" class="_formBlock">
</FormRadios> <template #caption><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step"> <option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> </FormRadios>
<template v-if="form[item].description" #desc>{{ form[item].description }}</template> <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">
</FormRange> <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
<FormButton v-else-if="form[item].type === 'button'" @click="form[item].action($event, values)"> <template v-if="form[item].description" #caption>{{ form[item].description }}</template>
<span v-text="form[item].content || item"></span> </FormRange>
</FormButton> <MkButton v-else-if="form[item].type === 'button'" @click="form[item].action($event, values)" class="_formBlock">
</template> <span v-text="form[item].content || item"></span>
</FormBase> </MkButton>
</template>
</div>
</MkSpacer>
</XModalWindow> </XModalWindow>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import XModalWindow from '@/components/ui/modal-window.vue'; import XModalWindow from '@/components/ui/modal-window.vue';
import FormBase from './debobigego/base.vue'; import FormInput from './form/input.vue';
import FormInput from './debobigego/input.vue'; import FormTextarea from './form/textarea.vue';
import FormTextarea from './debobigego/textarea.vue'; import FormSwitch from './form/switch.vue';
import FormSwitch from './debobigego/switch.vue'; import FormSelect from './form/select.vue';
import FormSelect from './debobigego/select.vue'; import FormRange from './form/range.vue';
import FormRange from './debobigego/range.vue'; import MkButton from './ui/button.vue';
import FormButton from './debobigego/button.vue'; import FormRadios from './form/radios.vue';
import FormRadios from './debobigego/radios.vue';
export default defineComponent({ export default defineComponent({
components: { components: {
XModalWindow, XModalWindow,
FormBase,
FormInput, FormInput,
FormTextarea, FormTextarea,
FormSwitch, FormSwitch,
FormSelect, FormSelect,
FormRange, FormRange,
FormButton, MkButton,
FormRadios, FormRadios,
}, },

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

@ -41,6 +41,7 @@ export default defineComponent({
> .icon { > .icon {
display: block; display: block;
width: 60px; width: 60px;
font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
margin: 0 auto; margin: 0 auto;
} }

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

@ -62,6 +62,7 @@ export default defineComponent({
> .icon { > .icon {
display: block; display: block;
width: 60px; width: 60px;
font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
margin: 0 auto; margin: 0 auto;
} }

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

@ -52,7 +52,7 @@ export default defineComponent({
> .title { > .title {
opacity: 0.7; opacity: 0.7;
margin: 0 0 8px 12px; margin: 0 0 8px 0;
} }
> .items { > .items {

2
packages/client/src/pages/admin/abuses.vue
View file

@ -33,7 +33,7 @@
</div> </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 v-for="report in items" :key="report.id" class="bcekxzvu _card _gap">
<div class="_content target"> <div class="_content target">
<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/> <MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true"/>

4
packages/client/src/pages/admin/emojis.vue
View file

@ -7,7 +7,7 @@
</MkInput> </MkInput>
<MkPagination ref="emojis" :pagination="pagination"> <MkPagination ref="emojis" :pagination="pagination">
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template> <template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
<template #default="{items}"> <template v-slot="{items}">
<div class="ldhfsamy"> <div class="ldhfsamy">
<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="edit(emoji)"> <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"/> <img :src="emoji.url" class="img" :alt="emoji.name"/>
@ -31,7 +31,7 @@
</MkInput> </MkInput>
<MkPagination ref="remoteEmojis" :pagination="remotePagination"> <MkPagination ref="remoteEmojis" :pagination="remotePagination">
<template #empty><span>{{ $ts.noCustomEmojis }}</span></template> <template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
<template #default="{items}"> <template v-slot="{items}">
<div class="ldhfsamy"> <div class="ldhfsamy">
<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)"> <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"/> <img :src="emoji.url" class="img" :alt="emoji.name"/>

2
packages/client/src/pages/admin/files.vue
View file

@ -28,7 +28,7 @@
<template #label>MIME type</template> <template #label>MIME type</template>
</MkInput> </MkInput>
</div> </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)"> <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"/> <MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
<div class="body"> <div class="body">

2
packages/client/src/pages/admin/users.vue
View file

@ -36,7 +36,7 @@
</MkInput> </MkInput>
</div> </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)"> <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"/> <MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
<div class="body"> <div class="body">

2
packages/client/src/pages/announcements.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<MkSpacer :content-max="800"> <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"> <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="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
<div class="_content"> <div class="_content">

6
packages/client/src/pages/channels.vue
View file

@ -10,20 +10,20 @@
<div class="_section"> <div class="_section">
<div v-if="tab === 'featured'" class="_content grwlizim featured"> <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"/> <MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
</MkPagination> </MkPagination>
</div> </div>
<div v-if="tab === 'following'" class="_content grwlizim following"> <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"/> <MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
</MkPagination> </MkPagination>
</div> </div>
<div v-if="tab === 'owned'" class="_content grwlizim owned"> <div v-if="tab === 'owned'" class="_content grwlizim owned">
<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton> <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"/> <MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
</MkPagination> </MkPagination>
</div> </div>

2
packages/client/src/pages/federation.vue
View file

@ -41,7 +41,7 @@
</div> </div>
</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"> <div class="dqokceoi">
<MkA v-for="instance in items" :key="instance.id" class="instance" :to="`/instance-info/${instance.host}`"> <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> <div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>

2
packages/client/src/pages/follow-requests.vue
View file

@ -7,7 +7,7 @@
<div>{{ $ts.noFollowRequests }}</div> <div>{{ $ts.noFollowRequests }}</div>
</div> </div>
</template> </template>
<template #default="{items}"> <template v-slot="{items}">
<div v-for="req in items" :key="req.id" class="user _panel"> <div v-for="req in items" :key="req.id" class="user _panel">
<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/> <MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
<div class="body"> <div class="body">

8
packages/client/src/pages/gallery/index.vue
View file

@ -9,7 +9,7 @@
<div v-if="tab === 'explore'"> <div v-if="tab === 'explore'">
<MkFolder class="_gap"> <MkFolder class="_gap">
<template #header><i class="fas fa-clock"></i>{{ $ts.recentPosts }}</template> <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"> <div class="vfpdbgtk">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div> </div>
@ -17,7 +17,7 @@
</MkFolder> </MkFolder>
<MkFolder class="_gap"> <MkFolder class="_gap">
<template #header><i class="fas fa-fire-alt"></i>{{ $ts.popularPosts }}</template> <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"> <div class="vfpdbgtk">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div> </div>
@ -25,7 +25,7 @@
</MkFolder> </MkFolder>
</div> </div>
<div v-else-if="tab === 'liked'"> <div v-else-if="tab === 'liked'">
<MkPagination #default="{items}" :pagination="likedPostsPagination"> <MkPagination v-slot="{items}" :pagination="likedPostsPagination">
<div class="vfpdbgtk"> <div class="vfpdbgtk">
<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/> <MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
</div> </div>
@ -33,7 +33,7 @@
</div> </div>
<div v-else-if="tab === 'my'"> <div v-else-if="tab === 'my'">
<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ $ts.postToGallery }}</MkA> <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"> <div class="vfpdbgtk">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div> </div>

2
packages/client/src/pages/gallery/post.vue
View file

@ -36,7 +36,7 @@
<MkAd :prefer="['horizontal', 'horizontal-big']"/> <MkAd :prefer="['horizontal', 'horizontal-big']"/>
<MkContainer :max-height="300" :foldable="true" class="other"> <MkContainer :max-height="300" :foldable="true" class="other">
<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template> <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"> <div class="sdrarzaf">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div> </div>

22
packages/client/src/pages/my-antennas/index.vue
View file

@ -1,15 +1,17 @@
<template> <template>
<div class="ieepwinx _section"> <MkSpacer :content-max="700">
<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton> <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"> <div class="">
<MkPagination #default="{items}" ref="list" :pagination="pagination"> <MkPagination v-slot="{items}" ref="list" :pagination="pagination">
<MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`"> <MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
<div class="name">{{ antenna.name }}</div> <div class="name">{{ antenna.name }}</div>
</MkA> </MkA>
</MkPagination> </MkPagination>
</div>
</div> </div>
</div> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -29,6 +31,7 @@ export default defineComponent({
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: this.$ts.manageAntennas, title: this.$ts.manageAntennas,
icon: 'fas fa-satellite', icon: 'fas fa-satellite',
bg: 'var(--bg)',
action: { action: {
icon: 'fas fa-plus', icon: 'fas fa-plus',
handler: this.create handler: this.create
@ -45,7 +48,6 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.ieepwinx { .ieepwinx {
padding: 16px;
> .add { > .add {
margin: 0 auto 16px auto; margin: 0 auto 16px auto;

29
packages/client/src/pages/my-clips/index.vue
View file

@ -1,16 +1,16 @@
<template> <template>
<div class="_section qtcaoidl"> <MkSpacer :content-max="700">
<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton> <div class="qtcaoidl">
<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
<div class="_content"> <MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="list">
<MkPagination #default="{items}" ref="list" :pagination="pagination" class="list">
<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap"> <MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
<b>{{ item.name }}</b> <b>{{ item.name }}</b>
<div v-if="item.description" class="description">{{ item.description }}</div> <div v-if="item.description" class="description">{{ item.description }}</div>
</MkA> </MkA>
</MkPagination> </MkPagination>
</div> </div>
</div> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -31,6 +31,7 @@ export default defineComponent({
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: this.$ts.clip, title: this.$ts.clip,
icon: 'fas fa-paperclip', icon: 'fas fa-paperclip',
bg: 'var(--bg)',
action: { action: {
icon: 'fas fa-plus', icon: 'fas fa-plus',
handler: this.create handler: this.create
@ -86,17 +87,15 @@ export default defineComponent({
margin: 0 auto 16px auto; margin: 0 auto 16px auto;
} }
> ._content { > .list {
> .list { > .item {
> .item { display: block;
display: block; padding: 16px;
padding: 16px;
> .description { > .description {
margin-top: 8px; margin-top: 8px;
padding-top: 8px; padding-top: 8px;
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--divider);
}
} }
} }
} }

6
packages/client/src/pages/my-groups/index.vue
View file

@ -12,7 +12,7 @@
<div v-if="tab === 'owned'" class="_content"> <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> <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 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="_title"><MkA :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</MkA></div>
<div class="_content"><MkAvatars :user-ids="group.userIds"/></div> <div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
@ -21,7 +21,7 @@
</div> </div>
<div v-else-if="tab === 'joined'" class="_content"> <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 v-for="group in items" :key="group.id" class="_card">
<div class="_title">{{ group.name }}</div> <div class="_title">{{ group.name }}</div>
<div class="_content"><MkAvatars :user-ids="group.userIds"/></div> <div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
@ -30,7 +30,7 @@
</div> </div>
<div v-else-if="tab === 'invites'" class="_content"> <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 v-for="invitation in items" :key="invitation.id" class="_card">
<div class="_title">{{ invitation.group.name }}</div> <div class="_title">{{ invitation.group.name }}</div>
<div class="_content"><MkAvatars :user-ids="invitation.group.userIds"/></div> <div class="_content"><MkAvatars :user-ids="invitation.group.userIds"/></div>

22
packages/client/src/pages/my-lists/index.vue
View file

@ -1,14 +1,16 @@
<template> <template>
<div class="qkcjvfiv"> <MkSpacer :content-max="700">
<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton> <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"> <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 }`"> <MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
<div class="name">{{ list.name }}</div> <div class="name">{{ list.name }}</div>
<MkAvatars :user-ids="list.userIds"/> <MkAvatars :user-ids="list.userIds"/>
</MkA> </MkA>
</MkPagination> </MkPagination>
</div> </div>
</MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -60,8 +62,6 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.qkcjvfiv { .qkcjvfiv {
padding: 16px;
> .add { > .add {
margin: 0 auto var(--margin) auto; margin: 0 auto var(--margin) auto;
} }

53
packages/client/src/pages/my-lists/list.vue
View file

@ -1,35 +1,37 @@
<template> <template>
<div class="mk-list-page"> <MkSpacer :content-max="700">
<transition name="zoom" mode="out-in"> <div class="mk-list-page">
<div v-if="list" class="_section"> <transition name="zoom" mode="out-in">
<div class="_content"> <div v-if="list" class="_section">
<MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton> <div class="_content">
<MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton> <MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton>
<MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton> <MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton>
<MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton>
</div>
</div> </div>
</div> </transition>
</transition>
<transition name="zoom" mode="out-in"> <transition name="zoom" mode="out-in">
<div v-if="list" class="_section members _gap"> <div v-if="list" class="_section members _gap">
<div class="_title">{{ $ts.members }}</div> <div class="_title">{{ $ts.members }}</div>
<div class="_content"> <div class="_content">
<div class="users"> <div class="users">
<div v-for="user in users" :key="user.id" class="user _panel"> <div v-for="user in users" :key="user.id" class="user _panel">
<MkAvatar :user="user" class="avatar" :show-indicator="true"/> <MkAvatar :user="user" class="avatar" :show-indicator="true"/>
<div class="body"> <div class="body">
<MkUserName :user="user" class="name"/> <MkUserName :user="user" class="name"/>
<MkAcct :user="user" class="acct"/> <MkAcct :user="user" class="acct"/>
</div> </div>
<div class="action"> <div class="action">
<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button> <button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </transition>
</transition> </div>
</div> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -49,6 +51,7 @@ export default defineComponent({
[symbols.PAGE_INFO]: computed(() => this.list ? { [symbols.PAGE_INFO]: computed(() => this.list ? {
title: this.list.name, title: this.list.name,
icon: 'fas fa-list-ul', icon: 'fas fa-list-ul',
bg: 'var(--bg)',
} : null), } : null),
list: null, list: null,
users: [], users: [],

2
packages/client/src/pages/page.vue
View file

@ -48,7 +48,7 @@
<MkAd :prefer="['horizontal', 'horizontal-big']"/> <MkAd :prefer="['horizontal', 'horizontal-big']"/>
<MkContainer :max-height="300" :foldable="true" class="other"> <MkContainer :max-height="300" :foldable="true" class="other">
<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template> <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"/> <MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
</MkPagination> </MkPagination>
</MkContainer> </MkContainer>

66
packages/client/src/pages/pages.vue
View file

@ -1,50 +1,40 @@
<template> <template>
<MkSpacer> <MkSpacer :content-max="700">
<!-- TODO: MkHeaderに統合 --> <div v-if="tab === 'featured'" class="rknalgpo">
<MkTab v-if="$i" v-model="tab"> <MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option> <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
<option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option> </MkPagination>
<option value="liked"><i class="fas fa-heart"></i> {{ $ts._pages.liked }}</option> </div>
</MkTab>
<div class="_section"> <div v-else-if="tab === 'my'" class="rknalgpo my">
<div v-if="tab === 'featured'" class="rknalgpo _content"> <MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
<MkPagination #default="{items}" :pagination="featuredPagesPagination"> <MkPagination v-slot="{items}" :pagination="myPagesPagination">
<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/> <MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
</MkPagination> </MkPagination>
</div> </div>
<div v-if="tab === 'my'" class="rknalgpo _content my"> <div v-else-if="tab === 'liked'" class="rknalgpo">
<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton> <MkPagination v-slot="{items}" :pagination="likedPagesPagination">
<MkPagination #default="{items}" :pagination="myPagesPagination"> <MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/> </MkPagination>
</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> </div>
</MkSpacer> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { computed, defineComponent } from 'vue';
import MkPagePreview from '@/components/page-preview.vue'; import MkPagePreview from '@/components/page-preview.vue';
import MkPagination from '@/components/ui/pagination.vue'; import MkPagination from '@/components/ui/pagination.vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkTab from '@/components/tab.vue';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
export default defineComponent({ export default defineComponent({
components: { components: {
MkPagePreview, MkPagination, MkButton, MkTab MkPagePreview, MkPagination, MkButton
}, },
data() { data() {
return { return {
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: computed(() => ({
title: this.$ts.pages, title: this.$ts.pages,
icon: 'fas fa-sticky-note', icon: 'fas fa-sticky-note',
bg: 'var(--bg)', bg: 'var(--bg)',
@ -53,7 +43,23 @@ export default defineComponent({
text: this.$ts.create, text: this.$ts.create,
handler: this.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', tab: 'featured',
featuredPagesPagination: { featuredPagesPagination: {
endpoint: 'pages/featured', endpoint: 'pages/featured',

2
packages/client/src/pages/settings/apps.vue
View file

@ -7,7 +7,7 @@
<div>{{ $ts.nothing }}</div> <div>{{ $ts.nothing }}</div>
</div> </div>
</template> </template>
<template #default="{items}"> <template v-slot="{items}">
<div v-for="token in items" :key="token.id" class="_debobigegoPanel bfomjevm"> <div v-for="token in items" :key="token.id" class="_debobigegoPanel bfomjevm">
<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/> <img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
<div class="body"> <div class="body">

2
packages/client/src/pages/settings/index.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div ref="el" class="vvcocwet" :class="{ wide: !narrow }"> <div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
<div v-if="!narrow || page == null" class="nav"> <div v-if="!narrow || page == null" class="nav">
<MkSpacer :content-max="700"> <MkSpacer :content-max="700" :margin-min="20">
<div class="baaadecd"> <div class="baaadecd">
<div class="title">{{ $ts.settings }}</div> <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> <MkInfo v-if="emailNotConfigured" warn class="info">{{ $ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ $ts.configure }}</MkA></MkInfo>

4
packages/client/src/pages/settings/mute-block.vue
View file

@ -7,7 +7,7 @@
<div v-if="tab === 'mute'"> <div v-if="tab === 'mute'">
<MkPagination :pagination="mutingPagination" class="muting"> <MkPagination :pagination="mutingPagination" class="muting">
<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template> <template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
<template #default="{items}"> <template v-slot="{items}">
<FormGroup> <FormGroup>
<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)"> <FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
<MkAcct :user="mute.mutee"/> <MkAcct :user="mute.mutee"/>
@ -19,7 +19,7 @@
<div v-if="tab === 'block'"> <div v-if="tab === 'block'">
<MkPagination :pagination="blockingPagination" class="blocking"> <MkPagination :pagination="blockingPagination" class="blocking">
<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template> <template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
<template #default="{items}"> <template v-slot="{items}">
<FormGroup> <FormGroup>
<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)"> <FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
<MkAcct :user="block.blockee"/> <MkAcct :user="block.blockee"/>

2
packages/client/src/pages/settings/security.vue
View file

@ -13,7 +13,7 @@
<FormSection> <FormSection>
<template #label>{{ $ts.signinHistory }}</template> <template #label>{{ $ts.signinHistory }}</template>
<FormPagination :pagination="pagination"> <FormPagination :pagination="pagination">
<template #default="{items}"> <template v-slot="{items}">
<div> <div>
<div v-for="item in items" :key="item.id" v-panel class="timnmucd"> <div v-for="item in items" :key="item.id" v-panel class="timnmucd">
<header> <header>

32
packages/client/src/pages/settings/theme.manage.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<FormBase> <div class="_formRoot">
<FormSelect v-model="selectedThemeId"> <FormSelect v-model="selectedThemeId" class="_formBlock">
<template #label>{{ $ts.theme }}</template> <template #label>{{ $ts.theme }}</template>
<optgroup :label="$ts._theme.installedThemes"> <optgroup :label="$ts._theme.installedThemes">
<option v-for="x in installedThemes" :key="x.id" :value="x.id">{{ x.name }}</option> <option v-for="x in installedThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
@ -10,31 +10,31 @@
</optgroup> </optgroup>
</FormSelect> </FormSelect>
<template v-if="selectedTheme"> <template v-if="selectedTheme">
<FormInput readonly :modelValue="selectedTheme.author"> <FormInput readonly :modelValue="selectedTheme.author" class="_formBlock">
<span>{{ $ts.author }}</span> <template #label>{{ $ts.author }}</template>
</FormInput> </FormInput>
<FormTextarea v-if="selectedTheme.desc" readonly :modelValue="selectedTheme.desc"> <FormTextarea v-if="selectedTheme.desc" readonly :modelValue="selectedTheme.desc" class="_formBlock">
<span>{{ $ts._theme.description }}</span> <template #label>{{ $ts._theme.description }}</template>
</FormTextarea> </FormTextarea>
<FormTextarea readonly tall :modelValue="selectedThemeCode"> <FormTextarea readonly tall :modelValue="selectedThemeCode" class="_formBlock">
<span>{{ $ts._theme.code }}</span> <template #label>{{ $ts._theme.code }}</template>
<template #desc><button class="_textButton" @click="copyThemeCode()">{{ $ts.copy }}</button></template> <template #caption><button class="_textButton" @click="copyThemeCode()">{{ $ts.copy }}</button></template>
</FormTextarea> </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> </template>
</FormBase> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import * as JSON5 from 'json5'; import * as JSON5 from 'json5';
import FormTextarea from '@/components/debobigego/textarea.vue'; import FormTextarea from '@/components/form/textarea.vue';
import FormSelect from '@/components/debobigego/select.vue'; import FormSelect from '@/components/form/select.vue';
import FormRadios from '@/components/debobigego/radios.vue'; import FormRadios from '@/components/form/radios.vue';
import FormBase from '@/components/debobigego/base.vue'; import FormBase from '@/components/debobigego/base.vue';
import FormGroup from '@/components/debobigego/group.vue'; import FormGroup from '@/components/debobigego/group.vue';
import FormInput from '@/components/debobigego/input.vue'; import FormInput from '@/components/form/input.vue';
import FormButton from '@/components/debobigego/button.vue'; import FormButton from '@/components/ui/button.vue';
import { Theme, builtinThemes } from '@/scripts/theme'; import { Theme, builtinThemes } from '@/scripts/theme';
import copyToClipboard from '@/scripts/copy-to-clipboard'; import copyToClipboard from '@/scripts/copy-to-clipboard';
import * as os from '@/os'; import * as os from '@/os';

2
packages/client/src/pages/user/clips.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <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"> <MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
<b>{{ item.name }}</b> <b>{{ item.name }}</b>
<div v-if="item.description" class="description">{{ item.description }}</div> <div v-if="item.description" class="description">{{ item.description }}</div>

2
packages/client/src/pages/user/follow-list.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <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"> <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"/> <MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/>
</div> </div>

2
packages/client/src/pages/user/gallery.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<MkPagination #default="{items}" :pagination="pagination"> <MkPagination v-slot="{items}" :pagination="pagination">
<div class="jrnovfpt"> <div class="jrnovfpt">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div> </div>

2
packages/client/src/pages/user/pages.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <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"/> <MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
</MkPagination> </MkPagination>
</div> </div>

2
packages/client/src/pages/user/reactions.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <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 v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
<div class="header"> <div class="header">
<MkAvatar class="avatar" :user="user"/> <MkAvatar class="avatar" :user="user"/>

3
packages/client/src/scripts/use-tooltip.ts
View file

@ -1,5 +1,6 @@
import { isScreenTouching } from '@/os'; import { isScreenTouching } from '@/os';
import { Ref, ref } from 'vue'; import { Ref, ref } from 'vue';
import { isDeviceTouch } from './is-device-touch';
export function useTooltip(onShow: (showing: Ref<boolean>) => void) { export function useTooltip(onShow: (showing: Ref<boolean>) => void) {
let isHovering = false; let isHovering = false;
@ -13,7 +14,7 @@ export function useTooltip(onShow: (showing: Ref<boolean>) => void) {
// iOS(Androidも？)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、その対策 // iOS(Androidも？)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、その対策
// これが無いと、画面に触れてないのにツールチップが出たりしてしまう // これが無いと、画面に触れてないのにツールチップが出たりしてしまう
if (!isScreenTouching) return; if (isDeviceTouch && !isScreenTouching) return;
const showing = ref(true); const showing = ref(true);
onShow(showing); onShow(showing);

2
packages/client/src/ui/visitor/kanban.vue
View file

@ -16,7 +16,7 @@
</div> </div>
<div class="announcements panel"> <div class="announcements panel">
<header>{{ $ts.announcements }}</header> <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"> <section v-for="announcement in items" :key="announcement.id" class="item">
<div class="title">{{ announcement.title }}</div> <div class="title">{{ announcement.title }}</div>
<div class="content"> <div class="content">