diff options
Diffstat (limited to 'src/components/post_status_form')
| -rw-r--r-- | src/components/post_status_form/post_status_form.js | 44 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 91 |
2 files changed, 101 insertions, 34 deletions
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index a7874acd..5dbb1c9d 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -2,6 +2,7 @@ import statusPoster from '../../services/status_poster/status_poster.service.js' import MediaUpload from '../media_upload/media_upload.vue' import ScopeSelector from '../scope_selector/scope_selector.vue' import EmojiInput from '../emoji-input/emoji-input.vue' +import PollForm from '../poll/poll_form.vue' import fileTypeService from '../../services/file_type/file_type.service.js' import { reject, map, uniqBy } from 'lodash' import suggestor from '../emoji-input/suggestor.js' @@ -31,8 +32,9 @@ const PostStatusForm = { ], components: { MediaUpload, - ScopeSelector, - EmojiInput + EmojiInput, + PollForm, + ScopeSelector }, mounted () { this.resize(this.$refs.textarea) @@ -75,10 +77,12 @@ const PostStatusForm = { status: statusText, nsfw: false, files: [], + poll: {}, visibility: scope, contentType }, - caret: 0 + caret: 0, + pollFormVisible: false } }, computed: { @@ -153,8 +157,17 @@ const PostStatusForm = { safeDMEnabled () { return this.$store.state.instance.safeDM }, + pollsAvailable () { + return this.$store.state.instance.pollsAvailable && + this.$store.state.instance.pollLimits.max_options >= 2 + }, hideScopeNotice () { return this.$store.state.config.hideScopeNotice + }, + pollContentError () { + return this.pollFormVisible && + this.newStatus.poll && + this.newStatus.poll.error } }, methods: { @@ -171,6 +184,12 @@ const PostStatusForm = { } } + const poll = this.pollFormVisible ? this.newStatus.poll : {} + if (this.pollContentError) { + this.error = this.pollContentError + return + } + this.posting = true statusPoster.postStatus({ status: newStatus.status, @@ -180,7 +199,8 @@ const PostStatusForm = { media: newStatus.files, store: this.$store, inReplyToStatusId: this.replyTo, - contentType: newStatus.contentType + contentType: newStatus.contentType, + poll }).then((data) => { if (!data.error) { this.newStatus = { @@ -188,9 +208,12 @@ const PostStatusForm = { spoilerText: '', files: [], visibility: newStatus.visibility, - contentType: newStatus.contentType + contentType: newStatus.contentType, + poll: {} } + this.pollFormVisible = false this.$refs.mediaUpload.clearFile() + this.clearPollForm() this.$emit('posted') let el = this.$el.querySelector('textarea') el.style.height = 'auto' @@ -261,6 +284,17 @@ const PostStatusForm = { changeVis (visibility) { this.newStatus.visibility = visibility }, + togglePollForm () { + this.pollFormVisible = !this.pollFormVisible + }, + setPoll (poll) { + this.newStatus.poll = poll + }, + clearPollForm () { + if (this.$refs.pollForm) { + this.$refs.pollForm.clear() + } + }, dismissScopeNotice () { this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true }) } diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 9929aab0..fbeaf39b 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -1,6 +1,6 @@ <template> <div class="post-status-form"> - <form @submit.prevent="postStatus(newStatus)"> + <form @submit.prevent="postStatus(newStatus)" autocomplete="off"> <div class="form-group" > <i18n v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'" @@ -91,37 +91,52 @@ :onScopeChange="changeVis"/> </div> </div> - <div class='form-bottom'> + <poll-form + ref="pollForm" + v-if="pollsAvailable" + :visible="pollFormVisible" + @update-poll="setPoll" + /> + <div class='form-bottom'> + <div class='form-bottom-left'> <media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload> - - <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p> - <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p> - - <button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button> - <button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button> - <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button> - </div> - <div class='alert error' v-if="error"> - Error: {{ error }} - <i class="button-icon icon-cancel" @click="clearError"></i> - </div> - <div class="attachments"> - <div class="media-upload-wrapper" v-for="file in newStatus.files"> - <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i> - <div class="media-upload-container attachment"> - <img class="thumbnail media-upload" :src="file.url" v-if="type(file) === 'image'"></img> - <video v-if="type(file) === 'video'" :src="file.url" controls></video> - <audio v-if="type(file) === 'audio'" :src="file.url" controls></audio> - <a v-if="type(file) === 'unknown'" :href="file.url">{{file.url}}</a> - </div> + <div v-if="pollsAvailable" class="poll-icon"> + <i + :title="$t('polls.add_poll')" + @click="togglePollForm" + class="icon-chart-bar btn btn-default" + :class="pollFormVisible && 'selected'" + /> </div> </div> - <div class="upload_settings" v-if="newStatus.files.length > 0"> - <input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw"> - <label for="filesSensitive">{{$t('post_status.attachments_sensitive')}}</label> + <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p> + <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p> + + <button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button> + <button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button> + <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button> + </div> + <div class='alert error' v-if="error"> + Error: {{ error }} + <i class="button-icon icon-cancel" @click="clearError"></i> + </div> + <div class="attachments"> + <div class="media-upload-wrapper" v-for="file in newStatus.files"> + <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i> + <div class="media-upload-container attachment"> + <img class="thumbnail media-upload" :src="file.url" v-if="type(file) === 'image'"></img> + <video v-if="type(file) === 'video'" :src="file.url" controls></video> + <audio v-if="type(file) === 'audio'" :src="file.url" controls></audio> + <a v-if="type(file) === 'unknown'" :href="file.url">{{file.url}}</a> + </div> </div> - </form> - </div> + </div> + <div class="upload_settings" v-if="newStatus.files.length > 0"> + <input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw"> + <label for="filesSensitive">{{$t('post_status.attachments_sensitive')}}</label> + </div> + </form> +</div> </template> <script src="./post_status_form.js"></script> @@ -172,6 +187,11 @@ } } + .form-bottom-left { + display: flex; + flex: 1; + } + .text-format { .only-format { color: $fallback--faint; @@ -179,6 +199,20 @@ } } + .poll-icon { + font-size: 26px; + flex: 1; + + .selected { + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } + } + + .icon-chart-bar { + cursor: pointer; + } + .error { text-align: center; @@ -240,7 +274,6 @@ } } - .btn { cursor: pointer; } |