norm/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Move character counter into the input box

Browse source
This commit is contained in:
Shpuld Shpludson 2019-06-22 13:41:02 +00:00
parent 5a8f3dddfd
commit 30a340955e
2 changed files with 33 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/post_status_form/post_status_form.js
View file

@ -269,8 +269,11 @@ const PostStatusForm = {
resize (e) { resize (e) {
const target = e.target || e const target = e.target || e
if (!(target instanceof window.Element)) { return } if (!(target instanceof window.Element)) { return }
const vertPadding = Number(window.getComputedStyle(target)['padding-top'].substr(0, 1)) + const topPaddingStr = window.getComputedStyle(target)['padding-top']
Number(window.getComputedStyle(target)['padding-bottom'].substr(0, 1)) 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 // Auto is needed to make textbox shrink when removing lines
target.style.height = 'auto' target.style.height = 'auto'
target.style.height = `${target.scrollHeight - vertPadding}px` target.style.height = `${target.scrollHeight - vertPadding}px`

32
src/components/post_status_form/post_status_form.vue
View file

@ -48,7 +48,7 @@
<EmojiInput <EmojiInput
:suggest="emojiUserSuggestor" :suggest="emojiUserSuggestor"
v-model="newStatus.status" v-model="newStatus.status"
class="form-control" class="form-control main-input"
> >
<textarea <textarea
ref="textarea" ref="textarea"
@ -65,6 +65,13 @@
class="form-post-body" class="form-post-body"
> >
</textarea> </textarea>
<p
v-if="hasStatusLengthLimit"
class="character-counter faint"
:class="{ error: isOverLengthLimit }"
>
{{ charactersLeft }}
</p>
</EmojiInput> </EmojiInput>
<div class="visibility-tray"> <div class="visibility-tray">
<div class="text-format" v-if="postFormats.length > 1"> <div class="text-format" v-if="postFormats.length > 1">
@ -109,8 +116,6 @@
/> />
</div> </div>
</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-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-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button>
@ -304,10 +309,12 @@
} }
.form-post-body { .form-post-body {
line-height:16px; height: 16px; // Only affects the empty-height
line-height: 16px;
resize: none; resize: none;
overflow: hidden; overflow: hidden;
transition: min-height 200ms 100ms; transition: min-height 200ms 100ms;
padding-bottom: 1.75em;
min-height: 1px; min-height: 1px;
box-sizing: content-box; box-sizing: content-box;
} }
@ -316,6 +323,23 @@
min-height: 48px; 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 { .btn {
cursor: pointer; cursor: pointer;
} }