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

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

* fix
This commit is contained in:
Xeltica 2020-02-19 03:11:09 +09:00 committed by GitHub
parent ca7cb94358
commit a340d4ed8e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 2 deletions

View file

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

View file

@ -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;
}

View file

@ -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%;

View file

@ -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: {