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

Migrate to Vue3 (#6587)

Browse Source 
* Update reaction.vue

* fix  bug

* wip

* wip

* wjio

* wip

* Revert "wip"

This reverts commit e427f2160a.

* wip

* wip

* wip

* Update init.ts

* Update drive-window.vue

* wip

* wip

* Use PascalCase for components

* Use PascalCase for components

* update dep

* wip

* wip

* wip

* Update init.ts

* wip

* Update paging.ts

* Update test.vue

* watch deep

* wip

* lint

* wip

* wip

* wip

* wip

* wiop

* wip

* Update webpack.config.ts

* alllow null poll

* wip

* wip

* wip

* wiop

* UI redesign & refactor (#6714)

* wip

* wip

* wip

* wip

* wip

* Update drive.vue

* Update word-mute.vue

* wip

* wip

* wip

* clean up

* wip

* Update default.vue

* wip

* Update notes.vue

* Update mfm.ts

* Update index.home.vue

* Update post-form.vue

* Update post-form-attaches.vue

* wip

* Update post-form.vue

* Update sidebar.vue

* wip

* wip

* Update index.vue

* wip

* Update default.vue

* Update index.vue

* Update index.vue

* wip

* Update post-form-attaches.vue

* Update note.vue

* wip

* clean up

* Update notes.vue

* wip

* wip

* Update ja-JP.yml

* wip

* wip

* Update index.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update default.vue

* wip

* Update _dark.json5

* wip

* wip

* wip

* clean up

* wip

* wip

* Update index.vue

* Update test.vue

* wip

* wip

* fix

* wip

* wip

* wip

* wip

* clena yop

* wip

* wip

* Update store.ts

* Update messaging-room.vue

* Update default.widgets.vue

* fix

* wip

* wip

* Update modal.vue

* wip

* Update os.ts

* Update os.ts

* Update deck.vue

* Update init.ts

* wip

* Update ja-JP.yml

* v-sizeは単にwindowのresizeを監視するだけで良いかもしれない

* Update modal.vue

* wip

* Update tooltip.ts

* wip

* wip

* wip

* wip

* wip

* Update image-viewer.vue

* wip

* wip

* Update style.scss

* Update style.scss

* Update visitor.vue

* wip

* Update init.ts

* Update init.ts

* wip

* wip

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* wip

* wip

* Update modal.vue

* Update header.vue

* Update menu.vue

* Update about.vue

* Update about-misskey.vue

* wip

* wip

* Update visitor.vue

* Update tooltip.ts

* wip

* Update drive.vue

* wip

* Update style.scss

* Update header.vue

* wip

* wip

* Update users.user.vue

* Update announcements.vue

* wip

* wip

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update style.scss

* Update users.vue

* wip

* Update style.scss

* wip

* Update welcome.entrance.vue

* Update radio.vue

* Update size.ts

* Update emoji-edit-dialog.vue

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* wip

* wip

* wip

* wip

* Update file-dialog.vue

* wip

* wip

* Update token-generate-window.vue

* Update notification-setting-window.vue

* wip

* wip

* Update _error_.vue

* Update ja-JP.yml

* wip

* wip

* Update store.ts

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* Update announcements.vue

* Update store.ts

* wip

* Update page-editor.vue

* wip

* wip

* Update modal.vue

* wip

* Update select-file.ts

* Update timeline.vue

* Update emojis.vue

* Update os.ts

* wip

* Update user-select.vue

* Update mfm.ts

* Update get-file-info.ts

* Update drive.vue

* Update init.ts

* Update mfm.ts

* wip

* wip

* Update window.vue

* Update note.vue

* wip

* wip

* Update user-info.vue

* wip

* wip

* wip

* wip

* wip

* Update header.vue

* Update header.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update webpack.config.ts

* wip

* wip

* wip

* wip

* wip

* wip

* Update autocomplete.ts

* wip

* wip

* wip

* Update toast.vue

* wip

* Update post-form-dialog.vue

* wip

* wip

* wip

* wip

* wip

* Update users.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update package.json

* wip

* Update icon-dialog.vue

* wip

* wip

* Update user-preview.ts

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* Update user-name.vue

* Update federation.vue

* Update instance.vue

* wip

* wip

* Update tag.vue

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* wip

* Update os.ts

* Update os.ts

* wip

* wip

* wip

* Update router.ts

* wip

* Update init.ts

* Update note.vue

* Update messages.vue

* wip

* wip

* wip

* wip

* wip

* google

* wip

* wip

* wip

* wip

* Update theme-editor.vue

* wip

* wip

* Update room.vue

* Update channel-editor.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update menu.vue

* wip

* wip

* wip

* wip

* Update messaging-room.vue

* wip

* Update post-form.vue

* Update default.widgets.vue

* Update window.vue

* wip
This commit is contained in:
syuilo
2020-10-17 20:12:00 +09:00
committed by GitHub
parent a40f38b2b5
commit 7199e6f4e0
357 changed files with 15053 additions and 12496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/client/widgets/activity.calendar.vue
View File

@@ -24,9 +24,10 @@
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import * as os from '@/os';
export default Vue.extend({
export default defineComponent({
props: ['data'],
created() {
for (const d of this.data) {

5
src/client/widgets/activity.chart.vue
View File

@@ -25,7 +25,8 @@
</template>
<script lang="ts">
import Vue from 'vue';
import { defineComponent } from 'vue';
import * as os from '@/os';
function dragListen(fn) {
window.addEventListener('mousemove', fn);
@@ -39,7 +40,7 @@ function dragClear(fn) {
window.removeEventListener('mouseup', dragClear);
}
export default Vue.extend({
export default defineComponent({
props: ['data'],
data() {
return {

27
src/client/widgets/activity.vue
View File

@@ -1,26 +1,28 @@
<template>
<mk-container :show-header="props.showHeader" :naked="props.transparent">
<template #header><fa :icon="faChartBar"/>{{ $t('_widgets.activity') }}</template>
<template #func><button @click="toggleView()" class="_button"><fa :icon="faSort"/></button></template>
<MkContainer :show-header="props.showHeader" :naked="props.transparent">
<template #header><Fa :icon="faChartBar"/>{{ $t('_widgets.activity') }}</template>
<template #func><button @click="toggleView()" class="_button"><Fa :icon="faSort"/></button></template>
<div>
<mk-loading v-if="fetching"/>
<MkLoading v-if="fetching"/>
<template v-else>
<x-calendar v-show="props.view === 0" :data="[].concat(activity)"/>
<x-chart v-show="props.view === 1" :data="[].concat(activity)"/>
<XCalendar v-show="props.view === 0" :data="[].concat(activity)"/>
<XChart v-show="props.view === 1" :data="[].concat(activity)"/>
</template>
</div>
</mk-container>
</MkContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { faChartBar, faSort } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '../components/ui/container.vue';
import MkContainer from '@/components/ui/container.vue';
import define from './define';
import XCalendar from './activity.calendar.vue';
import XChart from './activity.chart.vue';
import * as os from '@/os';
export default define({
const widget = define({
name: 'activity',
props: () => ({
showHeader: {
@@ -37,7 +39,10 @@ export default define({
hidden: true,
},
})
}).extend({
});
export default defineComponent({
extends: widget,
components: {
MkContainer,
XCalendar,
@@ -51,7 +56,7 @@ export default define({
};
},
mounted() {
this.$root.api('charts/user/notes', {
os.api('charts/user/notes', {
userId: this.$store.state.i.id,
span: 'day',
limit: 7 * 21

15
src/client/widgets/calendar.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="mkw-calendar" :class="{ _panel: !props.transparent }">
<div class="calendar" :data-is-holiday="isHoliday">
<div class="calendar" :class="{ isHoliday }">
<p class="month-and-year">
<span class="year">{{ $t('yearX', { year }) }}</span>
<span class="month">{{ $t('monthX', { month }) }}</span>
@@ -32,9 +32,11 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import define from './define';
import * as os from '@/os';
export default define({
const widget = define({
name: 'calendar',
props: () => ({
transparent: {
@@ -42,7 +44,10 @@ export default define({
default: false,
},
})
}).extend({
});
export default defineComponent({
extends: widget,
data() {
return {
now: new Date(),
@@ -61,7 +66,7 @@ export default define({
this.tick();
this.clock = setInterval(this.tick, 1000);
},
beforeDestroy() {
beforeUnmount() {
clearInterval(this.clock);
},
methods: {
@@ -116,7 +121,7 @@ export default define({
width: 60%;
text-align: center;
&[data-is-holiday] {
&.isHoliday {
> .day {
color: #ef95a0;
}

19
src/client/widgets/clock.vue
View File

@@ -1,17 +1,19 @@
<template>
<mk-container :naked="props.transparent" :show-header="false">
<MkContainer :naked="props.transparent" :show-header="false">
<div class="vubelbmv">
<mk-analog-clock class="clock"/>
<MkAnalogClock class="clock"/>
</div>
</mk-container>
</MkContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import define from './define';
import MkContainer from '../components/ui/container.vue';
import MkAnalogClock from '../components/analog-clock.vue';
import MkContainer from '@/components/ui/container.vue';
import MkAnalogClock from '@/components/analog-clock.vue';
import * as os from '@/os';
export default define({
const widget = define({
name: 'clock',
props: () => ({
transparent: {
@@ -19,7 +21,10 @@ export default define({
default: false,
},
})
}).extend({
});
export default defineComponent({
extends: widget,
components: {
MkContainer,
MkAnalogClock

37
src/client/widgets/define.ts
View File

@@ -1,30 +1,32 @@
import Vue from 'vue';
import { Form } from '../scripts/form';
import { defineComponent } from 'vue';
import { Form } from '@/scripts/form';
import * as os from '@/os';
export default function <T extends Form>(data: {
name: string;
props?: () => T;
}) {
return Vue.extend({
return defineComponent({
props: {
widget: {
type: Object,
required: false
},
isCustomizeMode: {
type: Boolean,
default: false
settingCallback: {
required: false
}
},
data() {
return {
props: this.widget ? JSON.parse(JSON.stringify(this.widget.data)) : {}
};
},
computed: {
id(): string {
return this.widget ? this.widget.id : null;
},
props(): Record<string, any> {
return this.widget ? this.widget.data : {};
}
},
created() {
@@ -32,7 +34,9 @@ export default function <T extends Form>(data: {
this.$watch('props', () => {
this.mergeProps();
});
}, { deep: true });
if (this.settingCallback) this.settingCallback(this.setting);
},
methods: {
@@ -41,7 +45,7 @@ export default function <T extends Form>(data: {
const defaultProps = data.props();
for (const prop of Object.keys(defaultProps)) {
if (this.props.hasOwnProperty(prop)) continue;
Vue.set(this.props, prop, defaultProps[prop].default);
this.props[prop] = defaultProps[prop].default;
}
}
},
@@ -51,11 +55,11 @@ export default function <T extends Form>(data: {
for (const item of Object.keys(form)) {
form[item].default = this.props[item];
}
const { canceled, result } = await this.$root.form(data.name, form);
const { canceled, result } = await os.form(data.name, form);
if (canceled) return;
for (const key of Object.keys(result)) {
Vue.set(this.props, key, result[key]);
this.props[key] = result[key];
}
this.save();
@@ -63,7 +67,10 @@ export default function <T extends Form>(data: {
save() {
if (this.widget) {
this.$store.commit('deviceUser/updateWidget', this.widget);
this.$store.commit('deviceUser/updateWidget', {
...this.widget,
data: this.props
});
}
}
}

13
src/client/widgets/digital-clock.vue
View File

@@ -13,9 +13,11 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import define from './define';
import * as os from '@/os';
export default define({
const widget = define({
name: 'digitalClock',
props: () => ({
transparent: {
@@ -32,7 +34,10 @@ export default define({
default: true,
},
})
}).extend({
});
export default defineComponent({
extends: widget,
data() {
return {
clock: null,
@@ -45,12 +50,12 @@ export default define({
},
created() {
this.tick();
this.$watch('props.showMs', () => {
this.$watch(() => this.props.showMs, () => {
if (this.clock) clearInterval(this.clock);
this.clock = setInterval(this.tick, this.props.showMs ? 10 : 1000);
}, { immediate: true });
},
beforeDestroy() {
beforeUnmount() {
clearInterval(this.clock);
},
methods: {

29
src/client/widgets/federation.vue
View File

@@ -1,9 +1,9 @@
<template>
<mk-container :show-header="props.showHeader" :body-togglable="bodyTogglable" :scrollable="scrollable">
<template #header><fa :icon="faGlobe"/>{{ $t('_widgets.federation') }}</template>
<MkContainer :show-header="props.showHeader" :body-togglable="bodyTogglable" :scrollable="scrollable">
<template #header><Fa :icon="faGlobe"/>{{ $t('_widgets.federation') }}</template>
<div class="wbrkwalb">
<mk-loading v-if="fetching"/>
<MkLoading v-if="fetching"/>
<transition-group tag="div" name="chart" class="instances" v-else>
<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
<img v-if="instance.iconUrl" :src="instance.iconUrl" alt=""/>
@@ -11,20 +11,22 @@
<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.host }}</a>
<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
</div>
<mk-mini-chart class="chart" :src="charts[i].requests.received"/>
<MkMiniChart class="chart" :src="charts[i].requests.received"/>
</div>
</transition-group>
</div>
</mk-container>
</MkContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { faGlobe } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '../components/ui/container.vue';
import MkContainer from '@/components/ui/container.vue';
import define from './define';
import MkMiniChart from '../components/mini-chart.vue';
import MkMiniChart from '@/components/mini-chart.vue';
import * as os from '@/os';
export default define({
const widget = define({
name: 'federation',
props: () => ({
showHeader: {
@@ -32,7 +34,10 @@ export default define({
default: true,
},
})
}).extend({
});
export default defineComponent({
extends: widget,
components: {
MkContainer, MkMiniChart
},
@@ -60,16 +65,16 @@ export default define({
this.fetch();
this.clock = setInterval(this.fetch, 1000 * 60);
},
beforeDestroy() {
beforeUnmount() {
clearInterval(this.clock);
},
methods: {
async fetch() {
const instances = await this.$root.api('federation/instances', {
const instances = await os.api('federation/instances', {
sort: '+lastCommunicatedAt',
limit: 5
});
const charts = await Promise.all(instances.map(i => this.$root.api('charts/instance', { host: i.host, limit: 16, span: 'hour' })));
const charts = await Promise.all(instances.map(i => os.api('charts/instance', { host: i.host, limit: 16, span: 'hour' })));
this.instances = instances;
this.charts = charts;
this.fetching = false;

29
src/client/widgets/index.ts
View File

@@ -1,17 +1,19 @@
import Vue from 'vue';
import { App, defineAsyncComponent } from 'vue';
Vue.component('mkw-welcome', () => import('./welcome.vue').then(m => m.default));
Vue.component('mkw-memo', () => import('./memo.vue').then(m => m.default));
Vue.component('mkw-notifications', () => import('./notifications.vue').then(m => m.default));
Vue.component('mkw-timeline', () => import('./timeline.vue').then(m => m.default));
Vue.component('mkw-calendar', () => import('./calendar.vue').then(m => m.default));
Vue.component('mkw-rss', () => import('./rss.vue').then(m => m.default));
Vue.component('mkw-trends', () => import('./trends.vue').then(m => m.default));
Vue.component('mkw-clock', () => import('./clock.vue').then(m => m.default));
Vue.component('mkw-activity', () => import('./activity.vue').then(m => m.default));
Vue.component('mkw-photos', () => import('./photos.vue').then(m => m.default));
Vue.component('mkw-digitalClock', () => import('./digital-clock.vue').then(m => m.default));
Vue.component('mkw-federation', () => import('./federation.vue').then(m => m.default));
export default function(app: App) {
app.component('MkwMemo', defineAsyncComponent(() => import('./memo.vue')));
app.component('MkwNotifications', defineAsyncComponent(() => import('./notifications.vue')));
app.component('MkwTimeline', defineAsyncComponent(() => import('./timeline.vue')));
app.component('MkwCalendar', defineAsyncComponent(() => import('./calendar.vue')));
app.component('MkwRss', defineAsyncComponent(() => import('./rss.vue')));
app.component('MkwTrends', defineAsyncComponent(() => import('./trends.vue')));
app.component('MkwClock', defineAsyncComponent(() => import('./clock.vue')));
app.component('MkwActivity', defineAsyncComponent(() => import('./activity.vue')));
app.component('MkwPhotos', defineAsyncComponent(() => import('./photos.vue')));
app.component('MkwDigitalClock', defineAsyncComponent(() => import('./digital-clock.vue')));
app.component('MkwFederation', defineAsyncComponent(() => import('./federation.vue')));
app.component('MkwPostForm', defineAsyncComponent(() => import('./post-form.vue')));
}
export const widgets = [
'memo',
@@ -25,4 +27,5 @@ export const widgets = [
'photos',
'digitalClock',
'federation',
'postForm',
];

19
src/client/widgets/memo.vue
View File

@@ -1,20 +1,22 @@
<template>
<mk-container :show-header="props.showHeader">
<template #header><fa :icon="faStickyNote"/>{{ $t('_widgets.memo') }}</template>
<MkContainer :show-header="props.showHeader">
<template #header><Fa :icon="faStickyNote"/>{{ $t('_widgets.memo') }}</template>
<div class="otgbylcu">
<textarea v-model="text" :placeholder="$t('placeholder')" @input="onChange"></textarea>
<button @click="saveMemo" :disabled="!changed" class="_buttonPrimary">{{ $t('save') }}</button>
</div>
</mk-container>
</MkContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { faStickyNote } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '../components/ui/container.vue';
import MkContainer from '@/components/ui/container.vue';
import define from './define';
import * as os from '@/os';
export default define({
const widget = define({
name: 'memo',
props: () => ({
showHeader: {
@@ -22,7 +24,10 @@ export default define({
default: true,
},
})
}).extend({
});
export default defineComponent({
extends: widget,
components: {
MkContainer
},
@@ -39,7 +44,7 @@ export default define({
created() {
this.text = this.$store.state.settings.memo;
this.$watch('$store.state.settings.memo', text => {
this.$watch(() => this.$store.state.settings.memo, text => {
this.text = text;
});
},

37
src/client/widgets/notifications.vue
View File

@@ -1,21 +1,23 @@
<template>
<mk-container :style="`height: ${props.height}px;`" :show-header="props.showHeader" :scrollable="true">
<template #header><fa :icon="faBell"/>{{ $t('notifications') }}</template>
<template #func><button @click="configure()" class="_button"><fa :icon="faCog"/></button></template>
<MkContainer :style="`height: ${props.height}px;`" :show-header="props.showHeader" :scrollable="true">
<template #header><Fa :icon="faBell"/>{{ $t('notifications') }}</template>
<template #func><button @click="configure()" class="_button"><Fa :icon="faCog"/></button></template>
<div>
<x-notifications :include-types="props.includingTypes"/>
<XNotifications :include-types="props.includingTypes"/>
</div>
</mk-container>
</MkContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { faBell, faCog } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '../components/ui/container.vue';
import XNotifications from '../components/notifications.vue';
import MkContainer from '@/components/ui/container.vue';
import XNotifications from '@/components/notifications.vue';
import define from './define';
import * as os from '@/os';
export default define({
const widget = define({
name: 'notifications',
props: () => ({
showHeader: {
@@ -32,7 +34,11 @@ export default define({
default: null,
},
})
}).extend({
});
export default defineComponent({
extends: widget,
components: {
MkContainer,
XNotifications,
@@ -46,12 +52,15 @@ export default define({
methods: {
async configure() {
this.$root.new(await import('../components/notification-setting-window.vue').then(m => m.default), {
os.popup(await import('@/components/notification-setting-window.vue'), {
includingTypes: this.props.includingTypes,
}).$on('ok', async ({ includingTypes }) => {
this.props.includingTypes = includingTypes;
this.save();
});
}, {
done: async (res) => {
const { includingTypes } = res;
this.props.includingTypes = includingTypes;
this.save();
}
}, 'closed');
}
}
});

27
src/client/widgets/photos.vue
View File

@@ -1,9 +1,9 @@
<template>
<mk-container :show-header="props.showHeader" :naked="props.transparent" :class="$style.root" :data-transparent="props.transparent">
<template #header><fa :icon="faCamera"/>{{ $t('_widgets.photos') }}</template>
<MkContainer :show-header="props.showHeader" :naked="props.transparent" :class="$style.root" :data-transparent="props.transparent ? true : null">
<template #header><Fa :icon="faCamera"/>{{ $t('_widgets.photos') }}</template>
<div class="">
<mk-loading v-if="fetching"/>
<MkLoading v-if="fetching"/>
<div v-else :class="$style.stream">
<div v-for="(image, i) in images" :key="i"
:class="$style.img"
@@ -11,16 +11,18 @@
></div>
</div>
</div>
</mk-container>
</MkContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { faCamera } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '../components/ui/container.vue';
import MkContainer from '@/components/ui/container.vue';
import define from './define';
import { getStaticImageUrl } from '../scripts/get-static-image-url';
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
import * as os from '@/os';
export default define({
const widget = define({
name: 'photos',
props: () => ({
showHeader: {
@@ -32,7 +34,10 @@ export default define({
default: false,
},
})
}).extend({
});
export default defineComponent({
extends: widget,
components: {
MkContainer,
},
@@ -45,11 +50,11 @@ export default define({
};
},
mounted() {
this.connection = this.$root.stream.useSharedConnection('main');
this.connection = os.stream.useSharedConnection('main');
this.connection.on('driveFileCreated', this.onDriveFileCreated);
this.$root.api('drive/stream', {
os.api('drive/stream', {
type: 'image/*',
limit: 9
}).then(images => {
@@ -57,7 +62,7 @@ export default define({
this.fetching = false;
});
},
beforeDestroy() {
beforeUnmount() {
this.connection.dispose();
},
methods: {

23
src/client/widgets/post-form.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<XPostForm class="_panel" :fixed="true" :autofocus="false"/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import XPostForm from '@/components/post-form.vue';
import define from './define';
const widget = define({
name: 'postForm',
props: () => ({
})
});
export default defineComponent({
extends: widget,
components: {
XPostForm,
},
});
</script>

25
src/client/widgets/rss.vue
View File

@@ -1,23 +1,25 @@
<template>
<mk-container :show-header="props.showHeader">
<template #header><fa :icon="faRssSquare"/>RSS</template>
<template #func><button class="_button" @click="setting"><fa :icon="faCog"/></button></template>
<MkContainer :show-header="props.showHeader">
<template #header><Fa :icon="faRssSquare"/>RSS</template>
<template #func><button class="_button" @click="setting"><Fa :icon="faCog"/></button></template>
<div class="ekmkgxbj">
<mk-loading v-if="fetching"/>
<MkLoading v-if="fetching"/>
<div class="feed" v-else>
<a v-for="item in items" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
</div>
</div>
</mk-container>
</MkContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { faRssSquare, faCog } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '../components/ui/container.vue';
import MkContainer from '@/components/ui/container.vue';
import define from './define';
import * as os from '@/os';
export default define({
const widget = define({
name: 'rss',
props: () => ({
showHeader: {
@@ -29,7 +31,10 @@ export default define({
default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
},
})
}).extend({
});
export default defineComponent({
extends: widget,
components: {
MkContainer
},
@@ -44,9 +49,9 @@ export default define({
mounted() {
this.fetch();
this.clock = setInterval(this.fetch, 60000);
this.$watch('props.url', this.fetch);
this.$watch(() => this.props.url, this.fetch);
},
beforeDestroy() {
beforeUnmount() {
clearInterval(this.clock);
},
methods: {

75
src/client/widgets/timeline.vue
View File

@@ -1,32 +1,34 @@
<template>
<mk-container :show-header="props.showHeader" :style="`height: ${props.height}px;`" :scrollable="true">
<MkContainer :show-header="props.showHeader" :style="`height: ${props.height}px;`" :scrollable="true">
<template #header>
<button @click="choose" class="_button">
<fa v-if="props.src === 'home'" :icon="faHome"/>
<fa v-if="props.src === 'local'" :icon="faComments"/>
<fa v-if="props.src === 'social'" :icon="faShareAlt"/>
<fa v-if="props.src === 'global'" :icon="faGlobe"/>
<fa v-if="props.src === 'list'" :icon="faListUl"/>
<fa v-if="props.src === 'antenna'" :icon="faSatellite"/>
<Fa v-if="props.src === 'home'" :icon="faHome"/>
<Fa v-if="props.src === 'local'" :icon="faComments"/>
<Fa v-if="props.src === 'social'" :icon="faShareAlt"/>
<Fa v-if="props.src === 'global'" :icon="faGlobe"/>
<Fa v-if="props.src === 'list'" :icon="faListUl"/>
<Fa v-if="props.src === 'antenna'" :icon="faSatellite"/>
<span style="margin-left: 8px;">{{ props.src === 'list' ? props.list.name : props.src === 'antenna' ? props.antenna.name : $t('_timelines.' + props.src) }}</span>
<fa :icon="menuOpened ? faAngleUp : faAngleDown" style="margin-left: 8px;"/>
<Fa :icon="menuOpened ? faAngleUp : faAngleDown" style="margin-left: 8px;"/>
</button>
</template>
<div>
<x-timeline :key="props.src === 'list' ? `list:${props.list.id}` : props.src === 'antenna' ? `antenna:${props.antenna.id}` : props.src" :src="props.src" :list="props.list ? props.list.id : null" :antenna="props.antenna ? props.antenna.id : null"/>
<XTimeline :key="props.src === 'list' ? `list:${props.list.id}` : props.src === 'antenna' ? `antenna:${props.antenna.id}` : props.src" :src="props.src" :list="props.list ? props.list.id : null" :antenna="props.antenna ? props.antenna.id : null"/>
</div>
</mk-container>
</MkContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite } from '@fortawesome/free-solid-svg-icons';
import { faComments } from '@fortawesome/free-regular-svg-icons';
import MkContainer from '../components/ui/container.vue';
import XTimeline from '../components/timeline.vue';
import MkContainer from '@/components/ui/container.vue';
import XTimeline from '@/components/timeline.vue';
import define from './define';
import * as os from '@/os';
export default define({
const widget = define({
name: 'timeline',
props: () => ({
showHeader: {
@@ -48,7 +50,10 @@ export default define({
hidden: true,
},
})
}).extend({
});
export default defineComponent({
extends: widget,
components: {
MkContainer,
XTimeline,
@@ -65,8 +70,8 @@ export default define({
async choose(ev) {
this.menuOpened = true;
const [antennas, lists] = await Promise.all([
this.$root.api('antennas/list'),
this.$root.api('users/lists/list')
os.api('antennas/list'),
os.api('users/lists/list')
]);
const antennaItems = antennas.map(antenna => ({
text: antenna.name,
@@ -84,27 +89,23 @@ export default define({
this.setSrc('list');
}
}));
this.$root.menu({
items: [{
text: this.$t('_timelines.home'),
icon: faHome,
action: () => { this.setSrc('home') }
}, {
text: this.$t('_timelines.local'),
icon: faComments,
action: () => { this.setSrc('local') }
}, {
text: this.$t('_timelines.social'),
icon: faShareAlt,
action: () => { this.setSrc('social') }
}, {
text: this.$t('_timelines.global'),
icon: faGlobe,
action: () => { this.setSrc('global') }
}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems],
noCenter: true,
source: ev.currentTarget || ev.target
}).then(() => {
os.modalMenu([{
text: this.$t('_timelines.home'),
icon: faHome,
action: () => { this.setSrc('home') }
}, {
text: this.$t('_timelines.local'),
icon: faComments,
action: () => { this.setSrc('local') }
}, {
text: this.$t('_timelines.social'),
icon: faShareAlt,
action: () => { this.setSrc('social') }
}, {
text: this.$t('_timelines.global'),
icon: faGlobe,
action: () => { this.setSrc('global') }
}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget || ev.target).then(() => {
this.menuOpened = false;
});
},

27
src/client/widgets/trends.vue
View File

@@ -1,29 +1,31 @@
<template>
<mk-container :show-header="props.showHeader">
<template #header><fa :icon="faHashtag"/>{{ $t('_widgets.trends') }}</template>
<MkContainer :show-header="props.showHeader">
<template #header><Fa :icon="faHashtag"/>{{ $t('_widgets.trends') }}</template>
<div class="wbrkwala">
<mk-loading v-if="fetching"/>
<MkLoading v-if="fetching"/>
<transition-group tag="div" name="chart" class="tags" v-else>
<div v-for="stat in stats" :key="stat.tag">
<div class="tag">
<router-link class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
<p>{{ $t('nUsersMentioned', { n: stat.usersCount }) }}</p>
</div>
<mk-mini-chart class="chart" :src="stat.chart"/>
<MkMiniChart class="chart" :src="stat.chart"/>
</div>
</transition-group>
</div>
</mk-container>
</MkContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { faHashtag } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '../components/ui/container.vue';
import MkContainer from '@/components/ui/container.vue';
import define from './define';
import MkMiniChart from '../components/mini-chart.vue';
import MkMiniChart from '@/components/mini-chart.vue';
import * as os from '@/os';
export default define({
const widget = define({
name: 'hashtags',
props: () => ({
showHeader: {
@@ -31,7 +33,10 @@ export default define({
default: true,
},
})
}).extend({
});
export default defineComponent({
extends: widget,
components: {
MkContainer, MkMiniChart
},
@@ -46,12 +51,12 @@ export default define({
this.fetch();
this.clock = setInterval(this.fetch, 1000 * 60);
},
beforeDestroy() {
beforeUnmount() {
clearInterval(this.clock);
},
methods: {
fetch() {
this.$root.api('hashtags/trend').then(stats => {
os.api('hashtags/trend').then(stats => {
this.stats = stats;
this.fetching = false;
});

87
src/client/widgets/welcome.vue
View File

@@ -1,87 +0,0 @@
<template>
<div class="mkw-welcome _panel" v-if="meta">
<div class="banner" :style="{ backgroundImage: `url(${ meta.bannerUrl })` }"></div>
<div class="body">
<h1 class="name" v-html="meta.name || host"></h1>
<div class="desc" v-html="meta.description || $t('introMisskey')"></div>
<mk-button @click="signup()" style="display: inline-block; margin-right: 16px;" primary>{{ $t('signup') }}</mk-button>
<mk-button @click="signin()" style="display: inline-block;">{{ $t('login') }}</mk-button>
</div>
</div>
</template>
<script lang="ts">
import { toUnicode } from 'punycode';
import XSigninDialog from '../components/signin-dialog.vue';
import XSignupDialog from '../components/signup-dialog.vue';
import MkButton from '../components/ui/button.vue';
import { host } from '../config';
import define from './define';
export default define({
name: 'welcome',
props: () => ({
})
}).extend({
components: {
MkButton
},
data() {
return {
host: toUnicode(host),
};
},
computed: {
meta() {
return this.$store.state.instance.meta;
},
},
created() {
this.$root.api('stats').then(stats => {
this.stats = stats;
});
},
methods: {
signin() {
this.$root.new(XSigninDialog, {
autoSet: true
});
},
signup() {
this.$root.new(XSignupDialog, {
autoSet: true
});
}
}
});
</script>
<style lang="scss" scoped>
.mkw-welcome {
overflow: hidden;
> .banner {
height: 90px;
background-size: cover;
background-position: center center;
}
> .body {
padding: 16px;
> .name {
font-size: 1.2em;
margin: 0 0 0.5em 0;
}
> .desc {
font-size: 0.9em;
}
}
}
</style>