sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into swn

Browse Source
This commit is contained in:
tamaina
2021-09-21 21:58:50 +09:00
parent fb5fb8b2d8 72a49f334a
commit da88b6f23e
18 changed files with 482 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/client/components/note-header.vue
View File

@@ -3,10 +3,10 @@
<MkA class="name" :to="userPage(note.user)" v-user-preview="note.user.id">
<MkUserName :user="note.user"/>
</MkA>
<span class="is-bot" v-if="note.user.isBot">bot</span>
<span class="username"><MkAcct :user="note.user"/></span>
<span class="admin" v-if="note.user.isAdmin"><i class="fas fa-bookmark"></i></span>
<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><i class="far fa-bookmark"></i></span>
<div class="is-bot" v-if="note.user.isBot">bot</div>
<div class="username"><MkAcct :user="note.user"/></div>
<div class="admin" v-if="note.user.isAdmin"><i class="fas fa-bookmark"></i></div>
<div class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><i class="far fa-bookmark"></i></div>
<div class="info">
<span class="mobile" v-if="note.viaMobile"><i class="fas fa-mobile-alt"></i></span>
<MkA class="created-at" :to="notePage(note)">
@@ -55,6 +55,7 @@ export default defineComponent({
white-space: nowrap;
> .name {
flex-shrink: 1;
display: block;
margin: 0 .5em 0 0;
padding: 0;
@@ -81,17 +82,20 @@ export default defineComponent({
> .admin,
> .moderator {
flex-shrink: 0;
margin-right: 0.5em;
color: var(--badge);
}
> .username {
flex-shrink: 9999999;
margin: 0 .5em 0 0;
overflow: hidden;
text-overflow: ellipsis;
}
> .info {
flex-shrink: 0;
margin-left: auto;
font-size: 0.9em;

33
src/client/components/ui/menu.vue
View File

@@ -41,7 +41,7 @@
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { defineComponent, ref, unref } from 'vue';
import { focusPrev, focusNext } from '@client/scripts/focus';
import contains from '@client/scripts/contains';
@@ -79,21 +79,26 @@ export default defineComponent({
};
},
},
created() {
const items = ref(this.items.filter(item => item !== undefined));
watch: {
items: {
handler() {
const items = ref(unref(this.items).filter(item => item !== undefined));
for (let i = 0; i < items.value.length; i++) {
const item = items.value[i];
if (item && item.then) { // if item is Promise
items.value[i] = { type: 'pending' };
item.then(actualItem => {
items.value[i] = actualItem;
});
}
for (let i = 0; i < items.value.length; i++) {
const item = items.value[i];
if (item && item.then) { // if item is Promise
items.value[i] = { type: 'pending' };
item.then(actualItem => {
items.value[i] = actualItem;
});
}
}
this._items = items;
},
immediate: true
}
this._items = items;
},
mounted() {
if (this.viaKeyboard) {

24
src/client/menu.ts
View File

@@ -1,9 +1,10 @@
import { computed } from 'vue';
import { computed, ref } from 'vue';
import { search } from '@client/scripts/search';
import * as os from '@client/os';
import { i18n } from '@client/i18n';
import { $i } from './account';
import { unisonReload } from '@client/scripts/unison-reload';
import { router } from './router';
export const menuDef = {
notifications: {
@@ -58,7 +59,26 @@ export const menuDef = {
title: 'lists',
icon: 'fas fa-list-ul',
show: computed(() => $i != null),
to: '/my/lists',
active: computed(() => router.currentRoute.value.path.startsWith('/timeline/list/') || router.currentRoute.value.path === '/my/lists' || router.currentRoute.value.path.startsWith('/my/lists/')),
action: (ev) => {
const items = ref([{
type: 'pending'
}]);
os.api('users/lists/list').then(lists => {
const _items = [...lists.map(list => ({
type: 'link',
text: list.name,
to: `/timeline/list/${list.id}`
})), null, {
type: 'link',
to: '/my/lists',
text: i18n.locale.manageLists,
icon: 'fas fa-cog',
}];
items.value = _items;
});
os.popupMenu(items, ev.currentTarget || ev.target);
},
},
groups: {
title: 'groups',

2
src/client/os.ts
View File

@@ -372,7 +372,7 @@ export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea:
});
}
export function popupMenu(items: any[], src?: HTMLElement, options?: { align?: string; viaKeyboard?: boolean }) {
export function popupMenu(items: any[] | Ref<any[]>, src?: HTMLElement, options?: { align?: string; viaKeyboard?: boolean }) {
return new Promise((resolve, reject) => {
let dispose;
popup(import('@client/components/ui/popup-menu.vue'), {

147
src/client/pages/antenna-timeline.vue Normal file
View File

@@ -0,0 +1,147 @@
<template>
<div class="tqmomfks" v-hotkey.global="keymap" v-size="{ min: [800] }">
<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<div class="tl _block">
<XTimeline ref="tl" class="tl"
:key="antennaId"
src="antenna"
:antenna="antennaId"
:sound="true"
@before="before()"
@after="after()"
@queue="queueUpdated"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, computed } from 'vue';
import Progress from '@client/scripts/loading';
import XTimeline from '@client/components/timeline.vue';
import { scroll } from '@client/scripts/scroll';
import * as os from '@client/os';
import * as symbols from '@client/symbols';
export default defineComponent({
components: {
XTimeline,
},
props: {
antennaId: {
type: String,
required: true
}
},
data() {
return {
antenna: null,
queue: 0,
[symbols.PAGE_INFO]: computed(() => this.antenna ? {
title: this.antenna.name,
icon: 'fas fa-satellite',
bg: 'var(--bg)',
actions: [{
icon: 'fas fa-calendar-alt',
text: this.$ts.jumpToSpecifiedDate,
handler: this.timetravel
}, {
icon: 'fas fa-cog',
text: this.$ts.settings,
handler: this.settings
}],
} : null),
};
},
computed: {
keymap(): any {
return {
't': this.focus
};
},
},
watch: {
antennaId: {
async handler() {
this.antenna = await os.api('antennas/show', {
antennaId: this.antennaId
});
},
immediate: true
}
},
methods: {
before() {
Progress.start();
},
after() {
Progress.done();
},
queueUpdated(q) {
this.queue = q;
},
top() {
scroll(this.$el, 0);
},
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));
},
settings() {
this.$router.push(`/my/antennas/${this.antennaId}`);
},
focus() {
(this.$refs.tl as any).focus();
}
}
});
</script>
<style lang="scss" scoped>
.tqmomfks {
padding: var(--margin);
> .new {
position: sticky;
top: calc(var(--stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
> button {
display: block;
margin: var(--margin) auto 0 auto;
padding: 8px 16px;
border-radius: 32px;
}
}
> .tl {
background: var(--bg);
border-radius: var(--radius);
overflow: clip;
}
&.min-width_800px {
max-width: 800px;
margin: 0 auto;
}
}
</style>

6
src/client/pages/emojis.category.vue
View File

@@ -108,12 +108,12 @@ export default defineComponent({
margin: 8px 8px 0 0;
padding: 4px 8px;
font-size: 0.9em;
background: var(--panel);
border: solid 0.5px var(--divider);
background: var(--accentedBg);
border-radius: 5px;
&.active {
border-color: var(--accent);
background: var(--accent);
color: var(--fgOnAccent);
}
}
}

10
src/client/pages/emojis.vue
View File

@@ -1,5 +1,7 @@
<template>
<XCategory v-if="tab === 'category'"/>
<div :class="$style.root">
<XCategory v-if="tab === 'category'"/>
</div>
</template>
<script lang="ts">
@@ -26,5 +28,9 @@ export default defineComponent({
});
</script>
<style lang="scss" scoped>
<style lang="scss" module>
.root {
max-width: 1000px;
margin: 0 auto;
}
</style>

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

@@ -6,11 +6,8 @@
<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<div class="tl _block">
<XTimeline ref="tl" class="tl"
:key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src"
:key="src"
:src="src"
:list="list ? list.id : null"
:antenna="antenna ? antenna.id : null"
:channel="channel ? channel.id : null"
:sound="true"
@before="before()"
@after="after()"
@@ -41,10 +38,6 @@ export default defineComponent({
data() {
return {
src: 'home',
list: null,
antenna: null,
channel: null,
menuOpened: false,
queue: 0,
[symbols.PAGE_INFO]: computed(() => ({
title: this.$ts.timeline,
@@ -116,32 +109,10 @@ export default defineComponent({
src() {
this.showNav = false;
},
list(x) {
this.showNav = false;
if (x != null) this.antenna = null;
if (x != null) this.channel = null;
},
antenna(x) {
this.showNav = false;
if (x != null) this.list = null;
if (x != null) this.channel = null;
},
channel(x) {
this.showNav = false;
if (x != null) this.antenna = null;
if (x != null) this.list = null;
},
},
created() {
this.src = this.$store.state.tl.src;
if (this.src === 'list') {
this.list = this.$store.state.tl.arg;
} else if (this.src === 'antenna') {
this.antenna = this.$store.state.tl.arg;
} else if (this.src === 'channel') {
this.channel = this.$store.state.tl.arg;
}
},
methods: {
@@ -164,12 +135,9 @@ export default defineComponent({
async chooseList(ev) {
const lists = await os.api('users/lists/list');
const items = lists.map(list => ({
type: 'link',
text: list.name,
action: () => {
this.list = list;
this.src = 'list';
this.saveSrc();
}
to: `/timeline/list/${list.id}`
}));
os.popupMenu(items, ev.currentTarget || ev.target);
},
@@ -177,13 +145,10 @@ export default defineComponent({
async chooseAntenna(ev) {
const antennas = await os.api('antennas/list');
const items = antennas.map(antenna => ({
type: 'link',
text: antenna.name,
indicate: antenna.hasUnreadNote,
action: () => {
this.antenna = antenna;
this.src = 'antenna';
this.saveSrc();
}
to: `/timeline/antenna/${antenna.id}`
}));
os.popupMenu(items, ev.currentTarget || ev.target);
},
@@ -191,15 +156,10 @@ export default defineComponent({
async chooseChannel(ev) {
const channels = await os.api('channels/followed');
const items = channels.map(channel => ({
type: 'link',
text: channel.name,
indicate: channel.hasUnreadNote,
action: () => {
// NOTE: チャンネルタイムラインをこのコンポーネントで表示するようにすると投稿フォームはどうするかなどの問題が生じるのでとりあえずページ遷移で
//this.channel = channel;
//this.src = 'channel';
//this.saveSrc();
this.$router.push(`/channels/${channel.id}`);
}
to: `/channels/${channel.id}`
}));
os.popupMenu(items, ev.currentTarget || ev.target);
},
@@ -207,10 +167,6 @@ export default defineComponent({
saveSrc() {
this.$store.set('tl', {
src: this.src,
arg:
this.src === 'list' ? this.list :
this.src === 'antenna' ? this.antenna :
this.channel
});
},

147
src/client/pages/user-list-timeline.vue Normal file
View File

@@ -0,0 +1,147 @@
<template>
<div class="eqqrhokj" v-hotkey.global="keymap" v-size="{ min: [800] }">
<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
<div class="tl _block">
<XTimeline ref="tl" class="tl"
:key="listId"
src="list"
:list="listId"
:sound="true"
@before="before()"
@after="after()"
@queue="queueUpdated"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent, computed } from 'vue';
import Progress from '@client/scripts/loading';
import XTimeline from '@client/components/timeline.vue';
import { scroll } from '@client/scripts/scroll';
import * as os from '@client/os';
import * as symbols from '@client/symbols';
export default defineComponent({
components: {
XTimeline,
},
props: {
listId: {
type: String,
required: true
}
},
data() {
return {
list: null,
queue: 0,
[symbols.PAGE_INFO]: computed(() => this.list ? {
title: this.list.name,
icon: 'fas fa-list-ul',
bg: 'var(--bg)',
actions: [{
icon: 'fas fa-calendar-alt',
text: this.$ts.jumpToSpecifiedDate,
handler: this.timetravel
}, {
icon: 'fas fa-cog',
text: this.$ts.settings,
handler: this.settings
}],
} : null),
};
},
computed: {
keymap(): any {
return {
't': this.focus
};
},
},
watch: {
listId: {
async handler() {
this.list = await os.api('users/lists/show', {
listId: this.listId
});
},
immediate: true
}
},
methods: {
before() {
Progress.start();
},
after() {
Progress.done();
},
queueUpdated(q) {
this.queue = q;
},
top() {
scroll(this.$el, 0);
},
settings() {
this.$router.push(`/my/lists/${this.listId}`);
},
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();
}
}
});
</script>
<style lang="scss" scoped>
.eqqrhokj {
padding: var(--margin);
> .new {
position: sticky;
top: calc(var(--stickyTop, 0px) + 16px);
z-index: 1000;
width: 100%;
> button {
display: block;
margin: var(--margin) auto 0 auto;
padding: 8px 16px;
border-radius: 32px;
}
}
> .tl {
background: var(--bg);
border-radius: var(--radius);
overflow: clip;
}
&.min-width_800px {
max-width: 800px;
margin: 0 auto;
}
}
</style>

2
src/client/router.ts
View File

@@ -48,6 +48,8 @@ const defaultRoutes = [
{ path: '/channels/:channelId/edit', component: page('channel-editor'), props: true },
{ path: '/channels/:channelId', component: page('channel'), props: route => ({ channelId: route.params.channelId }) },
{ path: '/clips/:clipId', component: page('clip'), props: route => ({ clipId: route.params.clipId }) },
{ path: '/timeline/list/:listId', component: page('user-list-timeline'), props: route => ({ listId: route.params.listId }) },
{ path: '/timeline/antenna/:antennaId', component: page('antenna-timeline'), props: route => ({ antennaId: route.params.antennaId }) },
{ path: '/my/notifications', component: page('notifications') },
{ path: '/my/favorites', component: page('favorites') },
{ path: '/my/messages', component: page('messages') },

1
src/client/themes/_dark.json5
View File

@@ -12,6 +12,7 @@
accent: '#86b300',
accentDarken: ':darken<10<@accent',
accentLighten: ':lighten<10<@accent',
accentedBg: ':alpha<0.15<@accent',
focus: ':alpha<0.3<@accent',
bg: '#000',
acrylicBg: ':alpha<0.5<@bg',

1
src/client/themes/_light.json5
View File

@@ -12,6 +12,7 @@
accent: '#86b300',
accentDarken: ':darken<10<@accent',
accentLighten: ':lighten<10<@accent',
accentedBg: ':alpha<0.15<@accent',
focus: ':alpha<0.3<@accent',
bg: '#fff',
acrylicBg: ':alpha<0.5<@bg',

95
src/client/ui/_common_/sidebar.vue
View File

@@ -11,28 +11,28 @@
<transition name="nav">
<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
<div>
<button class="item _button account" @click="openAccountMenu">
<button class="item _button account" @click="openAccountMenu" v-click-anime>
<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
</button>
<MkA class="item index" active-class="active" to="/" exact>
<MkA class="item index" active-class="active" to="/" exact v-click-anime>
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to">
<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'MkA' : 'button'" class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to" v-click-anime>
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
</component>
</template>
<div class="divider"></div>
<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/instance">
<MkA v-if="$i.isAdmin || $i.isModerator" class="item" active-class="active" to="/instance" v-click-anime>
<i class="fas fa-server fa-fw"></i><span class="text">{{ $ts.instance }}</span>
</MkA>
<button class="item _button" @click="more">
<button class="item _button" @click="more" v-click-anime>
<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
</button>
<MkA class="item" active-class="active" to="/settings">
<MkA class="item" active-class="active" to="/settings" v-click-anime>
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
</MkA>
<button class="item _button post" @click="post">
@@ -263,22 +263,37 @@ export default defineComponent({
> .item {
padding-left: 0;
padding: 10px 0;
width: 100%;
text-align: center;
font-size: $ui-font-size * 1.1;
line-height: 3.7rem;
line-height: initial;
> i,
> .avatar {
margin-right: 0;
display: block;
margin: 0 auto;
}
> i {
left: 10px;
opacity: 0.7;
}
> .text {
display: none;
display: inline-block;
font-size: 0.5em;
line-height: initial;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
opacity: 0.7;
}
&:hover, &.active {
> i, > .text {
opacity: 1;
}
}
&:first-child {
@@ -314,10 +329,11 @@ export default defineComponent({
height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box;
overflow: auto;
overflow-x: clip;
background: var(--navBg);
> .divider {
margin: 16px 0;
margin: 16px 16px;
border-top: solid 0.5px var(--divider);
}
@@ -326,7 +342,7 @@ export default defineComponent({
display: block;
padding-left: 24px;
font-size: $ui-font-size;
line-height: 3rem;
line-height: 2.85rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@@ -336,6 +352,7 @@ export default defineComponent({
color: var(--navFg);
> i {
position: relative;
width: 32px;
}
@@ -359,6 +376,11 @@ export default defineComponent({
animation: blink 1s infinite;
}
> .text {
position: relative;
font-size: 0.9em;
}
&:hover {
text-decoration: none;
color: var(--navHoverFg);
@@ -368,6 +390,23 @@ export default defineComponent({
color: var(--navActive);
}
&:hover, &.active {
&:before {
content: "";
display: block;
width: calc(100% - 24px);
height: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 8px;
background: var(--accentedBg);
}
}
&:first-child, &:last-child {
position: sticky;
z-index: 1;
@@ -380,14 +419,38 @@ export default defineComponent({
&:first-child {
top: 0;
margin-bottom: 16px;
border-bottom: solid 0.5px var(--divider);
&:hover, &.active {
&:before {
content: none;
}
}
}
&:last-child {
bottom: 0;
margin-top: 16px;
border-top: solid 0.5px var(--divider);
color: var(--fgOnAccent);
&:before {
content: "";
display: block;
width: calc(100% - 20px);
height: calc(100% - 20px);
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 999px;
background: var(--accent);
}
&:hover, &.active {
&:before {
background: var(--accentLighten);
}
}
}
}
}

4
src/client/ui/universal.vue
View File

@@ -312,8 +312,8 @@ export default defineComponent({
> .widgets {
padding: 0 var(--margin);
//border-left: solid 0.5px var(--divider);
background: var(--navBg);
border-left: solid 0.5px var(--divider);
background: var(--bg);
@media (max-width: $widgets-hide-threshold) {
display: none;

4
src/queue/index.ts
View File

@@ -64,7 +64,9 @@ export function deliver(user: ThinUser, content: unknown, to: string | null) {
if (to == null) return null;
const data = {
user,
user: {
id: user.id
},
content,
to
};