monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

Improve post form (#5326)

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
locales/ja-JP.yml
View file

@ -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: "ユーザー名を入力してください"

21
src/client/app/common/scripts/post-form.ts
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); 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,13 +166,13 @@ 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
@ -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);

54
src/client/app/desktop/views/components/post-form.vue
View file

@ -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">
<span v-for="u in visibleUsers"> <fa icon="envelope"/> {{ $t('@.post-form.specified-recipient') }}
<mk-user-name :user="u"/><a @click="removeVisibleUser(u)">[x]</a> <div class="visibleUsers">
</span> <span v-for="u in visibleUsers">
<a @click="addVisibleUser">{{ $t('@.post-form.add-visible-user') }}</a> <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>
<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' }"> <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)
> .visibleUsers > button
margin-bottom 8px padding 4px 8px
font-size 14px color var(--primaryAlpha04)
> span &:hover
margin-right 16px color var(--primaryAlpha06)
color var(--primary)
&: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 > .local-only
margin 0 0 8px 0 margin 0 0 8px 0

55
src/client/app/mobile/views/components/post-form.vue
View file

@ -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">
<span v-for="u in visibleUsers"> <fa icon="envelope"/> {{ $t('@.post-form.specified-recipient') }}
<mk-user-name :user="u"/> <div class="visibleUsers">
<a @click="removeVisibleUser(u)">[x]</a> <span v-for="u in visibleUsers">
</span> <mk-user-name :user="u"/>
<a @click="addVisibleUser">+{{ $t('@.post-form.add-visible-user') }}</a> <button @click="removeVisibleUser(u)"><fa icon="times"/></button>
</span>
<button @click="addVisibleUser">{{ $t('@.post-form.add-visible-user') }}</button>
</div>
</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' }"> <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)
> .visibleUsers > button
margin 5px padding 4px 8px
font-size 14px color var(--primaryAlpha04)
> span &:hover
margin-right 16px color var(--primaryAlpha06)
color var(--text)
&: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 > .local-only
margin 0 0 8px 0 margin 0 0 8px 0