wip

src/web/app/desktop/router.js

@@ -8,6 +8,7 @@ let page = null;
 
 export default me => {
 	route('/',                 index);
+	route('/selectdrive',      selectDrive);
 	route('/i>mentions',       mentions);
 	route('/channel',          channels);
 	route('/channel/:channel', channel);
@@ -66,6 +67,10 @@ export default me => {
 		mount(document.createElement('mk-channels-page'));
 	}
 
+	function selectDrive() {
+		mount(document.createElement('mk-selectdrive-page'));
+	}
+
 	function notFound() {
 		mount(document.createElement('mk-not-found'));
 	}

src/web/app/desktop/tags/index.js

@@ -63,6 +63,7 @@ require('./pages/search.tag');
 require('./pages/not-found.tag');
 require('./pages/channel.tag');
 require('./pages/channels.tag');
+require('./pages/selectdrive.tag');
 require('./autocomplete-suggestion.tag');
 require('./progress-dialog.tag');
 require('./user-preview.tag');

src/web/app/desktop/tags/pages/channel.tag

@@ -2,7 +2,9 @@
 	<mk-ui ref="ui">
 		<main if={ !parent.fetching }>
 			<h1>{ parent.channel.title }</h1>
-			<mk-channel-post if={ parent.posts } each={ parent.posts.reverse() } post={ this } form={ parent.refs.form }/>
+			<virtual if={ parent.posts }>
+				<mk-channel-post each={ parent.posts.reverse() } post={ this } form={ parent.refs.form }/>
+			</virtual>
 			<hr>
 			<mk-channel-form channel={ parent.channel } ref="form"/>
 		</main>
@@ -68,6 +70,11 @@
 	<div>
 		<a if={ post.reply_to }>&gt;&gt;{ post.reply_to.index }</a>
 		{ post.text }
+		<div class="media" if={ post.media }>
+			<virtual each={ file in post.media }>
+				<img src={ file.url + '?thumbnail&size=512' } alt={ file.name } title={ file.name }/>
+			</virtual>
+		</div>
 	</div>
 	<style>
 		:scope
@@ -109,13 +116,19 @@
 	<button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0) } onclick={ post }>
 		{ wait ? 'やってます' : 'やる' }<mk-ellipsis if={ wait }/>
 	</button>
-
+	<br>
+	<button onclick={ drive }>ドライブ</button>
+	<ol if={ files }>
+		<li each={ files }>{ name }</li>
+	</ol>
 	<style>
 		:scope
 			display block
 
 	</style>
 	<script>
+		import CONFIG from '../../../common/scripts/config';
+
 		this.mixin('api');
 
 		this.channel = this.opts.channel;
@@ -128,6 +141,9 @@
 
 		this.clear = () => {
 			this.clearReply();
+			this.update({
+				files: null
+			});
 			this.refs.text.value = '';
 		};
 
@@ -136,8 +152,13 @@
 				wait: true
 			});
 
+			const files = this.files && this.files.length > 0
+				? this.files.map(f => f.id)
+				: undefined;
+
 			this.api('posts/create', {
 				text: this.refs.text.value,
+				media_ids: files,
 				reply_to_id: this.reply ? this.reply.id : undefined,
 				channel_id: this.channel.id
 			}).then(data => {
@@ -151,5 +172,13 @@
 			});
 		};
 
+		this.drive = () => {
+			window['cb'] = files => {
+				this.update({
+					files: files
+				});
+			};
+			window.open(CONFIG.url + '/selectdrive?multiple=true', '_blank');
+		};
 	</script>
 </mk-channel-form>

src/web/app/desktop/tags/pages/drive-chooser.tag

@@ -1,44 +0,0 @@
-<mk-drive-chooser>
-	<mk-drive-browser ref="browser" multiple={ parent.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={ parent.ok }>決定</button>
-	</div>
-
-	<style>
-		:scope
-			display block
-			height 100%
-
-	</style>
-	<script>
-		this.multiple = this.opts.multiple != null ? this.opts.multiple : false;
-
-		this.on('mount', () => {
-			this.refs.browser.on('selected', file => {
-				this.files = [file];
-				this.ok();
-			});
-
-			this.refs.browser.on('change-selection', files => {
-				this.update({
-					files: files
-				});
-			});
-		});
-
-		this.upload = () => {
-			this.refs.browser.selectLocalFile();
-		};
-
-		this.close = () => {
-			window.close();
-		};
-
-		this.ok = () => {
-			window.opener.cb(this.multiple ? this.files : this.files[0]);
-			window.close();
-		};
-	</script>
-</mk-drive-chooser>

src/web/app/desktop/tags/pages/selectdrive.tag

@@ -0,0 +1,159 @@
+<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>
+	</div>
+
+	<style>
+		:scope
+			display block
+			height 100%
+			background #fff
+
+			> mk-drive-browser
+				height calc(100% - 72px)
+
+			> div
+				position fixed
+				bottom 0
+				left 0
+				width 100%
+				height 72px
+				background lighten($theme-color, 95%)
+
+				.upload
+					display inline-block
+					position absolute
+					top 8px
+					left 16px
+					cursor pointer
+					padding 0
+					margin 8px 4px 0 0
+					width 40px
+					height 40px
+					font-size 1em
+					color rgba($theme-color, 0.5)
+					background transparent
+					outline none
+					border solid 1px transparent
+					border-radius 4px
+
+					&:hover
+						background transparent
+						border-color rgba($theme-color, 0.3)
+
+					&:active
+						color rgba($theme-color, 0.6)
+						background transparent
+						border-color rgba($theme-color, 0.5)
+						box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
+
+					&:focus
+						&:after
+							content ""
+							pointer-events none
+							position absolute
+							top -5px
+							right -5px
+							bottom -5px
+							left -5px
+							border 2px solid rgba($theme-color, 0.3)
+							border-radius 8px
+
+				.ok
+				.cancel
+					display block
+					position absolute
+					bottom 16px
+					cursor pointer
+					padding 0
+					margin 0
+					width 120px
+					height 40px
+					font-size 1em
+					outline none
+					border-radius 4px
+
+					&:focus
+						&:after
+							content ""
+							pointer-events none
+							position absolute
+							top -5px
+							right -5px
+							bottom -5px
+							left -5px
+							border 2px solid rgba($theme-color, 0.3)
+							border-radius 8px
+
+					&:disabled
+						opacity 0.7
+						cursor default
+
+				.ok
+					right 16px
+					color $theme-color-foreground
+					background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+					border solid 1px lighten($theme-color, 15%)
+
+					&:not(:disabled)
+						font-weight bold
+
+					&:hover:not(:disabled)
+						background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+						border-color $theme-color
+
+					&:active:not(:disabled)
+						background $theme-color
+						border-color $theme-color
+
+				.cancel
+					right 148px
+					color #888
+					background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+					border solid 1px #e2e2e2
+
+					&:hover
+						background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+						border-color #dcdcdc
+
+					&:active
+						background #ececec
+						border-color #dcdcdc
+
+	</style>
+	<script>
+		const q = (new URL(location)).searchParams;
+		this.multiple = q.get('multiple') == 'true' ? true : false;
+
+		this.on('mount', () => {
+			document.documentElement.style.background = '#fff';
+
+			this.refs.browser.on('selected', file => {
+				this.files = [file];
+				this.ok();
+			});
+
+			this.refs.browser.on('change-selection', files => {
+				this.update({
+					files: files
+				});
+			});
+		});
+
+		this.upload = () => {
+			this.refs.browser.selectLocalFile();
+		};
+
+		this.close = () => {
+			window.close();
+		};
+
+		this.ok = () => {
+			window.opener.cb(this.multiple ? this.files : this.files[0]);
+			window.close();
+		};
+	</script>
+</mk-selectdrive-page>