Merge branch 'develop'

CHANGELOG.md

@@ -1,6 +1,33 @@
 ChangeLog
 =========
 
+12.24.2 (2020/03/22)
+-------------------
+
+### 🐛Fixes
+* ダークモードの同期を修正
+
+12.24.1 (2020/03/22)
+-------------------
+
+### ✨Improvements
+* SVG形式のアイコンファイルを追加
+
+### 🐛Fixes
+* iOSで起動できない問題を修正
+* 画面が小さいとメニューがすべて見えない問題を修正
+* Pages画面にタイトルがない問題を修正
+
+12.24.0 (2020/03/22)
+-------------------
+
+### ✨Improvements
+* クライアント設定にアカウント設定へのリンクを追加
+* ダークモードの同期を強化
+
+### 🐛Fixes
+* 画面が小さいとメニューがすべて見えない問題を修正
+
 12.23.0 (2020/03/22)
 -------------------
 

assets/icon.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M416,199.998C416,177.908 398.092,160 376.002,160L312.038,160C301.419,160 291.235,164.218 283.727,171.727C276.218,179.235 272,189.419 272,200.038L272,228C272,234.627 277.373,240 284,240L376.002,240C398.092,240 416,222.092 416,200.002L416,199.998Z" style="fill:url(#_Linear1);"/>
+    <g transform="matrix(6.12323e-17,1,-1,6.12323e-17,512,-4.54747e-13)">
+        <path d="M416,199.998C416,177.908 398.092,160 376.002,160L312.038,160C301.419,160 291.235,164.218 283.727,171.727C276.218,179.235 272,189.419 272,200.038L272,228C272,234.627 277.373,240 284,240L376.002,240C398.092,240 416,222.092 416,200.002L416,199.998Z" style="fill:url(#_Linear2);"/>
+    </g>
+    <g transform="matrix(-1,1.22465e-16,-1.22465e-16,-1,512,512)">
+        <path d="M416,199.998C416,177.908 398.092,160 376.002,160L312.038,160C301.419,160 291.235,164.218 283.727,171.727C276.218,179.235 272,189.419 272,200.038L272,228C272,234.627 277.373,240 284,240L376.002,240C398.092,240 416,222.092 416,200.002L416,199.998Z" style="fill:url(#_Linear3);"/>
+    </g>
+    <g transform="matrix(6.12323e-17,-1,1,6.12323e-17,0,512)">
+        <path d="M416,199.998C416,177.908 398.092,160 376.002,160L312.038,160C301.419,160 291.235,164.218 283.727,171.727C276.218,179.235 272,189.419 272,200.038L272,228C272,234.627 277.373,240 284,240L376.002,240C398.092,240 416,222.092 416,200.002L416,199.998Z" style="fill:url(#_Linear4);"/>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(144,0,0,80,272,200)"><stop offset="0" style="stop-color:rgb(198,230,111);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(90,200,113);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(144,0,0,80,272,200)"><stop offset="0" style="stop-color:rgb(97,232,195);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(90,200,113);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(144,0,0,80,272,200)"><stop offset="0" style="stop-color:rgb(198,230,111);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(90,200,113);stop-opacity:1"/></linearGradient>
+        <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(144,0,0,80,272,200)"><stop offset="0" style="stop-color:rgb(98,232,195);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(90,200,113);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>

locales/ja-JP.yml

@@ -466,6 +466,17 @@ details: "詳細"
 chooseEmoji: "絵文字を選択"
 unableToProcess: "操作を完了できません"
 recentUsed: "最近使用"
+install: "インストール"
+uninstall: "アンインストール"
+
+_theme:
+  explore: "テーマを探す"
+  install: "テーマのインストール"
+  manage: "テーマの管理"
+  code: "テーマコード"
+  installed: "{name}をインストールしました"
+  alreadyInstalled: "そのテーマは既にインストールされています"
+  invalid: "テーマの形式が間違っています"
 
 _sfx:
   note: "ノート"

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.24.0",
+	"version": "12.25.0",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

src/client/app.vue

@@ -246,7 +246,10 @@ export default Vue.extend({
 		if (this.isDesktop) this.adjustWidgetsWidth();
 
 		const adjustTitlePosition = () => {
-			this.$refs.title.style.left = (this.$refs.main.getBoundingClientRect().left - this.$refs.nav.offsetWidth) + 'px';
+			const left = this.$refs.main.getBoundingClientRect().left - this.$refs.nav.offsetWidth;
+			if (left >= 0) {
+				this.$refs.title.style.left = left + 'px';
+			}
 		};
 
 		adjustTitlePosition();

src/client/components/error.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mjndxjcg _panel">
-	<img src="https://xn--931a.moe/assets/error.png" class="_ghost"/>
+	<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
 	<p><fa :icon="faExclamationTriangle"/> {{ $t('error') }}</p>
 	<mk-button @click="() => $emit('retry')" class="button">{{ $t('retry') }}</mk-button>
 </div>

src/client/components/notes.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mk-notes" v-size="[{ max: 500 }]">
 	<div class="empty" v-if="empty">
-		<img src="https://xn--931a.moe/assets/info.png" class="_ghost"/>
+		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 		<div>{{ $t('noNotes') }}</div>
 	</div>
 

src/client/init.ts

@@ -19,6 +19,7 @@ import Dialog from './components/dialog.vue';
 import Menu from './components/menu.vue';
 import { router } from './router';
 import { applyTheme, lightTheme, builtinThemes } from './theme';
+import { isDeviceDarkmode } from './scripts/is-device-darkmode';
 
 Vue.use(Vuex);
 Vue.use(VueHotkey);
@@ -144,11 +145,17 @@ os.init(async () => {
 		}
 	}, false)
 
-	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', mql => {
+	//#region Sync dark mode
+	if (os.store.state.device.syncDeviceDarkMode) {
+		os.store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() });
+	}
+
+	window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
 		if (os.store.state.device.syncDeviceDarkMode) {
 			os.store.commit('device/set', { key: 'darkMode', value: mql.matches });
 		}
 	});
+	//#endregion
 
 	if ('Notification' in window && os.store.getters.isSignedIn) {
 		// 許可を得ていなかったらリクエスト
@@ -171,6 +178,7 @@ os.init(async () => {
 		},
 		watch: {
 			'$store.state.device.darkMode'() {
+				// TODO: このファイルでbuiltinThemesを参照するとcode splittingが効かず、初回読み込み時に全てのテーマコードを読み込むことになってしまい無駄なので何とかする
 				const themes = builtinThemes.concat(this.$store.state.device.themes);
 				applyTheme(themes.find(x => x.id === (this.$store.state.device.darkMode ? this.$store.state.device.darkTheme : this.$store.state.device.lightTheme)));
 			}

src/client/pages/follow-requests.vue

@@ -6,7 +6,7 @@
 	<mk-pagination :pagination="pagination" class="mk-follow-requests" ref="list">
 		<template #empty>
 			<div class="tkdrhpxr">
-				<img src="https://xn--931a.moe/assets/info.png" class="_ghost"/>
+				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 				<div>{{ $t('noFollowRequests') }}</div>
 			</div>
 		</template>

src/client/pages/messaging/index.vue

@@ -32,7 +32,7 @@
 		</router-link>
 	</div>
 	<div class="no-history" v-if="!fetching && messages.length == 0">
-		<img src="https://xn--931a.moe/assets/info.png" class="_ghost"/>
+		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 		<div>{{ $t('noHistory') }}</div>
 	</div>
 	<mk-loading v-if="fetching"/>

src/client/pages/not-found.vue

@@ -5,7 +5,7 @@
 
 	<section class="_card">
 		<div class="_content">
-			<img src="https://xn--931a.moe/assets/not-found.png" class="_ghost"/>
+			<img src="https://xn--931a.moe/assets/not-found.jpg" class="_ghost"/>
 			<div>{{ $t('notFoundDescription') }}</div>
 		</div>
 	</section>

src/client/pages/pages.vue

@@ -1,5 +1,8 @@
 <template>
 <div>
+	<portal to="icon"><fa :icon="faStickyNote"/></portal>
+	<portal to="title">{{ $t('pages') }}</portal>
+
 	<mk-container :body-togglable="true">
 		<template #header><fa :icon="faEdit" fixed-width/>{{ $t('_pages.my') }}</template>
 		<div class="rknalgpo my">

src/client/pages/preferences/theme.vue

@@ -42,6 +42,7 @@
 				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
 		</mk-select>
+		<a href="https://assets.msky.cafe/theme/list" rel="noopener" target="_blank" class="_link">{{ $t('_theme.explore') }}</a>
 	</div>
 	<div class="_content">
 		<mk-switch v-model="syncDeviceDarkMode">{{ $t('syncDeviceDarkMode') }}</mk-switch>
@@ -50,18 +51,43 @@
 		<mk-button primary v-if="wallpaper == null" @click="setWallpaper">{{ $t('setWallpaper') }}</mk-button>
 		<mk-button primary v-else @click="wallpaper = null">{{ $t('removeWallpaper') }}</mk-button>
 	</div>
+	<div class="_content">
+		<details>
+			<summary><fa :icon="faDownload"/> {{ $t('_theme.install') }}</summary>
+			<mk-textarea v-model="installThemeCode">
+				<span>{{ $t('_theme.code') }}</span>
+			</mk-textarea>
+			<mk-button @click="() => install(this.installThemeCode)" :disabled="installThemeCode == null"><fa :icon="faCheck"/> {{ $t('install') }}</mk-button>
+		</details>
+	</div>
+	<div class="_content">
+		<details>
+			<summary><fa :icon="faFolderOpen"/> {{ $t('_theme.manage') }}</summary>
+			<mk-select v-model="selectedThemeId">
+				<option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</mk-select>
+			<template v-if="selectedTheme">
+				<mk-textarea readonly tall :value="selectedThemeCode">
+					<span>{{ $t('_theme.code') }}</span>
+				</mk-textarea>
+				<mk-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><fa :icon="faTrashAlt"/> {{ $t('uninstall') }}</mk-button>
+			</template>
+		</details>
+	</div>
 </section>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { faPalette } from '@fortawesome/free-solid-svg-icons';
+import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import * as JSON5 from 'json5';
 import MkInput from '../../components/ui/input.vue';
 import MkButton from '../../components/ui/button.vue';
 import MkSelect from '../../components/ui/select.vue';
 import MkSwitch from '../../components/ui/switch.vue';
+import MkTextarea from '../../components/ui/textarea.vue';
 import i18n from '../../i18n';
-import { Theme, builtinThemes, applyTheme } from '../../theme';
+import { Theme, builtinThemes, applyTheme, validateTheme } from '../../theme';
 import { selectFile } from '../../scripts/select-file';
 import { isDeviceDarkmode } from '../../scripts/is-device-darkmode';
 
@@ -73,12 +99,16 @@ export default Vue.extend({
 		MkButton,
 		MkSelect,
 		MkSwitch,
+		MkTextarea,
 	},
 	
 	data() {
 		return {
+			builtinThemes,
+			installThemeCode: null,
+			selectedThemeId: null,
 			wallpaper: localStorage.getItem('wallpaper'),
-			faPalette
+			faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt
 		}
 	},
 
@@ -118,6 +148,16 @@ export default Vue.extend({
 			get() { return this.$store.state.device.syncDeviceDarkMode; },
 			set(value) { this.$store.commit('device/set', { key: 'syncDeviceDarkMode', value }); }
 		},
+
+		selectedTheme() {
+			if (this.selectedThemeId == null) return null;
+			return this.themes.find(x => x.id === this.selectedThemeId);
+		},
+
+		selectedThemeCode() {
+			if (this.selectedTheme == null) return null;
+			return JSON5.stringify(this.selectedTheme, null, '\t');
+		},
 	},
 
 	watch: {
@@ -155,6 +195,53 @@ export default Vue.extend({
 				this.wallpaper = file.url;
 			});
 		},
+
+		install(code) {
+			let theme;
+			try {
+				theme = JSON5.parse(code);
+			} catch (e) {
+				this.$root.dialog({
+					type: 'error',
+					text: this.$t('_theme.invalid')
+				});
+				return;
+			}
+			if (!validateTheme(theme)) {
+				this.$root.dialog({
+					type: 'error',
+					text: this.$t('_theme.invalid')
+				});
+				return;
+			}
+			if (this.$store.state.device.themes.some(t => t.id === theme.id)) {
+				this.$root.dialog({
+					type: 'info',
+					text: this.$t('_theme.alreadyInstalled')
+				});
+				return;
+			}
+			const themes = this.$store.state.device.themes.concat(theme);
+			this.$store.commit('device/set', {
+				key: 'themes', value: themes
+			});
+			this.$root.dialog({
+				type: 'success',
+				text: this.$t('_theme.installed', { name: theme.name })
+			});
+		},
+
+		uninstall() {
+			const theme = this.selectedTheme;
+			const themes = this.$store.state.device.themes.filter(t => t.id != theme.id);
+			this.$store.commit('device/set', {
+				key: 'themes', value: themes
+			});
+			this.$root.dialog({
+				type: 'info',
+				iconOnly: true, autoClose: true
+			});
+		},
 	}
 });
 </script>
@@ -179,7 +266,7 @@ export default Vue.extend({
 				top: 50%;
 				left: 50%;
 				overflow: hidden;
-				padding: 0 200px;
+				padding: 0 100px;
 				transform: translate3d(-50%, -50%, 0);
 
 				input {

src/client/theme.ts

@@ -102,3 +102,11 @@ function compile(theme: Theme): { [key: string]: string } {
 function genValue(c: tinycolor.Instance): string {
 	return c.toRgbString();
 }
+
+export function validateTheme(theme: Record<string, any>): boolean {
+	if (theme.id == null || typeof theme.id !== 'string') return false;
+	if (theme.name == null || typeof theme.name !== 'string') return false;
+	if (theme.base == null || !['light', 'dark'].includes(theme.base)) return false;
+	if (theme.props == null || typeof theme.props !== 'object') return false;
+	return true;
+}

src/server/api/endpoints/notes/state.ts

@@ -28,15 +28,15 @@ export default define(meta, async (ps, user) => {
 	const [favorite, watching] = await Promise.all([
 		NoteFavorites.count({
 			where: {
-			userId: user.id,
-			noteId: ps.noteId
+				userId: user.id,
+				noteId: ps.noteId
 			},
 			take: 1
 		}),
 		NoteWatchings.count({
 			where: {
-			userId: user.id,
-			noteId: ps.noteId
+				userId: user.id,
+				noteId: ps.noteId
 			},
 			take: 1
 		})

src/server/api/endpoints/notes/timeline.ts

@@ -102,6 +102,13 @@ export const meta = {
 };
 
 export default define(meta, async (ps, user) => {
+	const hasFollowing = (await Followings.count({
+		where: {
+			followerId: user.id,
+		},
+		take: 1
+	})) !== 0;
+
 	//#region Construct query
 	const followingQuery = Followings.createQueryBuilder('following')
 		.select('following.followeeId')
@@ -110,8 +117,8 @@ export default define(meta, async (ps, user) => {
 	const query = makePaginationQuery(Notes.createQueryBuilder('note'),
 			ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
 		.andWhere(new Brackets(qb => { qb
-			.where(`note.userId IN (${ followingQuery.getQuery() })`)
-			.orWhere('note.userId = :meId', { meId: user.id });
+			.where('note.userId = :meId', { meId: user.id });
+			if (hasFollowing) qb.orWhere(`note.userId IN (${ followingQuery.getQuery() })`);
 		}))
 		.leftJoinAndSelect('note.user', 'user')
 		.setParameters(followingQuery.getParameters());

src/server/web/views/base.pug

@@ -16,9 +16,9 @@ html
 		link(rel='icon' href= icon || '/favicon.ico')
 		link(rel='apple-touch-icon' href= icon || '/apple-touch-icon.png')
 		link(rel='manifest' href='/manifest.json')
-		link(rel='prefetch' href='https://xn--931a.moe/assets/info.png')
-		link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.png')
-		link(rel='prefetch' href='https://xn--931a.moe/assets/error.png')
+		link(rel='prefetch' href='https://xn--931a.moe/assets/info.jpg')
+		link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.jpg')
+		link(rel='prefetch' href='https://xn--931a.moe/assets/error.jpg')
 
 		title
 			block title