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:
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;
}