✌️

locales/en.yml

@@ -170,6 +170,13 @@ ch:
       new: "Create new channel"
       channel-title: "Channel title"
 
+    mk-channel-form:
+      textarea: "Write here"
+      upload: "Upload"
+      drive: "Drive"
+      post: "Do"
+      posting: "Doing"
+
 desktop:
   tags:
     mk-api-info:

locales/ja.yml

@@ -170,6 +170,13 @@ ch:
       new: "チャンネルを作成"
       channel-title: "チャンネルのタイトル"
 
+    mk-channel-form:
+      textarea: "書いて"
+      upload: "アップロード"
+      drive: "ドライブ"
+      post: "やる"
+      posting: "やってます"
+
 desktop:
   tags:
     mk-api-info:

src/web/app/app.styl

@@ -5,8 +5,6 @@ json('../../const.json')
 $theme-color = themeColor
 $theme-color-foreground = themeColorForeground
 
-@import './reset'
-
 /*
 	::selection
 		background $theme-color
@@ -14,6 +12,9 @@ $theme-color-foreground = themeColorForeground
 */
 
 *
+	position relative
+	box-sizing border-box
+	background-clip padding-box !important
 	tap-highlight-color rgba($theme-color, 0.7)
 	-webkit-tap-highlight-color rgba($theme-color, 0.7)
 
@@ -29,6 +30,9 @@ html
 		&, *
 			cursor progress !important
 
+body
+	overflow-wrap break-word
+
 #error
 	padding 32px
 	color #fff

src/web/app/auth/style.styl

@@ -1,4 +1,5 @@
-@import "../base"
+@import "../app"
+@import "../reset"
 
 html
 	background #eee

src/web/app/ch/style.styl

@@ -1,5 +1,10 @@
-@import "../base"
+@import "../app"
 
 html
 	padding 8px
 	background #efefef
+
+#wait
+	top auto
+	bottom 15px
+	left 15px

src/web/app/ch/tags/channel.tag

@@ -49,6 +49,9 @@
 				> .body
 					margin 8px 0 0 0
 
+				> mk-channel-form
+					max-width 500px
+
 	</style>
 	<script>
 		import Progress from '../../common/scripts/loading';
@@ -240,20 +243,45 @@
 
 <mk-channel-form>
 	<p if={ reply }><b>&gt;&gt;{ reply.index }</b> ({ reply.user.name }): <a onclick={ clearReply }>[x]</a></p>
-	<textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste }></textarea>
-	<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>
+	<textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder="%i18n:ch.tags.mk-channel-form.textarea%"></textarea>
+	<div class="actions">
+		<button onclick={ selectFile }><i class="fa fa-upload"></i>%i18n:ch.tags.mk-channel-form.upload%</button>
+		<button onclick={ drive }><i class="fa fa-cloud"></i>%i18n:ch.tags.mk-channel-form.drive%</button>
+		<button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0) } onclick={ post }>
+			<i class="fa fa-paper-plane" if={ !wait }></i>{ wait ? '%i18n:ch.tags.mk-channel-form.posting%' : '%i18n:ch.tags.mk-channel-form.post%' }<mk-ellipsis if={ wait }/>
+		</button>
+	</div>
 	<mk-uploader ref="uploader"/>
 	<ol if={ files }>
 		<li each={ files }>{ name }</li>
 	</ol>
+	<input ref="file" type="file" accept="image/*" multiple="multiple" onchange={ changeFile }/>
 	<style>
 		:scope
 			display block
 
+			> textarea
+				width 100%
+				max-width 100%
+				min-width 100%
+				min-height 5em
+
+			> .actions
+				display flex
+
+				> button
+					> i
+						margin-right 0.25em
+
+					&:last-child
+						margin-left auto
+
+					&.wait
+						cursor wait
+
+			> input[type='file']
+				display none
+
 	</style>
 	<script>
 		import CONFIG from '../../common/scripts/config';
@@ -314,6 +342,14 @@
 			});
 		};
 
+		this.changeFile = () => {
+			this.refs.file.files.forEach(this.upload);
+		};
+
+		this.selectFile = () => {
+			this.refs.file.click();
+		};
+
 		this.drive = () => {
 			window['cb'] = files => {
 				this.update({

src/web/app/desktop/style.styl

@@ -1,4 +1,5 @@
-@import "../base"
+@import "../app"
+@import "../reset"
 @import "../../../../node_modules/cropperjs/dist/cropper.css"
 
 *::input-placeholder

src/web/app/dev/style.styl

@@ -1,4 +1,5 @@
-@import "../base"
+@import "../app"
+@import "../reset"
 
 html
 	background-color #fff

src/web/app/mobile/style.styl

@@ -1,4 +1,5 @@
-@import "../base"
+@import "../app"
+@import "../reset"
 
 #wait
 	top auto

src/web/app/reset.styl

@@ -1,16 +1,3 @@
-*
-	position relative
-	box-sizing border-box
-	background-clip padding-box !important
-
-html
-body
-	margin 0
-	padding 0
-
-body
-	overflow-wrap break-word
-
 input:not([type])
 input[type='text']
 input[type='password']

src/web/app/stats/style.styl

@@ -1,4 +1,5 @@
-@import "../base"
+@import "../app"
+@import "../reset"
 
 html
 	color #456267

src/web/app/status/style.styl

@@ -1,4 +1,5 @@
-@import "../base"
+@import "../app"
+@import "../reset"
 
 html
 	color #456267