mirror of
https://github.com/hotomoe/hotomoe
synced 2024-11-25 07:36:24 +09:00
Tweak UI
This commit is contained in:
syuilo
parent
7a7f668879
commit
7f2356ba4b
@ -8,14 +8,14 @@
|
||||
</template>
|
||||
</I18n>
|
||||
</template>
|
||||
<div class="dpvffvvy">
|
||||
<div class="_root">
|
||||
<div class="dpvffvvy _monolithic_">
|
||||
<div class="_section">
|
||||
<MkTextarea v-model:value="comment">
|
||||
<span>{{ $ts.details }}</span>
|
||||
<template #desc>{{ $ts.fillAbuseReportDescription }}</template>
|
||||
</MkTextarea>
|
||||
</div>
|
||||
<div class="_root">
|
||||
<div class="_section">
|
||||
<MkButton @click="send" primary full :disabled="comment.length === 0">{{ $ts.send }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
</div>
|
||||
|
||||
<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
|
||||
<XNote :note="note" class="_block _gap" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
|
||||
<XNote :note="note" class="_block" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
|
||||
</XList>
|
||||
|
||||
<div v-show="more && !reversed" style="margin-top: var(--margin);">
|
||||
|
||||
@ -9,17 +9,19 @@
|
||||
@closed="$emit('closed')"
|
||||
>
|
||||
<template #header>{{ $ts.notificationSetting }}</template>
|
||||
<div v-if="showGlobalToggle" class="_root">
|
||||
<MkSwitch v-model:value="useGlobalSetting">
|
||||
{{ $ts.useGlobalSetting }}
|
||||
<template #desc>{{ $ts.useGlobalSettingDesc }}</template>
|
||||
</MkSwitch>
|
||||
</div>
|
||||
<div v-if="!useGlobalSetting" class="_root">
|
||||
<MkInfo>{{ $ts.notificationSettingDesc }}</MkInfo>
|
||||
<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
|
||||
<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton>
|
||||
<MkSwitch v-for="type in notificationTypes" :key="type" v-model:value="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</MkSwitch>
|
||||
<div class="_monolithic_">
|
||||
<div v-if="showGlobalToggle" class="_section">
|
||||
<MkSwitch v-model:value="useGlobalSetting">
|
||||
{{ $ts.useGlobalSetting }}
|
||||
<template #desc>{{ $ts.useGlobalSettingDesc }}</template>
|
||||
</MkSwitch>
|
||||
</div>
|
||||
<div v-if="!useGlobalSetting" class="_section">
|
||||
<MkInfo>{{ $ts.notificationSettingDesc }}</MkInfo>
|
||||
<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
|
||||
<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton>
|
||||
<MkSwitch v-for="type in notificationTypes" :key="type" v-model:value="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</MkSwitch>
|
||||
</div>
|
||||
</div>
|
||||
</XModalWindow>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="jmgmzlwq _panel"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $ts.remoteUserCaution }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
|
||||
<div class="jmgmzlwq _block"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $ts.remoteUserCaution }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
|
||||
<div class="auth _root">
|
||||
<form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
|
||||
<div class="auth _section">
|
||||
<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
|
||||
<div class="normal-signin" v-if="!totpLogin">
|
||||
<MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:value="onUsernameChange">
|
||||
@ -38,7 +38,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social _root">
|
||||
<div class="social _section">
|
||||
<a class="_borderButton _gap" v-if="meta && meta.enableTwitterIntegration" :href="`${apiUrl}/signin/twitter`"><Fa :icon="faTwitter" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
|
||||
<a class="_borderButton _gap" v-if="meta && meta.enableGithubIntegration" :href="`${apiUrl}/signin/github`"><Fa :icon="faGithub" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
|
||||
<a class="_borderButton _gap" v-if="meta && meta.enableDiscordIntegration" :href="`${apiUrl}/signin/discord`"><Fa :icon="faDiscord" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'Discord' }) }}</a>
|
||||
|
||||
@ -7,8 +7,10 @@
|
||||
>
|
||||
<template #header>{{ $ts.signup }}</template>
|
||||
|
||||
<div class="_root">
|
||||
<XSignup :auto-set="autoSet" @signup="onSignup"/>
|
||||
<div class="_monolithic_">
|
||||
<div class="_section">
|
||||
<XSignup :auto-set="autoSet" @signup="onSignup"/>
|
||||
</div>
|
||||
</div>
|
||||
</XModalWindow>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="ukygtjoj _block _gap" :class="{ naked, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380] }">
|
||||
<div class="ukygtjoj _block" :class="{ naked, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380] }">
|
||||
<header v-if="showHeader" ref="header">
|
||||
<div class="title"><slot name="header"></slot></div>
|
||||
<div class="sub">
|
||||
|
||||
@ -53,4 +53,8 @@ export default defineComponent({
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
._flat_ .fpezltsf {
|
||||
border-radius: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,28 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="_root">
|
||||
<div class="_block" style="padding: 24px;">
|
||||
<MkInput v-model:value="endpoint" :datalist="endpoints" @update:value="onEndpointChange()">
|
||||
<span>Endpoint</span>
|
||||
</MkInput>
|
||||
<MkTextarea v-model:value="body" code>
|
||||
<span>Params (JSON or JSON5)</span>
|
||||
</MkTextarea>
|
||||
<MkSwitch v-model:value="withCredential">
|
||||
With credential
|
||||
</MkSwitch>
|
||||
<MkButton primary full @click="send" :disabled="sending">
|
||||
<template v-if="sending"><MkEllipsis/></template>
|
||||
<template v-else><Fa :icon="faPaperPlane"/> Send</template>
|
||||
</MkButton>
|
||||
</div>
|
||||
<div class="_root">
|
||||
<div class="_block" style="padding: 24px;">
|
||||
<MkInput v-model:value="endpoint" :datalist="endpoints" @update:value="onEndpointChange()">
|
||||
<span>Endpoint</span>
|
||||
</MkInput>
|
||||
<MkTextarea v-model:value="body" code>
|
||||
<span>Params (JSON or JSON5)</span>
|
||||
</MkTextarea>
|
||||
<MkSwitch v-model:value="withCredential">
|
||||
With credential
|
||||
</MkSwitch>
|
||||
<MkButton primary full @click="send" :disabled="sending">
|
||||
<template v-if="sending"><MkEllipsis/></template>
|
||||
<template v-else><Fa :icon="faPaperPlane"/> Send</template>
|
||||
</MkButton>
|
||||
</div>
|
||||
<div class="_root" v-if="res">
|
||||
<div class="_block" style="padding: 24px;">
|
||||
<MkTextarea v-model:value="res" code readonly tall>
|
||||
<span>Response</span>
|
||||
</MkTextarea>
|
||||
</div>
|
||||
<div v-if="res" class="_block" style="padding: 24px;">
|
||||
<MkTextarea v-model:value="res" code readonly tall>
|
||||
<span>Response</span>
|
||||
</MkTextarea>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
<div class="history" v-if="messages.length > 0">
|
||||
<MkA v-for="(message, i) in messages"
|
||||
class="message _block _gap"
|
||||
class="message _block"
|
||||
: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"
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<div class="new" v-if="queue > 0" :style="{ width: width + 'px' }"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
|
||||
|
||||
<div class="_magnet"></div>
|
||||
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block _gap"/>
|
||||
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block _gap" fixed/>
|
||||
<div class="tabs _block _gap">
|
||||
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
|
||||
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
|
||||
<div class="tabs _block">
|
||||
<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>
|
||||
|
||||
@ -98,12 +98,10 @@
|
||||
<!-- <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="_magnet"></div>
|
||||
|
||||
<div class="profile">
|
||||
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_gap"/>
|
||||
<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
|
||||
|
||||
<div class="_gap _block main" :key="user.id">
|
||||
<div class="_block main" :key="user.id">
|
||||
<div class="banner-container" :style="style">
|
||||
<div class="banner" ref="banner" :style="style"></div>
|
||||
<div class="fade"></div>
|
||||
@ -198,7 +196,7 @@
|
||||
<template v-if="page === 'index'">
|
||||
<div>
|
||||
<div v-if="user.pinnedNotes.length > 0">
|
||||
<XNote v-for="note in user.pinnedNotes" class="note _block _gap" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
|
||||
<XNote v-for="note in user.pinnedNotes" class="note _block" :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"/>
|
||||
@ -845,4 +843,16 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._flat_ .ftskorzw.narrow {
|
||||
> .profile {
|
||||
> .warn {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> .main {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -246,9 +246,6 @@ hr {
|
||||
|
||||
._block {
|
||||
@extend ._panel;
|
||||
}
|
||||
|
||||
._gap {
|
||||
margin: var(--margin) 0;
|
||||
}
|
||||
|
||||
@ -256,7 +253,7 @@ hr {
|
||||
margin-bottom: calc(var(--margin) * -1);
|
||||
}
|
||||
|
||||
._isolated {
|
||||
._gap {
|
||||
margin: var(--margin) 0;
|
||||
}
|
||||
|
||||
@ -333,20 +330,21 @@ hr {
|
||||
margin: var(--root-margin, 32px) auto;
|
||||
max-width: min(var(--baseContentWidth), calc(100% - (var(--root-margin, 32px) * 2)));
|
||||
|
||||
._hr {
|
||||
margin: var(--margin) calc(var(--root-margin, 32px) * -1);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
--root-margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
& + ._root:not(:empty) {
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
margin: var(--root-margin) calc(var(--root-margin, 32px) * -1);
|
||||
._monolithic_ {
|
||||
._section {
|
||||
box-sizing: border-box;
|
||||
padding: var(--root-margin, 32px);
|
||||
|
||||
@media (max-width: 500px) {
|
||||
--root-margin: 10px;
|
||||
}
|
||||
|
||||
& + ._section:not(:empty) {
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<div class="title">
|
||||
<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
|
||||
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
|
||||
<span v-if="info.title" class="text">{{ info.title }}</span>
|
||||
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
|
||||
<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
|
||||
<span v-else-if="info.title" class="text">{{ info.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user