Improve post form (#5326)
* Improve post form * Remove local icon from button
This commit is contained in:
Satsuki Yanagi
syuilo
parent
a85f4c4fc4
commit
1c4e1af7c3
4 changed files with 96 additions and 35 deletions
|
|
@ -139,6 +139,7 @@ common:
|
|||
geolocation-alert: "お使いの端末は位置情報に対応していません"
|
||||
error: "エラー"
|
||||
enter-username: "ユーザー名を入力してください"
|
||||
specified-recipient: "宛先"
|
||||
add-visible-user: "ユーザーを追加"
|
||||
cw-placeholder: "内容への注釈 (オプション)"
|
||||
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);
|
||||
|
||||
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,13 +166,13 @@ export default (opts) => ({
|
|||
}).then(users => {
|
||||
this.visibleUsers.push(...users);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (this.reply && this.reply.userId !== this.$store.state.i.id) {
|
||||
this.$root.api('users/show', { userId: this.reply.userId }).then(user => {
|
||||
this.visibleUsers.push(user);
|
||||
});
|
||||
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
|
||||
|
|
@ -199,8 +203,9 @@ export default (opts) => ({
|
|||
this.$emit('change-attached-files', this.files);
|
||||
}
|
||||
}
|
||||
|
||||
// 削除して編集
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<span v-for="u in visibleUsers">
|
||||
<mk-user-name :user="u"/><a @click="removeVisibleUser(u)">[x]</a>
|
||||
</span>
|
||||
<a @click="addVisibleUser">{{ $t('@.post-form.add-visible-user') }}</a>
|
||||
<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"/>
|
||||
<button @click="removeVisibleUser(u)"><fa icon="times"/></button>
|
||||
</span>
|
||||
<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 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)
|
||||
|
||||
> .visibleUsers
|
||||
margin-bottom 8px
|
||||
font-size 14px
|
||||
> button
|
||||
padding 4px 8px
|
||||
color var(--primaryAlpha04)
|
||||
|
||||
> span
|
||||
margin-right 16px
|
||||
color var(--primary)
|
||||
&:hover
|
||||
color var(--primaryAlpha06)
|
||||
|
||||
&:active
|
||||
color var(--primaryDarken30)
|
||||
|
||||
> .to-specified
|
||||
margin 0 0 8px 0
|
||||
color var(--primary)
|
||||
|
||||
> .visibleUsers
|
||||
display inline
|
||||
top -1px
|
||||
font-size 14px
|
||||
|
||||
> span
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<span v-for="u in visibleUsers">
|
||||
<mk-user-name :user="u"/>
|
||||
<a @click="removeVisibleUser(u)">[x]</a>
|
||||
</span>
|
||||
<a @click="addVisibleUser">+{{ $t('@.post-form.add-visible-user') }}</a>
|
||||
<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"/>
|
||||
<button @click="removeVisibleUser(u)"><fa icon="times"/></button>
|
||||
</span>
|
||||
<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 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)
|
||||
|
||||
> .visibleUsers
|
||||
margin 5px
|
||||
font-size 14px
|
||||
> button
|
||||
padding 4px 8px
|
||||
color var(--primaryAlpha04)
|
||||
|
||||
> span
|
||||
margin-right 16px
|
||||
color var(--text)
|
||||
&:hover
|
||||
color var(--primaryAlpha06)
|
||||
|
||||
&:active
|
||||
color var(--primaryDarken30)
|
||||
|
||||
> .to-specified
|
||||
margin 0 0 8px 0
|
||||
color var(--primary)
|
||||
|
||||
> .visibleUsers
|
||||
display inline
|
||||
top -1px
|
||||
font-size 14px
|
||||
|
||||
> span
|
||||
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
|
||||
|
|
|
|||
Loading…
Reference in a new issue