diff options
Diffstat (limited to 'src/components/post_status_form')
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 200 |
1 files changed, 93 insertions, 107 deletions
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 52d1b43c..8ffacd75 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -1,76 +1,62 @@ <template> -<div class="post-status-form"> - <form @submit.prevent="postStatus(newStatus)" autocomplete="off"> - <div class="form-group" > - <i18n - v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'" - path="post_status.account_not_locked_warning" - tag="p" - class="visibility-notice"> - <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link> - </i18n> - <p v-if="!hideScopeNotice && newStatus.visibility === 'public'" class="visibility-notice notice-dismissible"> - <span>{{ $t('post_status.scope_notice.public') }}</span> - <a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss"> - <i class='icon-cancel'></i> - </a> - </p> - <p v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'" class="visibility-notice notice-dismissible"> - <span>{{ $t('post_status.scope_notice.unlisted') }}</span> - <a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss"> - <i class='icon-cancel'></i> - </a> - </p> - <p v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked" class="visibility-notice notice-dismissible"> - <span>{{ $t('post_status.scope_notice.private') }}</span> - <a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss"> - <i class='icon-cancel'></i> - </a> - </p> - <p v-else-if="newStatus.visibility === 'direct'" class="visibility-notice"> - <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span> - <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span> - </p> - <EmojiInput - v-if="newStatus.spoilerText || alwaysShowSubject" - :suggest="emojiSuggestor" - v-model="newStatus.spoilerText" - class="form-control" + <div class="post-status-form"> + <form + autocomplete="off" + @submit.prevent="postStatus(newStatus)" + > + <div class="form-group"> + <i18n + v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'" + path="post_status.account_not_locked_warning" + tag="p" + class="visibility-notice" > - <input - - type="text" - :placeholder="$t('post_status.content_warning')" - v-model="newStatus.spoilerText" - class="form-post-subject" - /> - </EmojiInput> - <EmojiInput - :suggest="emojiUserSuggestor" - v-model="newStatus.status" - class="form-control main-input" + <router-link :to="{ name: 'user-settings' }"> + {{ $t('post_status.account_not_locked_warning_link') }} + </router-link> + </i18n> + <p + v-if="!hideScopeNotice && newStatus.visibility === 'public'" + class="visibility-notice notice-dismissible" + > + <span>{{ $t('post_status.scope_notice.public') }}</span> + <a + class="button-icon dismiss" + @click.prevent="dismissScopeNotice()" + > + <i class="icon-cancel" /> + </a> + </p> + <p + v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'" + class="visibility-notice notice-dismissible" > - <textarea - ref="textarea" - v-model="newStatus.status" - :placeholder="$t('post_status.default')" - rows="1" - @keydown.meta.enter="postStatus(newStatus)" - @keyup.ctrl.enter="postStatus(newStatus)" - @drop="fileDrop" - @dragover.prevent="fileDrag" - @input="resize" - @paste="paste" - :disabled="posting" - class="form-post-body" + <span>{{ $t('post_status.scope_notice.unlisted') }}</span> + <a + class="button-icon dismiss" + @click.prevent="dismissScopeNotice()" + > + <i class="icon-cancel" /> + </a> + </p> + <p + v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked" + class="visibility-notice notice-dismissible" > - </textarea> + <span>{{ $t('post_status.scope_notice.private') }}</span> + <a + class="button-icon dismiss" + @click.prevent="dismissScopeNotice()" + > + <i class="icon-cancel" /> + </a> + </p> <p - v-if="hasStatusLengthLimit" - class="character-counter faint" - :class="{ error: isOverLengthLimit }" + v-else-if="newStatus.visibility === 'direct'" + class="visibility-notice" > - {{ charactersLeft }} + <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span> + <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span> </p> </EmojiInput> <div class="visibility-tray"> @@ -97,51 +83,51 @@ </span> </div> </div> - </div> - <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> - <div v-if="pollsAvailable" class="poll-icon"> + <div class="attachments"> + <div + v-for="file in newStatus.files" + class="media-upload-wrapper" + > <i - :title="$t('polls.add_poll')" - @click="togglePollForm" - class="icon-chart-bar btn btn-default" - :class="pollFormVisible && 'selected'" + class="fa button-icon icon-cancel" + @click="removeMediaFile(file)" /> + <div class="media-upload-container attachment"> + <img + v-if="type(file) === 'image'" + class="thumbnail media-upload" + :src="file.url" + ></img> + <video + v-if="type(file) === 'video'" + :src="file.url" + controls + /> + <audio + v-if="type(file) === 'audio'" + :src="file.url" + controls + /> + <a + v-if="type(file) === 'unknown'" + :href="file.url" + >{{ file.url }}</a> + </div> </div> </div> - - <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="newStatus.files.length > 0" + class="upload_settings" + > + <input + id="filesSensitive" + v-model="newStatus.nsfw" + type="checkbox" + > + <label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label> </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> + </form> + </div> </template> <script src="./post_status_form.js"></script> |