Default UI redesign (#7429)
* wip * wip * wip * wip * Update default.sidebar.vue * wip * wip * wip * wip * wip * wip * wip * wip * wip * Update sticky-sidebar.ts * wip * wip * Update messaging-room.form.vue * Update timeline.vue
This commit is contained in:
syuilo
GitHub
parent
7d2126e2b2
commit
d3fe02fb3e
81 changed files with 1532 additions and 658 deletions
|
|
@ -142,7 +142,7 @@ export default defineComponent({
|
|||
> .user {
|
||||
$height: 32px;
|
||||
padding: 16px;
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
line-height: $height;
|
||||
|
||||
> .avatar {
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ export default defineComponent({
|
|||
font-size: 1.25em;
|
||||
padding: 0 0 0.5em 0;
|
||||
margin: 1.5em 0 1em 0;
|
||||
border-bottom: solid 1px var(--divider);
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
::v-deep(table) {
|
||||
|
|
@ -170,7 +170,7 @@ export default defineComponent({
|
|||
::v-deep(kbd.key) {
|
||||
display: inline-block;
|
||||
padding: 6px 8px;
|
||||
border: solid 1px var(--divider);
|
||||
border: solid 0.5px var(--divider);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { faCloud, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faCloud } from '@fortawesome/free-solid-svg-icons';
|
||||
import XDrive from '@client/components/drive.vue';
|
||||
import * as os from '@client/os';
|
||||
|
||||
|
|
@ -20,19 +20,10 @@ export default defineComponent({
|
|||
INFO: {
|
||||
title: computed(() => this.folder ? this.folder.name : this.$ts.drive),
|
||||
icon: faCloud,
|
||||
action: {
|
||||
icon: faEllipsisH,
|
||||
handler: this.menu
|
||||
}
|
||||
menu: () => this.$refs.drive.getMenu()
|
||||
},
|
||||
folder: null,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
menu(ev) {
|
||||
os.modalMenu(this.$refs.drive.getMenu(), ev.currentTarget || ev.target);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="lznhrdub">
|
||||
<div class="lznhrdub _root">
|
||||
<div class="_section">
|
||||
<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $ts.searchUser }}</span></MkInput>
|
||||
|
||||
|
|
|
|||
|
|
@ -500,12 +500,12 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
}
|
||||
|
||||
> .chart {
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
padding: 16px 0 12px 0;
|
||||
|
||||
> .header {
|
||||
|
|
|
|||
|
|
@ -1,40 +1,38 @@
|
|||
<template>
|
||||
<div class="_section">
|
||||
<div class="mk-messaging _content" v-size="{ max: [400] }">
|
||||
<MkButton @click="start" primary class="start"><Fa :icon="faPlus"/> {{ $ts.startMessaging }}</MkButton>
|
||||
<div class="yweeujhr _root" v-size="{ max: [400] }">
|
||||
<MkButton @click="start" primary class="start"><Fa :icon="faPlus"/> {{ $ts.startMessaging }}</MkButton>
|
||||
|
||||
<div class="history" v-if="messages.length > 0">
|
||||
<MkA v-for="(message, i) in messages"
|
||||
class="message _panel"
|
||||
:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
|
||||
:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
|
||||
:data-index="i"
|
||||
:key="message.id"
|
||||
v-anim="i"
|
||||
>
|
||||
<div>
|
||||
<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/>
|
||||
<header v-if="message.groupId">
|
||||
<span class="name">{{ message.group.name }}</span>
|
||||
<MkTime :time="message.createdAt" class="time"/>
|
||||
</header>
|
||||
<header v-else>
|
||||
<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
|
||||
<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
|
||||
<MkTime :time="message.createdAt" class="time"/>
|
||||
</header>
|
||||
<div class="body">
|
||||
<p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p>
|
||||
</div>
|
||||
<div class="history" v-if="messages.length > 0">
|
||||
<MkA v-for="(message, i) in messages"
|
||||
class="message _block _isolated"
|
||||
:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
|
||||
:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
|
||||
:data-index="i"
|
||||
:key="message.id"
|
||||
v-anim="i"
|
||||
>
|
||||
<div>
|
||||
<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/>
|
||||
<header v-if="message.groupId">
|
||||
<span class="name">{{ message.group.name }}</span>
|
||||
<MkTime :time="message.createdAt" class="time"/>
|
||||
</header>
|
||||
<header v-else>
|
||||
<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
|
||||
<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
|
||||
<MkTime :time="message.createdAt" class="time"/>
|
||||
</header>
|
||||
<div class="body">
|
||||
<p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p>
|
||||
</div>
|
||||
</MkA>
|
||||
</div>
|
||||
<div class="_fullinfo" v-if="!fetching && messages.length == 0">
|
||||
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
|
||||
<div>{{ $ts.noHistory }}</div>
|
||||
</div>
|
||||
<MkLoading v-if="fetching"/>
|
||||
</div>
|
||||
</MkA>
|
||||
</div>
|
||||
<div class="_fullinfo" v-if="!fetching && messages.length == 0">
|
||||
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
|
||||
<div>{{ $ts.noHistory }}</div>
|
||||
</div>
|
||||
<MkLoading v-if="fetching"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -167,10 +165,10 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mk-messaging {
|
||||
.yweeujhr {
|
||||
|
||||
> .start {
|
||||
margin: 0 auto var(--margin) auto;
|
||||
margin: var(--margin) auto var(--margin) auto;
|
||||
}
|
||||
|
||||
> .history {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="mk-messaging-form _panel"
|
||||
<div class="pemppnzi _block"
|
||||
@dragover.stop="onDragover"
|
||||
@drop.stop="onDrop"
|
||||
>
|
||||
|
|
@ -230,7 +230,7 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mk-messaging-form {
|
||||
.pemppnzi {
|
||||
position: relative;
|
||||
|
||||
> textarea {
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export default defineComponent({
|
|||
> .description {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="fcuexfpr">
|
||||
<div class="fcuexfpr _root">
|
||||
<div v-if="note" class="note" v-anim>
|
||||
<div class="_section" v-if="showNext">
|
||||
<div class="_vMargin" v-if="showNext">
|
||||
<XNotes class="_content _noGap_" :pagination="next"/>
|
||||
</div>
|
||||
|
||||
<div class="_section main">
|
||||
<MkButton v-if="!showNext && hasNext" class="load next _content" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
|
||||
<div class="main _vMargin">
|
||||
<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
|
||||
<div class="_content _vMargin">
|
||||
<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_vMargin"/>
|
||||
<XNoteDetailed v-model:note="note" :key="note.id" class="_vMargin"/>
|
||||
|
|
@ -21,10 +21,10 @@
|
|||
</div>
|
||||
</MkA>
|
||||
</div>
|
||||
<MkButton v-if="!showPrev && hasPrev" class="load prev _content" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
|
||||
<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
|
||||
</div>
|
||||
|
||||
<div class="_section" v-if="showPrev">
|
||||
<div class="_vMargin" v-if="showPrev">
|
||||
<XNotes class="_content _noGap_" :pagination="prev"/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -137,6 +137,7 @@ export default defineComponent({
|
|||
> .main {
|
||||
> .load {
|
||||
min-width: 0;
|
||||
margin: 0 auto;
|
||||
border-radius: 999px;
|
||||
|
||||
&.next {
|
||||
|
|
@ -165,7 +166,7 @@ export default defineComponent({
|
|||
> .user {
|
||||
$height: 32px;
|
||||
padding-top: 16px;
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
line-height: $height;
|
||||
|
||||
> .avatar {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="_section">
|
||||
<XNotifications class="_content" @before="before" @after="after" page/>
|
||||
</div>
|
||||
<div class="_root">
|
||||
<XNotifications class="_content" @before="before" @after="after" page/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,87 +1,85 @@
|
|||
<template>
|
||||
<div class="_section">
|
||||
<div class="_content">
|
||||
<MkA class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><Fa :icon="faExternalLinkSquareAlt"/> {{ $ts._pages.viewPage }}</MkA>
|
||||
<div class="_root">
|
||||
<MkA class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><Fa :icon="faExternalLinkSquareAlt"/> {{ $ts._pages.viewPage }}</MkA>
|
||||
|
||||
<div class="buttons" style="margin: 16px 0;">
|
||||
<MkButton inline @click="save" primary class="save" v-if="!readonly"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
|
||||
<MkButton inline @click="duplicate" class="duplicate" v-if="pageId"><Fa :icon="faCopy"/> {{ $ts.duplicate }}</MkButton>
|
||||
<MkButton inline @click="del" class="delete" v-if="pageId && !readonly"><Fa :icon="faTrashAlt"/> {{ $ts.delete }}</MkButton>
|
||||
</div>
|
||||
<div class="buttons" style="margin: 16px;">
|
||||
<MkButton inline @click="save" primary class="save" v-if="!readonly"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
|
||||
<MkButton inline @click="duplicate" class="duplicate" v-if="pageId"><Fa :icon="faCopy"/> {{ $ts.duplicate }}</MkButton>
|
||||
<MkButton inline @click="del" class="delete" v-if="pageId && !readonly"><Fa :icon="faTrashAlt"/> {{ $ts.delete }}</MkButton>
|
||||
</div>
|
||||
|
||||
<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
|
||||
<template #header><Fa :icon="faCog"/> {{ $ts._pages.pageSetting }}</template>
|
||||
<div class="_section">
|
||||
<MkInput v-model:value="title">
|
||||
<span>{{ $ts._pages.title }}</span>
|
||||
</MkInput>
|
||||
<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
|
||||
<template #header><Fa :icon="faCog"/> {{ $ts._pages.pageSetting }}</template>
|
||||
<div style="padding: 16px;">
|
||||
<MkInput v-model:value="title">
|
||||
<span>{{ $ts._pages.title }}</span>
|
||||
</MkInput>
|
||||
|
||||
<MkInput v-model:value="summary">
|
||||
<span>{{ $ts._pages.summary }}</span>
|
||||
</MkInput>
|
||||
<MkInput v-model:value="summary">
|
||||
<span>{{ $ts._pages.summary }}</span>
|
||||
</MkInput>
|
||||
|
||||
<MkInput v-model:value="name">
|
||||
<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
|
||||
<span>{{ $ts._pages.url }}</span>
|
||||
</MkInput>
|
||||
<MkInput v-model:value="name">
|
||||
<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
|
||||
<span>{{ $ts._pages.url }}</span>
|
||||
</MkInput>
|
||||
|
||||
<MkSwitch v-model:value="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch>
|
||||
<MkSwitch v-model:value="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch>
|
||||
|
||||
<MkSelect v-model:value="font">
|
||||
<template #label>{{ $ts._pages.font }}</template>
|
||||
<option value="serif">{{ $ts._pages.fontSerif }}</option>
|
||||
<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
|
||||
</MkSelect>
|
||||
<MkSelect v-model:value="font">
|
||||
<template #label>{{ $ts._pages.font }}</template>
|
||||
<option value="serif">{{ $ts._pages.fontSerif }}</option>
|
||||
<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
|
||||
</MkSelect>
|
||||
|
||||
<MkSwitch v-model:value="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
|
||||
<MkSwitch v-model:value="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
|
||||
|
||||
<div class="eyeCatch">
|
||||
<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><Fa :icon="faPlus"/> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
|
||||
<div v-else-if="eyeCatchingImage">
|
||||
<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
|
||||
<MkButton @click="removeEyeCatchingImage()" v-if="!readonly"><Fa :icon="faTrashAlt"/> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
|
||||
</div>
|
||||
<div class="eyeCatch">
|
||||
<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><Fa :icon="faPlus"/> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
|
||||
<div v-else-if="eyeCatchingImage">
|
||||
<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
|
||||
<MkButton @click="removeEyeCatchingImage()" v-if="!readonly"><Fa :icon="faTrashAlt"/> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</MkContainer>
|
||||
</div>
|
||||
</MkContainer>
|
||||
|
||||
<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
|
||||
<template #header><Fa :icon="faStickyNote"/> {{ $ts._pages.contents }}</template>
|
||||
<div class="_section">
|
||||
<XBlocks class="content" v-model:value="content" :hpml="hpml"/>
|
||||
<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
|
||||
<template #header><Fa :icon="faStickyNote"/> {{ $ts._pages.contents }}</template>
|
||||
<div style="padding: 16px;">
|
||||
<XBlocks class="content" v-model:value="content" :hpml="hpml"/>
|
||||
|
||||
<MkButton @click="add()" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
|
||||
</div>
|
||||
</MkContainer>
|
||||
<MkButton @click="add()" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
|
||||
</div>
|
||||
</MkContainer>
|
||||
|
||||
<MkContainer :body-togglable="true" class="_vMargin">
|
||||
<template #header><Fa :icon="faMagic"/> {{ $ts._pages.variables }}</template>
|
||||
<div class="qmuvgica">
|
||||
<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
|
||||
<template #item="{element}">
|
||||
<XVariable
|
||||
:value="element"
|
||||
:removable="true"
|
||||
@remove="() => removeVariable(element)"
|
||||
:hpml="hpml"
|
||||
:name="element.name"
|
||||
:title="element.name"
|
||||
:draggable="true"
|
||||
/>
|
||||
</template>
|
||||
</XDraggable>
|
||||
<MkContainer :body-togglable="true" class="_vMargin">
|
||||
<template #header><Fa :icon="faMagic"/> {{ $ts._pages.variables }}</template>
|
||||
<div class="qmuvgica">
|
||||
<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
|
||||
<template #item="{element}">
|
||||
<XVariable
|
||||
:value="element"
|
||||
:removable="true"
|
||||
@remove="() => removeVariable(element)"
|
||||
:hpml="hpml"
|
||||
:name="element.name"
|
||||
:title="element.name"
|
||||
:draggable="true"
|
||||
/>
|
||||
</template>
|
||||
</XDraggable>
|
||||
|
||||
<MkButton @click="addVariable()" class="add" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
|
||||
</div>
|
||||
</MkContainer>
|
||||
<MkButton @click="addVariable()" class="add" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
|
||||
</div>
|
||||
</MkContainer>
|
||||
|
||||
<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
|
||||
<template #header><Fa :icon="faCode"/> {{ $ts.script }}</template>
|
||||
<div>
|
||||
<MkTextarea class="_code" v-model:value="script"/>
|
||||
</div>
|
||||
</MkContainer>
|
||||
</div>
|
||||
<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
|
||||
<template #header><Fa :icon="faCode"/> {{ $ts.script }}</template>
|
||||
<div>
|
||||
<MkTextarea class="_code" v-model:value="script"/>
|
||||
</div>
|
||||
</MkContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -259,7 +259,7 @@ export default defineComponent({
|
|||
> footer {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
padding: 6px 8px;
|
||||
font-size: 0.9em;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,39 +1,37 @@
|
|||
<template>
|
||||
<div class="cmuxhskf" v-hotkey.global="keymap">
|
||||
<div class="cmuxhskf _root" v-hotkey.global="keymap">
|
||||
<div class="new" v-if="queue > 0" :style="{ width: width + 'px' }"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
|
||||
|
||||
<div class="_section">
|
||||
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _content _vMargin"/>
|
||||
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _panel _content _vMargin" fixed/>
|
||||
<div class="tabs _panel _vMargin">
|
||||
<div class="left">
|
||||
<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><Fa :icon="faHome"/></button>
|
||||
<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><Fa :icon="faComments"/></button>
|
||||
<button class="_button tab" @click="() => { src = 'social'; saveSrc(); }" :class="{ active: src === 'social' }" v-tooltip="$ts._timelines.social" v-if="isLocalTimelineAvailable"><Fa :icon="faShareAlt"/></button>
|
||||
<button class="_button tab" @click="() => { src = 'global'; saveSrc(); }" :class="{ active: src === 'global' }" v-tooltip="$ts._timelines.global" v-if="isGlobalTimelineAvailable"><Fa :icon="faGlobe"/></button>
|
||||
<span class="divider"></span>
|
||||
<button class="_button tab" @click="() => { src = 'mentions'; saveSrc(); }" :class="{ active: src === 'mentions' }" v-tooltip="$ts.mentions"><Fa :icon="faAt"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadMentions"/></button>
|
||||
<button class="_button tab" @click="() => { src = 'directs'; saveSrc(); }" :class="{ active: src === 'directs' }" v-tooltip="$ts.directNotes"><Fa :icon="faEnvelope"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadSpecifiedNotes"/></button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button class="_button tab" @click="chooseChannel" :class="{ active: src === 'channel' }" v-tooltip="$ts.channel"><Fa :icon="faSatelliteDish"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadChannel"/></button>
|
||||
<button class="_button tab" @click="chooseAntenna" :class="{ active: src === 'antenna' }" v-tooltip="$ts.antennas"><Fa :icon="faSatellite"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadAntenna"/></button>
|
||||
<button class="_button tab" @click="chooseList" :class="{ active: src === 'list' }" v-tooltip="$ts.lists"><Fa :icon="faListUl"/></button>
|
||||
</div>
|
||||
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block _isolated"/>
|
||||
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block _isolated" fixed/>
|
||||
<div class="tabs _block _vMargin">
|
||||
<div class="left">
|
||||
<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><Fa :icon="faHome"/></button>
|
||||
<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><Fa :icon="faComments"/></button>
|
||||
<button class="_button tab" @click="() => { src = 'social'; saveSrc(); }" :class="{ active: src === 'social' }" v-tooltip="$ts._timelines.social" v-if="isLocalTimelineAvailable"><Fa :icon="faShareAlt"/></button>
|
||||
<button class="_button tab" @click="() => { src = 'global'; saveSrc(); }" :class="{ active: src === 'global' }" v-tooltip="$ts._timelines.global" v-if="isGlobalTimelineAvailable"><Fa :icon="faGlobe"/></button>
|
||||
<span class="divider"></span>
|
||||
<button class="_button tab" @click="() => { src = 'mentions'; saveSrc(); }" :class="{ active: src === 'mentions' }" v-tooltip="$ts.mentions"><Fa :icon="faAt"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadMentions"/></button>
|
||||
<button class="_button tab" @click="() => { src = 'directs'; saveSrc(); }" :class="{ active: src === 'directs' }" v-tooltip="$ts.directNotes"><Fa :icon="faEnvelope"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadSpecifiedNotes"/></button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button class="_button tab" @click="chooseChannel" :class="{ active: src === 'channel' }" v-tooltip="$ts.channel"><Fa :icon="faSatelliteDish"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadChannel"/></button>
|
||||
<button class="_button tab" @click="chooseAntenna" :class="{ active: src === 'antenna' }" v-tooltip="$ts.antennas"><Fa :icon="faSatellite"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadAntenna"/></button>
|
||||
<button class="_button tab" @click="chooseList" :class="{ active: src === 'list' }" v-tooltip="$ts.lists"><Fa :icon="faListUl"/></button>
|
||||
</div>
|
||||
<XTimeline ref="tl"
|
||||
class="_content _vMargin"
|
||||
:key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src"
|
||||
:src="src"
|
||||
:list="list ? list.id : null"
|
||||
:antenna="antenna ? antenna.id : null"
|
||||
:channel="channel ? channel.id : null"
|
||||
:sound="true"
|
||||
@before="before()"
|
||||
@after="after()"
|
||||
@queue="queueUpdated"
|
||||
/>
|
||||
</div>
|
||||
<XTimeline ref="tl"
|
||||
class="_vMargin"
|
||||
:key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src"
|
||||
:src="src"
|
||||
:list="list ? list.id : null"
|
||||
:antenna="antenna ? antenna.id : null"
|
||||
:channel="channel ? channel.id : null"
|
||||
:sound="true"
|
||||
@before="before()"
|
||||
@after="after()"
|
||||
@queue="queueUpdated"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -200,6 +198,18 @@ export default defineComponent({
|
|||
});
|
||||
},
|
||||
|
||||
async timetravel() {
|
||||
const { canceled, result: date } = await os.dialog({
|
||||
title: this.$ts.date,
|
||||
input: {
|
||||
type: 'date'
|
||||
}
|
||||
});
|
||||
if (canceled) return;
|
||||
|
||||
this.$refs.tl.timetravel(new Date(date));
|
||||
},
|
||||
|
||||
focus() {
|
||||
(this.$refs.tl as any).focus();
|
||||
}
|
||||
|
|
@ -221,70 +231,65 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
> ._section {
|
||||
> .tabs {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 0 8px;
|
||||
max-width: var(--baseContentWidth);
|
||||
> .tabs {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 0 8px;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
|
||||
// 影の都合上
|
||||
position: relative;
|
||||
|
||||
> .right {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// 影の都合上
|
||||
position: relative;
|
||||
> .left, > .right {
|
||||
> .tab {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
padding: 0 12px;
|
||||
|
||||
> .right {
|
||||
margin-left: auto;
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--fgHighlighted);
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: calc(100% - 16px);
|
||||
height: 4px;
|
||||
background: var(--accent);
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .i {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 8px;
|
||||
color: var(--indicator);
|
||||
font-size: 8px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
> .left, > .right {
|
||||
> .tab {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
padding: 0 12px;
|
||||
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--fgHighlighted);
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: calc(100% - 16px);
|
||||
height: 4px;
|
||||
background: var(--accent);
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .i {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 8px;
|
||||
color: var(--indicator);
|
||||
font-size: 8px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
> .divider {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 28px;
|
||||
vertical-align: middle;
|
||||
margin: 0 8px;
|
||||
background: var(--divider);
|
||||
}
|
||||
> .divider {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 28px;
|
||||
vertical-align: middle;
|
||||
margin: 0 8px;
|
||||
background: var(--divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<MkTab v-model:value="with_" class="_vMargin">
|
||||
<MkTab v-model:value="with_" class="_isolated _section">
|
||||
<option :value="null">{{ $ts.notes }}</option>
|
||||
<option value="replies">{{ $ts.notesAndReplies }}</option>
|
||||
<option value="files">{{ $ts.withFiles }}</option>
|
||||
</MkTab>
|
||||
<XNotes ref="timeline" class="_vMargin" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
|
||||
<XNotes ref="timeline" class="_section _noGap_" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -93,15 +93,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ftskorzw narrow _section" v-else-if="user && narrow === true" v-size="{ max: [500] }">
|
||||
<div class="ftskorzw narrow _root" v-else-if="user && narrow === true" v-size="{ max: [500] }">
|
||||
<!-- TODO -->
|
||||
<!-- <div class="punished" v-if="user.isSuspended"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $ts.userSuspended }}</div> -->
|
||||
<!-- <div class="punished" v-if="user.isSilenced"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $ts.userSilenced }}</div> -->
|
||||
|
||||
<div class="profile _content _vMargin">
|
||||
<div class="profile">
|
||||
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_vMargin"/>
|
||||
|
||||
<div class="_vMargin _panel main" :key="user.id">
|
||||
<div class="_vMargin _block main" :key="user.id">
|
||||
<div class="banner-container" :style="style">
|
||||
<div class="banner" ref="banner" :style="style"></div>
|
||||
<div class="fade"></div>
|
||||
|
|
@ -177,37 +177,39 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav _vMargin">
|
||||
<MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
|
||||
<Fa :icon="faCommentAlt" class="icon"/>
|
||||
<span>{{ $ts.notes }}</span>
|
||||
</MkA>
|
||||
<MkA :to="userPage(user, 'clips')" :class="{ active: page === 'clips' }" class="link">
|
||||
<Fa :icon="faPaperclip" class="icon"/>
|
||||
<span>{{ $ts.clips }}</span>
|
||||
</MkA>
|
||||
<MkA :to="userPage(user, 'pages')" :class="{ active: page === 'pages' }" class="link">
|
||||
<Fa :icon="faFileAlt" class="icon"/>
|
||||
<span>{{ $ts.pages }}</span>
|
||||
</MkA>
|
||||
</div>
|
||||
<div class="contents">
|
||||
<div class="nav _isolated">
|
||||
<MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
|
||||
<Fa :icon="faCommentAlt" class="icon"/>
|
||||
<span>{{ $ts.notes }}</span>
|
||||
</MkA>
|
||||
<MkA :to="userPage(user, 'clips')" :class="{ active: page === 'clips' }" class="link">
|
||||
<Fa :icon="faPaperclip" class="icon"/>
|
||||
<span>{{ $ts.clips }}</span>
|
||||
</MkA>
|
||||
<MkA :to="userPage(user, 'pages')" :class="{ active: page === 'pages' }" class="link">
|
||||
<Fa :icon="faFileAlt" class="icon"/>
|
||||
<span>{{ $ts.pages }}</span>
|
||||
</MkA>
|
||||
</div>
|
||||
|
||||
<template v-if="page === 'index'">
|
||||
<div class="_content _vMargin">
|
||||
<div v-if="user.pinnedNotes.length > 0" class="_vMargin">
|
||||
<XNote v-for="note in user.pinnedNotes" class="note _vMargin" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
|
||||
<template v-if="page === 'index'">
|
||||
<div>
|
||||
<div v-if="user.pinnedNotes.length > 0">
|
||||
<XNote v-for="note in user.pinnedNotes" class="note _block _isolated" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
|
||||
</div>
|
||||
<XPhotos :user="user" :key="user.id"/>
|
||||
<XActivity :user="user" :key="user.id"/>
|
||||
</div>
|
||||
<XPhotos :user="user" :key="user.id" class="_vMargin"/>
|
||||
<XActivity :user="user" :key="user.id" class="_vMargin"/>
|
||||
</div>
|
||||
<div class="_content _vMargin">
|
||||
<XUserTimeline :user="user" class="_content"/>
|
||||
</div>
|
||||
</template>
|
||||
<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _vMargin"/>
|
||||
<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _vMargin"/>
|
||||
<XClips v-else-if="page === 'clips'" :user="user" class="_vMargin"/>
|
||||
<XPages v-else-if="page === 'pages'" :user="user" class="_vMargin"/>
|
||||
<div>
|
||||
<XUserTimeline :user="user"/>
|
||||
</div>
|
||||
</template>
|
||||
<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _vMargin"/>
|
||||
<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _vMargin"/>
|
||||
<XClips v-else-if="page === 'clips'" :user="user" class="_vMargin"/>
|
||||
<XPages v-else-if="page === 'pages'" :user="user" class="_vMargin"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="error">
|
||||
<MkError @retry="fetch()"/>
|
||||
|
|
@ -234,6 +236,7 @@ import { getUserMenu } from '@client/scripts/get-user-menu';
|
|||
import number from '../../filters/number';
|
||||
import { userPage, acct as getAcct } from '../../filters/user';
|
||||
import * as os from '@client/os';
|
||||
import { url } from '@client/config';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
|
@ -268,6 +271,10 @@ export default defineComponent({
|
|||
INFO: computed(() => this.user ? {
|
||||
userName: this.user,
|
||||
avatar: this.user,
|
||||
share: {
|
||||
title: this.user.name,
|
||||
url: `${url}/@${this.user.username}`
|
||||
},
|
||||
action: {
|
||||
icon: faEllipsisH,
|
||||
handler: this.menu
|
||||
|
|
@ -304,7 +311,7 @@ export default defineComponent({
|
|||
|
||||
mounted() {
|
||||
window.requestAnimationFrame(this.parallaxLoop);
|
||||
this.narrow = this.$el.clientWidth < 1000;
|
||||
this.narrow = true; //this.$el.clientWidth < 1000;
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
|
|
@ -415,7 +422,7 @@ export default defineComponent({
|
|||
font-size: 80%;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 20px;
|
||||
border: solid 1px var(--divider);
|
||||
border: solid 0.5px var(--divider);
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
|
|
@ -423,7 +430,7 @@ export default defineComponent({
|
|||
> .status {
|
||||
display: flex;
|
||||
padding: 20px 16px;
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
font-size: 90%;
|
||||
|
||||
> a {
|
||||
|
|
@ -451,13 +458,13 @@ export default defineComponent({
|
|||
|
||||
> .description {
|
||||
padding: 20px 16px;
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
> .fields {
|
||||
padding: 20px 16px;
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
font-size: 90%;
|
||||
|
||||
> .field {
|
||||
|
|
@ -540,9 +547,9 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
.ftskorzw.narrow {
|
||||
max-width: 100vw;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow: clip;
|
||||
|
||||
> .punished {
|
||||
font-size: 0.8em;
|
||||
|
|
@ -654,7 +661,7 @@ export default defineComponent({
|
|||
text-align: center;
|
||||
padding: 50px 8px 16px 8px;
|
||||
font-weight: bold;
|
||||
border-bottom: solid 1px var(--divider);
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
|
||||
> .bottom {
|
||||
> * {
|
||||
|
|
@ -689,7 +696,7 @@ export default defineComponent({
|
|||
> .fields {
|
||||
padding: 24px;
|
||||
font-size: 0.9em;
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
|
||||
> .field {
|
||||
display: flex;
|
||||
|
|
@ -726,7 +733,7 @@ export default defineComponent({
|
|||
> .status {
|
||||
display: flex;
|
||||
padding: 24px;
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
|
||||
> a {
|
||||
flex: 1;
|
||||
|
|
@ -753,41 +760,42 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
> .nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: var(--margin);
|
||||
//font-size: 120%;
|
||||
font-weight: bold;
|
||||
> .contents {
|
||||
> .nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//font-size: 120%;
|
||||
font-weight: bold;
|
||||
|
||||
> .link {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
border-bottom: solid 3px transparent;
|
||||
> .link {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
border-bottom: solid 3px transparent;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
&.active {
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
&:not(.active):hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
&:not(.active):hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
|
||||
> .icon {
|
||||
margin-right: 6px;
|
||||
> .icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
margin-bottom: var(--margin);
|
||||
> .content {
|
||||
margin-bottom: var(--margin);
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_500px {
|
||||
|
|
@ -831,8 +839,10 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
> .nav {
|
||||
font-size: 80%;
|
||||
> .contents {
|
||||
> .nav {
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -283,7 +283,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
> .status {
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
padding: 32px;
|
||||
font-size: 90%;
|
||||
|
||||
|
|
@ -291,7 +291,7 @@ export default defineComponent({
|
|||
> span:not(:last-child) {
|
||||
padding-right: 1em;
|
||||
margin-right: 1em;
|
||||
border-right: solid 1px var(--divider);
|
||||
border-right: solid 0.5px var(--divider);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -255,7 +255,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
> .status {
|
||||
border-top: solid 1px var(--divider);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
padding: 32px;
|
||||
font-size: 90%;
|
||||
|
||||
|
|
@ -263,7 +263,7 @@ export default defineComponent({
|
|||
> span:not(:last-child) {
|
||||
padding-right: 1em;
|
||||
margin-right: 1em;
|
||||
border-right: solid 1px var(--divider);
|
||||
border-right: solid 0.5px var(--divider);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue