Improve post form (#5326)

* Improve post form

* Remove local icon from button
This commit is contained in:
Satsuki Yanagi 2019-08-25 16:12:01 +09:00 committed by syuilo
parent a85f4c4fc4
commit 1c4e1af7c3
4 changed files with 96 additions and 35 deletions

View file

@ -139,6 +139,7 @@ common:
geolocation-alert: "お使いの端末は位置情報に対応していません"
error: "エラー"
enter-username: "ユーザー名を入力してください"
specified-recipient: "宛先"
add-visible-user: "ユーザーを追加"
cw-placeholder: "内容への注釈 (オプション)"
username-prompt: "ユーザー名を入力してください"

View file

@ -153,6 +153,10 @@ export default (opts) => ({
// デフォルト公開範囲
this.applyVisibility(this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility);
if (this.reply && this.reply.localOnly) {
this.localOnly = true;
}
// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) {
this.visibility = this.reply.visibility;
@ -162,14 +166,14 @@ export default (opts) => ({
}).then(users => {
this.visibleUsers.push(...users);
});
}
}
if (this.reply && this.reply.userId !== this.$store.state.i.id) {
if (this.reply.userId !== this.$store.state.i.id) {
this.$root.api('users/show', { userId: this.reply.userId }).then(user => {
this.visibleUsers.push(user);
});
}
}
}
// keep cw when reply
if (this.$store.state.settings.keepCw && this.reply && this.reply.cw) {
@ -199,8 +203,9 @@ export default (opts) => ({
this.$emit('change-attached-files', this.files);
}
}
if (this.initialNote) {
// 削除して編集
if (this.initialNote) {
const init = this.initialNote;
this.text = init.text ? init.text : '';
this.files = init.files;
@ -318,7 +323,7 @@ export default (opts) => ({
setVisibility() {
const w = this.$root.new(MkVisibilityChooser, {
source: this.$refs.visibilityButton,
currentVisibility: this.visibility
currentVisibility: this.localOnly ? `local-${this.visibility}` : this.visibility
});
w.$once('chosen', v => {
this.applyVisibility(v);

View file

@ -10,14 +10,18 @@
<b>{{ $t('@.post-form.recent-tags') }}:</b>
<a v-for="tag in recentHashtags.slice(0, 5)" @click="addTag(tag)" :title="$t('@.post-form.click-to-tagging')">#{{ tag }}</a>
</div>
<div class="with-quote" v-if="quoteId">{{ $t('@.post-form.quote-attached') }} <a @click="quoteId = null">[x]</a></div>
<div v-if="visibility === 'specified'" class="visibleUsers">
<div class="with-quote" v-if="quoteId"><fa icon="quote-left"/> {{ $t('@.post-form.quote-attached') }}<button @click="quoteId = null"><fa icon="times"/></button></div>
<div v-if="visibility === 'specified'" class="to-specified">
<fa icon="envelope"/> {{ $t('@.post-form.specified-recipient') }}
<div class="visibleUsers">
<span v-for="u in visibleUsers">
<mk-user-name :user="u"/><a @click="removeVisibleUser(u)">[x]</a>
<mk-user-name :user="u"/>
<button @click="removeVisibleUser(u)"><fa icon="times"/></button>
</span>
<a @click="addVisibleUser">{{ $t('@.post-form.add-visible-user') }}</a>
<button @click="addVisibleUser">{{ $t('@.post-form.add-visible-user') }}</button>
</div>
<div class="local-only" v-if="localOnly === true">{{ $t('@.post-form.local-only-message') }}</div>
</div>
<div class="local-only" v-if="localOnly === true"><fa icon="heart"/> {{ $t('@.post-form.local-only-message') }}</div>
<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('@.post-form.cw-placeholder')" v-autocomplete="{ model: 'cw' }">
<div class="textarea">
<textarea :class="{ with: (files.length != 0 || poll) }"
@ -207,13 +211,37 @@ export default Vue.extend({
margin 0 0 8px 0
color var(--primary)
> button
padding 4px 8px
color var(--primaryAlpha04)
&:hover
color var(--primaryAlpha06)
&:active
color var(--primaryDarken30)
> .to-specified
margin 0 0 8px 0
color var(--primary)
> .visibleUsers
margin-bottom 8px
display inline
top -1px
font-size 14px
> span
margin-right 16px
color var(--primary)
margin-left 14px
> button
padding 4px 8px
color var(--primaryAlpha04)
&:hover
color var(--primaryAlpha06)
&:active
color var(--primaryDarken30)
> .local-only
margin 0 0 8px 0

View file

@ -17,15 +17,18 @@
<div class="form">
<mk-note-preview class="preview" v-if="reply" :note="reply"/>
<mk-note-preview class="preview" v-if="renote" :note="renote"/>
<div class="with-quote" v-if="quoteId">{{ $t('@.post-form.quote-attached') }} <a @click="quoteId = null">[x]</a></div>
<div v-if="visibility === 'specified'" class="visibleUsers">
<div class="with-quote" v-if="quoteId"><fa icon="quote-left"/> {{ $t('@.post-form.quote-attached') }}<button @click="quoteId = null"><fa icon="times"/></button></div>
<div v-if="visibility === 'specified'" class="to-specified">
<fa icon="envelope"/> {{ $t('@.post-form.specified-recipient') }}
<div class="visibleUsers">
<span v-for="u in visibleUsers">
<mk-user-name :user="u"/>
<a @click="removeVisibleUser(u)">[x]</a>
<button @click="removeVisibleUser(u)"><fa icon="times"/></button>
</span>
<a @click="addVisibleUser">+{{ $t('@.post-form.add-visible-user') }}</a>
<button @click="addVisibleUser">{{ $t('@.post-form.add-visible-user') }}</button>
</div>
<div class="local-only" v-if="localOnly === true">{{ $t('@.post-form.local-only-message') }}</div>
</div>
<div class="local-only" v-if="localOnly === true"><fa icon="heart"/> {{ $t('@.post-form.local-only-message') }}</div>
<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('@.post-form.cw-placeholder')" v-autocomplete="{ model: 'cw' }">
<textarea v-model="text" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="{ model: 'text' }" @paste="onPaste"></textarea>
<x-post-form-attaches class="attaches" :files="files"/>
@ -145,13 +148,37 @@ export default Vue.extend({
margin 0 0 8px 0
color var(--primary)
> button
padding 4px 8px
color var(--primaryAlpha04)
&:hover
color var(--primaryAlpha06)
&:active
color var(--primaryDarken30)
> .to-specified
margin 0 0 8px 0
color var(--primary)
> .visibleUsers
margin 5px
display inline
top -1px
font-size 14px
> span
margin-right 16px
color var(--text)
margin-left 14px
> button
padding 4px 8px
color var(--primaryAlpha04)
&:hover
color var(--primaryAlpha06)
&:active
color var(--primaryDarken30)
> .local-only
margin 0 0 8px 0