固定投稿フォームを実装 (#5994)

* 固定投稿フォームを実装

* fix

locales/ja-JP.yml

@@ -421,6 +421,7 @@ objectStorage: "オブジェクトストレージ"
 useObjectStorage: "オブジェクトストレージを使用"
 serverLogs: "サーバーログ"
 deleteAll: "全て削除"
+showFixedPostForm: "タイムライン上部に投稿画面を表示する"
 
 _ago:
   unknown: "謎"

src/client/components/post-form.vue

@@ -6,7 +6,7 @@
 	@drop.stop="onDrop"
 >
 	<header>
-		<button class="cancel _button" @click="cancel"><fa :icon="faTimes"/></button>
+		<button v-if="!fixed" class="cancel _button" @click="cancel"><fa :icon="faTimes"/></button>
 		<div>
 			<span class="text-count" :class="{ over: trimmedLength(text) > max }">{{ max - trimmedLength(text) }}</span>
 			<button class="_button visibility" @click="setVisibility" ref="visibilityButton">
@@ -18,7 +18,7 @@
 			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<fa :icon="reply ? faReply : renote ? faQuoteRight : faPaperPlane"/></button>
 		</div>
 	</header>
-	<div class="form">
+	<div class="form" :class="{ fixed }">
 		<x-note-preview class="preview" v-if="reply" :note="reply"/>
 		<x-note-preview class="preview" v-if="renote" :note="renote"/>
 		<div class="with-quote" v-if="quoteId"><fa icon="quote-left"/> {{ $t('quoteAttached') }}<button @click="quoteId = null"><fa icon="times"/></button></div>
@@ -108,6 +108,11 @@ export default Vue.extend({
 			type: Boolean,
 			required: false,
 			default: false
+		},
+		fixed: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
 
@@ -651,6 +656,11 @@ export default Vue.extend({
 		max-width: 500px;
 		margin: 0 auto;
 
+		&.fixed {
+			max-width: unset;
+			margin: 0 32px;
+		}
+
 		> .preview {
 			padding: 16px;
 		}

src/client/pages/index.home.vue

@@ -16,6 +16,9 @@
 
 	<x-tutorial class="tutorial" v-if="$store.state.settings.tutorial != -1"/>
 
+	<div style="position: relative" v-if="$store.state.device.showFixedPostForm">
+		<x-post-form class="post-form" fixed />
+	</div>
 	<x-timeline ref="tl" :key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src" :src="src" :list="list" :antenna="antenna" @before="before()" @after="after()"/>
 </div>
 </template>
@@ -27,6 +30,7 @@ import { faComments } from '@fortawesome/free-regular-svg-icons';
 import Progress from '../scripts/loading';
 import XTimeline from '../components/timeline.vue';
 import XTutorial from './index.home.tutorial.vue';
+import XPostForm from '../components/post-form.vue';
 
 export default Vue.extend({
 	metaInfo() {
@@ -38,6 +42,7 @@ export default Vue.extend({
 	components: {
 		XTimeline,
 		XTutorial,
+		XPostForm,
 	},
 
 	props: {
@@ -174,6 +179,10 @@ export default Vue.extend({
 	}
 }
 
+.post-form {
+	margin-bottom: var(--margin);
+}
+
 ._kjvfvyph_ {
 	position: relative;
 	height: 100%;

src/client/pages/settings/index.vue

@@ -20,6 +20,7 @@
 				{{ $t('useOsNativeEmojis') }}
 				<template #desc><mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></template>
 			</mk-switch>
+			<mk-switch v-model="showFixedPostForm">{{ $t('showFixedPostForm') }}</mk-switch>			
 		</div>
 		<div class="_content">
 			<mk-select v-model="lang">
@@ -105,6 +106,11 @@ export default Vue.extend({
 			get() { return this.$store.state.device.imageNewTab; },
 			set(value) { this.$store.commit('device/set', { key: 'imageNewTab', value }); }
 		},
+
+		showFixedPostForm: {
+			get() { return this.$store.state.device.showFixedPostForm; },
+			set(value) { this.$store.commit('device/set', { key: 'showFixedPostForm', value }); }
+		},
 	},
 
 	watch: {