refs #874 Divide component for Poll

This commit is contained in:
AkiraFukushima 2019-07-15 21:38:03 +09:00
parent ca609e8ea7
commit 8d0350c9ec
2 changed files with 60 additions and 41 deletions

View File

@ -14,17 +14,7 @@
</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> </el-form>
<div class="poll" v-if="openPoll"> <Poll v-if="openPoll"></Poll>
<ul class="poll-list">
<li class="poll-option" v-for="(option, id) in polls" v-bind:key="id">
<el-radio :disabled="true" :label="id">
<el-input :placeholder="`choice ${id}`" v-model="polls[id]" size="small"></el-input>
<el-button class="remove-poll" type="text" @click="removePoll(id)" size="small"><icon name="times"></icon></el-button>
</el-radio>
</li>
</ul>
<el-button class="add-poll" type="info" size="small" @click="addPoll" plain>Add a choice</el-button>
</div>
<div class="preview"> <div class="preview">
<div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id"> <div class="image-wrapper" v-for="media in attachedMedias" v-bind:key="media.id">
<img :src="media.preview_url" class="preview-image" /> <img :src="media.preview_url" class="preview-image" />
@ -136,12 +126,14 @@ import { mapState, mapGetters } from 'vuex'
import { clipboard } from 'electron' import { clipboard } from 'electron'
import Visibility from '~/src/constants/visibility' import Visibility from '~/src/constants/visibility'
import Status from './NewToot/Status' import Status from './NewToot/Status'
import Poll from './NewToot/Poll'
import { NewTootTootLength, NewTootAttachLength, NewTootModalOpen, NewTootBlockSubmit } from '@/errors/validations' import { NewTootTootLength, NewTootAttachLength, NewTootModalOpen, NewTootBlockSubmit } from '@/errors/validations'
export default { export default {
name: 'new-toot', name: 'new-toot',
components: { components: {
Status Status,
Poll
}, },
data() { data() {
return { return {
@ -149,8 +141,7 @@ export default {
spoiler: '', spoiler: '',
showContentWarning: false, showContentWarning: false,
visibilityList: Visibility, visibilityList: Visibility,
openPoll: false, openPoll: false
polls: ['', '']
} }
}, },
computed: { computed: {
@ -344,12 +335,6 @@ export default {
}, },
togglePollForm() { togglePollForm() {
this.openPoll = !this.openPoll this.openPoll = !this.openPoll
},
addPoll() {
this.polls.push('')
},
removePoll(id) {
this.polls.splice(id, 1)
} }
} }
} }
@ -382,27 +367,6 @@ export default {
} }
} }
.poll {
border-top: 1px solid #ebebeb;
.poll-list {
list-style: none;
padding-left: 16px;
.poll-option {
line-height: 38px;
.remove-poll {
margin-left: 4px;
}
}
}
.add-poll {
margin: 0 0 8px 40px;
}
}
.preview { .preview {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;

View File

@ -0,0 +1,55 @@
<template>
<div class="poll">
<ul class="poll-list">
<li class="poll-option" v-for="(option, id) in polls" v-bind:key="id">
<el-radio :disabled="true" :label="id">
<el-input :placeholder="`choice ${id}`" v-model="polls[id]" size="small"></el-input>
<el-button class="remove-poll" type="text" @click="removePoll(id)" size="small"><icon name="times"></icon></el-button>
</el-radio>
</li>
</ul>
<el-button class="add-poll" type="info" size="small" @click="addPoll" plain>Add a choice</el-button>
</div>
</template>
<script>
export default {
name: 'poll',
data() {
return {
polls: ['', '']
}
},
methods: {
addPoll() {
this.polls.push('')
},
removePoll(id) {
this.polls.splice(id, 1)
}
}
}
</script>
<style lang="scss" scoped>
.poll {
border-top: 1px solid #ebebeb;
.poll-list {
list-style: none;
padding-left: 16px;
.poll-option {
line-height: 38px;
.remove-poll {
margin-left: 4px;
}
}
}
.add-poll {
margin: 0 0 8px 40px;
}
}
</style>