wip
This commit is contained in:
parent
ffb0dadbc7
commit
10f9fd6146
|
@ -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 => {
|
||||||
type: 'user',
|
accountsPromise.then(accounts => {
|
||||||
user: account,
|
const account = accounts.find(x => x.id === a.id);
|
||||||
action: () => { this.switchAccount(account); }
|
if (account == null) return res(null);
|
||||||
|
res({
|
||||||
|
type: 'user',
|
||||||
|
user: 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: () => {
|
||||||
|
|
|
@ -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',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -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',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue