refs #884 Add request loading circle in new toot modal

This commit is contained in:
AkiraFukushima 2019-05-07 23:22:01 +09:00
parent 327f621791
commit 7a1d9ed05b
3 changed files with 161 additions and 124 deletions

View File

@ -4,20 +4,15 @@
:visible.sync="newTootModal"
:before-close="closeConfirm"
width="400px"
class="new-toot-modal">
class="new-toot-modal"
>
<el-form v-on:submit.prevent="toot" role="form">
<div class="spoiler" v-show="showContentWarning">
<div class="el-input">
<input type="text" class="el-input__inner" :placeholder="$t('modals.new_toot.cw')" v-model="spoiler" v-shortkey.avoid />
</div>
</div>
<Status
v-model="status"
:opened="newTootModal"
:fixCursorPos="hashtagInserting"
@paste="onPaste"
@toot="toot"
/>
<Status v-model="status" :opened="newTootModal" :fixCursorPos="hashtagInserting" @paste="onPaste" @toot="toot" />
</el-form>
<div class="preview">
<div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
@ -28,11 +23,12 @@
class="image-description"
:placeholder="$t('modals.new_toot.description')"
v-model="mediaDescriptions[media.id]"
v-shortkey="{left: ['arrowleft'], right: ['arrowright']}"
v-shortkey="{ left: ['arrowleft'], right: ['arrowright'] }"
@shortkey="handleDescriptionKey"
role="textbox"
contenteditable="true"
aria-multiline="true">
aria-multiline="true"
>
</textarea>
</div>
</div>
@ -41,7 +37,7 @@
<el-button size="small" type="text" @click="selectImage" :title="$t('modals.new_toot.add_image')">
<icon name="camera"></icon>
</el-button>
<input name="image" type="file" class="image-input" ref="image" @change="onChangeImage" :key="attachedMediaId"/>
<input name="image" type="file" class="image-input" ref="image" @change="onChangeImage" :key="attachedMediaId" />
</div>
<div class="privacy">
<el-dropdown trigger="click" @command="changeVisibility">
@ -69,24 +65,50 @@
</el-dropdown>
</div>
<div class="sensitive" v-show="attachedMedias.length > 0">
<el-button size="small" type="text" @click="changeSensitive" :title="$t('modals.new_toot.change_sensitive')" :aria-pressed="sensitive">
<el-button
size="small"
type="text"
@click="changeSensitive"
:title="$t('modals.new_toot.change_sensitive')"
:aria-pressed="sensitive"
>
<icon name="eye-slash" v-show="!sensitive"></icon>
<icon name="eye" v-show="sensitive"></icon>
</el-button>
</div>
<div class="content-warning">
<el-button size="small" type="text" @click="showContentWarning = !showContentWarning" :title="$t('modals.new_toot.add_cw')" :class="showContentWarning? '' : 'clickable'" :aria-pressed="showContentWarning">
<el-button
size="small"
type="text"
@click="showContentWarning = !showContentWarning"
:title="$t('modals.new_toot.add_cw')"
:class="showContentWarning ? '' : 'clickable'"
:aria-pressed="showContentWarning"
>
<span class="cw-text">CW</span>
</el-button>
</div>
<div class="pined-hashtag">
<el-button size="small" type="text" @click="pinedHashtag = !pinedHashtag" :title="$t('modals.new_toot.pined_hashtag')" :class="pinedHashtag? '' : 'clickable'" :aria-pressed="pinedHashtag">
<el-button
size="small"
type="text"
@click="pinedHashtag = !pinedHashtag"
:title="$t('modals.new_toot.pined_hashtag')"
:class="pinedHashtag ? '' : 'clickable'"
:aria-pressed="pinedHashtag"
>
<icon name="hashtag"></icon>
</el-button>
</div>
<span class="text-count">{{ tootMax - status.length }}</span>
<el-button class="toot-action" size="small" @click="closeConfirm(close)">{{ $t('modals.new_toot.cancel') }}</el-button>
<el-button class="toot-action" size="small" type="primary" @click="toot" :loading="blockSubmit">{{ $t('modals.new_toot.toot') }}</el-button>
<div class="info">
<img src="../../../assets/images/loading-spinner-wide.svg" v-show="loading" class="loading" />
<span class="text-count">{{ tootMax - status.length }}</span>
<el-button class="toot-action" size="small" @click="closeConfirm(close)">{{ $t('modals.new_toot.cancel') }}</el-button>
<el-button class="toot-action" size="small" type="primary" @click="toot" :loading="blockSubmit">{{
$t('modals.new_toot.toot')
}}</el-button>
</div>
<div class="clearfix"></div>
</div>
</el-dialog>
@ -103,7 +125,7 @@ export default {
components: {
Status
},
data () {
data() {
return {
status: '',
mediaDescriptions: {},
@ -114,7 +136,7 @@ export default {
},
computed: {
...mapState('TimelineSpace/Modals/NewToot', {
replyToId: (state) => {
replyToId: state => {
if (state.replyToMessage !== null) {
return state.replyToMessage.id
} else {
@ -128,7 +150,7 @@ export default {
sensitive: state => state.sensitive,
initialStatus: state => state.initialStatus,
initialSpoiler: state => state.initialSpoiler,
visibilityIcon: (state) => {
visibilityIcon: state => {
switch (state.visibility) {
case Visibility.Public.value:
return 'globe'
@ -141,19 +163,18 @@ export default {
default:
return 'globe'
}
}
},
loading: state => state.loading
}),
...mapState('TimelineSpace', {
tootMax: state => state.tootMax
}),
...mapGetters('TimelineSpace/Modals/NewToot', [
'hashtagInserting'
]),
...mapGetters('TimelineSpace/Modals/NewToot', ['hashtagInserting']),
newTootModal: {
get () {
get() {
return this.$store.state.TimelineSpace.Modals.NewToot.modalOpen
},
set (value) {
set(value) {
if (value) {
this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal')
} else {
@ -162,16 +183,19 @@ export default {
}
},
pinedHashtag: {
get () {
get() {
return this.$store.state.TimelineSpace.Modals.NewToot.pinedHashtag
},
set (value) {
set(value) {
this.$store.commit('TimelineSpace/Modals/NewToot/changePinedHashtag', value)
}
}
},
created() {
this.$store.dispatch('TimelineSpace/Modals/NewToot/setupLoading')
},
watch: {
newTootModal: function (newState, oldState) {
newTootModal: function(newState, oldState) {
if (!oldState && newState) {
this.showContentWarning = this.initialSpoiler
this.status = this.initialStatus
@ -180,12 +204,12 @@ export default {
}
},
methods: {
close () {
close() {
this.filteredAccount = []
this.$store.dispatch('TimelineSpace/Modals/NewToot/resetMediaId')
this.$store.dispatch('TimelineSpace/Modals/NewToot/closeModal')
},
async toot () {
async toot() {
if (!this.newTootModal) {
return
}
@ -195,7 +219,7 @@ export default {
type: 'error'
})
}
const visibilityKey = Object.keys(Visibility).find((key) => {
const visibilityKey = Object.keys(Visibility).find(key => {
return Visibility[key].value === this.visibility
})
let form = {
@ -217,15 +241,18 @@ export default {
})
}
form = Object.assign(form, {
media_ids: this.attachedMedias.map((m) => { return m.id })
media_ids: this.attachedMedias.map(m => {
return m.id
})
})
}
const status = await this.$store.dispatch('TimelineSpace/Modals/NewToot/updateMedia', this.mediaDescriptions)
const status = await this.$store
.dispatch('TimelineSpace/Modals/NewToot/updateMedia', this.mediaDescriptions)
.then(() => {
return this.$store.dispatch('TimelineSpace/Modals/NewToot/postToot', form)
})
.catch((e) => {
.catch(e => {
console.error(e)
this.$message({
message: this.$t('message.toot_error'),
@ -235,10 +262,10 @@ export default {
this.$store.dispatch('TimelineSpace/Modals/NewToot/updateHashtags', status.tags)
this.close()
},
selectImage () {
selectImage() {
this.$refs.image.click()
},
onChangeImage (e) {
onChangeImage(e) {
if (e.target.files.item(0) === null || e.target.files.item(0) === undefined) {
return
}
@ -252,7 +279,7 @@ export default {
}
this.updateImage(file)
},
onPaste (e) {
onPaste(e) {
const mimeTypes = clipboard.availableFormats().filter(type => type.startsWith('image'))
if (mimeTypes.length === 0) {
return
@ -268,43 +295,40 @@ export default {
const file = new File([data], 'clipboard.picture', { type: mimeTypes[0] })
this.updateImage(file)
},
updateImage (file) {
updateImage(file) {
this.$store.dispatch('TimelineSpace/Modals/NewToot/incrementMediaId')
this.$store.dispatch('TimelineSpace/Modals/NewToot/uploadImage', file)
.catch(() => {
this.$message({
message: this.$t('message.attach_error'),
type: 'error'
})
this.$store.dispatch('TimelineSpace/Modals/NewToot/uploadImage', file).catch(() => {
this.$message({
message: this.$t('message.attach_error'),
type: 'error'
})
})
},
removeAttachment (media) {
removeAttachment(media) {
this.$store.commit('TimelineSpace/Modals/NewToot/removeMedia', media)
delete this.mediaDescriptions[media.id]
},
changeVisibility (level) {
changeVisibility(level) {
this.$store.commit('TimelineSpace/Modals/NewToot/changeVisibilityValue', level)
},
changeSensitive () {
changeSensitive() {
this.$store.commit('TimelineSpace/Modals/NewToot/changeSensitive', !this.sensitive)
},
closeConfirm (done) {
closeConfirm(done) {
if (this.status.length === 0) {
done()
} else {
this.$confirm(
this.$t('modals.new_toot.close_confirm'),
{
confirmButtonText: this.$t('modals.new_toot.close_confirm_ok'),
cancelButtonText: this.$t('modals.new_toot.close_confirm_cancel')
})
this.$confirm(this.$t('modals.new_toot.close_confirm'), {
confirmButtonText: this.$t('modals.new_toot.close_confirm_ok'),
cancelButtonText: this.$t('modals.new_toot.close_confirm_cancel')
})
.then(_ => {
done()
})
.catch(_ => {})
}
},
handleDescriptionKey (event) {
handleDescriptionKey(event) {
const current = event.target.selectionStart
switch (event.srcKey) {
case 'left':
@ -451,9 +475,20 @@ export default {
color: #909399;
}
.text-count {
padding-right: 10px;
color: #909399;
.info {
display: flex;
justify-content: flex-end;
align-items: center;
.loading {
width: 18px;
margin-right: 4px;
}
.text-count {
padding-right: 10px;
color: #909399;
}
}
.toot-action {

View File

@ -4,19 +4,21 @@ import Visibility, { VisibilityType } from '~/src/constants/visibility'
import TootStatus, { StatusState } from './NewToot/Status'
import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
import { RootState } from '@/store'
import AxiosLoading from '@/utils/axiosLoading'
export interface NewTootState {
modalOpen: boolean,
initialStatus: string,
initialSpoiler: string,
replyToMessage: Status | null,
blockSubmit: boolean,
attachedMedias: Array<Attachment>,
visibility: number,
sensitive: boolean,
attachedMediaId: number,
pinedHashtag: boolean,
modalOpen: boolean
initialStatus: string
initialSpoiler: string
replyToMessage: Status | null
blockSubmit: boolean
attachedMedias: Array<Attachment>
visibility: number
sensitive: boolean
attachedMediaId: number
pinedHashtag: boolean
hashtags: Array<Tag>
loading: boolean
}
export interface NewTootModuleState extends NewTootState {
@ -34,7 +36,8 @@ const state = (): NewTootState => ({
sensitive: false,
attachedMediaId: 0,
pinedHashtag: false,
hashtags: []
hashtags: [],
loading: false
})
export const MUTATION_TYPES = {
@ -50,7 +53,8 @@ export const MUTATION_TYPES = {
CHANGE_SENSITIVE: 'changeSensitive',
UPDATE_MEDIA_ID: 'updateMediaId',
CHANGE_PINED_HASHTAG: 'changePinedHashtag',
UPDATE_HASHTAGS: 'updateHashtags'
UPDATE_HASHTAGS: 'updateHashtags',
CHANGE_LOADING: 'changeLoading'
}
const mutations: MutationTree<NewTootState> = {
@ -72,7 +76,7 @@ const mutations: MutationTree<NewTootState> = {
[MUTATION_TYPES.APPEND_ATTACHED_MEDIAS]: (state, media: Attachment) => {
state.attachedMedias = state.attachedMedias.concat([media])
},
[MUTATION_TYPES.CLEAR_ATTACHED_MEDIAS]: (state) => {
[MUTATION_TYPES.CLEAR_ATTACHED_MEDIAS]: state => {
state.attachedMedias = []
},
[MUTATION_TYPES.REMOVE_MEDIA]: (state, media: Attachment) => {
@ -98,26 +102,34 @@ const mutations: MutationTree<NewTootState> = {
},
[MUTATION_TYPES.UPDATE_HASHTAGS]: (state, tags: Array<Tag>) => {
state.hashtags = tags
},
[MUTATION_TYPES.CHANGE_LOADING]: (state, value: boolean) => {
state.loading = value
}
}
const actions: ActionTree<NewTootState, RootState> = {
setupLoading: ({ commit }) => {
const axiosLoading = new AxiosLoading()
axiosLoading.on('start', (_: number) => {
commit(MUTATION_TYPES.CHANGE_LOADING, true)
})
axiosLoading.on('done', () => {
commit(MUTATION_TYPES.CHANGE_LOADING, false)
})
},
updateMedia: async ({ rootState }, media: Attachment) => {
if (rootState.TimelineSpace.account.accessToken === undefined || rootState.TimelineSpace.account.accessToken === null) {
throw new AuthenticationError()
}
const client = new Mastodon(
rootState.TimelineSpace.account.accessToken,
rootState.TimelineSpace.account.baseURL + '/api/v1'
)
const client = new Mastodon(rootState.TimelineSpace.account.accessToken, rootState.TimelineSpace.account.baseURL + '/api/v1')
const attachments = Object.keys(media).map(async id => {
return client.put<Attachment>(`/media/${id}`, { description: media[id] })
})
return Promise.all(attachments)
.catch(err => {
console.error(err)
throw err
})
return Promise.all(attachments).catch(err => {
console.error(err)
throw err
})
},
postToot: async ({ state, commit, rootState }, form) => {
if (rootState.TimelineSpace.account.accessToken === undefined || rootState.TimelineSpace.account.accessToken === null) {
@ -127,11 +139,9 @@ const actions: ActionTree<NewTootState, RootState> = {
return
}
commit(MUTATION_TYPES.CHANGE_BLOCK_SUBMIT, true)
const client = new Mastodon(
rootState.TimelineSpace.account.accessToken,
rootState.TimelineSpace.account.baseURL + '/api/v1'
)
return client.post<Status>('/statuses', form)
const client = new Mastodon(rootState.TimelineSpace.account.accessToken, rootState.TimelineSpace.account.baseURL + '/api/v1')
return client
.post<Status>('/statuses', form)
.then((res: Response<Status>) => {
ipcRenderer.send('toot-action-sound')
return res.data
@ -142,9 +152,10 @@ const actions: ActionTree<NewTootState, RootState> = {
},
openReply: ({ commit, rootState }, message: Status) => {
commit(MUTATION_TYPES.SET_REPLY_TO, message)
const mentionAccounts = [message.account.acct].concat(message.mentions.map(a => a.acct))
const mentionAccounts = [message.account.acct]
.concat(message.mentions.map(a => a.acct))
.filter((a, i, self) => self.indexOf(a) === i)
.filter((a) => a !== rootState.TimelineSpace.account.username)
.filter(a => a !== rootState.TimelineSpace.account.username)
commit(MUTATION_TYPES.UPDATE_INITIAL_STATUS, `${mentionAccounts.map(m => `@${m}`).join(' ')} `)
commit(MUTATION_TYPES.UPDATE_INITIAL_SPOILER, message.spoiler_text)
commit(MUTATION_TYPES.CHANGE_MODAL, true)
@ -179,13 +190,11 @@ const actions: ActionTree<NewTootState, RootState> = {
if (rootState.TimelineSpace.account.accessToken === undefined || rootState.TimelineSpace.account.accessToken === null) {
throw new AuthenticationError()
}
const client = new Mastodon(
rootState.TimelineSpace.account.accessToken,
rootState.TimelineSpace.account.baseURL + '/api/v1'
)
const client = new Mastodon(rootState.TimelineSpace.account.accessToken, rootState.TimelineSpace.account.baseURL + '/api/v1')
const formData = new FormData()
formData.append('file', image)
return client.post<Attachment>('/media', formData)
return client
.post<Attachment>('/media', formData)
.then(res => {
commit(MUTATION_TYPES.CHANGE_BLOCK_SUBMIT, false)
if (res.data.type === 'unknown') throw new UnknownTypeError()
@ -210,12 +219,9 @@ const actions: ActionTree<NewTootState, RootState> = {
}
},
fetchVisibility: async ({ commit, rootState }) => {
const client = new Mastodon(
rootState.TimelineSpace.account.accessToken!,
rootState.TimelineSpace.account.baseURL + '/api/v1'
)
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
const res: Response<Account> = await client.get<Account>('/accounts/verify_credentials')
const visibility: VisibilityType | undefined = (Object.values(Visibility) as Array<VisibilityType>).find((v) => {
const visibility: VisibilityType | undefined = (Object.values(Visibility) as Array<VisibilityType>).find(v => {
return v.key === res.data.source!.privacy
})
if (visibility === undefined) {
@ -227,7 +233,7 @@ const actions: ActionTree<NewTootState, RootState> = {
}
const getters: GetterTree<NewTootState, RootState> = {
hashtagInserting: (state) => {
hashtagInserting: state => {
return !state.replyToMessage && state.pinedHashtag
}
}

View File

@ -3,7 +3,7 @@ import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
import { RootState } from '@/store/index'
interface Suggest {
name: string,
name: string
image: string | null
}
@ -12,7 +12,7 @@ interface SuggestAccount extends Suggest {}
interface SuggestHashtag extends Suggest {}
export interface StatusState {
filteredAccounts: Array<SuggestAccount>,
filteredAccounts: Array<SuggestAccount>
filteredHashtags: Array<SuggestHashtag>
}
@ -25,7 +25,7 @@ export const MUTATION_TYPES = {
UPDATE_FILTERED_ACCOUNTS: 'updateFilteredAccounts',
CLEAR_FILTERED_ACCOUNTS: 'clearFilteredAccounts',
UPDATE_FILTERED_HASHTAGS: 'updateFilteredHashtags',
CLAER_FILTERED_HASHTAGS: 'clearFilteredHashtags'
CLEAR_FILTERED_HASHTAGS: 'clearFilteredHashtags'
}
const mutations: MutationTree<StatusState> = {
@ -35,7 +35,7 @@ const mutations: MutationTree<StatusState> = {
image: null
}))
},
[MUTATION_TYPES.CLEAR_FILTERED_ACCOUNTS]: (state) => {
[MUTATION_TYPES.CLEAR_FILTERED_ACCOUNTS]: state => {
state.filteredAccounts = []
},
[MUTATION_TYPES.UPDATE_FILTERED_HASHTAGS]: (state, tags: Array<Tag>) => {
@ -44,27 +44,21 @@ const mutations: MutationTree<StatusState> = {
image: null
}))
},
[MUTATION_TYPES.CLEAR_FILTERED_ACCOUNTS]: (state) => {
[MUTATION_TYPES.CLEAR_FILTERED_HASHTAGS]: state => {
state.filteredHashtags = []
}
}
const actions: ActionTree<StatusState, RootState> = {
searchAccount: async ({ commit, rootState }, word: string) => {
const client = new Mastodon(
rootState.TimelineSpace.account.accessToken!,
rootState.TimelineSpace.account.baseURL + '/api/v1'
)
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
const res: Response<Results> = await client.get<Results>('/search', { q: word, resolve: false })
commit(MUTATION_TYPES.UPDATE_FILTERED_ACCOUNTS, res.data.accounts)
if (res.data.accounts.length === 0) throw new Error('Empty')
return res.data.accounts
},
searchHashtag: async ({ commit, rootState }, word: string) => {
const client = new Mastodon(
rootState.TimelineSpace.account.accessToken!,
rootState.TimelineSpace.account.baseURL + '/api/v1'
)
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
const res: Response<Results> = await client.get<Results>('/search', { q: word })
commit(MUTATION_TYPES.UPDATE_FILTERED_HASHTAGS, res.data.hashtags)
if (res.data.hashtags.length === 0) throw new Error('Empty')
@ -74,18 +68,20 @@ const actions: ActionTree<StatusState, RootState> = {
const getters: GetterTree<StatusState, RootState> = {
pickerEmojis: (_state, _getters, rootState) => {
return rootState.TimelineSpace.emojis.filter((e, i, array) => {
return (array.findIndex(ar => e.name === ar.name) === i)
}).map(e => {
return {
name: e.name,
short_names: [e.name],
text: e.name,
emoticons: [],
keywords: [e.name],
imageUrl: e.image
}
})
return rootState.TimelineSpace.emojis
.filter((e, i, array) => {
return array.findIndex(ar => e.name === ar.name) === i
})
.map(e => {
return {
name: e.name,
short_names: [e.name],
text: e.name,
emoticons: [],
keywords: [e.name],
imageUrl: e.image
}
})
}
}