Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch 'feature/autoresize-post-status-form' into 'develop'

Browse source 
Make text input grow to a minimum height of 3 lines on focus

See merge request !82
This commit is contained in:
lambadalambda 2017-06-01 11:25:12 -04:00
commit 934bbd16f1
2 changed files with 10 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -63,6 +63,8 @@ const PostStatusForm = {
files: [] files: []
} }
this.$emit('posted') this.$emit('posted')
let el = this.$el.querySelector('textarea')
el.style.height = '16px'
}, },
addMediaFile (fileInfo) { addMediaFile (fileInfo) {
this.newStatus.files.push(fileInfo) this.newStatus.files.push(fileInfo)
@ -93,6 +95,9 @@ const PostStatusForm = {
resize (e) { resize (e) {
e.target.style.height = 'auto' e.target.style.height = 'auto'
e.target.style.height = `${e.target.scrollHeight - 10}px` e.target.style.height = `${e.target.scrollHeight - 10}px`
if (e.target.value === '') {
e.target.style.height = '16px'
}
} }
} }
} }

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

@ -2,7 +2,7 @@
<div class="post-status-form"> <div class="post-status-form">
<form @submit.prevent="postStatus(newStatus)"> <form @submit.prevent="postStatus(newStatus)">
<div class="form-group base03-border" > <div class="form-group base03-border" >
<textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="1" class="form-control" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize"></textarea> <textarea id="benis" v-model="newStatus.status" placeholder="Just landed in L.A." rows="1" class="form-control" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize"></textarea>
</div> </div>
<div class='form-bottom'> <div class='form-bottom'>
<media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload> <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
@ -93,6 +93,10 @@
overflow: hidden; overflow: hidden;
} }
form textarea:focus {
min-height: 48px;
}
.btn { .btn {
cursor: pointer; cursor: pointer;
} }