aboutsummaryrefslogtreecommitdiff
path: root/src/components/post_status_form
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/post_status_form')
-rw-r--r--src/components/post_status_form/post_status_form.js296
-rw-r--r--src/components/post_status_form/post_status_form.vue446
2 files changed, 493 insertions, 249 deletions
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index cbd2024a..c1d7209e 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -1,18 +1,22 @@
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 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 Completion from '../../services/completion/completion.js'
-import { take, filter, reject, map, uniqBy } from 'lodash'
+import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
+import { reject, map, uniqBy } from 'lodash'
+import suggestor from '../emoji_input/suggestor.js'
+import { mapGetters } from 'vuex'
+import Checkbox from '../checkbox/checkbox.vue'
-const buildMentionsString = ({user, attentions}, currentUser) => {
+const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
let allAttentions = [...attentions]
allAttentions.unshift(user)
allAttentions = uniqBy(allAttentions, 'id')
- allAttentions = reject(allAttentions, {id: currentUser.id})
+ allAttentions = reject(allAttentions, { id: currentUser.id })
let mentions = map(allAttentions, (attention) => {
return `@${attention.screen_name}`
@@ -31,8 +35,10 @@ const PostStatusForm = {
],
components: {
MediaUpload,
+ EmojiInput,
+ PollForm,
ScopeSelector,
- EmojiInput
+ Checkbox
},
mounted () {
this.resize(this.$refs.textarea)
@@ -47,22 +53,18 @@ const PostStatusForm = {
const preset = this.$route.query.message
let statusText = preset || ''
- const scopeCopy = typeof this.$store.state.config.scopeCopy === 'undefined'
- ? this.$store.state.instance.scopeCopy
- : this.$store.state.config.scopeCopy
+ const { scopeCopy } = this.$store.getters.mergedConfig
if (this.replyTo) {
const currentUser = this.$store.state.users.currentUser
statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
}
- const scope = (this.copyMessageScope && scopeCopy || this.copyMessageScope === 'direct')
- ? this.copyMessageScope
- : this.$store.state.users.currentUser.default_scope
+ const scope = ((this.copyMessageScope && scopeCopy) || this.copyMessageScope === 'direct')
+ ? this.copyMessageScope
+ : this.$store.state.users.currentUser.default_scope
- const contentType = typeof this.$store.state.config.postContentType === 'undefined'
- ? this.$store.state.instance.postContentType
- : this.$store.state.config.postContentType
+ const { postContentType: contentType } = this.$store.getters.mergedConfig
return {
dropFiles: [],
@@ -75,57 +77,15 @@ const PostStatusForm = {
status: statusText,
nsfw: false,
files: [],
+ poll: {},
visibility: scope,
contentType
},
- caret: 0
+ caret: 0,
+ pollFormVisible: false
}
},
computed: {
- candidates () {
- const firstchar = this.textAtCaret.charAt(0)
- if (firstchar === '@') {
- const query = this.textAtCaret.slice(1).toUpperCase()
- const matchedUsers = filter(this.users, (user) => {
- return user.screen_name.toUpperCase().startsWith(query) ||
- user.name && user.name.toUpperCase().startsWith(query)
- })
- if (matchedUsers.length <= 0) {
- return false
- }
- // eslint-disable-next-line camelcase
- return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}, index) => ({
- // eslint-disable-next-line camelcase
- screen_name: `@${screen_name}`,
- name: name,
- img: profile_image_url_original,
- highlighted: index === this.highlighted
- }))
- } else if (firstchar === ':') {
- if (this.textAtCaret === ':') { return }
- const matchedEmoji = filter(this.emoji.concat(this.customEmoji), (emoji) => emoji.shortcode.startsWith(this.textAtCaret.slice(1)))
- if (matchedEmoji.length <= 0) {
- return false
- }
- return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({
- screen_name: `:${shortcode}:`,
- name: '',
- utf: utf || '',
- // eslint-disable-next-line camelcase
- img: utf ? '' : this.$store.state.instance.server + image_url,
- highlighted: index === this.highlighted
- }))
- } else {
- return false
- }
- },
- textAtCaret () {
- return (this.wordAtCaret || {}).word || ''
- },
- wordAtCaret () {
- const word = Completion.wordAtPosition(this.newStatus.status, this.caret - 1) || {}
- return word
- },
users () {
return this.$store.state.users.users
},
@@ -133,10 +93,25 @@ const PostStatusForm = {
return this.$store.state.users.currentUser.default_scope
},
showAllScopes () {
- const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined'
- ? this.$store.state.instance.minimalScopesMode
- : this.$store.state.config.minimalScopesMode
- return !minimalScopesMode
+ return !this.mergedConfig.minimalScopesMode
+ },
+ emojiUserSuggestor () {
+ return suggestor({
+ emoji: [
+ ...this.$store.state.instance.emoji,
+ ...this.$store.state.instance.customEmoji
+ ],
+ users: this.$store.state.users.users,
+ updateUsersList: (input) => this.$store.dispatch('searchUsers', input)
+ })
+ },
+ emojiSuggestor () {
+ return suggestor({
+ emoji: [
+ ...this.$store.state.instance.emoji,
+ ...this.$store.state.instance.customEmoji
+ ]
+ })
},
emoji () {
return this.$store.state.instance.emoji || []
@@ -166,16 +141,7 @@ const PostStatusForm = {
return this.$store.state.instance.minimalScopesMode
},
alwaysShowSubject () {
- if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') {
- return this.$store.state.config.alwaysShowSubjectInput
- } else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') {
- return this.$store.state.instance.alwaysShowSubjectInput
- } else {
- return true
- }
- },
- formattingOptionsEnabled () {
- return this.$store.state.instance.formattingOptionsEnabled
+ return this.mergedConfig.alwaysShowSubjectInput
},
postFormats () {
return this.$store.state.instance.postFormats || []
@@ -183,62 +149,21 @@ const PostStatusForm = {
safeDMEnabled () {
return this.$store.state.instance.safeDM
},
- hideScopeNotice () {
- return this.$store.state.config.hideScopeNotice
- }
- },
- methods: {
- replace (replacement) {
- this.newStatus.status = Completion.replaceWord(this.newStatus.status, this.wordAtCaret, replacement)
- const el = this.$el.querySelector('textarea')
- el.focus()
- this.caret = 0
- },
- replaceCandidate (e) {
- const len = this.candidates.length || 0
- if (this.textAtCaret === ':' || e.ctrlKey) { return }
- if (len > 0) {
- e.preventDefault()
- const candidate = this.candidates[this.highlighted]
- const replacement = candidate.utf || (candidate.screen_name + ' ')
- this.newStatus.status = Completion.replaceWord(this.newStatus.status, this.wordAtCaret, replacement)
- const el = this.$el.querySelector('textarea')
- el.focus()
- this.caret = 0
- this.highlighted = 0
- }
+ pollsAvailable () {
+ return this.$store.state.instance.pollsAvailable &&
+ this.$store.state.instance.pollLimits.max_options >= 2
},
- cycleBackward (e) {
- const len = this.candidates.length || 0
- if (len > 0) {
- e.preventDefault()
- this.highlighted -= 1
- if (this.highlighted < 0) {
- this.highlighted = this.candidates.length - 1
- }
- } else {
- this.highlighted = 0
- }
- },
- cycleForward (e) {
- const len = this.candidates.length || 0
- if (len > 0) {
- if (e.shiftKey) { return }
- e.preventDefault()
- this.highlighted += 1
- if (this.highlighted >= len) {
- this.highlighted = 0
- }
- } else {
- this.highlighted = 0
- }
- },
- onKeydown (e) {
- e.stopPropagation()
+ hideScopeNotice () {
+ return this.$store.getters.mergedConfig.hideScopeNotice
},
- setCaret ({target: {selectionStart}}) {
- this.caret = selectionStart
+ pollContentError () {
+ return this.pollFormVisible &&
+ this.newStatus.poll &&
+ this.newStatus.poll.error
},
+ ...mapGetters(['mergedConfig'])
+ },
+ methods: {
postStatus (newStatus) {
if (this.posting) { return }
if (this.submitDisabled) { return }
@@ -252,6 +177,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,
@@ -261,7 +192,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 = {
@@ -269,9 +201,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'
@@ -306,6 +241,7 @@ const PostStatusForm = {
return fileTypeService.fileType(fileInfo.mimetype)
},
paste (e) {
+ this.resize(e)
if (e.clipboardData.files.length > 0) {
// prevent pasting of file as text
e.preventDefault()
@@ -317,24 +253,103 @@ const PostStatusForm = {
},
fileDrop (e) {
if (e.dataTransfer.files.length > 0) {
- e.preventDefault() // allow dropping text like before
+ e.preventDefault() // allow dropping text like before
this.dropFiles = e.dataTransfer.files
}
},
fileDrag (e) {
e.dataTransfer.dropEffect = 'copy'
},
+ onEmojiInputInput (e) {
+ this.$nextTick(() => {
+ this.resize(this.$refs['textarea'])
+ })
+ },
resize (e) {
const target = e.target || e
if (!(target instanceof window.Element)) { return }
- const vertPadding = Number(window.getComputedStyle(target)['padding-top'].substr(0, 1)) +
- Number(window.getComputedStyle(target)['padding-bottom'].substr(0, 1))
- // Auto is needed to make textbox shrink when removing lines
- target.style.height = 'auto'
- target.style.height = `${target.scrollHeight - vertPadding}px`
+
+ // Reset to default height for empty form, nothing else to do here.
if (target.value === '') {
target.style.height = null
+ this.$refs['emoji-input'].resize()
+ return
}
+
+ const rootRef = this.$refs['root']
+ /* Scroller is either `window` (replies in TL), sidebar (main post form,
+ * replies in notifs) or mobile post form. Note that getting and setting
+ * scroll is different for `Window` and `Element`s
+ */
+ const scrollerRef = this.$el.closest('.sidebar-scroller') ||
+ this.$el.closest('.post-form-modal-view') ||
+ window
+
+ // Getting info about padding we have to account for, removing 'px' part
+ const topPaddingStr = window.getComputedStyle(target)['padding-top']
+ const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom']
+ const topPadding = Number(topPaddingStr.substring(0, topPaddingStr.length - 2))
+ const bottomPadding = Number(bottomPaddingStr.substring(0, bottomPaddingStr.length - 2))
+ const vertPadding = topPadding + bottomPadding
+
+ const oldHeightStr = target.style.height || ''
+ const oldHeight = Number(oldHeightStr.substring(0, oldHeightStr.length - 2))
+
+ /* Explanation:
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
+ * scrollHeight returns element's scrollable content height, i.e. visible
+ * element + overscrolled parts of it. We use it to determine when text
+ * inside the textarea exceeded its height, so we can set height to prevent
+ * overscroll, i.e. make textarea grow with the text. HOWEVER, since we
+ * explicitly set new height, scrollHeight won't go below that, so we can't
+ * SHRINK the textarea when there's extra space. To workaround that we set
+ * height to 'auto' which makes textarea tiny again, so that scrollHeight
+ * will match text height again. HOWEVER, shrinking textarea can screw with
+ * the scroll since there might be not enough padding around root to even
+ * warrant a scroll, so it will jump to 0 and refuse to move anywhere,
+ * so we check current scroll position before shrinking and then restore it
+ * with needed delta.
+ */
+
+ // this part has to be BEFORE the content size update
+ const currentScroll = scrollerRef === window
+ ? scrollerRef.scrollY
+ : scrollerRef.scrollTop
+ const scrollerHeight = scrollerRef === window
+ ? scrollerRef.innerHeight
+ : scrollerRef.offsetHeight
+ const scrollerBottomBorder = currentScroll + scrollerHeight
+
+ // BEGIN content size update
+ target.style.height = 'auto'
+ const newHeight = target.scrollHeight - vertPadding
+ target.style.height = `${newHeight}px`
+ // END content size update
+
+ // We check where the bottom border of root element is, this uses findOffset
+ // to find offset relative to scrollable container (scroller)
+ const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top
+
+ const textareaSizeChangeDelta = newHeight - oldHeight || 0
+ const isBottomObstructed = scrollerBottomBorder < rootBottomBorder
+ const rootChangeDelta = rootBottomBorder - scrollerBottomBorder
+ const totalDelta = textareaSizeChangeDelta +
+ (isBottomObstructed ? rootChangeDelta : 0)
+
+ const targetScroll = currentScroll + totalDelta
+
+ if (scrollerRef === window) {
+ scrollerRef.scroll(0, targetScroll)
+ } else {
+ scrollerRef.scrollTop = targetScroll
+ }
+
+ this.$refs['emoji-input'].resize()
+ },
+ showEmojiPicker () {
+ this.$refs['textarea'].focus()
+ this.$refs['emoji-input'].triggerShowPicker()
},
clearError () {
this.error = null
@@ -342,6 +357,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 a841a17c..237ed725 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -1,125 +1,269 @@
<template>
-<div class="post-status-form">
- <form @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">
- <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"
- type="text"
- :placeholder="$t('post_status.content_warning')"
- v-model="newStatus.spoilerText"
- classname="form-control"
- />
- <textarea
- ref="textarea"
- @click="setCaret"
- @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control"
- @keydown="onKeydown"
- @keydown.down="cycleForward"
- @keydown.up="cycleBackward"
- @keydown.shift.tab="cycleBackward"
- @keydown.tab="cycleForward"
- @keydown.enter="replaceCandidate"
- @keydown.meta.enter="postStatus(newStatus)"
- @keyup.ctrl.enter="postStatus(newStatus)"
- @drop="fileDrop"
- @dragover.prevent="fileDrag"
- @input="resize"
- @paste="paste"
- :disabled="posting"
- >
- </textarea>
- <div class="visibility-tray">
- <div class="text-format" v-if="formattingOptionsEnabled">
- <label for="post-content-type" class="select">
- <select id="post-content-type" v-model="newStatus.contentType" class="form-control">
- <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
- {{$t(`post_status.content_type["${postFormat}"]`)}}
- </option>
- </select>
- <i class="icon-down-open"></i>
- </label>
- </div>
+ <div
+ ref="root"
+ 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"
+ >
+ <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"
+ >
+ <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"
+ >
+ <span>{{ $t('post_status.scope_notice.private') }}</span>
+ <a
+ class="button-icon dismiss"
+ @click.prevent="dismissScopeNotice()"
+ >
+ <i class="icon-cancel" />
+ </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"
+ v-model="newStatus.spoilerText"
+ enable-emoji-picker
+ :suggest="emojiSuggestor"
+ class="form-control"
+ >
+ <input
- <scope-selector
- :showAll="showAllScopes"
- :userDefault="userDefaultScope"
- :originalScope="copyMessageScope"
- :initialScope="newStatus.visibility"
- :onScopeChange="changeVis"/>
- </div>
- </div>
- <div class="autocomplete-panel" v-if="candidates">
- <div class="autocomplete-panel-body">
+ v-model="newStatus.spoilerText"
+ type="text"
+ :placeholder="$t('post_status.content_warning')"
+ class="form-post-subject"
+ >
+ </EmojiInput>
+ <EmojiInput
+ ref="emoji-input"
+ v-model="newStatus.status"
+ :suggest="emojiUserSuggestor"
+ class="form-control main-input"
+ enable-emoji-picker
+ hide-emoji-button
+ enable-sticker-picker
+ @input="onEmojiInputInput"
+ @sticker-uploaded="addMediaFile"
+ @sticker-upload-failed="uploadFailed"
+ >
+ <textarea
+ ref="textarea"
+ v-model="newStatus.status"
+ :placeholder="$t('post_status.default')"
+ rows="1"
+ :disabled="posting"
+ class="form-post-body"
+ @keydown.meta.enter="postStatus(newStatus)"
+ @keyup.ctrl.enter="postStatus(newStatus)"
+ @drop="fileDrop"
+ @dragover.prevent="fileDrag"
+ @input="resize"
+ @compositionupdate="resize"
+ @paste="paste"
+ />
+ <p
+ v-if="hasStatusLengthLimit"
+ class="character-counter faint"
+ :class="{ error: isOverLengthLimit }"
+ >
+ {{ charactersLeft }}
+ </p>
+ </EmojiInput>
+ <div class="visibility-tray">
+ <scope-selector
+ :show-all="showAllScopes"
+ :user-default="userDefaultScope"
+ :original-scope="copyMessageScope"
+ :initial-scope="newStatus.visibility"
+ :on-scope-change="changeVis"
+ />
+
+ <div
+ v-if="postFormats.length > 1"
+ class="text-format"
+ >
+ <label
+ for="post-content-type"
+ class="select"
+ >
+ <select
+ id="post-content-type"
+ v-model="newStatus.contentType"
+ class="form-control"
+ >
+ <option
+ v-for="postFormat in postFormats"
+ :key="postFormat"
+ :value="postFormat"
+ >
+ {{ $t(`post_status.content_type["${postFormat}"]`) }}
+ </option>
+ </select>
+ <i class="icon-down-open" />
+ </label>
+ </div>
<div
- v-for="(candidate, index) in candidates"
- :key="index"
- @click="replace(candidate.utf || (candidate.screen_name + ' '))"
- class="autocomplete-item"
- :class="{ highlighted: candidate.highlighted }"
+ v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
+ class="text-format"
>
- <span v-if="candidate.img"><img :src="candidate.img" /></span>
- <span v-else>{{candidate.utf}}</span>
- <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
+ <span class="only-format">
+ {{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
+ </span>
</div>
</div>
</div>
- <div class='form-bottom'>
- <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>
+ <poll-form
+ v-if="pollsAvailable"
+ ref="pollForm"
+ :visible="pollFormVisible"
+ @update-poll="setPoll"
+ />
+ <div class="form-bottom">
+ <div class="form-bottom-left">
+ <media-upload
+ ref="mediaUpload"
+ class="media-upload-icon"
+ :drop-files="dropFiles"
+ @uploading="disableSubmit"
+ @uploaded="addMediaFile"
+ @upload-failed="uploadFailed"
+ />
+ <div
+ class="emoji-icon"
+ >
+ <i
+ :title="$t('emoji.add_emoji')"
+ class="icon-smile btn btn-default"
+ @click="showEmojiPicker"
+ />
+ </div>
+ <div
+ v-if="pollsAvailable"
+ class="poll-icon"
+ :class="{ selected: pollFormVisible }"
+ >
+ <i
+ :title="$t('polls.add_poll')"
+ class="icon-chart-bar btn btn-default"
+ @click="togglePollForm"
+ />
+ </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">
+ <div
+ v-if="error"
+ class="alert error"
+ >
Error: {{ error }}
- <i class="button-icon icon-cancel" @click="clearError"></i>
+ <i
+ class="button-icon icon-cancel"
+ @click="clearError"
+ />
</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
+ v-for="file in newStatus.files"
+ :key="file.url"
+ class="media-upload-wrapper"
+ >
+ <i
+ class="fa button-icon icon-cancel"
+ @click="removeMediaFile(file)"
+ />
<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>
+ <img
+ v-if="type(file) === 'image'"
+ class="thumbnail media-upload"
+ :src="file.url"
+ >
+ <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>
- <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
+ v-if="newStatus.files.length > 0"
+ class="upload_settings"
+ >
+ <Checkbox v-model="newStatus.nsfw">
+ {{ $t('post_status.attachments_sensitive') }}
+ </Checkbox>
</div>
</form>
</div>
@@ -151,14 +295,14 @@
.visibility-tray {
display: flex;
justify-content: space-between;
- flex-direction: row-reverse;
padding-top: 5px;
}
}
-.post-status-form, .login {
+.post-status-form {
.form-bottom {
display: flex;
+ justify-content: space-between;
padding: 0.5em;
height: 32px;
@@ -173,6 +317,59 @@
}
}
+ .form-bottom-left {
+ display: flex;
+ flex: 1;
+ padding-right: 7px;
+ margin-right: 7px;
+ max-width: 10em;
+ }
+
+ .text-format {
+ .only-format {
+ color: $fallback--faint;
+ color: var(--faint, $fallback--faint);
+ }
+ }
+
+ .media-upload-icon, .poll-icon, .emoji-icon {
+ font-size: 26px;
+ flex: 1;
+
+ i {
+ display: block;
+ width: 100%;
+ }
+
+ &.selected, &:hover {
+ // needs to be specific to override icon default color
+ i, label {
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
+ }
+ }
+ }
+
+ // Order is not necessary but a good indicator
+ .media-upload-icon {
+ order: 1;
+ text-align: left;
+ }
+
+ .emoji-icon {
+ order: 2;
+ text-align: center;
+ }
+
+ .poll-icon {
+ order: 3;
+ text-align: right;
+ }
+
+ .icon-chart-bar {
+ cursor: pointer;
+ }
+
.error {
text-align: center;
}
@@ -198,6 +395,13 @@
}
}
+ .status-input-wrapper {
+ display: flex;
+ position: relative;
+ width: 100%;
+ flex-direction: column;
+ }
+
.attachments {
padding: 0 0.5em;
@@ -233,7 +437,6 @@
}
}
-
.btn {
cursor: pointer;
}
@@ -263,17 +466,32 @@
min-height: 1px;
}
- form textarea.form-control {
- line-height:16px;
+ .form-post-body {
+ height: 16px; // Only affects the empty-height
+ line-height: 16px;
resize: none;
overflow: hidden;
transition: min-height 200ms 100ms;
+ padding-bottom: 1.75em;
min-height: 1px;
box-sizing: content-box;
}
- form textarea.form-control:focus {
- min-height: 48px;
+ .main-input {
+ position: relative;
+ }
+
+ .character-counter {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ padding: 0;
+ margin: 0 0.5em;
+
+ &.error {
+ color: $fallback--cRed;
+ color: var(--cRed, $fallback--cRed);
+ }
}
.btn {
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2025-12-08 04:31:26 +0000