Compare commits

...

79 Commits

Author SHA1 Message Date
5d4b884528 Merge pull request #1550 from syuilo/user-list
User list
2018-04-26 16:10:25 +09:00
bb204b2ef7 wip 2018-04-26 16:10:01 +09:00
013851749f ✌️ 2018-04-26 16:02:04 +09:00
65c8b80fab Fix test 2018-04-26 15:30:39 +09:00
f7c02819be Fix lint 2018-04-26 14:44:23 +09:00
03d09e9d24 wip 2018-04-26 14:38:37 +09:00
6ab0c386cb wip 2018-04-26 14:01:41 +09:00
bc8a0083e2 wip 2018-04-26 11:46:42 +09:00
a2a3dd55ad wip 2018-04-26 11:19:57 +09:00
3972e98f74 wip 2018-04-26 11:02:15 +09:00
0616d29fd5 wip 2018-04-25 23:08:40 +09:00
80cfa0f95d wip 2018-04-25 22:50:59 +09:00
f801b05057 wip 2018-04-25 22:50:05 +09:00
7ea42af0ba wip 2018-04-25 22:37:08 +09:00
76c8e05e3a wip 2018-04-25 20:20:02 +09:00
c2e053a208 wip 2018-04-25 19:53:16 +09:00
3d9ac6387e wip 2018-04-25 18:04:16 +09:00
4c9b4cb80d wip 2018-04-25 13:48:02 +09:00
c7f80182c2 wip 2018-04-25 12:36:54 +09:00
1ba5dfd79c wip 2018-04-25 06:34:50 +09:00
1a13c7e0b1 wip 2018-04-24 23:34:18 +09:00
070cd52c21 wip 2018-04-24 21:24:06 +09:00
e14ea1fe61 wip 2018-04-24 20:58:29 +09:00
7602e8f938 cafy 5.xに移行 2018-04-24 18:13:06 +09:00
fd2c45cc02 Better japanese 2018-04-24 14:12:19 +09:00
03c824f893 wip 2018-04-24 10:08:15 +09:00
9e74a3b8fa Refactor 2018-04-23 18:00:58 +09:00
1131ce8a71 sharedInboxを提供 2018-04-23 15:37:27 +09:00
02bb99ac02 他のMisskeyインスタンスにリアクション情報を伝えるように 2018-04-23 15:27:01 +09:00
0b99483ccb サーバーのバージョンとクライアントのバージョンを分けた 2018-04-22 21:32:09 +09:00
8682fd21c4 Fix bug 2018-04-22 19:33:06 +09:00
a7cbdbc1f2 ✌️ 2018-04-22 17:43:02 +09:00
fd01b4d204 v5089 2018-04-22 17:34:56 +09:00
3a767f29be Fix #1532 2018-04-22 17:34:25 +09:00
ed0885ce5c #1533 2018-04-22 17:32:56 +09:00
08b8d829f9 ダークモード情報をアカウントではなくブラウザに保存するように 2018-04-22 17:28:21 +09:00
d2d3a7d52b CW 2018-04-22 17:04:52 +09:00
4e032a9188 [wip] #1455 2018-04-22 10:53:27 +09:00
20e77196f2 AP: 投票をレンダリング 2018-04-22 10:44:17 +09:00
45dcfc8a00 Fix #1531 2018-04-22 10:14:25 +09:00
7ee0cad010 Fix bug 2018-04-22 07:50:09 +09:00
40849a5aa8 ✌️ 2018-04-22 07:34:33 +09:00
132c30e557 🎨 2018-04-22 07:23:56 +09:00
ee13d2382b Merge branch 'master' of https://github.com/syuilo/misskey 2018-04-22 07:21:54 +09:00
3e1f7861a1 oops 2018-04-22 07:21:51 +09:00
1aeeb1f073 Merge pull request #1530 from mei23/mei-ap3
Fix can't communicate with other Misskey
2018-04-22 06:22:42 +09:00
0bb59bd73b Fix Misskey同士でフォローできない 2018-04-22 00:41:07 +09:00
a57a1d809b v5074 2018-04-21 19:06:59 +09:00
29a121f5b2 Darken 2018-04-21 19:05:55 +09:00
4cfb360d44 Fix #1529 2018-04-21 19:02:12 +09:00
441796f845 Add search syntax 2018-04-21 18:59:16 +09:00
3c80f0eaca Fix #1526 2018-04-21 18:25:25 +09:00
86e1b792c2 Salt 2018-04-21 16:40:16 +09:00
decb257136 Revert "wait"
This reverts commit d670591713.
2018-04-21 16:32:15 +09:00
d670591713 wait 2018-04-21 16:27:47 +09:00
dee2b77bdc oops 2018-04-21 16:21:12 +09:00
6119312a74 Fix bug 2018-04-21 16:18:58 +09:00
b77a8af6e3 v5064 2018-04-21 16:07:05 +09:00
c9e9ecd699 Update README.md 2018-04-21 16:03:58 +09:00
4a0f9d8280 Add timeline animation
Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
2018-04-21 16:01:12 +09:00
797b5d2311 Darken 2018-04-21 15:46:46 +09:00
b14d7b45ae Better timeline rendering
Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
2018-04-21 15:37:02 +09:00
d721a143a8 Darken 2018-04-21 14:19:21 +09:00
fde9c783ae Fix username rendering
Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
2018-04-21 13:54:51 +09:00
c80b288db3 Better renote annotation rendering
Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
2018-04-21 13:48:56 +09:00
93898b7a5f 🎨 2018-04-21 12:09:04 +09:00
a0a2335c16 Darken 2018-04-21 11:57:46 +09:00
716b41107b Darken 2018-04-21 11:44:55 +09:00
a9a7a89b8b #1506 2018-04-21 11:42:38 +09:00
4bf85a0e6b Darken 2018-04-21 10:10:04 +09:00
dd509333a3 v5051 2018-04-20 13:39:08 +09:00
8ccfbbf24c Darken 2018-04-20 13:38:28 +09:00
4953842ff1 ✌️ 2018-04-20 13:31:43 +09:00
8a8d97b8c7 🎨 2018-04-20 13:03:51 +09:00
5916fcca6a Improve usability 2018-04-20 12:55:18 +09:00
2105e4964b ✌️ 2018-04-20 12:38:31 +09:00
8ed30d1ff3 ✌️ 2018-04-20 12:18:50 +09:00
6f546efdb7 Darken 2018-04-20 12:13:33 +09:00
c4f62296a4 Fix bug 2018-04-20 08:05:57 +09:00
187 changed files with 3658 additions and 1697 deletions

View File

@ -14,6 +14,7 @@
"vue/no-unused-vars": false,
"vue/attributes-order": false,
"vue/require-prop-types": false,
"vue/require-default-prop": false,
"no-console": 0,
"no-unused-vars": 0,
"no-empty": 0

1
.gitignore vendored
View File

@ -10,4 +10,3 @@ npm-debug.log
run.bat
api-docs.json
package-lock.json
version.json

View File

@ -44,9 +44,9 @@ If you want to translate Misskey, please see [Translation guide](./docs/translat
:mortar_board: Notable contributors
----------------------------------------------------------------
| ![syuilo][syuilo-icon] | ![Morisawa Aya][ayamorisawa-icon] | ![otofune][otofune-icon] | ![akihikodaki][akihikodaki-icon] | ![rinsuki][rinsuki-icon] |
|:-:|:-:|:-:|:-:|:-:|
| [syuilo][syuilo-link]<br>Owner | [Aya Morisawa][ayamorisawa-link]<br>Collaborator | [otofune][otofune-link]<br>Collaborator | [akihikodaki][akihikodaki-link] | [rinsuki][rinsuki-link] |
| ![syuilo][syuilo-icon] | ![Morisawa Aya][ayamorisawa-icon] | ![otofune][otofune-icon] | ![akihikodaki][akihikodaki-icon] | ![tamaina][tamaina-icon] | ![rinsuki][rinsuki-icon] |
|:-:|:-:|:-:|:-:|:-:|:-:|
| [syuilo][syuilo-link]<br>Owner | [Aya Morisawa][ayamorisawa-link]<br>Collaborator | [otofune][otofune-link]<br>Collaborator | [akihikodaki][akihikodaki-link] | [tamaina][tamaina-link] | [rinsuki][rinsuki-link] |
[List of all contributors](https://github.com/syuilo/misskey/graphs/contributors)
@ -92,6 +92,8 @@ Misskey is an open-source software licensed under [GNU AGPLv3](LICENSE).
[akihikodaki-icon]: https://avatars2.githubusercontent.com/u/17036990?s=70&v=4
[rinsuki-link]: https://github.com/rinsuki
[rinsuki-icon]: https://avatars0.githubusercontent.com/u/6533808?s=70&v=4
[tamaina-link]: https://github.com/tamaina
[tamaina-icon]: https://avatars1.githubusercontent.com/u/7973572?s=70&v=4
[mirro-san-link]: https://github.com/mirro-san
[mirro-san-icon]: https://avatars1.githubusercontent.com/u/17948612?s=70&v=4

View File

@ -140,8 +140,8 @@ inquirer.prompt(form).then(as => {
pass: as['es_pass'] || null
},
recaptcha: {
siteKey: as['recaptcha_site'],
secretKey: as['recaptcha_secret']
site_key: as['recaptcha_site'],
secret_key: as['recaptcha_secret']
}
};

13
docs/manage.ja.md Normal file
View File

@ -0,0 +1,13 @@
# 運営ガイド
## ジョブキューの状態を調べる
Misskeyのディレクトリで:
``` shell
node_modules/kue/bin/kue-dashboard -p 3050
```
ポート3050にアクセスするとUIが表示されます
## ユーザーを凍結する
``` shell
node cli/suspend (ユーザーID)
```

View File

@ -21,7 +21,7 @@ import * as htmlmin from 'gulp-htmlmin';
const uglifyes = require('uglify-es');
import { fa } from './src/build/fa';
import version from './src/version';
const client = require('./built/client/meta.json');
import config from './src/config';
const uglify = uglifyComposer(uglifyes, console);
@ -113,7 +113,7 @@ gulp.task('build:client', [
gulp.task('build:client:script', () =>
gulp.src(['./src/client/app/boot.js', './src/client/app/safe.js'])
.pipe(replace('VERSION', JSON.stringify(version)))
.pipe(replace('VERSION', JSON.stringify(client.version)))
.pipe(replace('API', JSON.stringify(config.api_url)))
.pipe(replace('ENV', JSON.stringify(env)))
.pipe(isProduction ? uglify({

View File

@ -98,7 +98,9 @@ common/views/components/nav.vue:
feedback: "Feedback"
common/views/components/note-menu.vue:
favorite: "Favorite this note"
pin: "Pin to profile page"
remote: "Show on origin"
common/views/components/poll.vue:
vote-to: "Vote for '{}'"
@ -367,6 +369,8 @@ desktop/views/components/settings.profile.vue:
desktop/views/components/ui.header.account.vue:
profile: "Your profile"
drive: "Drive"
favorites: "Favorites"
lists: "Lists"
customize: "Customize"
settings: "Settings"
signout: "Sign out"

View File

@ -98,7 +98,9 @@ common/views/components/nav.vue:
feedback: "フィードバック"
common/views/components/note-menu.vue:
favorite: "Favorite this note"
pin: "Épingler sur votre profile"
remote: "投稿元で見る"
common/views/components/poll.vue:
vote-to: "Voter pour '{}'"
@ -367,6 +369,8 @@ desktop/views/components/settings.profile.vue:
desktop/views/components/ui.header.account.vue:
profile: "Votre profil"
drive: "Drive"
favorites: "Favorites"
lists: "リスト"
customize: "Modifications"
settings: "Réglages"
signout: "Déconnexion"

View File

@ -98,7 +98,9 @@ common/views/components/nav.vue:
feedback: "フィードバック"
common/views/components/note-menu.vue:
favorite: "お気に入り"
pin: "ピン留め"
remote: "投稿元で見る"
common/views/components/poll.vue:
vote-to: "「{}」に投票する"
@ -367,6 +369,8 @@ desktop/views/components/settings.profile.vue:
desktop/views/components/ui.header.account.vue:
profile: "プロフィール"
drive: "ドライブ"
favorites: "お気に入り"
lists: "リスト"
customize: "カスタマイズ"
settings: "設定"
signout: "サインアウト"

View File

@ -1,12 +1,9 @@
{
"name": "misskey",
"author": "syuilo <i@syuilo.com>",
"version": "0.0.5042",
"version": "1.0.0",
"clientVersion": "1.0.0",
"codename": "nighthike",
"license": "MIT",
"description": "A miniblog-based SNS",
"bugs": "https://github.com/syuilo/misskey/issues",
"repository": "https://github.com/syuilo/misskey.git",
"main": "./built/index.js",
"private": true,
"scripts": {
@ -91,7 +88,7 @@
"autwh": "0.1.0",
"bcryptjs": "2.4.3",
"bootstrap-vue": "2.0.0-rc.6",
"cafy": "3.2.1",
"cafy": "6.0.0",
"chai": "4.1.2",
"chai-http": "4.0.0",
"chalk": "2.4.0",
@ -147,6 +144,7 @@
"koa-multer": "1.0.2",
"koa-router": "7.4.0",
"koa-send": "4.1.3",
"koa-slow": "^2.1.0",
"kue": "0.11.6",
"license-checker": "18.0.0",
"loader-utils": "1.1.0",
@ -208,6 +206,7 @@
"vue-router": "3.0.1",
"vue-template-compiler": "2.5.16",
"vuedraggable": "2.16.0",
"vuex": "^3.0.1",
"web-push": "3.3.0",
"webfinger.js": "2.6.6",
"webpack": "4.6.0",

29
src/cafy-id.ts Normal file
View File

@ -0,0 +1,29 @@
import * as mongo from 'mongodb';
import { Query } from 'cafy';
export const isAnId = x => mongo.ObjectID.isValid(x);
export const isNotAnId = x => !isAnId(x);
/**
* ID
*/
export default class ID extends Query<mongo.ObjectID> {
constructor(...args) {
super(...args);
this.transform = v => {
if (isAnId(v) && !mongo.ObjectID.prototype.isPrototypeOf(v)) {
return new mongo.ObjectID(v);
} else {
return v;
}
};
this.pushValidator(v => {
if (!mongo.ObjectID.prototype.isPrototypeOf(v) && isNotAnId(v)) {
return new Error('must-be-an-id');
}
return true;
});
}
}

View File

@ -11,14 +11,12 @@
'use strict';
// Chromeで確認したことなのですが、constやletを用いたとしても
// グローバルなスコープで定数/変数を定義するとwindowのプロパティ
// としてそれがアクセスできるようになる訳ではありませんが、普通に
// コンソールから定数/変数名を入力するとアクセスできてしまいます。
// ブロック内に入れてスコープを非グローバル化するとそれが防げます
// (Chrome以外のブラウザでは検証していません)
{
if (localStorage.getItem('shouldFlush') == 'true') refresh();
(function() {
// キャッシュ削除要求があれば従う
if (localStorage.getItem('shouldFlush') == 'true') {
refresh();
return;
}
// Get the current url information
const url = new URL(location.href);
@ -63,11 +61,8 @@
}
// Dark/Light
const me = JSON.parse(localStorage.getItem('me') || null);
if (me && me.clientSettings) {
if ((app == 'desktop' && me.clientSettings.dark) || (app == 'mobile' && me.clientSettings.darkMobile)) {
document.documentElement.setAttribute('data-darkmode', 'true');
}
if (localStorage.getItem('darkmode') == 'true') {
document.documentElement.setAttribute('data-darkmode', 'true');
}
// Script version
@ -80,11 +75,16 @@
const raw = (localStorage.getItem('useRawScript') == 'true' && isDebug)
|| ENV != 'production';
// Get salt query
const salt = localStorage.getItem('salt')
? '?salt=' + localStorage.getItem('salt')
: '';
// Load an app script
// Note: 'async' make it possible to load the script asyncly.
// 'defer' make it possible to run the script when the dom loaded.
const script = document.createElement('script');
script.setAttribute('src', `/assets/${app}.${ver}.${lang}.${raw ? 'raw' : 'min'}.js`);
script.setAttribute('src', `/assets/${app}.${ver}.${lang}.${raw ? 'raw' : 'min'}.js${salt}`);
script.setAttribute('async', 'true');
script.setAttribute('defer', 'true');
head.appendChild(script);
@ -105,8 +105,8 @@
const meta = await res.json();
// Compare versions
if (meta.version != ver) {
localStorage.setItem('v', meta.version);
if (meta.clientVersion != ver) {
localStorage.setItem('v', meta.clientVersion);
alert(
'Misskeyの新しいバージョンがあります。ページを再度読み込みします。' +
@ -120,6 +120,9 @@
function refresh() {
localStorage.setItem('shouldFlush', 'false');
// Random
localStorage.setItem('salt', Math.random().toString());
// Clear cache (serive worker)
try {
navigator.serviceWorker.controller.postMessage('clear');
@ -134,4 +137,4 @@
// Force reload
location.reload(true);
}
}
})();

View File

@ -21,7 +21,9 @@ const defaultSettings = {
showMaps: true,
showPostFormOnTopOfTl: false,
gradientWindowHeader: false,
showReplyTarget: true
showReplyTarget: true,
showMyRenotes: true,
showRenotedMyNotes: true
};
//#region api requests
@ -86,6 +88,7 @@ export default class MiOS extends EventEmitter {
propsData: props
}).$mount();
document.body.appendChild(w.$el);
return w;
}
/**

View File

@ -3,7 +3,7 @@ import { version as current } from '../../config';
export default async function(mios: MiOS, force = false, silent = false) {
const meta = await mios.getMeta(force);
const newer = meta.version;
const newer = meta.clientVersion;
if (newer != current) {
localStorage.setItem('should-refresh', 'true');

View File

@ -0,0 +1,17 @@
import Stream from './stream';
import MiOS from '../../mios';
export class UserListStream extends Stream {
constructor(os: MiOS, me, listId) {
super(os, 'user-list', {
i: me.token,
listId
});
(this as any).on('_connected_', () => {
this.send({
i: me.token
});
});
}
}

View File

@ -0,0 +1,67 @@
<template>
<div class="mk-google">
<input type="search" v-model="query" :placeholder="q">
<button @click="search">検索</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['q'],
data() {
return {
query: null
};
},
mounted() {
this.query = this.q;
},
methods: {
search() {
window.open(`https://www.google.com/?#q=${this.query}`, '_blank');
}
}
});
</script>
<style lang="stylus" scoped>
root(isDark)
display flex
margin 8px 0
> input
flex-shrink 1
padding 10px
width 100%
height 40px
font-family sans-serif
font-size 16px
color isDark ? #dee4e8 : #55595c
background isDark ? #191b22 : #fff
border solid 1px isDark ? #495156 : #dadada
border-radius 4px 0 0 4px
&:hover
border-color isDark ? #777c86 : #b0b0b0
> button
flex-shrink 0
padding 0 16px
border solid 1px isDark ? #495156 : #dadada
border-left none
border-radius 0 4px 4px 0
&:hover
background-color isDark ? #2e3440 : #eee
&:active
box-shadow 0 2px 4px rgba(#000, 0.15) inset
.mk-google[data-darkmode]
root(true)
.mk-google:not([data-darkmode])
root(false)
</style>

View File

@ -4,6 +4,7 @@ import parse from '../../../../../text/parse';
import getAcct from '../../../../../acct/render';
import { url } from '../../../config';
import MkUrl from './url.vue';
import MkGoogle from './google.vue';
const flatten = list => list.reduce(
(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
@ -145,6 +146,13 @@ export default Vue.component('mk-note-html', {
const emoji = emojilib.lib[token.emoji];
return createElement('span', emoji ? emoji.char : token.content);
case 'search':
return createElement(MkGoogle, {
props: {
q: token.query
}
});
default:
console.log('unknown ast type:', token.type);
}

View File

@ -2,6 +2,7 @@
<div class="mk-note-menu">
<div class="backdrop" ref="backdrop" @click="close"></div>
<div class="popover" :class="{ compact }" ref="popover">
<button @click="favorite">%i18n:@favorite%</button>
<button v-if="note.userId == os.i.id" @click="pin">%i18n:@pin%</button>
<a v-if="note.uri" :href="note.uri" target="_blank">%i18n:@remote%</a>
</div>
@ -58,6 +59,14 @@ export default Vue.extend({
});
},
favorite() {
(this as any).api('notes/favorites/create', {
noteId: this.note.id
}).then(() => {
this.$destroy();
});
},
close() {
(this.$refs.backdrop as any).style.pointerEvents = 'none';
anime({
@ -142,6 +151,7 @@ $border-color = rgba(27, 31, 35, 0.15)
> a
display block
padding 8px 16px
width 100%
&:hover
color $theme-color-foreground

View File

@ -69,7 +69,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-poll-editor
root(isDark)
padding 8px
> .caution
@ -102,6 +102,8 @@ export default Vue.extend({
padding 6px 8px
width 300px
font-size 14px
color isDark ? #fff : #000
background isDark ? #191b22 : #fff
border solid 1px rgba($theme-color, 0.1)
border-radius 4px
@ -139,4 +141,10 @@ export default Vue.extend({
&:active
color darken($theme-color, 30%)
.mk-poll-editor[data-darkmode]
root(true)
.mk-poll-editor:not([data-darkmode])
root(false)
</style>

View File

@ -68,7 +68,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-poll
root(isDark)
> ul
display block
@ -81,7 +81,8 @@ export default Vue.extend({
margin 4px 0
padding 4px 8px
width 100%
border solid 1px #eee
color isDark ? #fff : #000
border solid 1px isDark ? #5e636f : #eee
border-radius 4px
overflow hidden
cursor pointer
@ -108,6 +109,8 @@ export default Vue.extend({
margin-left 4px
> p
color isDark ? #a3aebf : #000
a
color inherit
@ -121,4 +124,10 @@ export default Vue.extend({
&:active
background transparent
.mk-poll[data-darkmode]
root(true)
.mk-poll:not([data-darkmode])
root(false)
</style>

View File

@ -2,8 +2,8 @@
<iframe v-if="youtubeId" type="text/html" height="250"
:src="`https://www.youtube.com/embed/${youtubeId}?origin=${misskeyUrl}`"
frameborder="0"/>
<div v-else>
<a class="mk-url-preview" :href="url" target="_blank" :title="url" v-if="!fetching">
<div v-else class="mk-url-preview">
<a :href="url" target="_blank" :title="url" v-if="!fetching">
<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
<article>
<header>
@ -65,78 +65,85 @@ export default Vue.extend({
iframe
width 100%
.mk-url-preview
display block
font-size 16px
border solid 1px #eee
border-radius 4px
overflow hidden
root(isDark)
> a
display block
font-size 16px
border solid 1px isDark ? #191b1f : #eee
border-radius 4px
overflow hidden
&:hover
text-decoration none
border-color #ddd
&:hover
text-decoration none
border-color isDark ? #4f5561 : #ddd
> article > header > h1
text-decoration underline
> .thumbnail
position absolute
width 100px
height 100%
background-position center
background-size cover
& + article
left 100px
width calc(100% - 100px)
> article
padding 16px
> header
margin-bottom 8px
> h1
margin 0
font-size 1em
color #555
> p
margin 0
color #777
font-size 0.8em
> footer
margin-top 8px
height 16px
> img
display inline-block
width 16px
height 16px
margin-right 4px
vertical-align top
> p
display inline-block
margin 0
color #666
font-size 0.8em
line-height 16px
vertical-align top
@media (max-width 500px)
font-size 8px
border none
> article > header > h1
text-decoration underline
> .thumbnail
width 70px
position absolute
width 100px
height 100%
background-position center
background-size cover
& + article
left 70px
width calc(100% - 70px)
left 100px
width calc(100% - 100px)
> article
padding 8px
padding 16px
> header
margin-bottom 8px
> h1
margin 0
font-size 1em
color isDark ? #d6dae0 : #555
> p
margin 0
color isDark ? #a4aab3 : #777
font-size 0.8em
> footer
margin-top 8px
height 16px
> img
display inline-block
width 16px
height 16px
margin-right 4px
vertical-align top
> p
display inline-block
margin 0
color isDark ? #b0b4bf : #666
font-size 0.8em
line-height 16px
vertical-align top
@media (max-width 500px)
font-size 8px
border none
> .thumbnail
width 70px
& + article
left 70px
width calc(100% - 70px)
> article
padding 8px
.mk-url-preview[data-darkmode]
root(true)
.mk-url-preview:not([data-darkmode])
root(false)
</style>

View File

@ -95,7 +95,7 @@ export default (os: OS) => {
multiple: false,
title: '%fa:image%バナーにする画像を選択'
});
return selectedFile
.then(cropImage)
.then(setBanner)

View File

@ -25,8 +25,10 @@ import updateBanner from './api/update-banner';
import MkIndex from './views/pages/index.vue';
import MkUser from './views/pages/user/user.vue';
import MkFavorites from './views/pages/favorites.vue';
import MkSelectDrive from './views/pages/selectdrive.vue';
import MkDrive from './views/pages/drive.vue';
import MkUserList from './views/pages/user-list.vue';
import MkHomeCustomize from './views/pages/home-customize.vue';
import MkMessagingRoom from './views/pages/messaging-room.vue';
import MkNote from './views/pages/note.vue';
@ -50,9 +52,11 @@ init(async (launch) => {
routes: [
{ path: '/', name: 'index', component: MkIndex },
{ path: '/i/customize-home', component: MkHomeCustomize },
{ path: '/i/favorites', component: MkFavorites },
{ path: '/i/messaging/:user', component: MkMessagingRoom },
{ path: '/i/drive', component: MkDrive },
{ path: '/i/drive/folder/:folder', component: MkDrive },
{ path: '/i/lists/:list', component: MkUserList },
{ path: '/selectdrive', component: MkSelectDrive },
{ path: '/search', component: MkSearch },
{ path: '/othello', component: MkOthello },

View File

@ -47,6 +47,23 @@ html
&[data-darkmode]
background #191B22
&, *
&::-webkit-scrollbar-track
background-color #282C37
&::-webkit-scrollbar
width 6px
height 6px
&::-webkit-scrollbar-thumb
background-color #454954
&:hover
background-color #535660
&:active
background-color $theme-color
body
display flex
flex-direction column

View File

@ -19,6 +19,7 @@
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
user: {
@ -30,6 +31,7 @@ export default Vue.extend({
default: 'compact'
}
},
data() {
return {
wait: false,
@ -37,6 +39,7 @@ export default Vue.extend({
connectionId: null
};
},
mounted() {
this.connection = (this as any).os.stream.getConnection();
this.connectionId = (this as any).os.stream.use();
@ -44,13 +47,14 @@ export default Vue.extend({
this.connection.on('follow', this.onFollow);
this.connection.on('unfollow', this.onUnfollow);
},
beforeDestroy() {
this.connection.off('follow', this.onFollow);
this.connection.off('unfollow', this.onUnfollow);
(this as any).os.stream.dispose(this.connectionId);
},
methods: {
methods: {
onFollow(user) {
if (user.id == this.user.id) {
this.user.isFollowing = user.isFollowing;

View File

@ -219,7 +219,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.mk-home
root(isDark)
display block
&[data-customize]
@ -249,7 +249,8 @@ export default Vue.extend({
left 0
width 100%
height 48px
background #f7f7f7
color isDark ? #fff : #000
background isDark ? #313543 : #f7f7f7
box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
> a
@ -289,7 +290,7 @@ export default Vue.extend({
line-height 48px
&.trash
border-left solid 1px #ddd
border-left solid 1px isDark ? #1c2023 : #ddd
> div
width 100%
@ -329,7 +330,7 @@ export default Vue.extend({
.mk-post-form
margin-bottom 16px
border solid 1px #e5e5e5
border solid 1px rgba(#000, 0.075)
border-radius 4px
> *:not(.main)
@ -357,4 +358,10 @@ export default Vue.extend({
max-width 700px
margin 0 auto
.mk-home[data-darkmode]
root(true)
.mk-home:not([data-darkmode])
root(false)
</style>

View File

@ -28,6 +28,7 @@ import friendsMaker from './friends-maker.vue';
import followers from './followers.vue';
import following from './following.vue';
import usersList from './users-list.vue';
import userListTimeline from './user-list-timeline.vue';
import widgetContainer from './widget-container.vue';
Vue.component('mk-ui', ui);
@ -58,4 +59,5 @@ Vue.component('mk-friends-maker', friendsMaker);
Vue.component('mk-followers', followers);
Vue.component('mk-following', following);
Vue.component('mk-users-list', usersList);
Vue.component('mk-user-list-timeline', userListTimeline);
Vue.component('mk-widget-container', widgetContainer);

View File

@ -31,7 +31,7 @@ export default Vue.extend({
const xp = mouseX / this.$el.offsetWidth * 100;
const yp = mouseY / this.$el.offsetHeight * 100;
this.$el.style.backgroundPosition = xp + '% ' + yp + '%';
this.$el.style.backgroundImage = 'url("' + this.image.url + '?thumbnail")';
this.$el.style.backgroundImage = `url("${this.image.url}")`;
},
onMouseleave() {

View File

@ -1,8 +1,8 @@
<template>
<div class="mk-mentions">
<header>
<span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて</span>
<span :data-is-active="mode == 'following'" @click="mode = 'following'">フォロー中</span>
<span :data-active="mode == 'all'" @click="mode = 'all'">すべて</span>
<span :data-active="mode == 'following'" @click="mode = 'following'">フォロー中</span>
</header>
<div class="fetching" v-if="fetching">
<mk-ellipsis-icon/>
@ -98,7 +98,7 @@ export default Vue.extend({
font-size 18px
color #555
&:not([data-is-active])
&:not([data-active])
color $theme-color
cursor pointer

View File

@ -4,15 +4,13 @@
<x-sub :note="p.reply"/>
</div>
<div class="renote" v-if="isRenote">
<p>
<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
</router-link>
%fa:retweet%
<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
</p>
<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
</router-link>
%fa:retweet%
<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
<mk-time :time="note.createdAt"/>
</div>
<article>
@ -36,24 +34,30 @@
<p class="channel" v-if="p.channel">
<a :href="`${_CH_URL_}/${p.channel.id}`" target="_blank">{{ p.channel.title }}</a>:
</p>
<div class="text">
<a class="reply" v-if="p.reply">%fa:reply%</a>
<mk-note-html v-if="p.textHtml" :text="p.text" :i="os.i" :class="$style.text"/>
<a class="rp" v-if="p.renote">RP:</a>
<p v-if="p.cw != null" class="cw">
<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
<span class="toggle" @click="showContent = !showContent">{{ showContent ? '隠す' : 'もっと見る' }}</span>
</p>
<div class="content" v-show="p.cw == null || showContent">
<div class="text">
<a class="reply" v-if="p.reply">%fa:reply%</a>
<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
<a class="rp" v-if="p.renote">RP:</a>
</div>
<div class="media" v-if="p.media.length > 0">
<mk-media-list :media-list="p.media"/>
</div>
<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
<div class="tags" v-if="p.tags && p.tags.length > 0">
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
</div>
<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
<div class="map" v-if="p.geo" ref="map"></div>
<div class="renote" v-if="p.renote">
<mk-note-preview :note="p.renote"/>
</div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
</div>
<div class="media" v-if="p.media.length > 0">
<mk-media-list :media-list="p.media"/>
</div>
<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
<div class="tags" v-if="p.tags && p.tags.length > 0">
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
</div>
<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
<div class="map" v-if="p.geo" ref="map"></div>
<div class="renote" v-if="p.renote">
<mk-note-preview :note="p.renote"/>
</div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
</div>
<footer>
<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
@ -115,6 +119,7 @@ export default Vue.extend({
data() {
return {
showContent: false,
isDetailOpened: false,
connection: null,
connectionId: null
@ -324,36 +329,44 @@ root(isDark)
border-radius 4px
> .renote
display flex
align-items baseline
padding 16px 32px
line-height 28px
color #9dbb00
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
> p
margin 0
padding 16px 32px
line-height 28px
.avatar-anchor
display inline-block
.avatar-anchor
display inline-block
.avatar
vertical-align bottom
width 28px
height 28px
margin 0 8px 0 0
border-radius 6px
.avatar
vertical-align bottom
width 28px
height 28px
margin 0 8px 0 0
border-radius 6px
[data-fa]
margin-right 4px
[data-fa]
margin-right 4px
> span
flex-shrink 0
.name
font-weight bold
&:last-of-type
margin-right 8px
.name
overflow hidden
flex-shrink 1
text-overflow ellipsis
white-space nowrap
font-weight bold
> .mk-time
position absolute
top 16px
right 32px
display block
margin-left auto
flex-shrink 0
font-size 0.9em
line-height 28px
& + article
padding-top 8px
@ -421,12 +434,14 @@ root(isDark)
margin 0 .5em 0 0
padding 1px 6px
font-size 12px
color #aaa
border solid 1px #ddd
color isDark ? #758188 :#aaa
border solid 1px isDark ? #57616f : #ddd
border-radius 3px
> .username
margin 0 .5em 0 0
overflow hidden
text-overflow ellipsis
color isDark ? #606984 : #ccc
> .info
@ -448,7 +463,7 @@ root(isDark)
> .body
> .text
> .cw
cursor default
display block
margin 0
@ -457,90 +472,117 @@ root(isDark)
font-size 1.1em
color isDark ? #fff : #717171
>>> .title
display block
margin-bottom 4px
padding 4px
font-size 90%
text-align center
background isDark ? #2f3944 : #eef1f3
border-radius 4px
>>> .code
margin 8px 0
>>> .quote
margin 8px
padding 6px 12px
color isDark ? #6f808e : #aaa
border-left solid 3px isDark ? #637182 : #eee
> .reply
> .text
margin-right 8px
color isDark ? #99abbf : #717171
> .rp
margin-left 4px
font-style oblique
color #a0bf46
> .location
margin 4px 0
font-size 12px
color #ccc
> .map
width 100%
height 300px
&:empty
display none
> .tags
margin 4px 0 0 0
> *
> .toggle
display inline-block
margin 0 8px 0 0
padding 2px 8px 2px 16px
font-size 90%
color #8d969e
background #edf0f3
border-radius 4px
&:before
content ""
display block
position absolute
top 0
bottom 0
left 4px
width 8px
height 8px
margin auto 0
background #fff
border-radius 100%
padding 4px 8px
font-size 0.7em
color isDark ? #393f4f : #fff
background isDark ? #687390 : #b1b9c1
border-radius 2px
cursor pointer
user-select none
&:hover
text-decoration none
background #e2e7ec
background isDark ? #707b97 : #bbc4ce
.mk-url-preview
margin-top 8px
> .content
> .channel
margin 0
> .text
cursor default
display block
margin 0
padding 0
overflow-wrap break-word
font-size 1.1em
color isDark ? #fff : #717171
> .mk-poll
font-size 80%
>>> .title
display block
margin-bottom 4px
padding 4px
font-size 90%
text-align center
background isDark ? #2f3944 : #eef1f3
border-radius 4px
> .renote
margin 8px 0
>>> .code
margin 8px 0
> .mk-note-preview
padding 16px
border dashed 1px #c0dac6
border-radius 8px
>>> .quote
margin 8px
padding 6px 12px
color isDark ? #6f808e : #aaa
border-left solid 3px isDark ? #637182 : #eee
> .reply
margin-right 8px
color isDark ? #99abbf : #717171
> .rp
margin-left 4px
font-style oblique
color #a0bf46
> .location
margin 4px 0
font-size 12px
color #ccc
> .map
width 100%
height 300px
&:empty
display none
> .tags
margin 4px 0 0 0
> *
display inline-block
margin 0 8px 0 0
padding 2px 8px 2px 16px
font-size 90%
color #8d969e
background #edf0f3
border-radius 4px
&:before
content ""
display block
position absolute
top 0
bottom 0
left 4px
width 8px
height 8px
margin auto 0
background #fff
border-radius 100%
&:hover
text-decoration none
background #e2e7ec
.mk-url-preview
margin-top 8px
> .channel
margin 0
> .mk-poll
font-size 80%
> .renote
margin 8px 0
> .mk-note-preview
padding 16px
border dashed 1px isDark ? #4e945e : #c0dac6
border-radius 8px
> footer
> button

View File

@ -1,32 +1,65 @@
<template>
<div class="mk-notes">
<template v-for="(note, i) in _notes">
<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
<p class="date" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
<span>%fa:angle-up%{{ note._datetext }}</span>
<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
</p>
</template>
<footer>
<slot name="footer"></slot>
<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
<div v-if="!fetching && requestInitPromise != null">
<p>読み込みに失敗しました</p>
<button @click="resolveInitPromise">リトライ</button>
</div>
<transition-group name="mk-notes" class="transition">
<template v-for="(note, i) in _notes">
<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
<span>%fa:angle-up%{{ note._datetext }}</span>
<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
</p>
</template>
</transition-group>
<footer v-if="more">
<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">%i18n:@load-more%</template>
<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
</button>
</footer>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { url } from '../../../config';
import getNoteSummary from '../../../../../renderers/get-note-summary';
import XNote from './notes.note.vue';
const displayLimit = 30;
export default Vue.extend({
components: {
XNote
},
props: {
notes: {
type: Array,
default: () => []
more: {
type: Function,
required: false
}
},
data() {
return {
requestInitPromise: null as () => Promise<any[]>,
notes: [],
queue: [],
unreadCount: 0,
fetching: true,
moreFetching: false
};
},
computed: {
_notes(): any[] {
return (this.notes as any).map(note => {
@ -38,53 +71,197 @@ export default Vue.extend({
});
}
},
mounted() {
document.addEventListener('visibilitychange', this.onVisibilitychange, false);
window.addEventListener('scroll', this.onScroll);
},
beforeDestroy() {
document.removeEventListener('visibilitychange', this.onVisibilitychange);
window.removeEventListener('scroll', this.onScroll);
},
methods: {
isScrollTop() {
return window.scrollY <= 8;
},
focus() {
(this.$el as any).children[0].focus();
},
onNoteUpdated(i, note) {
Vue.set((this as any).notes, i, note);
},
init(promiseGenerator: () => Promise<any[]>) {
this.requestInitPromise = promiseGenerator;
this.resolveInitPromise();
},
resolveInitPromise() {
this.queue = [];
this.notes = [];
this.fetching = true;
const promise = this.requestInitPromise();
promise.then(notes => {
this.notes = notes;
this.requestInitPromise = null;
this.fetching = false;
}, e => {
this.fetching = false;
});
},
prepend(note, silent = false) {
//#region 弾く
const isMyNote = note.userId == (this as any).os.i.id;
const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
if ((this as any).os.i.clientSettings.showMyRenotes === false) {
if (isMyNote && isPureRenote) {
return;
}
}
if ((this as any).os.i.clientSettings.showRenotedMyNotes === false) {
if (isPureRenote && (note.renote.userId == (this as any).os.i.id)) {
return;
}
}
//#endregion
// 投稿が自分のものではないかつ、タブが非表示またはスクロール位置が最上部ではないならタイトルで通知
if ((document.hidden || !this.isScrollTop()) && note.userId !== (this as any).os.i.id) {
this.unreadCount++;
document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
}
if (this.isScrollTop()) {
// Prepend the note
this.notes.unshift(note);
// サウンドを再生する
if ((this as any).os.isEnableSounds && !silent) {
const sound = new Audio(`${url}/assets/post.mp3`);
sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 0.5;
sound.play();
}
// オーバーフローしたら古い投稿は捨てる
if (this.notes.length >= displayLimit) {
this.notes = this.notes.slice(0, displayLimit);
}
} else {
this.queue.unshift(note);
}
},
append(note) {
this.notes.push(note);
},
tail() {
return this.notes[this.notes.length - 1];
},
releaseQueue() {
this.queue.forEach(n => this.prepend(n, true));
this.queue = [];
},
async loadMore() {
if (this.more == null) return;
if (this.moreFetching) return;
this.moreFetching = true;
await this.more();
this.moreFetching = false;
},
clearNotification() {
this.unreadCount = 0;
document.title = 'Misskey';
},
onVisibilitychange() {
if (!document.hidden) {
this.clearNotification();
}
},
onScroll() {
if (this.isScrollTop()) {
this.releaseQueue();
this.clearNotification();
}
if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 8) this.loadMore();
}
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
> .date
display block
margin 0
line-height 32px
font-size 14px
text-align center
color isDark ? #666b79 : #aaa
background isDark ? #242731 : #fdfdfd
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
.transition
.mk-notes-enter
.mk-notes-leave-to
opacity 0
transform translateY(-30px)
span
margin 0 16px
> *
transition transform .3s ease, opacity .3s ease
[data-fa]
margin-right 8px
> .date
display block
margin 0
line-height 32px
font-size 14px
text-align center
color isDark ? #666b79 : #aaa
background isDark ? #242731 : #fdfdfd
border-bottom solid 1px isDark ? #1c2023 : #eaeaea
span
margin 0 16px
[data-fa]
margin-right 8px
> .newer-indicator
position -webkit-sticky
position sticky
z-index 100
height 3px
background $theme-color
> footer
> *
> button
display block
margin 0
padding 16px
width 100%
text-align center
color #ccc
border-top solid 1px #eaeaea
border-bottom-left-radius 4px
border-bottom-right-radius 4px
background isDark ? #282C37 : #fff
border-top solid 1px isDark ? #1c2023 : #eaeaea
border-bottom-left-radius 6px
border-bottom-right-radius 6px
> button
&:hover
background #f5f5f5
background isDark ? #2e3440 : #f5f5f5
&:active
background #eee
background isDark ? #21242b : #eee
.mk-notes[data-darkmode]
root(true)

View File

@ -1,96 +1,98 @@
<template>
<div class="mk-notifications">
<div class="notifications" v-if="notifications.length != 0">
<template v-for="(notification, i) in _notifications">
<div class="notification" :class="notification.type" :key="notification.id">
<mk-time :time="notification.createdAt"/>
<template v-if="notification.type == 'reaction'">
<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
</router-link>
<div class="text">
<p>
<mk-reaction-icon :reaction="notification.reaction"/>
<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
</p>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
<transition-group name="mk-notifications" class="transition">
<template v-for="(notification, i) in _notifications">
<div class="notification" :class="notification.type" :key="notification.id">
<mk-time :time="notification.createdAt"/>
<template v-if="notification.type == 'reaction'">
<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
</router-link>
</div>
</template>
<template v-if="notification.type == 'renote'">
<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
</router-link>
<div class="text">
<p>%fa:retweet%
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
<div class="text">
<p>
<mk-reaction-icon :reaction="notification.reaction"/>
<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
</p>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
</router-link>
</div>
</template>
<template v-if="notification.type == 'renote'">
<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
</router-link>
</div>
</template>
<template v-if="notification.type == 'quote'">
<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
</router-link>
<div class="text">
<p>%fa:quote-left%
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p>
<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
</div>
</template>
<template v-if="notification.type == 'follow'">
<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
</router-link>
<div class="text">
<p>%fa:user-plus%
<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
</p>
</div>
</template>
<template v-if="notification.type == 'reply'">
<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
</router-link>
<div class="text">
<p>%fa:reply%
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p>
<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
</div>
</template>
<template v-if="notification.type == 'mention'">
<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
</router-link>
<div class="text">
<p>%fa:at%
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p>
<a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a>
</div>
</template>
<template v-if="notification.type == 'poll_vote'">
<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
</router-link>
<div class="text">
<p>%fa:chart-pie%<a :href="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</a></p>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
<div class="text">
<p>%fa:retweet%
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
</router-link>
</div>
</template>
<template v-if="notification.type == 'quote'">
<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
</router-link>
</div>
</template>
</div>
<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
<span>%fa:angle-up%{{ notification._datetext }}</span>
<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
</p>
</template>
<div class="text">
<p>%fa:quote-left%
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p>
<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
</div>
</template>
<template v-if="notification.type == 'follow'">
<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
</router-link>
<div class="text">
<p>%fa:user-plus%
<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
</p>
</div>
</template>
<template v-if="notification.type == 'reply'">
<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
</router-link>
<div class="text">
<p>%fa:reply%
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p>
<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
</div>
</template>
<template v-if="notification.type == 'mention'">
<router-link class="avatar-anchor" :to="notification.note.user | userPage" v-user-preview="notification.note.userId">
<img class="avatar" :src="`${notification.note.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
</router-link>
<div class="text">
<p>%fa:at%
<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
</p>
<a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a>
</div>
</template>
<template v-if="notification.type == 'poll_vote'">
<router-link class="avatar-anchor" :to="notification.user | userPage" v-user-preview="notification.user.id">
<img class="avatar" :src="`${notification.user.avatarUrl}?thumbnail&size=48`" alt="avatar"/>
</router-link>
<div class="text">
<p>%fa:chart-pie%<a :href="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</a></p>
<router-link class="note-ref" :to="notification.note | notePage">
%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
</router-link>
</div>
</template>
</div>
<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
<span>%fa:angle-up%{{ notification._datetext }}</span>
<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
</p>
</template>
</transition-group>
</div>
<button class="more" :class="{ fetching: fetchingMoreNotifications }" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{{ fetchingMoreNotifications ? '%i18n:!common.loading%' : '%i18n:!@more%' }}
@ -186,97 +188,107 @@ export default Vue.extend({
<style lang="stylus" scoped>
root(isDark)
.transition
.mk-notifications-enter
.mk-notifications-leave-to
opacity 0
transform translateY(-30px)
> *
transition transform .3s ease, opacity .3s ease
> .notifications
> .notification
margin 0
padding 16px
overflow-wrap break-word
font-size 0.9em
border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
> *
> .notification
margin 0
padding 16px
overflow-wrap break-word
font-size 0.9em
border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
&:last-child
border-bottom none
&:last-child
border-bottom none
> .mk-time
display inline
position absolute
top 16px
right 12px
vertical-align top
color isDark ? #606984 : rgba(0, 0, 0, 0.6)
font-size small
> .mk-time
display inline
position absolute
top 16px
right 12px
vertical-align top
color isDark ? #606984 : rgba(0, 0, 0, 0.6)
font-size small
&:after
content ""
display block
clear both
> .avatar-anchor
display block
float left
position -webkit-sticky
position sticky
top 16px
> img
&:after
content ""
display block
min-width 36px
min-height 36px
max-width 36px
max-height 36px
border-radius 6px
clear both
> .text
float right
width calc(100% - 36px)
padding-left 8px
> .avatar-anchor
display block
float left
position -webkit-sticky
position sticky
top 16px
p
margin 0
> img
display block
min-width 36px
min-height 36px
max-width 36px
max-height 36px
border-radius 6px
i, .mk-reaction-icon
margin-right 4px
> .text
float right
width calc(100% - 36px)
padding-left 8px
.note-preview
color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
p
margin 0
.note-ref
color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
i, .mk-reaction-icon
margin-right 4px
.note-preview
color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
.note-ref
color isDark ? #c2cad4 : rgba(0, 0, 0, 0.7)
[data-fa]
font-size 1em
font-weight normal
font-style normal
display inline-block
margin-right 3px
&.renote, &.quote
.text p i
color #77B255
&.follow
.text p i
color #53c7ce
&.reply, &.mention
.text p i
color #555
> .date
display block
margin 0
line-height 32px
text-align center
font-size 0.8em
color isDark ? #666b79 : #aaa
background isDark ? #242731 : #fdfdfd
border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
span
margin 0 16px
[data-fa]
font-size 1em
font-weight normal
font-style normal
display inline-block
margin-right 3px
&.renote, &.quote
.text p i
color #77B255
&.follow
.text p i
color #53c7ce
&.reply, &.mention
.text p i
color #555
> .date
display block
margin 0
line-height 32px
text-align center
font-size 0.8em
color isDark ? #666b79 : #aaa
background isDark ? #242731 : #fdfdfd
border-bottom solid 1px isDark ? #1c2023 : rgba(0, 0, 0, 0.05)
span
margin 0 16px
[data-fa]
margin-right 8px
margin-right 8px
> .more
display block

View File

@ -6,6 +6,7 @@
@drop.stop="onDrop"
>
<div class="content">
<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
<textarea :class="{ with: (files.length != 0 || poll) }"
ref="text" v-model="text" :disabled="posting"
@keydown="onKeydown" @paste="onPaste" :placeholder="placeholder"
@ -27,6 +28,7 @@
<button class="drive" title="%i18n:@attach-media-from-drive%" @click="chooseFileFromDrive">%fa:cloud%</button>
<button class="kao" title="%i18n:@insert-a-kao%" @click="kao">%fa:R smile%</button>
<button class="poll" title="%i18n:@create-poll%" @click="poll = true">%fa:chart-pie%</button>
<button class="poll" title="内容を隠す" @click="useCw = !useCw">%fa:eye-slash%</button>
<button class="geo" title="位置情報を添付する" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
<p class="text-count" :class="{ over: text.length > 1000 }">{{ '%i18n:!@text-remain%'.replace('{}', 1000 - text.length) }}</p>
<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
@ -46,7 +48,9 @@ export default Vue.extend({
components: {
XDraggable
},
props: ['reply', 'renote'],
data() {
return {
posting: false,
@ -54,11 +58,14 @@ export default Vue.extend({
files: [],
uploadings: [],
poll: false,
useCw: false,
cw: null,
geo: null,
autocomplete: null,
draghover: false
};
},
computed: {
draftId(): string {
return this.renote
@ -67,6 +74,7 @@ export default Vue.extend({
? 'reply:' + this.reply.id
: 'note';
},
placeholder(): string {
return this.renote
? '%i18n:!@quote-placeholder%'
@ -74,6 +82,7 @@ export default Vue.extend({
? '%i18n:!@reply-placeholder%'
: '%i18n:!@note-placeholder%';
},
submitText(): string {
return this.renote
? '%i18n:!@renote%'
@ -81,21 +90,26 @@ export default Vue.extend({
? '%i18n:!@reply%'
: '%i18n:!@note%';
},
canPost(): boolean {
return !this.posting && (this.text.length != 0 || this.files.length != 0 || this.poll || this.renote);
}
},
watch: {
text() {
this.saveDraft();
},
poll() {
this.saveDraft();
},
files() {
this.saveDraft();
}
},
mounted() {
this.$nextTick(() => {
// 書きかけの投稿を復元
@ -113,13 +127,16 @@ export default Vue.extend({
}
});
},
methods: {
focus() {
(this.$refs.text as any).focus();
},
chooseFile() {
(this.$refs.file as any).click();
},
chooseFileFromDrive() {
(this as any).apis.chooseDriveFile({
multiple: true
@ -127,32 +144,40 @@ export default Vue.extend({
files.forEach(this.attachMedia);
});
},
attachMedia(driveFile) {
this.files.push(driveFile);
this.$emit('change-attached-media', this.files);
},
detachMedia(id) {
this.files = this.files.filter(x => x.id != id);
this.$emit('change-attached-media', this.files);
},
onChangeFile() {
Array.from((this.$refs.file as any).files).forEach(this.upload);
},
upload(file) {
(this.$refs.uploader as any).upload(file);
},
onChangeUploadings(uploads) {
this.$emit('change-uploadings', uploads);
},
clear() {
this.text = '';
this.files = [];
this.poll = false;
this.$emit('change-attached-media', this.files);
},
onKeydown(e) {
if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey)) this.post();
},
onPaste(e) {
Array.from(e.clipboardData.items).forEach((item: any) => {
if (item.kind == 'file') {
@ -160,6 +185,7 @@ export default Vue.extend({
}
});
},
onDragover(e) {
const isFile = e.dataTransfer.items[0].kind == 'file';
const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
@ -169,12 +195,15 @@ export default Vue.extend({
e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
}
},
onDragenter(e) {
this.draghover = true;
},
onDragleave(e) {
this.draghover = false;
},
onDrop(e): void {
this.draghover = false;
@ -195,6 +224,7 @@ export default Vue.extend({
}
//#endregion
},
setGeo() {
if (navigator.geolocation == null) {
alert('お使いの端末は位置情報に対応していません');
@ -210,10 +240,12 @@ export default Vue.extend({
enableHighAccuracy: true
});
},
removeGeo() {
this.geo = null;
this.$emit('geo-dettached');
},
post() {
this.posting = true;
@ -223,6 +255,7 @@ export default Vue.extend({
replyId: this.reply ? this.reply.id : undefined,
renoteId: this.renote ? this.renote.id : undefined,
poll: this.poll ? (this.$refs.poll as any).get() : undefined,
cw: this.useCw ? this.cw || '' : undefined,
geo: this.geo ? {
coordinates: [this.geo.longitude, this.geo.latitude],
altitude: this.geo.altitude,
@ -250,6 +283,7 @@ export default Vue.extend({
this.posting = false;
});
},
saveDraft() {
const data = JSON.parse(localStorage.getItem('drafts') || '{}');
@ -264,6 +298,7 @@ export default Vue.extend({
localStorage.setItem('drafts', JSON.stringify(data));
},
deleteDraft() {
const data = JSON.parse(localStorage.getItem('drafts') || '{}');
@ -271,6 +306,7 @@ export default Vue.extend({
localStorage.setItem('drafts', JSON.stringify(data));
},
kao() {
this.text += getKao();
}
@ -293,47 +329,54 @@ root(isDark)
> .content
textarea
> input
> textarea
display block
padding 12px
margin 0
width 100%
max-width 100%
min-width 100%
min-height calc(16px + 12px + 12px)
padding 12px
font-size 16px
color #333
color isDark ? #fff : #333
background isDark ? #191d23 : #fff
outline none
border solid 1px rgba($theme-color, 0.1)
border-radius 4px
transition border-color .3s ease
transition border-color .2s ease
&:hover
border-color rgba($theme-color, 0.2)
transition border-color .1s ease
& + *
& + * + *
border-color rgba($theme-color, 0.2)
transition border-color .1s ease
&:focus
color $theme-color
border-color rgba($theme-color, 0.5)
transition border-color 0s ease
& + *
& + * + *
border-color rgba($theme-color, 0.5)
transition border-color 0s ease
&:disabled
opacity 0.5
&::-webkit-input-placeholder
color rgba($theme-color, 0.3)
> input
margin-bottom 8px
> textarea
margin 0
max-width 100%
min-width 100%
min-height 64px
&:hover
& + *
& + * + *
border-color rgba($theme-color, 0.2)
transition border-color .1s ease
&:focus
& + *
& + * + *
border-color rgba($theme-color, 0.5)
transition border-color 0s ease
&.with
border-bottom solid 1px rgba($theme-color, 0.1) !important
border-radius 4px 4px 0 0
@ -392,7 +435,7 @@ root(isDark)
cursor pointer
> .mk-poll-editor
background lighten($theme-color, 98%)
background isDark ? #181b23 : lighten($theme-color, 98%)
border solid 1px rgba($theme-color, 0.1)
border-top none
border-radius 0 0 4px 4px

View File

@ -40,11 +40,13 @@
<button class="ui button" @click="customizeHome" style="margin-bottom: 16px">ホームをカスタマイズ</button>
</div>
<div class="div">
<mk-switch v-model="os.i.clientSettings.dark" @change="onChangeDark" text="ダークモード"/>
<mk-switch v-model="darkmode" text="ダークモード"/>
<mk-switch v-model="os.i.clientSettings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="ウィンドウのタイトルバーにグラデーションを使用"/>
</div>
<mk-switch v-model="os.i.clientSettings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="タイムライン上部に投稿フォームを表示する"/>
<mk-switch v-model="os.i.clientSettings.showReplyTarget" @change="onChangeShowReplyTarget" text="リプライ先を表示する"/>
<mk-switch v-model="os.i.clientSettings.showMyRenotes" @change="onChangeShowMyRenotes" text="自分の行ったRenoteをタイムラインに表示する"/>
<mk-switch v-model="os.i.clientSettings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes" text="Renoteされた自分の投稿をタイムラインに表示する"/>
<mk-switch v-model="os.i.clientSettings.showMaps" @change="onChangeShowMaps" text="マップの自動展開">
<span>位置情報が添付された投稿のマップを自動的に展開します</span>
</mk-switch>
@ -232,6 +234,7 @@ export default Vue.extend({
version,
latestVersion: undefined,
checkingForUpdate: false,
darkmode: localStorage.getItem('darkmode') == 'true',
enableSounds: localStorage.getItem('enableSounds') == 'true',
autoPopout: localStorage.getItem('autoPopout') == 'true',
apiViaStream: localStorage.getItem('apiViaStream') ? localStorage.getItem('apiViaStream') == 'true' : true,
@ -255,6 +258,9 @@ export default Vue.extend({
apiViaStream() {
localStorage.setItem('apiViaStream', this.apiViaStream ? 'true' : 'false');
},
darkmode() {
(this as any)._updateDarkmode_(this.darkmode);
},
enableSounds() {
localStorage.setItem('enableSounds', this.enableSounds ? 'true' : 'false');
},
@ -319,6 +325,18 @@ export default Vue.extend({
value: v
});
},
onChangeShowMyRenotes(v) {
(this as any).api('i/update_client_setting', {
name: 'showMyRenotes',
value: v
});
},
onChangeShowRenotedMyNotes(v) {
(this as any).api('i/update_client_setting', {
name: 'showRenotedMyNotes',
value: v
});
},
onChangeShowMaps(v) {
(this as any).api('i/update_client_setting', {
name: 'showMaps',

View File

@ -1,24 +1,23 @@
<template>
<div class="mk-home-timeline">
<div class="mk-timeline-core">
<mk-friends-maker v-if="src == 'home' && alone"/>
<div class="fetching" v-if="fetching">
<mk-ellipsis-icon/>
</div>
<p class="empty" v-if="notes.length == 0 && !fetching">
%fa:R comments%%i18n:@empty%
</p>
<mk-notes :notes="notes" ref="timeline">
<button slot="footer" @click="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">%i18n:@load-more%</template>
<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
</button>
<mk-notes ref="timeline" :more="canFetchMore ? more : null">
<p :class="$style.empty" slot="empty">
%fa:R comments%%i18n:@empty%
</p>
</mk-notes>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { url } from '../../../config';
import getNoteSummary from '../../../../../renderers/get-note-summary';
const fetchLimit = 10;
export default Vue.extend({
props: {
@ -33,9 +32,9 @@ export default Vue.extend({
fetching: true,
moreFetching: false,
existMore: false,
notes: [],
connection: null,
connectionId: null,
unreadCount: 0,
date: null
};
},
@ -59,6 +58,10 @@ export default Vue.extend({
: this.src == 'local'
? 'notes/local-timeline'
: 'notes/global-timeline';
},
canFetchMore(): boolean {
return !this.moreFetching && !this.fetching && this.existMore;
}
},
@ -72,6 +75,9 @@ export default Vue.extend({
this.connection.on('unfollow', this.onChangeFollowing);
}
document.addEventListener('keydown', this.onKeydown);
document.addEventListener('visibilitychange', this.onVisibilitychange, false);
this.fetch();
},
@ -82,56 +88,62 @@ export default Vue.extend({
this.connection.off('unfollow', this.onChangeFollowing);
}
this.stream.dispose(this.connectionId);
document.removeEventListener('keydown', this.onKeydown);
document.removeEventListener('visibilitychange', this.onVisibilitychange);
},
methods: {
fetch(cb?) {
fetch() {
this.fetching = true;
(this as any).api(this.endpoint, {
limit: 11,
untilDate: this.date ? this.date.getTime() : undefined
}).then(notes => {
if (notes.length == 11) {
notes.pop();
this.existMore = true;
}
this.notes = notes;
this.fetching = false;
this.$emit('loaded');
if (cb) cb();
});
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
(this as any).api(this.endpoint, {
limit: fetchLimit + 1,
untilDate: this.date ? this.date.getTime() : undefined,
includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
this.existMore = true;
}
res(notes);
this.fetching = false;
this.$emit('loaded');
}, rej);
}));
},
more() {
if (this.moreFetching || this.fetching || this.notes.length == 0 || !this.existMore) return;
if (!this.canFetchMore) return;
this.moreFetching = true;
(this as any).api(this.endpoint, {
limit: 11,
untilId: this.notes[this.notes.length - 1].id
limit: fetchLimit + 1,
untilId: (this.$refs.timeline as any).tail().id,
includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
}).then(notes => {
if (notes.length == 11) {
if (notes.length == fetchLimit + 1) {
notes.pop();
} else {
this.existMore = false;
}
this.notes = this.notes.concat(notes);
notes.forEach(n => (this.$refs.timeline as any).append(n));
this.moreFetching = false;
});
},
onNote(note) {
// サウンドを再生する
if ((this as any).os.isEnableSounds) {
const sound = new Audio(`${url}/assets/post.mp3`);
sound.volume = localStorage.getItem('soundVolume') ? parseInt(localStorage.getItem('soundVolume'), 10) / 100 : 0.5;
sound.play();
if (document.hidden && note.userId !== (this as any).os.i.id) {
this.unreadCount++;
document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
}
this.notes.unshift(note);
const isTop = window.scrollY > 8;
if (isTop) this.notes.pop();
// Prepend a note
(this.$refs.timeline as any).prepend(note);
},
onChangeFollowing() {
@ -145,31 +157,51 @@ export default Vue.extend({
warp(date) {
this.date = date;
this.fetch();
},
onVisibilitychange() {
if (!document.hidden) {
this.unreadCount = 0;
document.title = 'Misskey';
}
},
onKeydown(e) {
if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
if (e.which == 84) { // t
this.focus();
}
}
}
}
});
</script>
<style lang="stylus" scoped>
.mk-home-timeline
@import '~const.styl'
.mk-timeline-core
> .mk-friends-maker
border-bottom solid 1px #eee
> .fetching
padding 64px 0
> .empty
display block
margin 0 auto
padding 32px
max-width 400px
text-align center
color #999
</style>
> [data-fa]
display block
margin-bottom 16px
font-size 3em
color #ccc
<style lang="stylus" module>
.empty
display block
margin 0 auto
padding 32px
max-width 400px
text-align center
color #999
> [data-fa]
display block
margin-bottom 16px
font-size 3em
color #ccc
</style>

View File

@ -1,19 +1,23 @@
<template>
<div class="mk-timeline">
<header>
<span :data-is-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
<span :data-is-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
<span :data-is-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
<span :data-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
<button @click="chooseList" title="リスト">%fa:list%</button>
</header>
<x-core v-if="src == 'home'" ref="tl" key="home" src="home"/>
<x-core v-if="src == 'local'" ref="tl" key="local" src="local"/>
<x-core v-if="src == 'global'" ref="tl" key="global" src="global"/>
<mk-user-list-timeline v-if="src == 'list'" ref="tl" key="list" :list="list"/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import XCore from './timeline.core.vue';
import MkUserListsWindow from './user-lists-window.vue';
export default Vue.extend({
components: {
@ -22,42 +26,29 @@ export default Vue.extend({
data() {
return {
src: 'home'
src: 'home',
list: null
};
},
mounted() {
document.addEventListener('keydown', this.onKeydown);
window.addEventListener('scroll', this.onScroll);
(this.$refs.tl as any).$once('loaded', () => {
this.$emit('loaded');
});
},
beforeDestroy() {
document.removeEventListener('keydown', this.onKeydown);
window.removeEventListener('scroll', this.onScroll);
},
methods: {
onScroll() {
if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 8) (this.$refs.tl as any).more();
}
},
onKeydown(e) {
if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
if (e.which == 84) { // t
(this.$refs.tl as any).focus();
}
}
},
warp(date) {
(this.$refs.tl as any).warp(date);
},
chooseList() {
const w = (this as any).os.new(MkUserListsWindow);
w.$once('choosen', list => {
this.list = list;
this.src = 'list';
w.close();
});
}
}
});
@ -78,6 +69,23 @@ root(isDark)
border-radius 6px 6px 0 0
box-shadow 0 1px rgba(0, 0, 0, 0.08)
> button
position absolute
z-index 2
top 0
right 0
padding 0
width 42px
font-size 0.9em
line-height 42px
color isDark ? #9baec8 : #ccc
&:hover
color isDark ? #b2c1d5 : #aaa
&:active
color isDark ? #b2c1d5 : #999
> span
display inline-block
padding 0 10px
@ -85,7 +93,7 @@ root(isDark)
font-size 12px
user-select none
&[data-is-active]
&[data-active]
color $theme-color
cursor default
font-weight bold
@ -100,7 +108,7 @@ root(isDark)
height 2px
background $theme-color
&:not([data-is-active])
&:not([data-active])
color isDark ? #9aa2a7 : #6f7477
cursor pointer

View File

@ -13,6 +13,12 @@
<li @click="drive">
<p>%fa:cloud%<span>%i18n:@drive%</span>%fa:angle-right%</p>
</li>
<li>
<router-link to="/i/favorites">%fa:star%<span>%i18n:@favorites%</span>%fa:angle-right%</router-link>
</li>
<li @click="list">
<p>%fa:list%<span>%i18n:@lists%</span>%fa:angle-right%</p>
</li>
</ul>
<ul>
<li>
@ -24,7 +30,7 @@
</ul>
<ul>
<li @click="signout">
<p>%fa:power-off%<span>%i18n:@signout%</span></p>
<p class="signout">%fa:power-off%<span>%i18n:@signout%</span></p>
</li>
</ul>
<ul>
@ -39,6 +45,7 @@
<script lang="ts">
import Vue from 'vue';
import MkUserListsWindow from './user-lists-window.vue';
import MkSettingsWindow from './settings-window.vue';
import MkDriveWindow from './drive-window.vue';
import contains from '../../../common/scripts/contains';
@ -77,6 +84,13 @@ export default Vue.extend({
this.close();
(this as any).os.new(MkDriveWindow);
},
list() {
this.close();
const w = (this as any).os.new(MkUserListsWindow);
w.$once('choosen', list => {
this.$router.push(`i/lists/${ list.id }`);
});
},
settings() {
this.close();
(this as any).os.new(MkSettingsWindow);
@ -85,10 +99,7 @@ export default Vue.extend({
(this as any).os.signout();
},
dark() {
(this as any).api('i/update_client_setting', {
name: 'dark',
value: !(this as any)._darkmode_
});
(this as any)._updateDarkmode_(!(this as any)._darkmode_);
}
}
});
@ -209,7 +220,7 @@ root(isDark)
pointer-events none
> span:first-child
padding-left 16px
padding-left 22px
> [data-fa]:first-child
margin-right 6px
@ -233,6 +244,16 @@ root(isDark)
&:active
background darken($theme-color, 10%)
&.signout
$color = #e64137
&:hover, &:active
background $color
color #fff
&:active
background darken($color, 10%)
.zoom-in-top-enter-active,
.zoom-in-top-leave-active {
transform-origin: center -16px;

View File

@ -43,6 +43,8 @@ export default Vue.extend({
XClock,
},
mounted() {
this.$store.commit('setUiHeaderHeight', 48);
if ((this as any).os.isSignedIn) {
const ago = (new Date().getTime() - new Date((this as any).os.i.lastUsedAt).getTime()) / 1000
const isHisasiburi = ago >= 3600;

View File

@ -0,0 +1,93 @@
<template>
<div>
<mk-notes ref="timeline" :more="existMore ? more : null"/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { UserListStream } from '../../../common/scripts/streaming/user-list';
const fetchLimit = 10;
export default Vue.extend({
props: ['list'],
data() {
return {
fetching: true,
moreFetching: false,
existMore: false,
connection: null
};
},
watch: {
$route: 'init'
},
mounted() {
this.init();
},
beforeDestroy() {
this.connection.close();
},
methods: {
init() {
if (this.connection) this.connection.close();
this.connection = new UserListStream((this as any).os, (this as any).os.i, this.list.id);
this.connection.on('note', this.onNote);
this.connection.on('userAdded', this.onUserAdded);
this.connection.on('userRemoved', this.onUserRemoved);
this.fetch();
},
fetch() {
this.fetching = true;
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
(this as any).api('notes/user-list-timeline', {
listId: this.list.id,
limit: fetchLimit + 1,
includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
this.existMore = true;
}
res(notes);
this.fetching = false;
this.$emit('loaded');
}, rej);
}));
},
more() {
this.moreFetching = true;
(this as any).api('notes/list-timeline', {
listId: this.list.id,
limit: fetchLimit + 1,
untilId: (this.$refs.timeline as any).tail().id,
includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
} else {
this.existMore = false;
}
notes.forEach(n => (this.$refs.timeline as any).append(n));
this.moreFetching = false;
});
},
onNote(note) {
// Prepend a note
(this.$refs.timeline as any).prepend(note);
},
onUserAdded() {
this.fetch();
},
onUserRemoved() {
this.fetch();
}
}
});
</script>

View File

@ -0,0 +1,69 @@
<template>
<mk-window ref="window" is-modal width="450px" height="500px" @closed="$destroy">
<span slot="header">%fa:list% リスト</span>
<div data-id="6e4caea3-d8f9-4ab7-96de-ab67fe8d5c82" :data-darkmode="_darkmode_">
<button class="ui" @click="add">リストを作成</button>
<a v-for="list in lists" :key="list.id" @click="choice(list)">{{ list.title }}</a>
</div>
</mk-window>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
fetching: true,
lists: []
};
},
mounted() {
(this as any).api('users/lists/list').then(lists => {
this.fetching = false;
this.lists = lists;
});
},
methods: {
add() {
(this as any).apis.input({
title: 'リスト名',
}).then(async title => {
const list = await (this as any).api('users/lists/create', {
title
});
this.$emit('choosen', list);
});
},
choice(list) {
this.$emit('choosen', list);
},
close() {
(this as any).$refs.window.close();
}
}
});
</script>
<style lang="stylus" scoped>
root(isDark)
padding 16px
> button
margin-bottom 16px
> a
display block
padding 16px
border solid 1px isDark ? #1c2023 : #eee
border-radius 4px
[data-id="6e4caea3-d8f9-4ab7-96de-ab67fe8d5c82"][data-darkmode]
root(true)
[data-id="6e4caea3-d8f9-4ab7-96de-ab67fe8d5c82"]:not([data-darkmode])
root(false)
</style>

View File

@ -141,7 +141,7 @@ root(isDark)
> .description
padding 0 16px
font-size 0.7em
color #555
color isDark ? #9ea4ad : #555
> .status
padding 8px 16px

View File

@ -2,8 +2,8 @@
<div class="mk-users-list">
<nav>
<div>
<span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて<span>{{ count }}</span></span>
<span v-if="os.isSignedIn && youKnowCount" :data-is-active="mode == 'iknow'" @click="mode = 'iknow'">知り合い<span>{{ youKnowCount }}</span></span>
<span :data-active="mode == 'all'" @click="mode = 'all'">すべて<span>{{ count }}</span></span>
<span v-if="os.isSignedIn && youKnowCount" :data-active="mode == 'iknow'" @click="mode = 'iknow'">知り合い<span>{{ youKnowCount }}</span></span>
</div>
</nav>
<div class="users" v-if="!fetching && users.length != 0">
@ -98,7 +98,7 @@ export default Vue.extend({
*
pointer-events none
&[data-is-active]
&[data-active]
font-weight bold
color $theme-color
border-color $theme-color

View File

@ -58,7 +58,7 @@ root(isDark)
box-shadow 0 1px rgba(0, 0, 0, 0.07)
> [data-fa]
margin-right 4px
margin-right 6px
&:empty
display none

View File

@ -0,0 +1,73 @@
<template>
<mk-ui>
<main v-if="!fetching">
<template v-for="favorite in favorites">
<mk-note-detail :note="favorite.note" :key="favorite.note.id"/>
</template>
<a v-if="existMore" @click="more">さらに読み込む</a>
</main>
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
import Progress from '../../../common/scripts/loading';
export default Vue.extend({
data() {
return {
fetching: true,
favorites: [],
existMore: false,
moreFetching: false
};
},
created() {
this.fetch();
},
methods: {
fetch() {
Progress.start();
this.fetching = true;
(this as any).api('i/favorites', {
limit: 11
}).then(favorites => {
if (favorites.length == 11) {
this.existMore = true;
favorites.pop();
}
this.favorites = favorites;
this.fetching = false;
Progress.done();
});
},
more() {
this.moreFetching = true;
(this as any).api('i/favorites', {
limit: 11,
maxId: this.favorites[this.favorites.length - 1].id
}).then(favorites => {
if (favorites.length == 11) {
this.existMore = true;
favorites.pop();
} else {
this.existMore = false;
}
this.favorites = this.favorites.concat(favorites);
this.moreFetching = false;
});
}
}
});
</script>
<style lang="stylus" scoped>
main
margin 0 auto
padding 16px
max-width 700px
</style>

View File

@ -0,0 +1,131 @@
<template>
<div>
<mk-widget-container>
<template slot="header">%fa:users% ユーザー</template>
<button slot="func" title="ユーザーを追加" @click="add">%fa:plus%</button>
<div data-id="d0b63759-a822-4556-a5ce-373ab966e08a">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw% %i18n:common.loading%<mk-ellipsis/></p>
<template v-else-if="users.length != 0">
<div class="user" v-for="_user in users">
<router-link class="avatar-anchor" :to="_user | userPage">
<img class="avatar" :src="`${_user.avatarUrl}?thumbnail&size=42`" alt="" v-user-preview="_user.id"/>
</router-link>
<div class="body">
<router-link class="name" :to="_user | userPage" v-user-preview="_user.id">{{ _user | userName }}</router-link>
<p class="username">@{{ _user | acct }}</p>
</div>
</div>
</template>
<p class="empty" v-else>%i18n:@no-one%</p>
</div>
</mk-widget-container>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
list: {
type: Object,
required: true
}
},
data() {
return {
fetching: true,
users: []
};
},
mounted() {
(this as any).api('users/show', {
userIds: this.list.userIds
}).then(users => {
this.users = users;
this.fetching = false;
});
},
methods: {
add() {
(this as any).apis.input({
title: 'ユーザー名',
}).then(async username => {
const user = await (this as any).api('users/show', {
username
});
(this as any).api('users/lists/push', {
listId: this.list.id,
userId: user.id
});
});
}
}
});
</script>
<style lang="stylus" scoped>
root(isDark)
> .user
padding 16px
border-bottom solid 1px isDark ? #1c2023 : #eee
&:last-child
border-bottom none
&:after
content ""
display block
clear both
> .avatar-anchor
display block
float left
margin 0 12px 0 0
> .avatar
display block
width 42px
height 42px
margin 0
border-radius 8px
vertical-align bottom
> .body
float left
width calc(100% - 54px)
> .name
margin 0
font-size 16px
line-height 24px
color isDark ? #fff : #555
> .username
display block
margin 0
font-size 15px
line-height 16px
color isDark ? #606984 : #ccc
> .empty
margin 0
padding 16px
text-align center
color #aaa
> .fetching
margin 0
padding 16px
text-align center
color #aaa
[data-id="d0b63759-a822-4556-a5ce-373ab966e08a"][data-darkmode]
root(true)
[data-id="d0b63759-a822-4556-a5ce-373ab966e08a"]:not([data-darkmode])
root(false)
</style>

View File

@ -0,0 +1,71 @@
<template>
<mk-ui>
<div v-if="!fetching" data-id="02010e15-cc48-4245-8636-16078a9b623c">
<div>
<div><h1>{{ list.title }}</h1></div>
<x-users :list="list"/>
</div>
<main>
<mk-user-list-timeline :list="list"/>
</main>
</div>
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
import XUsers from './user-list.users.vue';
export default Vue.extend({
components: {
XUsers
},
data() {
return {
fetching: true,
list: null
};
},
watch: {
$route: 'fetch'
},
mounted() {
this.fetch();
},
methods: {
fetch() {
this.fetching = true;
(this as any).api('users/lists/show', {
listId: this.$route.params.list
}).then(list => {
this.list = list;
this.fetching = false;
});
}
}
});
</script>
<style lang="stylus" scoped>
[data-id="02010e15-cc48-4245-8636-16078a9b623c"]
display flex
justify-content center
margin 0 auto
max-width 1200px
> main
> div > div
> *:not(:last-child)
margin-bottom 16px
> main
padding 16px
width calc(100% - 275px * 2)
> div
width 275px
margin 0
padding 16px 0 16px 16px
</style>

View File

@ -3,15 +3,18 @@
<div class="friend-form" v-if="os.isSignedIn && os.i.id != user.id">
<mk-follow-button :user="user" size="big"/>
<p class="followed" v-if="user.isFollowed">%i18n:@follows-you%</p>
<p class="stalk">
<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk">%i18n:@unstalk%</a></span>
<span v-if="!user.isStalking"><a @click="stalk">%i18n:@stalk%</a></span>
</p>
<p class="mute">
<span v-if="user.isMuted">%i18n:@muted% <a @click="unmute">%i18n:@unmute%</a></span>
<span v-if="!user.isMuted"><a @click="mute">%i18n:@mute%</a></span>
<p class="stalk" v-if="user.isFollowing">
<span v-if="user.isStalking">%i18n:@stalking% <a @click="unstalk">%fa:meh% %i18n:@unstalk%</a></span>
<span v-if="!user.isStalking"><a @click="stalk">%fa:user-secret% %i18n:@stalk%</a></span>
</p>
</div>
<div class="action-form">
<button class="mute ui" @click="user.isMuted ? unmute() : mute()">
<span v-if="user.isMuted">%fa:eye% %i18n:@unmute%</span>
<span v-if="!user.isMuted">%fa:eye-slash% %i18n:@mute%</span>
</button>
<button class="mute ui" @click="list">%fa:list% リストに追加</button>
</div>
<div class="description" v-if="user.description">{{ user.description }}</div>
<div class="birthday" v-if="user.host === null && user.profile.birthday">
<p>%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }})</p>
@ -32,6 +35,7 @@ import Vue from 'vue';
import * as age from 's-age';
import MkFollowingWindow from '../../components/following-window.vue';
import MkFollowersWindow from '../../components/followers-window.vue';
import MkUserListsWindow from '../../components/user-lists-window.vue';
export default Vue.extend({
props: ['user'],
@ -91,6 +95,21 @@ export default Vue.extend({
}, () => {
alert('error');
});
},
list() {
const w = (this as any).os.new(MkUserListsWindow);
w.$once('choosen', async list => {
w.close();
await (this as any).api('users/lists/push', {
listId: list.id,
userId: this.user.id
});
(this as any).apis.dialog({
title: 'Done!',
text: `${this.user.name}${list.title}に追加しました。`
});
});
}
}
});
@ -107,11 +126,9 @@ export default Vue.extend({
> .friend-form
padding 16px
text-align center
border-top solid 1px #eee
> .mk-big-follow-button
width 100%
> .followed
margin 12px 0 0 0
padding 0
@ -122,6 +139,20 @@ export default Vue.extend({
background #eefaff
border-radius 4px
> .stalk
margin 12px 0 0 0
> .action-form
padding 16px
text-align center
border-top solid 1px #eee
> *
width 100%
&:not(:last-child)
margin-bottom 12px
> .description
padding 16px
color #555

View File

@ -1,42 +1,36 @@
<template>
<div class="timeline">
<header>
<span :data-is-active="mode == 'default'" @click="mode = 'default'">投稿</span>
<span :data-is-active="mode == 'with-replies'" @click="mode = 'with-replies'">投稿と返信</span>
<span :data-is-active="mode == 'with-media'" @click="mode = 'with-media'">メディア</span>
<span :data-active="mode == 'default'" @click="mode = 'default'">投稿</span>
<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'">投稿と返信</span>
<span :data-active="mode == 'with-media'" @click="mode = 'with-media'">メディア</span>
</header>
<div class="loading" v-if="fetching">
<mk-ellipsis-icon/>
</div>
<p class="empty" v-if="empty">%fa:R comments%このユーザーはまだ何も投稿していないようです</p>
<mk-notes ref="timeline" :notes="notes">
<div slot="footer">
<template v-if="!moreFetching">%fa:moon%</template>
<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
</div>
<mk-notes ref="timeline" :more="existMore ? more : null">
<p class="empty" slot="empty">%fa:R comments%このユーザーはまだ何も投稿していないようです</p>
</mk-notes>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
const fetchLimit = 10;
export default Vue.extend({
props: ['user'],
data() {
return {
fetching: true,
moreFetching: false,
existMore: false,
mode: 'default',
unreadCount: 0,
notes: [],
date: null
};
},
computed: {
empty(): boolean {
return this.notes.length == 0;
}
},
watch: {
mode() {
this.fetch();
@ -44,13 +38,11 @@ export default Vue.extend({
},
mounted() {
document.addEventListener('keydown', this.onDocumentKeydown);
window.addEventListener('scroll', this.onScroll);
this.fetch(() => this.$emit('loaded'));
},
beforeDestroy() {
document.removeEventListener('keydown', this.onDocumentKeydown);
window.removeEventListener('scroll', this.onScroll);
},
methods: {
onDocumentKeydown(e) {
@ -61,36 +53,43 @@ export default Vue.extend({
}
},
fetch(cb?) {
(this as any).api('users/notes', {
userId: this.user.id,
untilDate: this.date ? this.date.getTime() : undefined,
includeReplies: this.mode == 'with-replies',
withMedia: this.mode == 'with-media'
}).then(notes => {
this.notes = notes;
this.fetching = false;
if (cb) cb();
});
this.fetching = true;
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
(this as any).api('users/notes', {
userId: this.user.id,
limit: fetchLimit + 1,
untilDate: this.date ? this.date.getTime() : undefined,
includeReplies: this.mode == 'with-replies',
withMedia: this.mode == 'with-media'
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
this.existMore = true;
}
res(notes);
this.fetching = false;
if (cb) cb();
}, rej);
}));
},
more() {
if (this.moreFetching || this.fetching || this.notes.length == 0) return;
this.moreFetching = true;
(this as any).api('users/notes', {
userId: this.user.id,
limit: fetchLimit + 1,
includeReplies: this.mode == 'with-replies',
withMedia: this.mode == 'with-media',
untilId: this.notes[this.notes.length - 1].id
untilId: (this.$refs.timeline as any).tail().id
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
} else {
this.existMore = false;
}
notes.forEach(n => (this.$refs.timeline as any).append(n));
this.moreFetching = false;
this.notes = this.notes.concat(notes);
});
},
onScroll() {
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 16/*遊び*/) {
this.more();
}
},
warp(date) {
this.date = date;
this.fetch();
@ -115,7 +114,7 @@ export default Vue.extend({
font-size 18px
color #555
&:not([data-is-active])
&:not([data-active])
color $theme-color
cursor pointer

View File

@ -2,6 +2,7 @@
<div class="mkw-messaging">
<mk-widget-container :show-header="props.design == 0">
<template slot="header">%fa:comments%%i18n:@title%</template>
<button slot="func" @click="add">%fa:plus%</button>
<mk-messaging ref="index" compact @navigate="navigate"/>
</mk-widget-container>
@ -11,6 +12,7 @@
<script lang="ts">
import define from '../../../common/define-widget';
import MkMessagingRoomWindow from '../components/messaging-room-window.vue';
import MkMessagingWindow from '../components/messaging-window.vue';
export default define({
name: 'messaging',
@ -24,6 +26,9 @@ export default define({
user: user
});
},
add() {
(this as any).os.new(MkMessagingWindow);
},
func() {
if (this.props.design == 1) {
this.props.design = 0;
@ -37,7 +42,7 @@ export default define({
<style lang="stylus" scoped>
.mkw-messaging
> .mk-messaging
.mk-messaging
max-height 250px
overflow auto

View File

@ -67,7 +67,7 @@ root(isDark)
> .poll
padding 16px
font-size 12px
color #555
color isDark ? #9ea4ad : #555
> p
margin 0 0 8px 0

View File

@ -91,7 +91,7 @@ root(isDark)
> .banner
height 100px
background-color #f5f5f5
background-color isDark ? #303e4a : #f5f5f5
background-size cover
background-position center
cursor pointer

View File

@ -3,6 +3,7 @@
*/
import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import VModal from 'vue-js-modal';
import * as TreeView from 'vue-json-tree-view';
@ -23,6 +24,7 @@ switch (lang) {
default: elementLocale = ElementLocaleEn; break;
}
Vue.use(Vuex);
Vue.use(VueRouter);
Vue.use(VModal);
Vue.use(TreeView);
@ -39,6 +41,17 @@ require('./common/views/widgets');
// Register global filters
require('./common/views/filters');
const store = new Vuex.Store({
state: {
uiHeaderHeight: 0
},
mutations: {
setUiHeaderHeight(state, height) {
state.uiHeaderHeight = height;
}
}
});
Vue.mixin({
destroyed(this: any) {
if (this.$el.parentNode) {
@ -48,39 +61,44 @@ Vue.mixin({
});
// Dark/Light
const bus = new Vue();
Vue.mixin({
data() {
return {
_darkmode_: false
_darkmode_: localStorage.getItem('darkmode') == 'true'
};
},
beforeCreate() {
// なぜか警告が出るため
this._darkmode_ = false;
// なぜか警告が出るので
this._darkmode_ = localStorage.getItem('darkmode') == 'true';
},
beforeDestroy() {
bus.$off('updated', this._onDarkmodeUpdated_);
},
mounted() {
const set = () => {
if (!this.$el || !this.$el.setAttribute || !this.os || !this.os.i) return;
if (this.os.i.clientSettings.dark) {
this._onDarkmodeUpdated_(this._darkmode_);
bus.$on('updated', this._onDarkmodeUpdated_);
},
methods: {
_updateDarkmode_(v) {
localStorage.setItem('darkmode', v.toString());
if (v) {
document.documentElement.setAttribute('data-darkmode', 'true');
this.$el.setAttribute('data-darkmode', 'true');
this._darkmode_ = true;
this.$forceUpdate();
} else {
document.documentElement.removeAttribute('data-darkmode');
this.$el.removeAttribute('data-darkmode');
this._darkmode_ = false;
this.$forceUpdate();
}
};
set();
this.$watch('os.i.clientSettings', i => {
set();
}, {
deep: true
});
bus.$emit('updated', v);
},
_onDarkmodeUpdated_(v) {
if (!this.$el || !this.$el.setAttribute) return;
if (v) {
this.$el.setAttribute('data-darkmode', 'true');
} else {
this.$el.removeAttribute('data-darkmode');
}
this._darkmode_ = v;
this.$forceUpdate();
}
}
});
@ -145,6 +163,7 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
});
const app = new Vue({
store,
router,
created() {
this.$watch('os.i', i => {

View File

@ -1,7 +1,6 @@
import Vue from 'vue';
import ui from './ui.vue';
import timeline from './timeline.vue';
import note from './note.vue';
import notes from './notes.vue';
import mediaImage from './media-image.vue';
@ -20,11 +19,11 @@ import notificationPreview from './notification-preview.vue';
import usersList from './users-list.vue';
import userPreview from './user-preview.vue';
import userTimeline from './user-timeline.vue';
import userListTimeline from './user-list-timeline.vue';
import activity from './activity.vue';
import widgetContainer from './widget-container.vue';
Vue.component('mk-ui', ui);
Vue.component('mk-timeline', timeline);
Vue.component('mk-note', note);
Vue.component('mk-notes', notes);
Vue.component('mk-media-image', mediaImage);
@ -43,5 +42,6 @@ Vue.component('mk-notification-preview', notificationPreview);
Vue.component('mk-users-list', usersList);
Vue.component('mk-user-preview', userPreview);
Vue.component('mk-user-timeline', userTimeline);
Vue.component('mk-user-list-timeline', userListTimeline);
Vue.component('mk-activity', activity);
Vue.component('mk-widget-container', widgetContainer);

View File

@ -4,15 +4,13 @@
<x-sub :note="p.reply"/>
</div>
<div class="renote" v-if="isRenote">
<p>
<router-link class="avatar-anchor" :to="note.user | userPage">
<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link>
%fa:retweet%
<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
</p>
<router-link class="avatar-anchor" :to="note.user | userPage">
<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
</router-link>
%fa:retweet%
<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
<mk-time :time="note.createdAt"/>
</div>
<article>
@ -33,27 +31,33 @@
</header>
<div class="body">
<p class="channel" v-if="p.channel != null"><a target="_blank">{{ p.channel.title }}</a>:</p>
<div class="text">
<a class="reply" v-if="p.reply">
%fa:reply%
</a>
<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
<a class="rp" v-if="p.renote != null">RP:</a>
<p v-if="p.cw != null" class="cw">
<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
<span class="toggle" @click="showContent = !showContent">{{ showContent ? '隠す' : 'もっと見る' }}</span>
</p>
<div class="content" v-show="p.cw == null || showContent">
<div class="text">
<a class="reply" v-if="p.reply">
%fa:reply%
</a>
<mk-note-html v-if="p.text" :text="p.text" :i="os.i" :class="$style.text"/>
<a class="rp" v-if="p.renote != null">RP:</a>
</div>
<div class="media" v-if="p.media.length > 0">
<mk-media-list :media-list="p.media"/>
</div>
<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
<div class="tags" v-if="p.tags && p.tags.length > 0">
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
</div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
<div class="map" v-if="p.geo" ref="map"></div>
<div class="renote" v-if="p.renote">
<mk-note-preview :note="p.renote"/>
</div>
</div>
<div class="media" v-if="p.media.length > 0">
<mk-media-list :media-list="p.media"/>
</div>
<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
<div class="tags" v-if="p.tags && p.tags.length > 0">
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
</div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
<div class="map" v-if="p.geo" ref="map"></div>
<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
<div class="renote" v-if="p.renote">
<mk-note-preview :note="p.renote"/>
</div>
</div>
<footer>
<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
@ -94,6 +98,7 @@ export default Vue.extend({
data() {
return {
showContent: false,
connection: null,
connectionId: null
};
@ -231,7 +236,7 @@ export default Vue.extend({
<style lang="stylus" scoped>
@import '~const.styl'
.note
root(isDark)
font-size 12px
border-bottom solid 1px #eaeaea
@ -251,42 +256,47 @@ export default Vue.extend({
font-size 16px
> .renote
display flex
align-items baseline
padding 8px 16px
line-height 28px
color #9dbb00
background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
> p
margin 0
padding 8px 16px
line-height 28px
@media (min-width 500px)
padding 16px
@media (min-width 500px)
padding 16px
.avatar-anchor
display inline-block
.avatar-anchor
display inline-block
.avatar
vertical-align bottom
width 28px
height 28px
margin 0 8px 0 0
border-radius 6px
.avatar
vertical-align bottom
width 28px
height 28px
margin 0 8px 0 0
border-radius 6px
[data-fa]
margin-right 4px
[data-fa]
margin-right 4px
> span
flex-shrink 0
.name
font-weight bold
&:last-of-type
margin-right 8px
.name
overflow hidden
flex-shrink 1
text-overflow ellipsis
white-space nowrap
font-weight bold
> .mk-time
position absolute
top 8px
right 16px
display block
margin-left auto
flex-shrink 0
font-size 0.9em
line-height 28px
@media (min-width 500px)
top 16px
& + article
padding-top 8px
@ -368,6 +378,8 @@ export default Vue.extend({
> .username
margin 0 0.5em 0 0
overflow hidden
text-overflow ellipsis
color #ccc
> .info
@ -383,113 +395,140 @@ export default Vue.extend({
> .body
> .text
> .cw
cursor default
display block
margin 0
padding 0
overflow-wrap break-word
font-size 1.1em
color #717171
color isDark ? #fff : #717171
>>> .title
display block
margin-bottom 4px
padding 4px
font-size 90%
text-align center
background #eef1f3
border-radius 4px
>>> .code
margin 8px 0
>>> .quote
margin 8px
padding 6px 12px
color #aaa
border-left solid 3px #eee
> .reply
> .text
margin-right 8px
> .toggle
display inline-block
padding 4px 8px
font-size 0.7em
color isDark ? #393f4f : #fff
background isDark ? #687390 : #b1b9c1
border-radius 2px
cursor pointer
user-select none
&:hover
background isDark ? #707b97 : #bbc4ce
> .content
> .text
display block
margin 0
padding 0
overflow-wrap break-word
font-size 1.1em
color #717171
> .rp
margin-left 4px
font-style oblique
color #a0bf46
[data-is-me]:after
content "you"
padding 0 4px
margin-left 4px
font-size 80%
color $theme-color-foreground
background $theme-color
border-radius 4px
.mk-url-preview
margin-top 8px
> .channel
margin 0
> .tags
margin 4px 0 0 0
> *
display inline-block
margin 0 8px 0 0
padding 2px 8px 2px 16px
font-size 90%
color #8d969e
background #edf0f3
border-radius 4px
&:before
content ""
>>> .title
display block
position absolute
top 0
bottom 0
left 4px
width 8px
height 8px
margin auto 0
background #fff
border-radius 100%
margin-bottom 4px
padding 4px
font-size 90%
text-align center
background #eef1f3
border-radius 4px
> .media
> img
display block
max-width 100%
>>> .code
margin 8px 0
> .location
margin 4px 0
font-size 12px
color #ccc
>>> .quote
margin 8px
padding 6px 12px
color #aaa
border-left solid 3px #eee
> .map
width 100%
height 200px
> .reply
margin-right 8px
color #717171
&:empty
display none
> .rp
margin-left 4px
font-style oblique
color #a0bf46
[data-is-me]:after
content "you"
padding 0 4px
margin-left 4px
font-size 80%
color $theme-color-foreground
background $theme-color
border-radius 4px
.mk-url-preview
margin-top 8px
> .channel
margin 0
> .tags
margin 4px 0 0 0
> *
display inline-block
margin 0 8px 0 0
padding 2px 8px 2px 16px
font-size 90%
color #8d969e
background #edf0f3
border-radius 4px
&:before
content ""
display block
position absolute
top 0
bottom 0
left 4px
width 8px
height 8px
margin auto 0
background #fff
border-radius 100%
> .media
> img
display block
max-width 100%
> .location
margin 4px 0
font-size 12px
color #ccc
> .map
width 100%
height 200px
&:empty
display none
> .mk-poll
font-size 80%
> .renote
margin 8px 0
> .mk-note-preview
padding 16px
border dashed 1px #c0dac6
border-radius 8px
> .app
font-size 12px
color #ccc
> .mk-poll
font-size 80%
> .renote
margin 8px 0
> .mk-note-preview
padding 16px
border dashed 1px #c0dac6
border-radius 8px
> footer
> button
margin 0
@ -519,6 +558,12 @@ export default Vue.extend({
@media (max-width 350px)
display none
.note[data-darkmode]
root(true)
.note:not([data-darkmode])
root(false)
</style>
<style lang="stylus" module>

View File

@ -1,30 +1,64 @@
<template>
<div class="mk-notes">
<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
<slot name="head"></slot>
<slot></slot>
<template v-for="(note, i) in _notes">
<mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
<p class="date" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
<span>%fa:angle-up%{{ note._datetext }}</span>
<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
</p>
</template>
<footer>
<slot name="tail"></slot>
<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
<div class="init" v-if="fetching">
%fa:spinner .pulse%%i18n:common.loading%
</div>
<div v-if="!fetching && requestInitPromise != null">
<p>読み込みに失敗しました</p>
<button @click="resolveInitPromise">リトライ</button>
</div>
<transition-group name="mk-notes" class="transition">
<template v-for="(note, i) in _notes">
<mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
<span>%fa:angle-up%{{ note._datetext }}</span>
<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
</p>
</template>
</transition-group>
<footer v-if="more">
<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
<template v-if="!moreFetching">%i18n:@load-more%</template>
<template v-if="moreFetching">%fa:spinner .pulse .fw%</template>
</button>
</footer>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import getNoteSummary from '../../../../../renderers/get-note-summary';
const displayLimit = 30;
export default Vue.extend({
props: {
notes: {
type: Array,
default: () => []
more: {
type: Function,
required: false
}
},
data() {
return {
requestInitPromise: null as () => Promise<any[]>,
notes: [],
queue: [],
unreadCount: 0,
fetching: true,
moreFetching: false
};
},
computed: {
_notes(): any[] {
return (this.notes as any).map(note => {
@ -36,9 +70,127 @@ export default Vue.extend({
});
}
},
mounted() {
document.addEventListener('visibilitychange', this.onVisibilitychange, false);
window.addEventListener('scroll', this.onScroll);
},
beforeDestroy() {
document.removeEventListener('visibilitychange', this.onVisibilitychange);
window.removeEventListener('scroll', this.onScroll);
},
methods: {
isScrollTop() {
return window.scrollY <= 8;
},
onNoteUpdated(i, note) {
Vue.set((this as any).notes, i, note);
},
init(promiseGenerator: () => Promise<any[]>) {
this.requestInitPromise = promiseGenerator;
this.resolveInitPromise();
},
resolveInitPromise() {
this.queue = [];
this.notes = [];
this.fetching = true;
const promise = this.requestInitPromise();
promise.then(notes => {
this.notes = notes;
this.requestInitPromise = null;
this.fetching = false;
}, e => {
this.fetching = false;
});
},
prepend(note, silent = false) {
//#region 弾く
const isMyNote = note.userId == (this as any).os.i.id;
const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
if ((this as any).os.i.clientSettings.showMyRenotes === false) {
if (isMyNote && isPureRenote) {
return;
}
}
if ((this as any).os.i.clientSettings.showRenotedMyNotes === false) {
if (isPureRenote && (note.renote.userId == (this as any).os.i.id)) {
return;
}
}
//#endregion
// 投稿が自分のものではないかつ、タブが非表示またはスクロール位置が最上部ではないならタイトルで通知
if ((document.hidden || !this.isScrollTop()) && note.userId !== (this as any).os.i.id) {
this.unreadCount++;
document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
}
if (this.isScrollTop()) {
// Prepend the note
this.notes.unshift(note);
// オーバーフローしたら古い投稿は捨てる
if (this.notes.length >= displayLimit) {
this.notes = this.notes.slice(0, displayLimit);
}
} else {
this.queue.unshift(note);
}
},
append(note) {
this.notes.push(note);
},
tail() {
return this.notes[this.notes.length - 1];
},
releaseQueue() {
this.queue.forEach(n => this.prepend(n, true));
this.queue = [];
},
async loadMore() {
if (this.more == null) return;
if (this.moreFetching) return;
this.moreFetching = true;
await this.more();
this.moreFetching = false;
},
clearNotification() {
this.unreadCount = 0;
document.title = 'Misskey';
},
onVisibilitychange() {
if (!document.hidden) {
this.clearNotification();
}
},
onScroll() {
if (this.isScrollTop()) {
this.releaseQueue();
this.clearNotification();
}
if ((this as any).os.i.clientSettings.fetchOnScroll !== false) {
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 8) this.loadMore();
}
}
}
});
@ -52,6 +204,38 @@ export default Vue.extend({
border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
.transition
.mk-notes-enter
.mk-notes-leave-to
opacity 0
transform translateY(-30px)
> *
transition transform .3s ease, opacity .3s ease
> .date
display block
margin 0
line-height 32px
text-align center
font-size 0.9em
color #aaa
background #fdfdfd
border-bottom solid 1px #eaeaea
span
margin 0 16px
[data-fa]
margin-right 8px
> .newer-indicator
position -webkit-sticky
position sticky
z-index 100
height 3px
background $theme-color
> .init
padding 64px 0
text-align center
@ -73,22 +257,6 @@ export default Vue.extend({
font-size 3em
color #ccc
> .date
display block
margin 0
line-height 32px
text-align center
font-size 0.9em
color #aaa
background #fdfdfd
border-bottom solid 1px #eaeaea
span
margin 0 16px
[data-fa]
margin-right 8px
> footer
text-align center
border-top solid 1px #eaeaea

View File

@ -10,6 +10,7 @@
</header>
<div class="form">
<mk-note-preview v-if="reply" :note="reply"/>
<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
<textarea v-model="text" ref="text" :disabled="posting" :placeholder="reply ? '%i18n:!@reply-placeholder%' : '%i18n:!@note-placeholder%'"></textarea>
<div class="attaches" v-show="files.length != 0">
<x-draggable class="files" :list="files" :options="{ animation: 150 }">
@ -24,6 +25,7 @@
<button class="drive" @click="chooseFileFromDrive">%fa:cloud%</button>
<button class="kao" @click="kao">%fa:R smile%</button>
<button class="poll" @click="poll = true">%fa:chart-pie%</button>
<button class="poll" @click="useCw = !useCw">%fa:eye-slash%</button>
<button class="geo" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
<input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/>
</div>
@ -39,7 +41,9 @@ export default Vue.extend({
components: {
XDraggable
},
props: ['reply'],
data() {
return {
posting: false,
@ -47,21 +51,27 @@ export default Vue.extend({
uploadings: [],
files: [],
poll: false,
geo: null
geo: null,
useCw: false,
cw: null
};
},
mounted() {
this.$nextTick(() => {
this.focus();
});
},
methods: {
focus() {
(this.$refs.text as any).focus();
},
chooseFile() {
(this.$refs.file as any).click();
},
chooseFileFromDrive() {
(this as any).apis.chooseDriveFile({
multiple: true
@ -69,23 +79,29 @@ export default Vue.extend({
files.forEach(this.attachMedia);
});
},
attachMedia(driveFile) {
this.files.push(driveFile);
this.$emit('change-attached-media', this.files);
},
detachMedia(file) {
this.files = this.files.filter(x => x.id != file.id);
this.$emit('change-attached-media', this.files);
},
onChangeFile() {
Array.from((this.$refs.file as any).files).forEach(this.upload);
},
upload(file) {
(this.$refs.uploader as any).upload(file);
},
onChangeUploadings(uploads) {
this.$emit('change-uploadings', uploads);
},
setGeo() {
if (navigator.geolocation == null) {
alert('お使いの端末は位置情報に対応していません');
@ -100,15 +116,18 @@ export default Vue.extend({
enableHighAccuracy: true
});
},
removeGeo() {
this.geo = null;
},
clear() {
this.text = '';
this.files = [];
this.poll = false;
this.$emit('change-attached-media');
},
post() {
this.posting = true;
const viaMobile = (this as any).os.i.clientSettings.disableViaMobile !== true;
@ -117,6 +136,7 @@ export default Vue.extend({
mediaIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
replyId: this.reply ? this.reply.id : undefined,
poll: this.poll ? (this.$refs.poll as any).get() : undefined,
cw: this.useCw ? this.cw || '' : undefined,
geo: this.geo ? {
coordinates: [this.geo.longitude, this.geo.latitude],
altitude: this.geo.altitude,
@ -133,10 +153,12 @@ export default Vue.extend({
this.posting = false;
});
},
cancel() {
this.$emit('cancel');
this.$destroy();
},
kao() {
this.text += getKao();
}
@ -236,14 +258,12 @@ export default Vue.extend({
> .file
display none
> input
> textarea
display block
padding 12px
margin 0
width 100%
max-width 100%
min-width 100%
min-height 80px
font-size 16px
color #333
border none
@ -253,6 +273,11 @@ export default Vue.extend({
&:disabled
opacity 0.5
> textarea
max-width 100%
min-width 100%
min-height 80px
> .upload
> .drive
> .kao

View File

@ -1,113 +0,0 @@
<template>
<div class="mk-timeline">
<mk-friends-maker v-if="alone"/>
<mk-notes :notes="notes">
<div class="init" v-if="fetching">
%fa:spinner .pulse%%i18n:common.loading%
</div>
<div class="empty" v-if="!fetching && notes.length == 0">
%fa:R comments%
%i18n:@empty%
</div>
<button v-if="!fetching && existMore" @click="more" :disabled="moreFetching" slot="tail">
<span v-if="!moreFetching">%i18n:@load-more%</span>
<span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span>
</button>
</mk-notes>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
const limit = 10;
export default Vue.extend({
props: {
date: {
type: Date,
required: false,
default: null
}
},
data() {
return {
fetching: true,
moreFetching: false,
notes: [],
existMore: false,
connection: null,
connectionId: null
};
},
computed: {
alone(): boolean {
return (this as any).os.i.followingCount == 0;
}
},
mounted() {
this.connection = (this as any).os.stream.getConnection();
this.connectionId = (this as any).os.stream.use();
this.connection.on('note', this.onNote);
this.connection.on('follow', this.onChangeFollowing);
this.connection.on('unfollow', this.onChangeFollowing);
this.fetch();
},
beforeDestroy() {
this.connection.off('note', this.onNote);
this.connection.off('follow', this.onChangeFollowing);
this.connection.off('unfollow', this.onChangeFollowing);
(this as any).os.stream.dispose(this.connectionId);
},
methods: {
fetch(cb?) {
this.fetching = true;
(this as any).api('notes/timeline', {
limit: limit + 1,
untilDate: this.date ? (this.date as any).getTime() : undefined
}).then(notes => {
if (notes.length == limit + 1) {
notes.pop();
this.existMore = true;
}
this.notes = notes;
this.fetching = false;
this.$emit('loaded');
if (cb) cb();
});
},
more() {
this.moreFetching = true;
(this as any).api('notes/timeline', {
limit: limit + 1,
untilId: this.notes[this.notes.length - 1].id
}).then(notes => {
if (notes.length == limit + 1) {
notes.pop();
this.existMore = true;
} else {
this.existMore = false;
}
this.notes = this.notes.concat(notes);
this.moreFetching = false;
});
},
onNote(note) {
this.notes.unshift(note);
const isTop = window.scrollY > 8;
if (isTop) this.notes.pop();
},
onChangeFollowing() {
this.fetch();
}
}
});
</script>
<style lang="stylus" scoped>
.mk-friends-maker
margin-bottom 8px
</style>

View File

@ -32,6 +32,8 @@ export default Vue.extend({
};
},
mounted() {
this.$store.commit('setUiHeaderHeight', 48);
if ((this as any).os.isSignedIn) {
this.connection = (this as any).os.stream.getConnection();
this.connectionId = (this as any).os.stream.use();
@ -150,6 +152,9 @@ export default Vue.extend({
width 100%
box-shadow 0 1px 0 rgba(#000, 0.075)
&, *
user-select none
> .main
color rgba(#fff, 0.9)

View File

@ -0,0 +1,93 @@
<template>
<div>
<mk-notes ref="timeline" :more="existMore ? more : null"/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { UserListStream } from '../../../common/scripts/streaming/user-list';
const fetchLimit = 10;
export default Vue.extend({
props: ['list'],
data() {
return {
fetching: true,
moreFetching: false,
existMore: false,
connection: null
};
},
watch: {
$route: 'init'
},
mounted() {
this.init();
},
beforeDestroy() {
this.connection.close();
},
methods: {
init() {
if (this.connection) this.connection.close();
this.connection = new UserListStream((this as any).os, (this as any).os.i, this.list.id);
this.connection.on('note', this.onNote);
this.connection.on('userAdded', this.onUserAdded);
this.connection.on('userRemoved', this.onUserRemoved);
this.fetch();
},
fetch() {
this.fetching = true;
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
(this as any).api('notes/user-list-timeline', {
listId: this.list.id,
limit: fetchLimit + 1,
includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
this.existMore = true;
}
res(notes);
this.fetching = false;
this.$emit('loaded');
}, rej);
}));
},
more() {
this.moreFetching = true;
(this as any).api('notes/list-timeline', {
listId: this.list.id,
limit: fetchLimit + 1,
untilId: (this.$refs.timeline as any).tail().id,
includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
} else {
this.existMore = false;
}
notes.forEach(n => (this.$refs.timeline as any).append(n));
this.moreFetching = false;
});
},
onNote(note) {
// Prepend a note
(this.$refs.timeline as any).prepend(note);
},
onUserAdded() {
this.fetch();
},
onUserRemoved() {
this.fetch();
}
}
});
</script>

View File

@ -1,17 +1,10 @@
<template>
<div class="mk-user-timeline">
<mk-notes :notes="notes">
<div class="init" v-if="fetching">
%fa:spinner .pulse%%i18n:common.loading%
</div>
<div class="empty" v-if="!fetching && notes.length == 0">
<mk-notes ref="timeline" :more="existMore ? more : null">
<div slot="empty">
%fa:R comments%
{{ withMedia ? '%i18n:!@no-notes-with-media%' : '%i18n:!@no-notes%' }}
</div>
<button v-if="!fetching && existMore" @click="more" :disabled="moreFetching" slot="tail">
<span v-if="!moreFetching">%i18n:@load-more%</span>
<span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span>
</button>
</mk-notes>
</div>
</template>
@ -19,49 +12,53 @@
<script lang="ts">
import Vue from 'vue';
const limit = 10;
const fetchLimit = 10;
export default Vue.extend({
props: ['user', 'withMedia'],
data() {
return {
fetching: true,
notes: [],
existMore: false,
moreFetching: false
};
},
mounted() {
(this as any).api('users/notes', {
userId: this.user.id,
withMedia: this.withMedia,
limit: limit + 1
}).then(notes => {
if (notes.length == limit + 1) {
notes.pop();
this.existMore = true;
}
this.notes = notes;
this.fetching = false;
this.$emit('loaded');
});
this.fetch();
},
methods: {
fetch() {
this.fetching = true;
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
(this as any).api('users/notes', {
userId: this.user.id,
withMedia: this.withMedia,
limit: fetchLimit + 1
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
this.existMore = true;
}
res(notes);
this.fetching = false;
this.$emit('loaded');
}, rej);
}));
},
more() {
this.moreFetching = true;
(this as any).api('users/notes', {
userId: this.user.id,
withMedia: this.withMedia,
limit: limit + 1,
untilId: this.notes[this.notes.length - 1].id
limit: fetchLimit + 1,
untilId: (this.$refs.timeline as any).tail().id
}).then(notes => {
if (notes.length == limit + 1) {
if (notes.length == fetchLimit + 1) {
notes.pop();
this.existMore = true;
} else {
this.existMore = false;
}
this.notes = this.notes.concat(notes);
notes.forEach(n => (this.$refs.timeline as any).append(n));
this.moreFetching = false;
});
}

View File

@ -1,8 +1,8 @@
<template>
<div class="mk-users-list">
<nav>
<span :data-is-active="mode == 'all'" @click="mode = 'all'">%i18n:@all%<span>{{ count }}</span></span>
<span v-if="os.isSignedIn && youKnowCount" :data-is-active="mode == 'iknow'" @click="mode = 'iknow'">%i18n:@known%<span>{{ youKnowCount }}</span></span>
<span :data-active="mode == 'all'" @click="mode = 'all'">%i18n:@all%<span>{{ count }}</span></span>
<span v-if="os.isSignedIn && youKnowCount" :data-active="mode == 'iknow'" @click="mode = 'iknow'">%i18n:@known%<span>{{ youKnowCount }}</span></span>
</nav>
<div class="users" v-if="!fetching && users.length != 0">
<mk-user-preview v-for="u in users" :user="u" :key="u.id"/>
@ -85,7 +85,7 @@ export default Vue.extend({
color #657786
border-bottom solid 2px transparent
&[data-is-active]
&[data-active]
font-weight bold
color $theme-color
border-color $theme-color

View File

@ -0,0 +1,196 @@
<template>
<mk-ui>
<span slot="header">%fa:home%ダッシュボード</span>
<template slot="func">
<button @click="customizing = !customizing">%fa:cog%</button>
</template>
<main>
<template v-if="customizing">
<header>
<select v-model="widgetAdderSelected">
<option value="profile">プロフィール</option>
<option value="calendar">カレンダー</option>
<option value="activity">アクティビティ</option>
<option value="rss">RSSリーダー</option>
<option value="photo-stream">フォトストリーム</option>
<option value="slideshow">スライドショー</option>
<option value="version">バージョン</option>
<option value="access-log">アクセスログ</option>
<option value="server">サーバー情報</option>
<option value="donation">寄付のお願い</option>
<option value="nav">ナビゲーション</option>
<option value="tips">ヒント</option>
</select>
<button @click="addWidget">追加</button>
<p><a @click="hint">カスタマイズのヒント</a></p>
</header>
<x-draggable
:list="widgets"
:options="{ handle: '.handle', animation: 150 }"
@sort="onWidgetSort"
>
<div v-for="widget in widgets" class="customize-container" :key="widget.id">
<header>
<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
</header>
<div @click="widgetFunc(widget.id)">
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" :is-mobile="true"/>
</div>
</div>
</x-draggable>
</template>
<template v-else>
<component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :is-mobile="true" @chosen="warp"/>
</template>
</main>
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
import * as XDraggable from 'vuedraggable';
import * as uuid from 'uuid';
export default Vue.extend({
components: {
XDraggable
},
data() {
return {
showNav: false,
widgets: [],
customizing: false,
widgetAdderSelected: null
};
},
created() {
if ((this as any).os.i.clientSettings.mobileHome == null) {
Vue.set((this as any).os.i.clientSettings, 'mobileHome', [{
name: 'calendar',
id: 'a', data: {}
}, {
name: 'activity',
id: 'b', data: {}
}, {
name: 'rss',
id: 'c', data: {}
}, {
name: 'photo-stream',
id: 'd', data: {}
}, {
name: 'donation',
id: 'e', data: {}
}, {
name: 'nav',
id: 'f', data: {}
}, {
name: 'version',
id: 'g', data: {}
}]);
this.widgets = (this as any).os.i.clientSettings.mobileHome;
this.saveHome();
} else {
this.widgets = (this as any).os.i.clientSettings.mobileHome;
}
this.$watch('os.i.clientSettings', i => {
this.widgets = (this as any).os.i.clientSettings.mobileHome;
}, {
deep: true
});
},
mounted() {
document.title = 'Misskey';
document.documentElement.style.background = '#313a42';
},
methods: {
onHomeUpdated(data) {
if (data.home) {
(this as any).os.i.clientSettings.mobileHome = data.home;
this.widgets = data.home;
} else {
const w = (this as any).os.i.clientSettings.mobileHome.find(w => w.id == data.id);
if (w != null) {
w.data = data.data;
this.$refs[w.id][0].preventSave = true;
this.$refs[w.id][0].props = w.data;
this.widgets = (this as any).os.i.clientSettings.mobileHome;
}
}
},
hint() {
alert('ウィジェットを追加/削除したり並べ替えたりできます。ウィジェットを移動するには「三」をドラッグします。ウィジェットを削除するには「x」をタップします。いくつかのウィジェットはタップすることで表示を変更できます。');
},
widgetFunc(id) {
const w = this.$refs[id][0];
if (w.func) w.func();
},
onWidgetSort() {
this.saveHome();
},
addWidget() {
const widget = {
name: this.widgetAdderSelected,
id: uuid(),
data: {}
};
this.widgets.unshift(widget);
this.saveHome();
},
removeWidget(widget) {
this.widgets = this.widgets.filter(w => w.id != widget.id);
this.saveHome();
},
saveHome() {
(this as any).os.i.clientSettings.mobileHome = this.widgets;
(this as any).api('i/update_mobile_home', {
home: this.widgets
});
}
}
});
</script>
<style lang="stylus" scoped>
main
margin 0 auto
max-width 500px
@media (min-width 500px)
padding 8px
> header
padding 8px
background #fff
.widget
margin 8px
.customize-container
margin 8px
background #fff
> header
line-height 32px
background #eee
> .handle
padding 0 8px
> .remove
position absolute
top 0
right 0
padding 0 8px
line-height 32px
> div
padding 8px
> *
pointer-events none
</style>

View File

@ -0,0 +1,149 @@
<template>
<div>
<mk-friends-maker v-if="src == 'home' && alone" style="margin-bottom:8px"/>
<mk-notes ref="timeline" :more="existMore ? more : null">
<div slot="empty">
%fa:R comments%
%i18n:@empty%
</div>
</mk-notes>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
const fetchLimit = 10;
export default Vue.extend({
props: {
src: {
type: String,
required: true
}
},
data() {
return {
fetching: true,
moreFetching: false,
existMore: false,
connection: null,
connectionId: null,
unreadCount: 0,
date: null
};
},
computed: {
alone(): boolean {
return (this as any).os.i.followingCount == 0;
},
stream(): any {
return this.src == 'home'
? (this as any).os.stream
: this.src == 'local'
? (this as any).os.streams.localTimelineStream
: (this as any).os.streams.globalTimelineStream;
},
endpoint(): string {
return this.src == 'home'
? 'notes/timeline'
: this.src == 'local'
? 'notes/local-timeline'
: 'notes/global-timeline';
},
canFetchMore(): boolean {
return !this.moreFetching && !this.fetching && this.existMore;
}
},
mounted() {
this.connection = this.stream.getConnection();
this.connectionId = this.stream.use();
this.connection.on('note', this.onNote);
if (this.src == 'home') {
this.connection.on('follow', this.onChangeFollowing);
this.connection.on('unfollow', this.onChangeFollowing);
}
this.fetch();
},
beforeDestroy() {
this.connection.off('note', this.onNote);
if (this.src == 'home') {
this.connection.off('follow', this.onChangeFollowing);
this.connection.off('unfollow', this.onChangeFollowing);
}
this.stream.dispose(this.connectionId);
},
methods: {
fetch() {
this.fetching = true;
(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
(this as any).api(this.endpoint, {
limit: fetchLimit + 1,
untilDate: this.date ? this.date.getTime() : undefined,
includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
this.existMore = true;
}
res(notes);
this.fetching = false;
this.$emit('loaded');
}, rej);
}));
},
more() {
if (!this.canFetchMore) return;
this.moreFetching = true;
(this as any).api(this.endpoint, {
limit: fetchLimit + 1,
untilId: (this.$refs.timeline as any).tail().id,
includeMyRenotes: (this as any).os.i.clientSettings.showMyRenotes,
includeRenotedMyNotes: (this as any).os.i.clientSettings.showRenotedMyNotes
}).then(notes => {
if (notes.length == fetchLimit + 1) {
notes.pop();
} else {
this.existMore = false;
}
notes.forEach(n => (this.$refs.timeline as any).append(n));
this.moreFetching = false;
});
},
onNote(note) {
// Prepend a note
(this.$refs.timeline as any).prepend(note);
},
onChangeFollowing() {
this.fetch();
},
focus() {
(this.$refs.timeline as any).focus();
},
warp(date) {
this.date = date;
this.fetch();
}
}
});
</script>

View File

@ -1,59 +1,42 @@
<template>
<mk-ui>
<span slot="header" @click="showTl = !showTl">
<template v-if="showTl">%fa:home%%i18n:@timeline%</template>
<template v-else>%fa:home%ウィジェット</template>
<span slot="header" @click="showNav = true">
<span>
<span v-if="src == 'home'">%fa:home%ホーム</span>
<span v-if="src == 'local'">%fa:R comments%ローカル</span>
<span v-if="src == 'global'">%fa:globe%グローバル</span>
<span v-if="src.startsWith('list')">%fa:list%{{ list.title }}</span>
</span>
<span style="margin-left:8px">
<template v-if="showTl">%fa:angle-down%</template>
<template v-if="!showNav">%fa:angle-down%</template>
<template v-else>%fa:angle-up%</template>
</span>
</span>
<template slot="func">
<button @click="fn" v-if="showTl">%fa:pencil-alt%</button>
<button @click="customizing = !customizing" v-else>%fa:cog%</button>
<button @click="fn">%fa:pencil-alt%</button>
</template>
<main>
<div class="tl">
<mk-timeline @loaded="onLoaded" v-show="showTl"/>
<div class="nav" v-if="showNav">
<div class="bg" @click="showNav = false"></div>
<div class="body">
<div>
<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% ホーム</span>
<span :data-active="src == 'local'" @click="src = 'local'">%fa:R comments% ローカル</span>
<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% グローバル</span>
<template v-if="lists">
<span v-for="l in lists" :data-active="src == 'list:' + l.id" @click="src = 'list:' + l.id; list = l" :key="l.id">%fa:list% {{ l.title }}</span>
</template>
</div>
</div>
</div>
<div class="widgets" v-show="!showTl">
<template v-if="customizing">
<header>
<select v-model="widgetAdderSelected">
<option value="profile">プロフィール</option>
<option value="calendar">カレンダー</option>
<option value="activity">アクティビティ</option>
<option value="rss">RSSリーダー</option>
<option value="photo-stream">フォトストリーム</option>
<option value="slideshow">スライドショー</option>
<option value="version">バージョン</option>
<option value="access-log">アクセスログ</option>
<option value="server">サーバー情報</option>
<option value="donation">寄付のお願い</option>
<option value="nav">ナビゲーション</option>
<option value="tips">ヒント</option>
</select>
<button @click="addWidget">追加</button>
<p><a @click="hint">カスタマイズのヒント</a></p>
</header>
<x-draggable
:list="widgets"
:options="{ handle: '.handle', animation: 150 }"
@sort="onWidgetSort"
>
<div v-for="widget in widgets" class="customize-container" :key="widget.id">
<header>
<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
</header>
<div @click="widgetFunc(widget.id)">
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" :is-mobile="true"/>
</div>
</div>
</x-draggable>
</template>
<template v-else>
<component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :is-mobile="true" @chosen="warp"/>
</template>
<div class="tl">
<x-tl v-if="src == 'home'" ref="tl" key="home" src="home" @loaded="onLoaded"/>
<x-tl v-if="src == 'local'" ref="tl" key="local" src="local"/>
<x-tl v-if="src == 'global'" ref="tl" key="global" src="global"/>
<mk-user-list-timeline v-if="src.startsWith('list:')" ref="tl" key="list" :list="list"/>
</div>
</main>
</mk-ui>
@ -61,144 +44,53 @@
<script lang="ts">
import Vue from 'vue';
import * as XDraggable from 'vuedraggable';
import * as uuid from 'uuid';
import Progress from '../../../common/scripts/loading';
import getNoteSummary from '../../../../../renderers/get-note-summary';
import XTl from './home.timeline.vue';
export default Vue.extend({
components: {
XDraggable
XTl
},
data() {
return {
connection: null,
connectionId: null,
unreadCount: 0,
showTl: true,
widgets: [],
customizing: false,
widgetAdderSelected: null
src: 'home',
list: null,
lists: null,
showNav: false
};
},
created() {
if ((this as any).os.i.clientSettings.mobileHome == null) {
Vue.set((this as any).os.i.clientSettings, 'mobileHome', [{
name: 'calendar',
id: 'a', data: {}
}, {
name: 'activity',
id: 'b', data: {}
}, {
name: 'rss',
id: 'c', data: {}
}, {
name: 'photo-stream',
id: 'd', data: {}
}, {
name: 'donation',
id: 'e', data: {}
}, {
name: 'nav',
id: 'f', data: {}
}, {
name: 'version',
id: 'g', data: {}
}]);
this.widgets = (this as any).os.i.clientSettings.mobileHome;
this.saveHome();
} else {
this.widgets = (this as any).os.i.clientSettings.mobileHome;
}
this.$watch('os.i.clientSettings', i => {
this.widgets = (this as any).os.i.clientSettings.mobileHome;
}, {
deep: true
});
watch: {
src() {
this.showNav = false;
},
showNav(v) {
if (v && this.lists === null) {
(this as any).api('users/lists/list').then(lists => {
this.lists = lists;
});
}
}
},
mounted() {
document.title = 'Misskey';
document.documentElement.style.background = '#313a42';
this.connection = (this as any).os.stream.getConnection();
this.connectionId = (this as any).os.stream.use();
this.connection.on('note', this.onStreamNote);
this.connection.on('mobile_home_updated', this.onHomeUpdated);
document.addEventListener('visibilitychange', this.onVisibilitychange, false);
Progress.start();
},
beforeDestroy() {
this.connection.off('note', this.onStreamNote);
this.connection.off('mobile_home_updated', this.onHomeUpdated);
(this as any).os.stream.dispose(this.connectionId);
document.removeEventListener('visibilitychange', this.onVisibilitychange);
},
methods: {
fn() {
(this as any).apis.post();
},
onLoaded() {
Progress.done();
},
onStreamNote(note) {
if (document.hidden && note.userId !== (this as any).os.i.id) {
this.unreadCount++;
document.title = `(${this.unreadCount}) ${getNoteSummary(note)}`;
}
},
onVisibilitychange() {
if (!document.hidden) {
this.unreadCount = 0;
document.title = 'Misskey';
}
},
onHomeUpdated(data) {
if (data.home) {
(this as any).os.i.clientSettings.mobileHome = data.home;
this.widgets = data.home;
} else {
const w = (this as any).os.i.clientSettings.mobileHome.find(w => w.id == data.id);
if (w != null) {
w.data = data.data;
this.$refs[w.id][0].preventSave = true;
this.$refs[w.id][0].props = w.data;
this.widgets = (this as any).os.i.clientSettings.mobileHome;
}
}
},
hint() {
alert('ウィジェットを追加/削除したり並べ替えたりできます。ウィジェットを移動するには「三」をドラッグします。ウィジェットを削除するには「x」をタップします。いくつかのウィジェットはタップすることで表示を変更できます。');
},
widgetFunc(id) {
const w = this.$refs[id][0];
if (w.func) w.func();
},
onWidgetSort() {
this.saveHome();
},
addWidget() {
const widget = {
name: this.widgetAdderSelected,
id: uuid(),
data: {}
};
this.widgets.unshift(widget);
this.saveHome();
},
removeWidget(widget) {
this.widgets = this.widgets.filter(w => w.id != widget.id);
this.saveHome();
},
saveHome() {
(this as any).os.i.clientSettings.mobileHome = this.widgets;
(this as any).api('i/update_mobile_home', {
home: this.widgets
});
},
warp() {
}
@ -207,53 +99,75 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
@import '~const.styl'
main
> .nav
> .bg
position fixed
z-index 10000
top 0
left 0
width 100%
height 100%
background rgba(#000, 0.5)
> .tl
> .mk-timeline
max-width 600px
> .body
position fixed
z-index 10001
top 56px
left 0
right 0
width 300px
margin 0 auto
padding 8px
@media (min-width 500px)
padding 16px
> .widgets
margin 0 auto
max-width 500px
@media (min-width 500px)
padding 8px
> header
padding 8px
background #fff
border-radius 8px
box-shadow 0 0 16px rgba(0, 0, 0, 0.1)
.widget
margin 8px
$balloon-size = 16px
.customize-container
margin 8px
background #fff
&:before
content ""
display block
position absolute
top -($balloon-size * 2)
left s('calc(50% - %s)', $balloon-size)
border-top solid $balloon-size transparent
border-left solid $balloon-size transparent
border-right solid $balloon-size transparent
border-bottom solid $balloon-size $border-color
> header
line-height 32px
background #eee
> .handle
padding 0 8px
> .remove
position absolute
top 0
right 0
padding 0 8px
line-height 32px
&:after
content ""
display block
position absolute
top -($balloon-size * 2) + 1.5px
left s('calc(50% - %s)', $balloon-size)
border-top solid $balloon-size transparent
border-left solid $balloon-size transparent
border-right solid $balloon-size transparent
border-bottom solid $balloon-size #fff
> div
padding 8px
padding 8px 0
> *
pointer-events none
display block
padding 8px 16px
&[data-active]
color $theme-color-foreground
background $theme-color
&:not([data-active]):hover
background #eee
> .tl
max-width 600px
margin 0 auto
padding 8px
@media (min-width 500px)
padding 16px
</style>

View File

@ -45,9 +45,9 @@
</header>
<nav>
<div class="nav-container">
<a :data-is-active="page == 'home'" @click="page = 'home'">%i18n:@overview%</a>
<a :data-is-active="page == 'notes'" @click="page = 'notes'">%i18n:@timeline%</a>
<a :data-is-active="page == 'media'" @click="page = 'media'">%i18n:@media%</a>
<a :data-active="page == 'home'" @click="page = 'home'">%i18n:@overview%</a>
<a :data-active="page == 'notes'" @click="page = 'notes'">%i18n:@timeline%</a>
<a :data-active="page == 'media'" @click="page = 'media'">%i18n:@media%</a>
</div>
</nav>
<div class="body">
@ -256,7 +256,7 @@ main
color #657786
border-bottom solid 2px transparent
&[data-is-active]
&[data-active]
font-weight bold
color $theme-color
border-color $theme-color

View File

@ -29,12 +29,6 @@ props:
desc:
ja: "投稿の本文 (ローカルの場合Markdown風のフォーマット)"
en: "The text of this note (in Markdown like format if local)"
- name: "textHtml"
type: "string"
optional: true
desc:
ja: "投稿の本文 (HTML) (投稿時は無視)"
en: "The text of this note (in HTML. Ignored when posting.)"
- name: "mediaIds"
type: "id(DriveFile)[]"
optional: true

View File

@ -29,12 +29,6 @@ props:
desc:
ja: "投稿の本文 (ローカルの場合Markdown風のフォーマット)"
en: "The text of this note (in Markdown like format if local)"
- name: "textHtml"
type: "string"
optional: true
desc:
ja: "投稿の本文 (HTML) (投稿時は無視)"
en: "The text of this note (in HTML. Ignored when posting.)"
- name: "mediaIds"
type: "id(DriveFile)[]"
optional: true

View File

@ -1,7 +1,10 @@
import * as mongo from 'mongodb';
import deepcopy = require('deepcopy');
import db from '../db/mongodb';
import { pack as packNote } from './note';
const Favorite = db.get<IFavorite>('favorites');
Favorite.createIndex(['userId', 'noteId'], { unique: true });
export default Favorite;
export type IFavorite = {
@ -37,3 +40,35 @@ export async function deleteFavorite(favorite: string | mongo.ObjectID | IFavori
_id: f._id
});
}
/**
* Pack a favorite for API response
*/
export const pack = (
favorite: any,
me: any
) => new Promise<any>(async (resolve, reject) => {
let _favorite: any;
// Populate the favorite if 'favorite' is ID
if (mongo.ObjectID.prototype.isPrototypeOf(favorite)) {
_favorite = await Favorite.findOne({
_id: favorite
});
} else if (typeof favorite === 'string') {
_favorite = await Favorite.findOne({
_id: new mongo.ObjectID(favorite)
});
} else {
_favorite = deepcopy(favorite);
}
// Rename _id to id
_favorite.id = _favorite._id;
delete _favorite._id;
// Populate note
_favorite.note = await packNote(_favorite.noteId, me);
resolve(_favorite);
});

View File

@ -12,7 +12,6 @@ export interface IMessagingMessage {
_id: mongo.ObjectID;
createdAt: Date;
text: string;
textHtml: string;
userId: mongo.ObjectID;
recipientId: mongo.ObjectID;
isRead: boolean;

View File

@ -1,4 +1,5 @@
import * as mongo from 'mongodb';
import $ from 'cafy'; import ID from '../../../../cafy-id';
import deepcopy = require('deepcopy');
import db from '../db/mongodb';
import Reaction from './note-reaction';
@ -16,6 +17,18 @@ export interface INoteReaction {
reaction: string;
}
export const validateReaction = $().string().or([
'like',
'love',
'laugh',
'hmm',
'surprise',
'congrats',
'angry',
'confused',
'pudding'
]);
/**
* NoteReactionを物理削除します
*/

View File

@ -24,7 +24,7 @@ export function isValidText(text: string): boolean {
}
export function isValidCw(text: string): boolean {
return text.length <= 100 && text.trim() != '';
return text.length <= 100;
}
export type INote = {
@ -38,7 +38,6 @@ export type INote = {
poll: any; // todo
text: string;
tags: string[];
textHtml: string;
cw: string;
userId: mongo.ObjectID;
appId: mongo.ObjectID;

View File

@ -38,4 +38,3 @@ export async function deleteSwSubscription(swSubscription: string | mongo.Object
_id: s._id
});
}

67
src/models/user-list.ts Normal file
View File

@ -0,0 +1,67 @@
import * as mongo from 'mongodb';
import deepcopy = require('deepcopy');
import db from '../db/mongodb';
const UserList = db.get<IUserList>('userList');
export default UserList;
export interface IUserList {
_id: mongo.ObjectID;
createdAt: Date;
title: string;
userId: mongo.ObjectID;
userIds: mongo.ObjectID[];
}
/**
* UserListを物理削除します
*/
export async function deleteUserList(userList: string | mongo.ObjectID | IUserList) {
let u: IUserList;
// Populate
if (mongo.ObjectID.prototype.isPrototypeOf(userList)) {
u = await UserList.findOne({
_id: userList
});
} else if (typeof userList === 'string') {
u = await UserList.findOne({
_id: new mongo.ObjectID(userList)
});
} else {
u = userList as IUserList;
}
if (u == null) return;
// このUserListを削除
await UserList.remove({
_id: u._id
});
}
export const pack = (
userList: string | mongo.ObjectID | IUserList
) => new Promise<any>(async (resolve, reject) => {
let _userList: any;
if (mongo.ObjectID.prototype.isPrototypeOf(userList)) {
_userList = await UserList.findOne({
_id: userList
});
} else if (typeof userList === 'string') {
_userList = await UserList.findOne({
_id: new mongo.ObjectID(userList)
});
} else {
_userList = deepcopy(userList);
}
if (!_userList) throw `invalid userList arg ${userList}`;
// Rename _id to id
_userList.id = _userList._id;
delete _userList._id;
resolve(_userList);
});

View File

@ -1,5 +1,6 @@
import * as mongo from 'mongodb';
import deepcopy = require('deepcopy');
import sequential = require('promise-sequential');
import rap from '@prezzemolo/rap';
import db from '../db/mongodb';
import Note, { pack as packNote, deleteNote } from './note';
@ -20,6 +21,7 @@ import FollowingLog, { deleteFollowingLog } from './following-log';
import FollowedLog, { deleteFollowedLog } from './followed-log';
import SwSubscription, { deleteSwSubscription } from './sw-subscription';
import Notification, { deleteNotification } from './notification';
import UserList, { deleteUserList } from './user-list';
const User = db.get<IUser>('users');
@ -166,9 +168,9 @@ export async function deleteUser(user: string | mongo.ObjectID | IUser) {
).map(x => deleteAccessToken(x)));
// このユーザーのNoteをすべて削除
await Promise.all((
await Note.find({ userId: u._id })
).map(x => deleteNote(x)));
//await sequential((
// await Note.find({ userId: u._id })
//).map(x => () => deleteNote(x)));
// このユーザーのNoteReactionをすべて削除
await Promise.all((
@ -260,6 +262,20 @@ export async function deleteUser(user: string | mongo.ObjectID | IUser) {
await Notification.find({ notifierId: u._id })
).map(x => deleteNotification(x)));
// このユーザーのUserListをすべて削除
await Promise.all((
await UserList.find({ userId: u._id })
).map(x => deleteUserList(x)));
// このユーザーが入っているすべてのUserListからこのユーザーを削除
await Promise.all((
await UserList.find({ userIds: u._id })
).map(x =>
UserList.update({ _id: x._id }, {
$pull: { userIds: u._id }
})
));
// このユーザーを削除
await User.remove({
_id: u._id

View File

@ -25,6 +25,10 @@ class MisskeyEvent {
this.publish(`note-stream:${noteId}`, type, typeof value === 'undefined' ? null : value);
}
public publishUserListStream(listId: ID, type: string, value?: any): void {
this.publish(`user-list-stream:${listId}`, type, typeof value === 'undefined' ? null : value);
}
public publishMessagingStream(userId: ID, otherpartyId: ID, type: string, value?: any): void {
this.publish(`messaging-stream:${userId}-${otherpartyId}`, type, typeof value === 'undefined' ? null : value);
}
@ -69,6 +73,7 @@ export default ev.publishUserStream.bind(ev);
export const publishLocalTimelineStream = ev.publishLocalTimelineStream.bind(ev);
export const publishGlobalTimelineStream = ev.publishGlobalTimelineStream.bind(ev);
export const publishDriveStream = ev.publishDriveStream.bind(ev);
export const publishUserListStream = ev.publishUserListStream.bind(ev);
export const publishNoteStream = ev.publishNoteStream.bind(ev);
export const publishMessagingStream = ev.publishMessagingStream.bind(ev);
export const publishMessagingIndexStream = ev.publishMessagingIndexStream.bind(ev);

View File

@ -14,6 +14,7 @@ const queue = createQueue({
export function createHttp(data) {
return queue
.create('http', data)
.removeOnComplete(true)
.events(false)
.attempts(8)
.backoff({ delay: 16384, type: 'exponential' });
@ -21,11 +22,12 @@ export function createHttp(data) {
export function deliver(user, content, to) {
createHttp({
title: 'deliver',
type: 'deliver',
user,
content,
to
}).removeOnComplete(true).save();
}).save();
}
export default function() {

View File

@ -33,6 +33,11 @@ export default async (job: kue.Job, done): Promise<void> => {
}
user = await User.findOne({ usernameLower: username, host: host.toLowerCase() }) as IRemoteUser;
// アクティビティを送信してきたユーザーがまだMisskeyサーバーに登録されていなかったら登録する
if (user === null) {
user = await resolvePerson(activity.actor);
}
} else {
user = await User.findOne({
host: { $ne: null },

View File

@ -22,7 +22,6 @@ export default async function(actor: IRemoteUser, uri: string): Promise<void> {
$set: {
deletedAt: new Date(),
text: null,
textHtml: null,
mediaIds: [],
poll: null
}

View File

@ -3,6 +3,7 @@ import Note from '../../../models/note';
import { IRemoteUser } from '../../../models/user';
import { ILike } from '../type';
import create from '../../../services/note/reaction/create';
import { validateReaction } from '../../../models/note-reaction';
export default async (actor: IRemoteUser, activity: ILike) => {
const id = typeof activity.object == 'string' ? activity.object : activity.object.id;
@ -17,5 +18,14 @@ export default async (actor: IRemoteUser, activity: ILike) => {
throw new Error();
}
await create(actor, note, 'pudding');
let reaction = 'pudding';
// 他のMisskeyインスタンスからのリアクション
if (activity._misskey_reaction) {
if (validateReaction.ok(activity._misskey_reaction)) {
reaction = activity._misskey_reaction;
}
}
await create(actor, note, reaction);
};

View File

@ -0,0 +1,18 @@
import { INote } from "../../../models/note";
import toHtml from '../../../text/html';
import parse from '../../../text/parse';
import config from '../../../config';
export default function(note: INote) {
if (note.text == null) return null;
let html = toHtml(parse(note.text));
if (note.poll != null) {
const url = `${config.url}/notes/${note._id}`;
// TODO: i18n
html += `<p>【投票】<br />${url}</p>`;
}
return html;
}

View File

@ -1,8 +1,9 @@
import config from '../../../config';
import { ILocalUser } from '../../../models/user';
export default (user: ILocalUser, note) => ({
export default (user: ILocalUser, note, reaction: string) => ({
type: 'Like',
actor: `${config.url}/users/${user._id}`,
object: note.uri ? note.uri : `${config.url}/notes/${note._id}`
object: note.uri ? note.uri : `${config.url}/notes/${note._id}`,
_misskey_reaction: reaction
});

View File

@ -4,6 +4,7 @@ import config from '../../../config';
import DriveFile from '../../../models/drive-file';
import Note, { INote } from '../../../models/note';
import User from '../../../models/user';
import toHtml from '../misc/get-note-html';
export default async function renderNote(note: INote, dive = true) {
const promisedFiles = note.mediaIds
@ -48,7 +49,7 @@ export default async function renderNote(note: INote, dive = true) {
id: `${config.url}/notes/${note._id}`,
type: 'Note',
attributedTo,
content: note.textHtml,
content: toHtml(note),
published: note.createdAt.toISOString(),
to: 'https://www.w3.org/ns/activitystreams#Public',
cc: `${attributedTo}/followers`,

View File

@ -10,6 +10,7 @@ export default user => {
id,
inbox: `${id}/inbox`,
outbox: `${id}/outbox`,
sharedInbox: `${config.url}/inbox`,
url: `${config.url}/@${user.username}`,
preferredUsername: user.username,
name: user.name,

View File

@ -40,5 +40,10 @@ export default (user: ILocalUser, url: string, object) => new Promise((resolve,
keyId: `acct:${user.username}@${config.host}`
});
// Signature: Signature ... => Signature: ...
let sig = req.getHeader('Signature').toString();
sig = sig.replace(/^Signature /, '');
req.setHeader('Signature', sig);
req.end(JSON.stringify(object));
});

View File

@ -82,6 +82,7 @@ export interface IAccept extends IActivity {
export interface ILike extends IActivity {
type: 'Like';
_misskey_reaction: string;
}
export interface IAnnounce extends IActivity {

View File

@ -1,4 +1,5 @@
import * as mongo from 'mongodb';
import * as Koa from 'koa';
import * as Router from 'koa-router';
const json = require('koa-json-body');
const httpSignature = require('http-signature');
@ -19,8 +20,7 @@ const router = new Router();
//#region Routing
// inbox
router.post('/users/:user/inbox', json(), ctx => {
function inbox(ctx: Koa.Context) {
let signature;
ctx.req.headers.authorization = 'Signature ' + ctx.req.headers.signature;
@ -39,7 +39,11 @@ router.post('/users/:user/inbox', json(), ctx => {
}).save();
ctx.status = 202;
});
}
// inbox
router.post('/inbox', json(), inbox);
router.post('/users/:user/inbox', json(), inbox);
// note
router.get('/notes/:note', async (ctx, next) => {

View File

@ -233,6 +233,12 @@ const endpoints: Endpoint[] = [
kind: 'notification-read'
},
{
name: 'i/favorites',
withCredential: true,
kind: 'favorites-read'
},
{
name: 'othello/match',
withCredential: true
@ -408,6 +414,27 @@ const endpoints: Endpoint[] = [
name: 'users/get_frequently_replied_users'
},
{
name: 'users/lists/show',
withCredential: true,
kind: 'account-read'
},
{
name: 'users/lists/create',
withCredential: true,
kind: 'account-write'
},
{
name: 'users/lists/push',
withCredential: true,
kind: 'account-write'
},
{
name: 'users/lists/list',
withCredential: true,
kind: 'account-read'
},
{
name: 'following/create',
withCredential: true,
@ -497,6 +524,14 @@ const endpoints: Endpoint[] = [
max: 100
}
},
{
name: 'notes/user-list-timeline',
withCredential: true,
limit: {
duration: ms('10minutes'),
max: 100
}
},
{
name: 'notes/mentions',
withCredential: true,

View File

@ -6,9 +6,6 @@ import Note from '../../../../models/note';
/**
* Aggregate notes
*
* @param {any} params
* @return {Promise<any>}
*/
module.exports = params => new Promise(async (res, rej) => {
// Get 'limit' parameter

View File

@ -6,9 +6,6 @@ import User from '../../../../models/user';
/**
* Aggregate users
*
* @param {any} params
* @return {Promise<any>}
*/
module.exports = params => new Promise(async (res, rej) => {
// Get 'limit' parameter

View File

@ -1,7 +1,7 @@
/**
* Module dependencies
*/
import $ from 'cafy';
import $ from 'cafy'; import ID from '../../../../../cafy-id';
import User from '../../../../../models/user';
import Note from '../../../../../models/note';
@ -9,9 +9,6 @@ import Note from '../../../../../models/note';
/**
* Aggregate activity of a user
*
* @param {any} params
* @return {Promise<any>}
*/
module.exports = (params) => new Promise(async (res, rej) => {
// Get 'limit' parameter
@ -19,7 +16,7 @@ module.exports = (params) => new Promise(async (res, rej) => {
if (limitErr) return rej('invalid limit param');
// Get 'userId' parameter
const [userId, userIdErr] = $(params.userId).id().$;
const [userId, userIdErr] = $(params.userId).type(ID).$;
if (userIdErr) return rej('invalid userId param');
// Lookup user

View File

@ -1,19 +1,16 @@
/**
* Module dependencies
*/
import $ from 'cafy';
import $ from 'cafy'; import ID from '../../../../../cafy-id';
import User from '../../../../../models/user';
import FollowedLog from '../../../../../models/followed-log';
/**
* Aggregate followers of a user
*
* @param {any} params
* @return {Promise<any>}
*/
module.exports = (params) => new Promise(async (res, rej) => {
// Get 'userId' parameter
const [userId, userIdErr] = $(params.userId).id().$;
const [userId, userIdErr] = $(params.userId).type(ID).$;
if (userIdErr) return rej('invalid userId param');
// Lookup user

View File

@ -1,19 +1,16 @@
/**
* Module dependencies
*/
import $ from 'cafy';
import $ from 'cafy'; import ID from '../../../../../cafy-id';
import User from '../../../../../models/user';
import FollowingLog from '../../../../../models/following-log';
/**
* Aggregate following of a user
*
* @param {any} params
* @return {Promise<any>}
*/
module.exports = (params) => new Promise(async (res, rej) => {
// Get 'userId' parameter
const [userId, userIdErr] = $(params.userId).id().$;
const [userId, userIdErr] = $(params.userId).type(ID).$;
if (userIdErr) return rej('invalid userId param');
// Lookup user

View File

@ -1,19 +1,16 @@
/**
* Module dependencies
*/
import $ from 'cafy';
import $ from 'cafy'; import ID from '../../../../../cafy-id';
import User from '../../../../../models/user';
import Note from '../../../../../models/note';
/**
* Aggregate note of a user
*
* @param {any} params
* @return {Promise<any>}
*/
module.exports = (params) => new Promise(async (res, rej) => {
// Get 'userId' parameter
const [userId, userIdErr] = $(params.userId).id().$;
const [userId, userIdErr] = $(params.userId).type(ID).$;
if (userIdErr) return rej('invalid userId param');
// Lookup user

View File

@ -1,7 +1,7 @@
/**
* Module dependencies
*/
import $ from 'cafy';
import $ from 'cafy'; import ID from '../../../../../cafy-id';
import User from '../../../../../models/user';
import Reaction from '../../../../../models/note-reaction';
@ -13,7 +13,7 @@ import Reaction from '../../../../../models/note-reaction';
*/
module.exports = (params) => new Promise(async (res, rej) => {
// Get 'userId' parameter
const [userId, userIdErr] = $(params.userId).id().$;
const [userId, userIdErr] = $(params.userId).type(ID).$;
if (userIdErr) return rej('invalid userId param');
// Lookup user

View File

@ -79,7 +79,7 @@ module.exports = async (params, user) => new Promise(async (res, rej) => {
if (descriptionErr) return rej('invalid description param');
// Get 'permission' parameter
const [permission, permissionErr] = $(params.permission).array('string').unique().$;
const [permission, permissionErr] = $(params.permission).array($().string()).unique().$;
if (permissionErr) return rej('invalid permission param');
// Get 'callbackUrl' parameter

View File

@ -1,7 +1,7 @@
/**
* Module dependencies
*/
import $ from 'cafy';
import $ from 'cafy'; import ID from '../../../../cafy-id';
import App, { pack } from '../../../../models/app';
/**
@ -41,7 +41,7 @@ module.exports = (params, user, app) => new Promise(async (res, rej) => {
const isSecure = user != null && app == null;
// Get 'appId' parameter
const [appId, appIdErr] = $(params.appId).optional.id().$;
const [appId, appIdErr] = $(params.appId).optional.type(ID).$;
if (appIdErr) return rej('invalid appId param');
// Get 'nameId' parameter

View File

@ -1,7 +1,7 @@
/**
* Module dependencies
*/
import $ from 'cafy';
import $ from 'cafy'; import ID from '../../../cafy-id';
import Channel, { pack } from '../../../models/channel';
/**
@ -17,11 +17,11 @@ module.exports = (params, me) => new Promise(async (res, rej) => {
if (limitErr) return rej('invalid limit param');
// Get 'sinceId' parameter
const [sinceId, sinceIdErr] = $(params.sinceId).optional.id().$;
const [sinceId, sinceIdErr] = $(params.sinceId).optional.type(ID).$;
if (sinceIdErr) return rej('invalid sinceId param');
// Get 'untilId' parameter
const [untilId, untilIdErr] = $(params.untilId).optional.id().$;
const [untilId, untilIdErr] = $(params.untilId).optional.type(ID).$;
if (untilIdErr) return rej('invalid untilId param');
// Check if both of sinceId and untilId is specified

View File

@ -8,10 +8,6 @@ import { pack } from '../../../../models/channel';
/**
* Create a channel
*
* @param {any} params
* @param {any} user
* @return {Promise<any>}
*/
module.exports = async (params, user) => new Promise(async (res, rej) => {
// Get 'title' parameter

View File

@ -1,16 +1,12 @@
/**
* Module dependencies
*/
import $ from 'cafy';
import $ from 'cafy'; import ID from '../../../../cafy-id';
import { default as Channel, IChannel } from '../../../../models/channel';
import Note, { pack } from '../../../../models/note';
/**
* Show a notes of a channel
*
* @param {any} params
* @param {any} user
* @return {Promise<any>}
*/
module.exports = (params, user) => new Promise(async (res, rej) => {
// Get 'limit' parameter
@ -18,11 +14,11 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
if (limitErr) return rej('invalid limit param');
// Get 'sinceId' parameter
const [sinceId, sinceIdErr] = $(params.sinceId).optional.id().$;
const [sinceId, sinceIdErr] = $(params.sinceId).optional.type(ID).$;
if (sinceIdErr) return rej('invalid sinceId param');
// Get 'untilId' parameter
const [untilId, untilIdErr] = $(params.untilId).optional.id().$;
const [untilId, untilIdErr] = $(params.untilId).optional.type(ID).$;
if (untilIdErr) return rej('invalid untilId param');
// Check if both of sinceId and untilId is specified
@ -31,7 +27,7 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
}
// Get 'channelId' parameter
const [channelId, channelIdErr] = $(params.channelId).id().$;
const [channelId, channelIdErr] = $(params.channelId).type(ID).$;
if (channelIdErr) return rej('invalid channelId param');
// Fetch channel

View File

@ -1,19 +1,15 @@
/**
* Module dependencies
*/
import $ from 'cafy';
import $ from 'cafy'; import ID from '../../../../cafy-id';
import Channel, { IChannel, pack } from '../../../../models/channel';
/**
* Show a channel
*
* @param {any} params
* @param {any} user
* @return {Promise<any>}
*/
module.exports = (params, user) => new Promise(async (res, rej) => {
// Get 'channelId' parameter
const [channelId, channelIdErr] = $(params.channelId).id().$;
const [channelId, channelIdErr] = $(params.channelId).type(ID).$;
if (channelIdErr) return rej('invalid channelId param');
// Fetch channel

Some files were not shown because too many files have changed in this diff Show More