フォルダを指定するには、カスタマイズモードを終了してください
diff --git a/src/client/app/config.ts b/src/client/app/config.ts
index 70c085de1c..c6efe26cd5 100644
--- a/src/client/app/config.ts
+++ b/src/client/app/config.ts
@@ -1,6 +1,8 @@
declare const _HOST_: string;
declare const _HOSTNAME_: string;
declare const _URL_: string;
+declare const _NAME_: string;
+declare const _DESCRIPTION_: string;
declare const _API_URL_: string;
declare const _WS_URL_: string;
declare const _DOCS_URL_: string;
@@ -17,10 +19,13 @@ declare const _VERSION_: string;
declare const _CODENAME_: string;
declare const _LICENSE_: string;
declare const _GOOGLE_MAPS_API_KEY_: string;
+declare const _WELCOME_BG_URL_: string;
export const host = _HOST_;
export const hostname = _HOSTNAME_;
export const url = _URL_;
+export const name = _NAME_;
+export const description = _DESCRIPTION_;
export const apiUrl = _API_URL_;
export const wsUrl = _WS_URL_;
export const docsUrl = _DOCS_URL_;
@@ -37,3 +42,4 @@ export const version = _VERSION_;
export const codename = _CODENAME_;
export const license = _LICENSE_;
export const googleMapsApiKey = _GOOGLE_MAPS_API_KEY_;
+export const welcomeBgUrl = _WELCOME_BG_URL_;
diff --git a/src/client/app/desktop/api/choose-drive-file.ts b/src/client/app/desktop/api/choose-drive-file.ts
index fbda600e6e..a362a1289b 100644
--- a/src/client/app/desktop/api/choose-drive-file.ts
+++ b/src/client/app/desktop/api/choose-drive-file.ts
@@ -1,18 +1,17 @@
+import OS from '../../mios';
import { url } from '../../config';
import MkChooseFileFromDriveWindow from '../views/components/choose-file-from-drive-window.vue';
-export default function(opts) {
+export default (os: OS) => opts => {
return new Promise((res, rej) => {
const o = opts || {};
if (document.body.clientWidth > 800) {
- const w = new MkChooseFileFromDriveWindow({
- propsData: {
- title: o.title,
- multiple: o.multiple,
- initFolder: o.currentFolder
- }
- }).$mount();
+ const w = os.new(MkChooseFileFromDriveWindow, {
+ title: o.title,
+ multiple: o.multiple,
+ initFolder: o.currentFolder
+ });
w.$once('selected', file => {
res(file);
});
@@ -22,9 +21,9 @@ export default function(opts) {
res(file);
};
- window.open(url + '/selectdrive',
+ window.open(url + `/selectdrive?multiple=${o.multiple}`,
'choose_drive_window',
'height=500, width=800');
}
});
-}
+};
diff --git a/src/client/app/desktop/api/choose-drive-folder.ts b/src/client/app/desktop/api/choose-drive-folder.ts
index 9b33a20d9a..68dc7988b5 100644
--- a/src/client/app/desktop/api/choose-drive-folder.ts
+++ b/src/client/app/desktop/api/choose-drive-folder.ts
@@ -1,17 +1,16 @@
+import OS from '../../mios';
import MkChooseFolderFromDriveWindow from '../views/components/choose-folder-from-drive-window.vue';
-export default function(opts) {
+export default (os: OS) => opts => {
return new Promise((res, rej) => {
const o = opts || {};
- const w = new MkChooseFolderFromDriveWindow({
- propsData: {
- title: o.title,
- initFolder: o.currentFolder
- }
- }).$mount();
+ const w = os.new(MkChooseFolderFromDriveWindow, {
+ title: o.title,
+ initFolder: o.currentFolder
+ });
w.$once('selected', folder => {
res(folder);
});
document.body.appendChild(w.$el);
});
-}
+};
diff --git a/src/client/app/desktop/api/contextmenu.ts b/src/client/app/desktop/api/contextmenu.ts
index b70d7122d3..c92f087551 100644
--- a/src/client/app/desktop/api/contextmenu.ts
+++ b/src/client/app/desktop/api/contextmenu.ts
@@ -1,16 +1,15 @@
+import OS from '../../mios';
import Ctx from '../views/components/context-menu.vue';
-export default function(e, menu, opts?) {
+export default (os: OS) => (e, menu, opts?) => {
const o = opts || {};
- const vm = new Ctx({
- propsData: {
- menu,
- x: e.pageX - window.pageXOffset,
- y: e.pageY - window.pageYOffset,
- }
- }).$mount();
+ const vm = os.new(Ctx, {
+ menu,
+ x: e.pageX - window.pageXOffset,
+ y: e.pageY - window.pageYOffset,
+ });
vm.$once('closed', () => {
if (o.closed) o.closed();
});
document.body.appendChild(vm.$el);
-}
+};
diff --git a/src/client/app/desktop/api/dialog.ts b/src/client/app/desktop/api/dialog.ts
index 07935485b0..23f35b7aa9 100644
--- a/src/client/app/desktop/api/dialog.ts
+++ b/src/client/app/desktop/api/dialog.ts
@@ -1,19 +1,18 @@
+import OS from '../../mios';
import Dialog from '../views/components/dialog.vue';
-export default function(opts) {
+export default (os: OS) => opts => {
return new Promise((res, rej) => {
const o = opts || {};
- const d = new Dialog({
- propsData: {
- title: o.title,
- text: o.text,
- modal: o.modal,
- buttons: o.actions
- }
- }).$mount();
+ const d = os.new(Dialog, {
+ title: o.title,
+ text: o.text,
+ modal: o.modal,
+ buttons: o.actions
+ });
d.$once('clicked', id => {
res(id);
});
document.body.appendChild(d.$el);
});
-}
+};
diff --git a/src/client/app/desktop/api/input.ts b/src/client/app/desktop/api/input.ts
index ce26a8112f..bd7bfa0129 100644
--- a/src/client/app/desktop/api/input.ts
+++ b/src/client/app/desktop/api/input.ts
@@ -1,20 +1,19 @@
+import OS from '../../mios';
import InputDialog from '../views/components/input-dialog.vue';
-export default function(opts) {
+export default (os: OS) => opts => {
return new Promise((res, rej) => {
const o = opts || {};
- const d = new InputDialog({
- propsData: {
- title: o.title,
- placeholder: o.placeholder,
- default: o.default,
- type: o.type || 'text',
- allowEmpty: o.allowEmpty
- }
- }).$mount();
+ const d = os.new(InputDialog, {
+ title: o.title,
+ placeholder: o.placeholder,
+ default: o.default,
+ type: o.type || 'text',
+ allowEmpty: o.allowEmpty
+ });
d.$once('done', text => {
res(text);
});
document.body.appendChild(d.$el);
});
-}
+};
diff --git a/src/client/app/desktop/api/notify.ts b/src/client/app/desktop/api/notify.ts
index 1f89f40ce6..72e5827607 100644
--- a/src/client/app/desktop/api/notify.ts
+++ b/src/client/app/desktop/api/notify.ts
@@ -1,10 +1,9 @@
+import OS from '../../mios';
import Notification from '../views/components/ui-notification.vue';
-export default function(message) {
- const vm = new Notification({
- propsData: {
- message
- }
- }).$mount();
+export default (os: OS) => message => {
+ const vm = os.new(Notification, {
+ message
+ });
document.body.appendChild(vm.$el);
-}
+};
diff --git a/src/client/app/desktop/api/post.ts b/src/client/app/desktop/api/post.ts
index b569610e1d..cfc78e50fa 100644
--- a/src/client/app/desktop/api/post.ts
+++ b/src/client/app/desktop/api/post.ts
@@ -1,21 +1,18 @@
+import OS from '../../mios';
import PostFormWindow from '../views/components/post-form-window.vue';
import RenoteFormWindow from '../views/components/renote-form-window.vue';
-export default function(opts) {
+export default (os: OS) => opts => {
const o = opts || {};
if (o.renote) {
- const vm = new RenoteFormWindow({
- propsData: {
- renote: o.renote
- }
- }).$mount();
+ const vm = os.new(RenoteFormWindow, {
+ note: o.renote
+ });
document.body.appendChild(vm.$el);
} else {
- const vm = new PostFormWindow({
- propsData: {
- reply: o.reply
- }
- }).$mount();
+ const vm = os.new(PostFormWindow, {
+ reply: o.reply
+ });
document.body.appendChild(vm.$el);
}
-}
+};
diff --git a/src/client/app/desktop/api/update-avatar.ts b/src/client/app/desktop/api/update-avatar.ts
index 8ddaebc072..887367a24e 100644
--- a/src/client/app/desktop/api/update-avatar.ts
+++ b/src/client/app/desktop/api/update-avatar.ts
@@ -6,17 +6,15 @@ import ProgressDialog from '../views/components/progress-dialog.vue';
export default (os: OS) => (cb, file = null) => {
const fileSelected = file => {
- const w = new CropWindow({
- propsData: {
- image: file,
- title: 'アバターとして表示する部分を選択',
- aspectRatio: 1 / 1
- }
- }).$mount();
+ const w = os.new(CropWindow, {
+ image: file,
+ title: 'アバターとして表示する部分を選択',
+ aspectRatio: 1 / 1
+ });
w.$once('cropped', blob => {
const data = new FormData();
- data.append('i', os.i.token);
+ data.append('i', os.store.state.i.token);
data.append('file', blob, file.name + '.cropped.png');
os.api('drive/folders/find', {
@@ -42,11 +40,9 @@ export default (os: OS) => (cb, file = null) => {
};
const upload = (data, folder) => {
- const dialog = new ProgressDialog({
- propsData: {
- title: '新しいアバターをアップロードしています'
- }
- }).$mount();
+ const dialog = os.new(ProgressDialog, {
+ title: '新しいアバターをアップロードしています'
+ });
document.body.appendChild(dialog.$el);
if (folder) data.append('folderId', folder.id);
@@ -70,8 +66,14 @@ export default (os: OS) => (cb, file = null) => {
os.api('i/update', {
avatarId: file.id
}).then(i => {
- os.i.avatarId = i.avatarId;
- os.i.avatarUrl = i.avatarUrl;
+ os.store.commit('updateIKeyValue', {
+ key: 'avatarId',
+ value: i.avatarId
+ });
+ os.store.commit('updateIKeyValue', {
+ key: 'avatarUrl',
+ value: i.avatarUrl
+ });
os.apis.dialog({
title: '%fa:info-circle%アバターを更新しました',
diff --git a/src/client/app/desktop/api/update-banner.ts b/src/client/app/desktop/api/update-banner.ts
index 1a5da272bd..4e6dd4e2c7 100644
--- a/src/client/app/desktop/api/update-banner.ts
+++ b/src/client/app/desktop/api/update-banner.ts
@@ -6,17 +6,15 @@ import ProgressDialog from '../views/components/progress-dialog.vue';
export default (os: OS) => {
const cropImage = file => new Promise((resolve, reject) => {
- const w = new CropWindow({
- propsData: {
- image: file,
- title: 'バナーとして表示する部分を選択',
- aspectRatio: 16 / 9
- }
- }).$mount();
+ const w = os.new(CropWindow, {
+ image: file,
+ title: 'バナーとして表示する部分を選択',
+ aspectRatio: 16 / 9
+ });
w.$once('cropped', blob => {
const data = new FormData();
- data.append('i', os.i.token);
+ data.append('i', os.store.state.i.token);
data.append('file', blob, file.name + '.cropped.png');
os.api('drive/folders/find', {
@@ -44,11 +42,9 @@ export default (os: OS) => {
});
const upload = (data, folder) => new Promise((resolve, reject) => {
- const dialog = new ProgressDialog({
- propsData: {
- title: '新しいバナーをアップロードしています'
- }
- }).$mount();
+ const dialog = os.new(ProgressDialog, {
+ title: '新しいバナーをアップロードしています'
+ });
document.body.appendChild(dialog.$el);
if (folder) data.append('folderId', folder.id);
@@ -73,8 +69,14 @@ export default (os: OS) => {
return os.api('i/update', {
bannerId: file.id
}).then(i => {
- os.i.bannerId = i.bannerId;
- os.i.bannerUrl = i.bannerUrl;
+ os.store.commit('updateIKeyValue', {
+ key: 'bannerId',
+ value: i.bannerId
+ });
+ os.store.commit('updateIKeyValue', {
+ key: 'bannerUrl',
+ value: i.bannerUrl
+ });
os.apis.dialog({
title: '%fa:info-circle%バナーを更新しました',
diff --git a/assets/favicon/64.svg b/src/client/app/desktop/assets/header-icon.dark.svg
similarity index 88%
rename from assets/favicon/64.svg
rename to src/client/app/desktop/assets/header-icon.dark.svg
index e2378791a7..fa42856fa5 100644
Binary files a/assets/favicon/64.svg and b/src/client/app/desktop/assets/header-icon.dark.svg differ
diff --git a/assets/favicon/32.svg b/src/client/app/desktop/assets/header-icon.light.svg
similarity index 89%
rename from assets/favicon/32.svg
rename to src/client/app/desktop/assets/header-icon.light.svg
index 4dfcc68606..61e2026243 100644
Binary files a/assets/favicon/32.svg and b/src/client/app/desktop/assets/header-icon.light.svg differ
diff --git a/src/client/app/desktop/assets/header-logo-white.svg b/src/client/app/desktop/assets/header-logo-white.svg
deleted file mode 100644
index 8082edb30d..0000000000
Binary files a/src/client/app/desktop/assets/header-logo-white.svg and /dev/null differ
diff --git a/src/client/app/desktop/assets/header-logo.svg b/src/client/app/desktop/assets/header-logo.svg
deleted file mode 100644
index 3a2207954a..0000000000
Binary files a/src/client/app/desktop/assets/header-logo.svg and /dev/null differ
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index 2658a86b95..201ab0a83d 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -2,7 +2,6 @@
* Desktop Client
*/
-import Vue from 'vue';
import VueRouter from 'vue-router';
// Style
@@ -24,6 +23,7 @@ import updateAvatar from './api/update-avatar';
import updateBanner from './api/update-banner';
import MkIndex from './views/pages/index.vue';
+import MkDeck from './views/pages/deck/deck.vue';
import MkUser from './views/pages/user/user.vue';
import MkFavorites from './views/pages/favorites.vue';
import MkSelectDrive from './views/pages/selectdrive.vue';
@@ -33,7 +33,9 @@ import MkHomeCustomize from './views/pages/home-customize.vue';
import MkMessagingRoom from './views/pages/messaging-room.vue';
import MkNote from './views/pages/note.vue';
import MkSearch from './views/pages/search.vue';
-import MkOthello from './views/pages/othello.vue';
+import MkTag from './views/pages/tag.vue';
+import MkReversi from './views/pages/reversi.vue';
+import MkShare from './views/pages/share.vue';
/**
* init
@@ -51,6 +53,7 @@ init(async (launch) => {
mode: 'history',
routes: [
{ path: '/', name: 'index', component: MkIndex },
+ { path: '/deck', name: 'deck', component: MkDeck },
{ path: '/i/customize-home', component: MkHomeCustomize },
{ path: '/i/favorites', component: MkFavorites },
{ path: '/i/messaging/:user', component: MkMessagingRoom },
@@ -59,8 +62,10 @@ init(async (launch) => {
{ path: '/i/lists/:list', component: MkUserList },
{ path: '/selectdrive', component: MkSelectDrive },
{ path: '/search', component: MkSearch },
- { path: '/othello', component: MkOthello },
- { path: '/othello/:game', component: MkOthello },
+ { path: '/tags/:tag', component: MkTag },
+ { path: '/share', component: MkShare },
+ { path: '/reversi', component: MkReversi },
+ { path: '/reversi/:game', component: MkReversi },
{ path: '/@:user', component: MkUser },
{ path: '/notes/:note', component: MkNote }
]
@@ -68,12 +73,12 @@ init(async (launch) => {
// Launch the app
const [, os] = launch(router, os => ({
- chooseDriveFolder,
- chooseDriveFile,
- dialog,
- input,
- post,
- notify,
+ chooseDriveFolder: chooseDriveFolder(os),
+ chooseDriveFile: chooseDriveFile(os),
+ dialog: dialog(os),
+ input: input(os),
+ post: post(os),
+ notify: notify(os),
updateAvatar: updateAvatar(os),
updateBanner: updateBanner(os)
}));
@@ -161,8 +166,8 @@ function registerNotifications(stream: HomeStreamManager) {
setTimeout(n.close.bind(n), 7000);
});
- connection.on('othello_invited', matching => {
- const _n = composeNotification('othello_invited', matching);
+ connection.on('reversi_invited', matching => {
+ const _n = composeNotification('reversi_invited', matching);
const n = new Notification(_n.title, {
body: _n.body,
icon: _n.icon
diff --git a/src/client/app/desktop/style.styl b/src/client/app/desktop/style.styl
index ea48fbee3d..3cd36482e4 100644
--- a/src/client/app/desktop/style.styl
+++ b/src/client/app/desktop/style.styl
@@ -6,44 +6,27 @@
*::input-placeholder
color #D8CBC5
-*
- &:focus
- outline none
-
- &::scrollbar
- width 5px
- background transparent
-
- &:horizontal
- height 5px
-
- &::scrollbar-button
- width 0
- height 0
- background rgba(0, 0, 0, 0.2)
-
- &::scrollbar-piece
- background transparent
-
- &:start
- background transparent
-
- &::scrollbar-thumb
- background rgba(0, 0, 0, 0.2)
-
- &:hover
- background rgba(0, 0, 0, 0.4)
-
- &:active
- background $theme-color
-
- &::scrollbar-corner
- background rgba(0, 0, 0, 0.2)
+*:focus
+ outline none
html
height 100%
background #f7f7f7
+ &, *
+ &::-webkit-scrollbar
+ width 6px
+ height 6px
+
+ &::-webkit-scrollbar-thumb
+ background rgba(0, 0, 0, 0.2)
+
+ &:hover
+ background rgba(0, 0, 0, 0.4)
+
+ &:active
+ background $theme-color
+
&[data-darkmode]
background #191B22
@@ -51,10 +34,6 @@ html
&::-webkit-scrollbar-track
background-color #282C37
- &::-webkit-scrollbar
- width 6px
- height 6px
-
&::-webkit-scrollbar-thumb
background-color #454954
@@ -63,8 +42,3 @@ html
&:active
background-color $theme-color
-
-body
- display flex
- flex-direction column
- min-height 100%
diff --git a/src/client/app/desktop/views/components/activity.calendar.vue b/src/client/app/desktop/views/components/activity.calendar.vue
index e488571070..1a88d1a994 100644
--- a/src/client/app/desktop/views/components/activity.calendar.vue
+++ b/src/client/app/desktop/views/components/activity.calendar.vue
@@ -1,5 +1,5 @@
-