From 0083898bd1970ebf00d3e5736da34fe322256e7c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 8 Nov 2017 20:03:58 +0900
Subject: [PATCH] :v:

---
 locales/en.yml                                |  6 +++
 locales/ja.yml                                |  6 +++
 src/web/app/desktop/router.js                 | 26 ++++++++-----
 src/web/app/desktop/tags/drive/browser.tag    |  5 ++-
 src/web/app/desktop/tags/index.js             |  1 +
 src/web/app/desktop/tags/pages/drive.tag      | 37 +++++++++++++++++++
 .../app/desktop/tags/pages/selectdrive.tag    |  9 +++--
 src/web/app/desktop/tags/ui.tag               |  2 +-
 src/web/app/mobile/tags/drive/file.tag        |  5 ++-
 9 files changed, 81 insertions(+), 16 deletions(-)
 create mode 100644 src/web/app/desktop/tags/pages/drive.tag

diff --git a/locales/en.yml b/locales/en.yml
index 15e301d3a..679651033 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -242,6 +242,12 @@ desktop:
     mk-drive-browser-nav-folder:
       drive: "Drive"
 
+    mk-selectdrive-page:
+      title: "Choose a file(s)"
+      ok: "OK"
+      cancel: "Cancel"
+      upload: "Upload a file(s) from you PC"
+
     mk-nav-home-widget:
       about: "About"
       stats: "Stats"
diff --git a/locales/ja.yml b/locales/ja.yml
index eeb04fe9c..c146475b2 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -242,6 +242,12 @@ desktop:
     mk-drive-browser-nav-folder:
       drive: "ドライブ"
 
+    mk-selectdrive-page:
+      title: "ファイルを選択してください"
+      ok: "決定"
+      cancel: "キャンセル"
+      upload: "PCからドライブにファイルをアップロード"
+
     mk-nav-home-widget:
       about: "Misskeyについて"
       stats: "統計"
diff --git a/src/web/app/desktop/router.js b/src/web/app/desktop/router.js
index 0fe44a578..104b9bbe5 100644
--- a/src/web/app/desktop/router.js
+++ b/src/web/app/desktop/router.js
@@ -7,15 +7,17 @@ const route = require('page');
 let page = null;
 
 export default me => {
-	route('/',                 index);
-	route('/selectdrive',      selectDrive);
-	route('/i>mentions',       mentions);
-	route('/post::post',       post);
-	route('/search::query',    search);
-	route('/:user',            user.bind(null, 'home'));
-	route('/:user/graphs',     user.bind(null, 'graphs'));
-	route('/:user/:post',      post);
-	route('*',                 notFound);
+	route('/',                       index);
+	route('/selectdrive',            selectDrive);
+	route('/i/drive',                drive);
+	route('/i/drive/folder/:folder', drive);
+	route('/i/mentions',             mentions);
+	route('/post::post',             post);
+	route('/search::query',          search);
+	route('/:user',                  user.bind(null, 'home'));
+	route('/:user/graphs',           user.bind(null, 'graphs'));
+	route('/:user/:post',            post);
+	route('*',                       notFound);
 
 	function index() {
 		me ? home() : entrance();
@@ -59,6 +61,12 @@ export default me => {
 		mount(document.createElement('mk-selectdrive-page'));
 	}
 
+	function drive(ctx) {
+		const el = document.createElement('mk-drive-page');
+		if (ctx.params.folder) el.setAttribute('folder', ctx.params.folder);
+		mount(el);
+	}
+
 	function notFound() {
 		mount(document.createElement('mk-not-found'));
 	}
diff --git a/src/web/app/desktop/tags/drive/browser.tag b/src/web/app/desktop/tags/drive/browser.tag
index 93db0a04d..be16a782d 100644
--- a/src/web/app/desktop/tags/drive/browser.tag
+++ b/src/web/app/desktop/tags/drive/browser.tag
@@ -2,7 +2,8 @@
 	<nav>
 		<div class="path" oncontextmenu={ pathOncontextmenu }>
 			<mk-drive-browser-nav-folder class={ current: folder == null } folder={ null }/>
-			<virtual each={ folder in hierarchyFolders }><span class="separator"><i class="fa fa-angle-right"></i></span>
+			<virtual each={ folder in hierarchyFolders }>
+				<span class="separator"><i class="fa fa-angle-right"></i></span>
 				<mk-drive-browser-nav-folder folder={ folder }/>
 			</virtual>
 			<span class="separator" if={ folder != null }><i class="fa fa-angle-right"></i></span>
@@ -571,6 +572,7 @@
 				if (folder.parent) dive(folder.parent);
 
 				this.update();
+				this.trigger('open-folder', folder);
 				this.fetch();
 			});
 		};
@@ -640,6 +642,7 @@
 				folder: null,
 				hierarchyFolders: []
 			});
+			this.trigger('move-root');
 			this.fetch();
 		};
 
diff --git a/src/web/app/desktop/tags/index.js b/src/web/app/desktop/tags/index.js
index 37fdfe37e..7997bcc7f 100644
--- a/src/web/app/desktop/tags/index.js
+++ b/src/web/app/desktop/tags/index.js
@@ -62,6 +62,7 @@ require('./pages/post.tag');
 require('./pages/search.tag');
 require('./pages/not-found.tag');
 require('./pages/selectdrive.tag');
+require('./pages/drive.tag');
 require('./autocomplete-suggestion.tag');
 require('./progress-dialog.tag');
 require('./user-preview.tag');
diff --git a/src/web/app/desktop/tags/pages/drive.tag b/src/web/app/desktop/tags/pages/drive.tag
new file mode 100644
index 000000000..9f3e75ab2
--- /dev/null
+++ b/src/web/app/desktop/tags/pages/drive.tag
@@ -0,0 +1,37 @@
+<mk-drive-page>
+	<mk-drive-browser ref="browser" folder={ opts.folder }/>
+	<style>
+		:scope
+			display block
+			position fixed
+			width 100%
+			height 100%
+			background #fff
+
+			> mk-drive-browser
+				height 100%
+	</style>
+	<script>
+		this.on('mount', () => {
+			document.title = 'Misskey Drive';
+
+			this.refs.browser.on('move-root', () => {
+				const title = 'Misskey Drive';
+
+				// Rewrite URL
+				history.pushState(null, title, '/i/drive');
+
+				document.title = title;
+			});
+
+			this.refs.browser.on('open-folder', folder => {
+				const title = folder.name + ' | Misskey Drive';
+
+				// Rewrite URL
+				history.pushState(null, title, '/i/drive/folder/' + folder.id);
+
+				document.title = title;
+			});
+		});
+	</script>
+</mk-drive-page>
diff --git a/src/web/app/desktop/tags/pages/selectdrive.tag b/src/web/app/desktop/tags/pages/selectdrive.tag
index 63fc588fa..9c3ac16eb 100644
--- a/src/web/app/desktop/tags/pages/selectdrive.tag
+++ b/src/web/app/desktop/tags/pages/selectdrive.tag
@@ -1,15 +1,16 @@
 <mk-selectdrive-page>
 	<mk-drive-browser ref="browser" multiple={ multiple }/>
 	<div>
-		<button class="upload" title="PCからドライブにファイルをアップロード" onclick={ upload }><i class="fa fa-upload"></i></button>
-		<button class="cancel" onclick={ close }>キャンセル</button>
-		<button class="ok" onclick={ ok }>決定</button>
+		<button class="upload" title="%i18n:desktop.tags.mk-selectdrive-page.upload%" onclick={ upload }><i class="fa fa-upload"></i></button>
+		<button class="cancel" onclick={ close }>%i18n:desktop.tags.mk-selectdrive-page.cancel%</button>
+		<button class="ok" onclick={ ok }>%i18n:desktop.tags.mk-selectdrive-page.ok%</button>
 	</div>
 
 	<style>
 		:scope
 			display block
 			position fixed
+			width 100%
 			height 100%
 			background #fff
 
@@ -130,7 +131,7 @@
 		this.multiple = q.get('multiple') == 'true' ? true : false;
 
 		this.on('mount', () => {
-			document.documentElement.style.background = '#fff';
+			document.title = '%i18n:desktop.tags.mk-selectdrive-page.title%';
 
 			this.refs.browser.on('selected', file => {
 				this.files = [file];
diff --git a/src/web/app/desktop/tags/ui.tag b/src/web/app/desktop/tags/ui.tag
index 892c7c601..0a3e8d9c5 100644
--- a/src/web/app/desktop/tags/ui.tag
+++ b/src/web/app/desktop/tags/ui.tag
@@ -564,7 +564,7 @@
 				<p><i class="fa fa-cloud"></i>%i18n:desktop.tags.mk-ui-header-account.drive%<i class="fa fa-angle-right"></i></p>
 			</li>
 			<li>
-				<a href="/i>mentions"><i class="fa fa-at"></i>%i18n:desktop.tags.mk-ui-header-account.mentions%<i class="fa fa-angle-right"></i></a>
+				<a href="/i/mentions"><i class="fa fa-at"></i>%i18n:desktop.tags.mk-ui-header-account.mentions%<i class="fa fa-angle-right"></i></a>
 			</li>
 		</ul>
 		<ul>
diff --git a/src/web/app/mobile/tags/drive/file.tag b/src/web/app/mobile/tags/drive/file.tag
index bf51f79a5..1499e8d7b 100644
--- a/src/web/app/mobile/tags/drive/file.tag
+++ b/src/web/app/mobile/tags/drive/file.tag
@@ -2,7 +2,7 @@
 	<div class="container">
 		<div class="thumbnail" style={ 'background-image: url(' + file.url + '?thumbnail&size=128)' }></div>
 		<div class="body">
-			<p class="name">{ file.name }</p>
+			<p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" if={ file.name.lastIndexOf('.') != -1 }>{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
 			<!--
 			if file.tags.length > 0
 				ul.tags
@@ -64,6 +64,9 @@
 						text-overflow ellipsis
 						overflow-wrap break-word
 
+						> .ext
+							opacity 0.5
+
 					> .tags
 						display block
 						margin 4px 0 0 0