mirror/MisskeyIO
1
0
Fork 0
mirror of https://github.com/MisskeyIO/misskey synced 2024-11-28 06:48:32 +09:00
Code

Tweak UI

Browse Source
This commit is contained in:
syuilo 2021-04-13 12:43:19 +09:00
parent 7a7f668879
commit 7f2356ba4b
14 changed files with 82 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/client/components/abuse-report-window.vue
View File

@ -8,14 +8,14 @@
</template> </template>
</I18n> </I18n>
</template> </template>
<div class="dpvffvvy"> <div class="dpvffvvy _monolithic_">
<div class="_root"> <div class="_section">
<MkTextarea v-model:value="comment"> <MkTextarea v-model:value="comment">
<span>{{ $ts.details }}</span> <span>{{ $ts.details }}</span>
<template #desc>{{ $ts.fillAbuseReportDescription }}</template> <template #desc>{{ $ts.fillAbuseReportDescription }}</template>
</MkTextarea> </MkTextarea>
</div> </div>
<div class="_root"> <div class="_section">
<MkButton @click="send" primary full :disabled="comment.length === 0">{{ $ts.send }}</MkButton> <MkButton @click="send" primary full :disabled="comment.length === 0">{{ $ts.send }}</MkButton>
</div> </div>
</div> </div>

2
src/client/components/notes.vue
View File

@ -15,7 +15,7 @@
</div> </div>
<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed"> <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> </XList>
<div v-show="more && !reversed" style="margin-top: var(--margin);"> <div v-show="more && !reversed" style="margin-top: var(--margin);">

6
src/client/components/notification-setting-window.vue
View File

@ -9,18 +9,20 @@
@closed="$emit('closed')" @closed="$emit('closed')"
> >
<template #header>{{ $ts.notificationSetting }}</template> <template #header>{{ $ts.notificationSetting }}</template>
<div v-if="showGlobalToggle" class="_root"> <div class="_monolithic_">
<div v-if="showGlobalToggle" class="_section">
<MkSwitch v-model:value="useGlobalSetting"> <MkSwitch v-model:value="useGlobalSetting">
{{ $ts.useGlobalSetting }} {{ $ts.useGlobalSetting }}
<template #desc>{{ $ts.useGlobalSettingDesc }}</template> <template #desc>{{ $ts.useGlobalSettingDesc }}</template>
</MkSwitch> </MkSwitch>
</div> </div>
<div v-if="!useGlobalSetting" class="_root"> <div v-if="!useGlobalSetting" class="_section">
<MkInfo>{{ $ts.notificationSettingDesc }}</MkInfo> <MkInfo>{{ $ts.notificationSettingDesc }}</MkInfo>
<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton> <MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
<MkButton inline @click="enableAll">{{ $ts.enableAll }}</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> <MkSwitch v-for="type in notificationTypes" :key="type" v-model:value="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</MkSwitch>
</div> </div>
</div>
</XModalWindow> </XModalWindow>
</template> </template>

2
src/client/components/remote-caution.vue
View File

@ -1,5 +1,5 @@
<template> <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> </template>
<script lang="ts"> <script lang="ts">

6
src/client/components/signin.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit"> <form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
<div class="auth _root"> <div class="auth _section">
<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div> <div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
<div class="normal-signin" v-if="!totpLogin"> <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"> <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>
</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.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.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> <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>

4
src/client/components/signup-dialog.vue
View File

@ -7,9 +7,11 @@
> >
<template #header>{{ $ts.signup }}</template> <template #header>{{ $ts.signup }}</template>
<div class="_root"> <div class="_monolithic_">
<div class="_section">
<XSignup :auto-set="autoSet" @signup="onSignup"/> <XSignup :auto-set="autoSet" @signup="onSignup"/>
</div> </div>
</div>
</XModalWindow> </XModalWindow>
</template> </template>

2
src/client/components/ui/container.vue
View File

@ -1,5 +1,5 @@
<template> <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"> <header v-if="showHeader" ref="header">
<div class="title"><slot name="header"></slot></div> <div class="title"><slot name="header"></slot></div>
<div class="sub"> <div class="sub">

4
src/client/components/ui/info.vue
View File

@ -53,4 +53,8 @@ export default defineComponent({
margin-right: 4px; margin-right: 4px;
} }
} }
._flat_ .fpezltsf {
border-radius: 0;
}
</style> </style>

8
src/client/pages/api-console.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div> <div class="_root">
<div class="_root">
<div class="_block" style="padding: 24px;"> <div class="_block" style="padding: 24px;">
<MkInput v-model:value="endpoint" :datalist="endpoints" @update:value="onEndpointChange()"> <MkInput v-model:value="endpoint" :datalist="endpoints" @update:value="onEndpointChange()">
<span>Endpoint</span> <span>Endpoint</span>
@ -16,14 +15,11 @@
<template v-else><Fa :icon="faPaperPlane"/> Send</template> <template v-else><Fa :icon="faPaperPlane"/> Send</template>
</MkButton> </MkButton>
</div> </div>
</div> <div v-if="res" class="_block" style="padding: 24px;">
<div class="_root" v-if="res">
<div class="_block" style="padding: 24px;">
<MkTextarea v-model:value="res" code readonly tall> <MkTextarea v-model:value="res" code readonly tall>
<span>Response</span> <span>Response</span>
</MkTextarea> </MkTextarea>
</div> </div>
</div>
</div> </div>
</template> </template>

2
src/client/pages/messaging/index.vue
View File

@ -4,7 +4,7 @@
<div class="history" v-if="messages.length > 0"> <div class="history" v-if="messages.length > 0">
<MkA v-for="(message, i) in messages" <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 }" :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)}`" :to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
:data-index="i" :data-index="i"

6
src/client/pages/timeline.vue
View File

@ -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="new" v-if="queue > 0" :style="{ width: width + 'px' }"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<div class="_magnet"></div> <div class="_magnet"></div>
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block _gap"/> <XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block _gap" fixed/> <XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
<div class="tabs _block _gap"> <div class="tabs _block">
<div class="left"> <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 = '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 = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><Fa :icon="faComments"/></button>

20
src/client/pages/user/index.vue
View File

@ -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.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="punished" v-if="user.isSilenced"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $ts.userSilenced }}</div> -->
<div class="_magnet"></div>
<div class="profile"> <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-container" :style="style">
<div class="banner" ref="banner" :style="style"></div> <div class="banner" ref="banner" :style="style"></div>
<div class="fade"></div> <div class="fade"></div>
@ -198,7 +196,7 @@
<template v-if="page === 'index'"> <template v-if="page === 'index'">
<div> <div>
<div v-if="user.pinnedNotes.length > 0"> <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> </div>
<XPhotos :user="user" :key="user.id"/> <XPhotos :user="user" :key="user.id"/>
<XActivity :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> </style>

22
src/client/style.scss
View File

@ -246,9 +246,6 @@ hr {
._block { ._block {
@extend ._panel; @extend ._panel;
}
._gap {
margin: var(--margin) 0; margin: var(--margin) 0;
} }
@ -256,7 +253,7 @@ hr {
margin-bottom: calc(var(--margin) * -1); margin-bottom: calc(var(--margin) * -1);
} }
._isolated { ._gap {
margin: var(--margin) 0; margin: var(--margin) 0;
} }
@ -333,20 +330,21 @@ hr {
margin: var(--root-margin, 32px) auto; margin: var(--root-margin, 32px) auto;
max-width: min(var(--baseContentWidth), calc(100% - (var(--root-margin, 32px) * 2))); max-width: min(var(--baseContentWidth), calc(100% - (var(--root-margin, 32px) * 2)));
._hr { @media (max-width: 500px) {
margin: var(--margin) calc(var(--root-margin, 32px) * -1); --root-margin: 10px;
border-top: solid 0.5px var(--divider);
} }
}
._monolithic_ {
._section {
box-sizing: border-box;
padding: var(--root-margin, 32px);
@media (max-width: 500px) { @media (max-width: 500px) {
--root-margin: 10px; --root-margin: 10px;
} }
& + ._root:not(:empty) { & + ._section:not(:empty) {
&:before {
content: "";
display: block;
margin: var(--root-margin) calc(var(--root-margin, 32px) * -1);
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--divider);
} }
} }

4
src/client/ui/_common_/header.vue
View File

@ -8,8 +8,8 @@
<div class="title"> <div class="title">
<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/> <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"/> <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-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/> <span v-else-if="info.title" class="text">{{ info.title }}</span>
</div> </div>
</div> </div>
<div class="buttons"> <div class="buttons">