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

Merge branch 'fix/additionalInputboxHeightUpdates' into 'develop'

Browse source 
Fix/additional inputbox height updates

See merge request pleroma/pleroma-fe!235
This commit is contained in:
Shpuld Shpludson 2018-04-15 17:33:58 +00:00
commit 8a7ed79fd3
2 changed files with 29 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -28,6 +28,9 @@ const PostStatusForm = {
components: { components: {
MediaUpload MediaUpload
}, },
mounted () {
this.resize(this.$refs.textarea)
},
data () { data () {
let statusText = '' let statusText = ''
@ -235,10 +238,11 @@ const PostStatusForm = {
e.dataTransfer.dropEffect = 'copy' e.dataTransfer.dropEffect = 'copy'
}, },
resize (e) { resize (e) {
e.target.style.height = 'auto' const target = e.target || e
e.target.style.height = `${e.target.scrollHeight - 10}px` target.style.height = 'auto'
if (e.target.value === '') { target.style.height = `${target.scrollHeight - 10}px`
e.target.style.height = '16px' if (target.value === '') {
target.style.height = '16px'
} }
}, },
clearError () { clearError () {

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

@ -1,10 +1,25 @@
<template> <template>
<div class="post-status-form"> <div class="post-status-form">
<form @submit.prevent="postStatus(newStatus)"> <form @submit.prevent="postStatus(newStatus)">
<div class="form-group" > <div class="form-group" >
<textarea @click="setCaret" @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control" @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"></textarea> <textarea
</div> ref="textarea"
<div style="position:relative;" v-if="candidates"> @click="setCaret"
@keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control"
@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">
</textarea>
</div>
<div style="position:relative;" v-if="candidates">
<div class="autocomplete-panel"> <div class="autocomplete-panel">
<div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))"> <div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))">
<div v-if="candidate.highlighted" class="autocomplete"> <div v-if="candidate.highlighted" class="autocomplete">