local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: task input height after removing a line now works correctly

Browse source
This commit is contained in:
kolaente 2021-10-13 21:08:29 +02:00
parent c30c2e00cb
commit 3f96ce6d60
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
1 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/tasks/add-task.vue
View file

@ -10,7 +10,7 @@
v-focus v-focus
v-model="newTaskTitle" v-model="newTaskTitle"
ref="newTaskInput" ref="newTaskInput"
:style="{'height': `${textAreaHeight}px`}" :style="{'height': `calc(${textAreaHeight}px - 2px + 1rem)`}"
@keyup="errorMessage = ''" @keyup="errorMessage = ''"
@keydown.enter="handleEnter" @keydown.enter="handleEnter"
/> />
@ -42,6 +42,7 @@ import createTask from '@/components/tasks/mixins/createTask'
import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue' import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
const INPUT_BORDER_PX = 2 const INPUT_BORDER_PX = 2
const LINE_HEIGHT = 1.5 // using getComputedStyles().lineHeight returns an (wrong) absolute pixel value, we need the factor to do calculations with it.
const cleanupTitle = title => { const cleanupTitle = title => {
return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '') return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
@ -72,12 +73,12 @@ export default {
}, },
watch: { watch: {
newTaskTitle(newVal) { newTaskTitle(newVal) {
let scrollHeight = this.$refs.newTaskInput.scrollHeight + INPUT_BORDER_PX // Calculating the textarea height based on lines of input in it. That is more reliable when removing a
if (scrollHeight < this.initialTextAreaHeight || newVal === '') { // line from the input.
scrollHeight = this.initialTextAreaHeight const numberOfLines = newVal.split(/\r\n|\r|\n/).length
} const fontSize = parseInt(window.getComputedStyle(this.$refs.newTaskInput, null).getPropertyValue('font-size'))
this.textAreaHeight = scrollHeight this.textAreaHeight = numberOfLines * fontSize * LINE_HEIGHT + INPUT_BORDER_PX
}, },
}, },
mounted() { mounted() {