logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe
commit: c2b48c32a260485e3ad623ce66eb6443f600e156
parent: 5a8f3dddfde863a87a3a4f0ed9c7433935520c59
Author: Shpuld Shpludson <shp@cock.li>
Date:   Sat, 22 Jun 2019 13:41:02 +0000

Merge branch 'fix/move-character-counter' into 'develop'

Move character counter into the input box

See merge request pleroma/pleroma-fe!848

Diffstat:

Msrc/components/post_status_form/post_status_form.js7+++++--
Msrc/components/post_status_form/post_status_form.vue32++++++++++++++++++++++++++++----
2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js @@ -269,8 +269,11 @@ const PostStatusForm = { 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)) + const topPaddingStr = window.getComputedStyle(target)['padding-top'] + const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom'] + // Remove "px" at the end of the values + const vertPadding = Number(topPaddingStr.substr(0, topPaddingStr.length - 2)) + + Number(bottomPaddingStr.substr(0, bottomPaddingStr.length - 2)) // Auto is needed to make textbox shrink when removing lines target.style.height = 'auto' target.style.height = `${target.scrollHeight - vertPadding}px` diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue @@ -48,7 +48,7 @@ <EmojiInput :suggest="emojiUserSuggestor" v-model="newStatus.status" - class="form-control" + class="form-control main-input" > <textarea ref="textarea" @@ -65,6 +65,13 @@ class="form-post-body" > </textarea> + <p + v-if="hasStatusLengthLimit" + class="character-counter faint" + :class="{ error: isOverLengthLimit }" + > + {{ charactersLeft }} + </p> </EmojiInput> <div class="visibility-tray"> <div class="text-format" v-if="postFormats.length > 1"> @@ -109,8 +116,6 @@ /> </div> </div> - <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> @@ -304,10 +309,12 @@ } .form-post-body { - line-height:16px; + 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; } @@ -316,6 +323,23 @@ 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 { cursor: pointer; }