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

fix(style) restrict new task input size (#938)

Browse source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/938
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
This commit is contained in:
dpschen 2021-11-02 18:11:24 +00:00 committed by konrad
parent 4e6f961a24
commit ee430b8687
1 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,11 +6,14 @@
:disabled="taskService.loading || null" :disabled="taskService.loading || null"
class="input" class="input"
:placeholder="$t('list.list.addPlaceholder')" :placeholder="$t('list.list.addPlaceholder')"
type="text" cols="1"
v-focus v-focus
v-model="newTaskTitle" v-model="newTaskTitle"
ref="newTaskInput" ref="newTaskInput"
:style="{'height': `calc(${textAreaHeight}px - 2px + 1rem)`}" :style="{
'minHeight': `${initialTextAreaHeight}px`,
'height': `calc(${textAreaHeight}px - 2px + 1rem)`
}"
@keyup="errorMessage = ''" @keyup="errorMessage = ''"
@keydown.enter="handleEnter" @keydown.enter="handleEnter"
/> />
@ -70,10 +73,10 @@ export default {
}, },
watch: { watch: {
newTaskTitle(newVal) { newTaskTitle(newVal) {
// Calculating the textarea height based on lines of input in it. That is more reliable when removing a // Calculating the textarea height based on lines of input in it.
// line from the input. // That is more reliable when removing a line from the input.
const numberOfLines = newVal.split(/\r\n|\r|\n/).length const numberOfLines = newVal.split(/\r\n|\r|\n/).length
const fontSize = parseInt(window.getComputedStyle(this.$refs.newTaskInput, null).getPropertyValue('font-size')) const fontSize = parseFloat(window.getComputedStyle(this.$refs.newTaskInput, null).getPropertyValue('font-size'))
this.textAreaHeight = numberOfLines * fontSize * LINE_HEIGHT + INPUT_BORDER_PX this.textAreaHeight = numberOfLines * fontSize * LINE_HEIGHT + INPUT_BORDER_PX
}, },
@ -145,4 +148,8 @@ export default {
.input, .textarea { .input, .textarea {
transition: border-color $transition; transition: border-color $transition;
} }
.input {
resize: vertical;
}
</style> </style>