This commit is contained in:
syuilo 2021-02-17 21:27:11 +09:00
parent ffb0dadbc7
commit 10f9fd6146
5 changed files with 47 additions and 16 deletions

View file

@ -138,13 +138,19 @@ export default defineComponent({
}, },
async openAccountMenu(ev) { async openAccountMenu(ev) {
const storedAccounts = getAccounts(); const storedAccounts = getAccounts().filter(x => x.id !== this.$i.id);
const accounts = (await os.api('users/show', { userIds: storedAccounts.map(x => x.id) })).filter(x => x.id !== this.$i.id); const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
const accountItems = accounts.map(account => ({ const accountItemPromises = storedAccounts.map(a => new Promise(res => {
accountsPromise.then(accounts => {
const account = accounts.find(x => x.id === a.id);
if (account == null) return res(null);
res({
type: 'user', type: 'user',
user: account, user: account,
action: () => { this.switchAccount(account); } action: () => { this.switchAccount(account); }
});
});
})); }));
os.modalMenu([...[{ os.modalMenu([...[{
@ -152,7 +158,7 @@ export default defineComponent({
text: this.$ts.profile, text: this.$ts.profile,
to: `/@${ this.$i.username }`, to: `/@${ this.$i.username }`,
avatar: this.$i, avatar: this.$i,
}, null, ...accountItems, { }, null, ...accountItemPromises, {
icon: faPlus, icon: faPlus,
text: this.$ts.addAcount, text: this.$ts.addAcount,
action: () => { action: () => {

View file

@ -16,6 +16,8 @@
bg: '#000', bg: '#000',
acrylicBg: ':alpha<0.5<@bg', acrylicBg: ':alpha<0.5<@bg',
fg: '#dadada', fg: '#dadada',
fgTransparentWeak: ':alpha<0.75<@fg',
fgTransparent: ':alpha<0.5<@fg',
fgHighlighted: ':lighten<3<@fg', fgHighlighted: ':lighten<3<@fg',
divider: 'rgba(255, 255, 255, 0.1)', divider: 'rgba(255, 255, 255, 0.1)',
indicator: '@accent', indicator: '@accent',
@ -77,5 +79,6 @@
X14: ':alpha<0.5<@navBg', X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel', X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel', X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
}, },
} }

View file

@ -16,6 +16,8 @@
bg: '#fff', bg: '#fff',
acrylicBg: ':alpha<0.5<@bg', acrylicBg: ':alpha<0.5<@bg',
fg: '#5f5f5f', fg: '#5f5f5f',
fgTransparentWeak: ':alpha<0.75<@fg',
fgTransparent: ':alpha<0.5<@fg',
fgHighlighted: ':darken<3<@fg', fgHighlighted: ':darken<3<@fg',
divider: 'rgba(0, 0, 0, 0.1)', divider: 'rgba(0, 0, 0, 0.1)',
indicator: '@accent', indicator: '@accent',
@ -77,5 +79,6 @@
X14: ':alpha<0.5<@navBg', X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel', X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel', X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
}, },
} }

View file

@ -200,6 +200,11 @@ export default defineComponent({
}, },
created() { created() {
if (window.innerWidth < 1024) {
localStorage.setItem('ui', 'default');
location.reload();
}
router.beforeEach((to, from) => { router.beforeEach((to, from) => {
this.$refs.side.navigate(to.fullPath); this.$refs.side.navigate(to.fullPath);
// search?q=foo return false // search?q=foo return false
@ -414,10 +419,12 @@ export default defineComponent({
> .body { > .body {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
padding: 8px 0;
overflow: auto; overflow: auto;
> .container { > .container {
margin-top: 8px;
margin-bottom: 8px;
& + .container { & + .container {
margin-top: 16px; margin-top: 16px;
} }
@ -426,10 +433,21 @@ export default defineComponent({
display: flex; display: flex;
font-size: 0.9em; font-size: 0.9em;
padding: 8px 16px; padding: 8px 16px;
opacity: 0.7; position: sticky;
top: 0;
background: var(--X17);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
z-index: 1;
color: var(--fgTransparentWeak);
> .add { > .add {
margin-left: auto; margin-left: auto;
color: var(--fgTransparentWeak);
&:hover {
color: var(--fg);
}
} }
} }
@ -448,11 +466,11 @@ export default defineComponent({
&.active, &.active:hover { &.active, &.active:hover {
background: var(--accent); background: var(--accent);
color: #fff; color: #fff !important;
} }
&.read { &.read {
opacity: 0.5; color: var(--fgTransparent);
} }
> .icon { > .icon {
@ -527,6 +545,7 @@ export default defineComponent({
> .instance { > .instance {
margin-right: 16px; margin-right: 16px;
font-size: 0.9em;
} }
> .clock { > .clock {

View file

@ -65,21 +65,21 @@
</div> </div>
<XReactionsViewer :note="appearNote" ref="reactionsViewer"/> <XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
<footer class="footer _panel"> <footer class="footer _panel">
<button @click="reply()" class="button _button"> <button @click="reply()" class="button _button" v-tooltip="$ts.reply">
<template v-if="appearNote.reply"><Fa :icon="faReplyAll"/></template> <template v-if="appearNote.reply"><Fa :icon="faReplyAll"/></template>
<template v-else><Fa :icon="faReply"/></template> <template v-else><Fa :icon="faReply"/></template>
<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p> <p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
</button> </button>
<button v-if="canRenote" @click="renote()" class="button _button" ref="renoteButton"> <button v-if="canRenote" @click="renote()" class="button _button" ref="renoteButton" v-tooltip="$ts.renote">
<Fa :icon="faRetweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p> <Fa :icon="faRetweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
</button> </button>
<button v-else class="button _button"> <button v-else class="button _button">
<Fa :icon="faBan"/> <Fa :icon="faBan"/>
</button> </button>
<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton"> <button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton" v-tooltip="$ts.reaction">
<Fa :icon="faPlus"/> <Fa :icon="faPlus"/>
</button> </button>
<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton"> <button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton" v-tooltip="$ts.reaction">
<Fa :icon="faMinus"/> <Fa :icon="faMinus"/>
</button> </button>
<button class="button _button" @click="menu()" ref="menuButton"> <button class="button _button" @click="menu()" ref="menuButton">
@ -911,7 +911,7 @@ export default defineComponent({
align-items: center; align-items: center;
padding: 12px 16px 4px 16px; padding: 12px 16px 4px 16px;
line-height: 24px; line-height: 24px;
font-size: 90%; font-size: 85%;
white-space: pre; white-space: pre;
color: #d28a3f; color: #d28a3f;