Improve post form (#5326)
* Improve post form * Remove local icon from button
This commit is contained in:
parent
a85f4c4fc4
commit
1c4e1af7c3
|
@ -139,6 +139,7 @@ common:
|
||||||
geolocation-alert: "お使いの端末は位置情報に対応していません"
|
geolocation-alert: "お使いの端末は位置情報に対応していません"
|
||||||
error: "エラー"
|
error: "エラー"
|
||||||
enter-username: "ユーザー名を入力してください"
|
enter-username: "ユーザー名を入力してください"
|
||||||
|
specified-recipient: "宛先"
|
||||||
add-visible-user: "ユーザーを追加"
|
add-visible-user: "ユーザーを追加"
|
||||||
cw-placeholder: "内容への注釈 (オプション)"
|
cw-placeholder: "内容への注釈 (オプション)"
|
||||||
username-prompt: "ユーザー名を入力してください"
|
username-prompt: "ユーザー名を入力してください"
|
||||||
|
|
|
@ -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);
|
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)) {
|
if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) {
|
||||||
this.visibility = this.reply.visibility;
|
this.visibility = this.reply.visibility;
|
||||||
|
@ -162,14 +166,14 @@ export default (opts) => ({
|
||||||
}).then(users => {
|
}).then(users => {
|
||||||
this.visibleUsers.push(...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.$root.api('users/show', { userId: this.reply.userId }).then(user => {
|
||||||
this.visibleUsers.push(user);
|
this.visibleUsers.push(user);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// keep cw when reply
|
// keep cw when reply
|
||||||
if (this.$store.state.settings.keepCw && this.reply && this.reply.cw) {
|
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);
|
this.$emit('change-attached-files', this.files);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (this.initialNote) {
|
|
||||||
// 削除して編集
|
// 削除して編集
|
||||||
|
if (this.initialNote) {
|
||||||
const init = this.initialNote;
|
const init = this.initialNote;
|
||||||
this.text = init.text ? init.text : '';
|
this.text = init.text ? init.text : '';
|
||||||
this.files = init.files;
|
this.files = init.files;
|
||||||
|
@ -318,7 +323,7 @@ export default (opts) => ({
|
||||||
setVisibility() {
|
setVisibility() {
|
||||||
const w = this.$root.new(MkVisibilityChooser, {
|
const w = this.$root.new(MkVisibilityChooser, {
|
||||||
source: this.$refs.visibilityButton,
|
source: this.$refs.visibilityButton,
|
||||||
currentVisibility: this.visibility
|
currentVisibility: this.localOnly ? `local-${this.visibility}` : this.visibility
|
||||||
});
|
});
|
||||||
w.$once('chosen', v => {
|
w.$once('chosen', v => {
|
||||||
this.applyVisibility(v);
|
this.applyVisibility(v);
|
||||||
|
|
|
@ -10,14 +10,18 @@
|
||||||
<b>{{ $t('@.post-form.recent-tags') }}:</b>
|
<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>
|
<a v-for="tag in recentHashtags.slice(0, 5)" @click="addTag(tag)" :title="$t('@.post-form.click-to-tagging')">#{{ tag }}</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="with-quote" v-if="quoteId">{{ $t('@.post-form.quote-attached') }} <a @click="quoteId = null">[x]</a></div>
|
<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="visibleUsers">
|
<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">
|
<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>
|
</span>
|
||||||
<a @click="addVisibleUser">{{ $t('@.post-form.add-visible-user') }}</a>
|
<button @click="addVisibleUser">{{ $t('@.post-form.add-visible-user') }}</button>
|
||||||
</div>
|
</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' }">
|
<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('@.post-form.cw-placeholder')" v-autocomplete="{ model: 'cw' }">
|
||||||
<div class="textarea">
|
<div class="textarea">
|
||||||
<textarea :class="{ with: (files.length != 0 || poll) }"
|
<textarea :class="{ with: (files.length != 0 || poll) }"
|
||||||
|
@ -207,13 +211,37 @@ export default Vue.extend({
|
||||||
margin 0 0 8px 0
|
margin 0 0 8px 0
|
||||||
color var(--primary)
|
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
|
> .visibleUsers
|
||||||
margin-bottom 8px
|
display inline
|
||||||
|
top -1px
|
||||||
font-size 14px
|
font-size 14px
|
||||||
|
|
||||||
> span
|
> span
|
||||||
margin-right 16px
|
margin-left 14px
|
||||||
color var(--primary)
|
|
||||||
|
> button
|
||||||
|
padding 4px 8px
|
||||||
|
color var(--primaryAlpha04)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color var(--primaryAlpha06)
|
||||||
|
|
||||||
|
&:active
|
||||||
|
color var(--primaryDarken30)
|
||||||
|
|
||||||
> .local-only
|
> .local-only
|
||||||
margin 0 0 8px 0
|
margin 0 0 8px 0
|
||||||
|
|
|
@ -17,15 +17,18 @@
|
||||||
<div class="form">
|
<div class="form">
|
||||||
<mk-note-preview class="preview" v-if="reply" :note="reply"/>
|
<mk-note-preview class="preview" v-if="reply" :note="reply"/>
|
||||||
<mk-note-preview class="preview" v-if="renote" :note="renote"/>
|
<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 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="visibleUsers">
|
<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">
|
<span v-for="u in visibleUsers">
|
||||||
<mk-user-name :user="u"/>
|
<mk-user-name :user="u"/>
|
||||||
<a @click="removeVisibleUser(u)">[x]</a>
|
<button @click="removeVisibleUser(u)"><fa icon="times"/></button>
|
||||||
</span>
|
</span>
|
||||||
<a @click="addVisibleUser">+{{ $t('@.post-form.add-visible-user') }}</a>
|
<button @click="addVisibleUser">{{ $t('@.post-form.add-visible-user') }}</button>
|
||||||
</div>
|
</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' }">
|
<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>
|
<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"/>
|
<x-post-form-attaches class="attaches" :files="files"/>
|
||||||
|
@ -145,13 +148,37 @@ export default Vue.extend({
|
||||||
margin 0 0 8px 0
|
margin 0 0 8px 0
|
||||||
color var(--primary)
|
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
|
> .visibleUsers
|
||||||
margin 5px
|
display inline
|
||||||
|
top -1px
|
||||||
font-size 14px
|
font-size 14px
|
||||||
|
|
||||||
> span
|
> span
|
||||||
margin-right 16px
|
margin-left 14px
|
||||||
color var(--text)
|
|
||||||
|
> button
|
||||||
|
padding 4px 8px
|
||||||
|
color var(--primaryAlpha04)
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color var(--primaryAlpha06)
|
||||||
|
|
||||||
|
&:active
|
||||||
|
color var(--primaryDarken30)
|
||||||
|
|
||||||
> .local-only
|
> .local-only
|
||||||
margin 0 0 8px 0
|
margin 0 0 8px 0
|
||||||
|
|
Loading…
Reference in New Issue