From a0022366dce912a2c56b84cd54a376e60f66050a Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Mon, 20 Mar 2023 13:27:49 +0100 Subject: [PATCH 1/6] fix: Replace `NcRichContenteditable` with `textarea` Signed-off-by: Ferdinand Thiessen --- src/components/Questions/Question.vue | 29 ++++++++--- src/views/Create.vue | 75 ++++++++++++++++----------- 2 files changed, 67 insertions(+), 37 deletions(-) diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue index bd09901fb..56cdded07 100644 --- a/src/components/Questions/Question.vue +++ b/src/components/Questions/Question.vue @@ -76,13 +76,13 @@
- + @input="onDescriptionChange" />
@@ -99,7 +99,6 @@ import { directive as ClickOutside } from 'v-click-outside' import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js' -import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js' import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue' import IconDelete from 'vue-material-design-icons/Delete.vue' @@ -119,7 +118,6 @@ export default { NcActions, NcActionButton, NcActionCheckbox, - NcRichContenteditable, }, inject: ['$markdownit'], @@ -205,20 +203,36 @@ export default { return this.description !== '' }, }, + watch: { + edit(newEdit) { + if (newEdit || !this.questionValid) { + this.resizeDescription() + } + }, + }, methods: { onTitleChange({ target }) { this.$emit('update:text', target.value) }, - onDescriptionChange(value) { - this.$emit('update:description', value) + onDescriptionChange({ target }) { + this.resizeDescription() + this.$emit('update:description', target.value) }, onRequiredChange(isRequired) { this.$emit('update:isRequired', isRequired) }, + resizeDescription() { + // next tick ensures that the textarea is attached to DOM + this.$nextTick(() => { + const rows = this.$refs.description.value.split('\n').length + this.$refs.description.setAttribute('rows', rows) + }) + }, + /** * Enable the edit mode */ @@ -350,6 +364,7 @@ export default { position: relative; left: -12px; padding: 4px 10px; + resize: none; } &__input, diff --git a/src/views/Create.vue b/src/views/Create.vue index 340a3688e..4925d55ac 100644 --- a/src/views/Create.vue +++ b/src/views/Create.vue @@ -46,7 +46,6 @@ v-model="form.title" class="form-title" rows="1" - :minlength="0" :maxlength="maxStringLengths.formTitle" :placeholder="t('forms', 'Form title')" :readonly="!edit" @@ -58,13 +57,14 @@ - + @input="updateDescription" />
@@ -142,7 +142,6 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js' import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js' import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' -import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js' import IconPlus from 'vue-material-design-icons/Plus.vue' import answerTypes from '../models/AnswerTypes.js' @@ -168,7 +167,6 @@ export default { NcAppContent, NcEmptyContent, NcLoadingIcon, - NcRichContenteditable, Question, QuestionLong, QuestionShort, @@ -257,21 +255,25 @@ export default { 'form.title'() { SetWindowTitle(this.formTitle) }, + + // resize description if form is loaded + isLoadingForm(value) { + if (!value && this.edit) { + this.resizeTitle() + this.resizeDescription() + } + }, }, - beforeMount() { + mounted() { this.fetchFullForm(this.form.id) SetWindowTitle(this.formTitle) this.initEdit() }, - updated() { - this.autoSizeTitle() - }, - methods: { onTitleChange() { - this.autoSizeTitle() + this.resizeTitle() this.saveTitle() }, @@ -284,6 +286,7 @@ export default { enableEdit() { this.edit = true + this.resizeDescription() }, initEdit() { @@ -294,14 +297,39 @@ export default { } }, + /** + * Auto adjust the title height based its scroll height + */ + resizeTitle() { + this.$nextTick(() => { + const textarea = this.$refs.title + textarea.style.cssText = 'height:auto' + // include 2px border + textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px` + }) + }, + + /** + * Auto adjust the description height based on its scroll height + */ + resizeDescription() { + // nextTick to ensure textarea is attached to DOM + this.$nextTick(() => { + const textarea = this.$refs.description + textarea.style.cssText = 'height:auto' + // include 2px border + textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px` + }) + }, + /** * Update the description * - * @param {string} value New description + * @param {InputEvent} ev The input event of the textarea */ - updateDescription(value = '') { - // We need this for nextcloud/nextcloud-vue#3669 - this.form.description = value.trimEnd() + updateDescription({ target }) { + this.form.description = target.value + this.resizeDescription() this.saveDescription() }, @@ -411,20 +439,6 @@ export default { }) }, 10) }, - - /** - * Auto adjust the title height based on lines number - */ - async autoSizeTitle() { - this.$nextTick(() => { - const textarea = this.$refs.title - if (textarea) { - textarea.style.cssText = 'height:auto' - // include 2px border - textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px` - } - }) - }, }, } @@ -485,6 +499,7 @@ export default { &__input { padding: 3px 14px 18px; // 2px smaller because of border + resize: none; } // Styling for rendered Output From f9a93573d34681e8a786497157daa14c89cd3043 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Sat, 29 Apr 2023 11:33:23 +0200 Subject: [PATCH 2/6] fix: Add padding for form title text so it does not touch the border Signed-off-by: Ferdinand Thiessen --- src/views/Create.vue | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/views/Create.vue b/src/views/Create.vue index 4925d55ac..1a2df2308 100644 --- a/src/views/Create.vue +++ b/src/views/Create.vue @@ -470,8 +470,9 @@ export default { line-height: 34px; color: var(--color-main-text); min-height: 36px; - padding: 0 14px; // same as submit but 2px borders - margin: 30px 0 14px; // same as on submit but minus padding-top description and borders + // padding and margin should be aligned with the submit view (but keep the 2px border in mind) + padding: 4px 14px; + margin: 22px 0 14px; width: calc(100% - 56px); // margin of header, needed if screen is < 806px (max-width + margin-left) overflow: hidden; text-overflow: ellipsis; @@ -480,6 +481,9 @@ export default { &:read-only { border-color: transparent; } + &::placeholder { + font-size: 28px; + } } .form-desc, From cacda69cb4a5352c0f75cc36b2d5ac9eee180312 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Sat, 29 Apr 2023 12:56:56 +0200 Subject: [PATCH 3/6] fix: Make sure view and edit mode look the same Also fixes overflow issues with description Signed-off-by: Ferdinand Thiessen --- src/components/Questions/Question.vue | 5 ++++- src/scssmixins/markdownOutput.scss | 2 ++ src/views/Create.vue | 4 +++- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue index 56cdded07..b38848001 100644 --- a/src/components/Questions/Question.vue +++ b/src/components/Questions/Question.vue @@ -210,7 +210,10 @@ export default { } }, }, - + // Ensure description is sized correctly on initial render + mounted() { + this.$nextTick(() => this.resizeDescription()) + }, methods: { onTitleChange({ target }) { this.$emit('update:text', target.value) diff --git a/src/scssmixins/markdownOutput.scss b/src/scssmixins/markdownOutput.scss index d88d4c85b..13755bed4 100644 --- a/src/scssmixins/markdownOutput.scss +++ b/src/scssmixins/markdownOutput.scss @@ -21,6 +21,8 @@ */ @mixin markdown-output { + overflow-wrap: break-word; + ::v-deep { >:not(:first-child) { margin-top: 1.5em; diff --git a/src/views/Create.vue b/src/views/Create.vue index 1a2df2308..177dec909 100644 --- a/src/views/Create.vue +++ b/src/views/Create.vue @@ -281,12 +281,14 @@ export default { // Keep edit if no title set if (this.form.title) { this.edit = false + this.$refs.title.style.height = 'auto' } }, enableEdit() { this.edit = true this.resizeDescription() + this.resizeTitle() }, initEdit() { @@ -497,7 +499,7 @@ export default { .form-desc { color: var(--color-text-maxcontrast); line-height: 1.5em; - min-height: calc(25px + 1.5em); // one line + min-height: 48px; // one line (25px padding + 1.5em text height), CSS calc will round incorrectly to hardcoded padding-top: 5px; // spacing border<>text margin: 0px; From 226a39a897610e381831bf8eb72e57800233b7b6 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Mon, 3 Apr 2023 12:58:23 +0200 Subject: [PATCH 4/6] Add css fix for upstream server styling issue Signed-off-by: Ferdinand Thiessen --- css/forms.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/css/forms.css b/css/forms.css index e16eb63b2..2a012923b 100644 --- a/css/forms.css +++ b/css/forms.css @@ -27,6 +27,15 @@ html { scroll-padding-top: calc(var(--header-height) + 60px); } +/* Fix for placeholder styling + * TODO: Can be removed, as soon as it is fixed in server + * Ref.: https://github.com/nextcloud/server/pull/37522 + */ +::placeholder { + color: var(--color-text-maxcontrast); + font-size: var(--default-font-size); +} + /* Fix for action-popover alignment * TODO: Can be removed, as soon as the issue is solved in server or vue-components. * Ref.: https://github.com/nextcloud/nextcloud-vue/issues/1384 From bccb2bd88c3a1b77fc40ebdf953d149569aaacce Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Wed, 17 May 2023 00:29:10 +0200 Subject: [PATCH 5/6] Use same resize logic for `Question` component and for `Create` view Signed-off-by: Ferdinand Thiessen --- src/components/Questions/Question.vue | 8 ++++++-- src/views/Create.vue | 4 ++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue index b38848001..99f56ba8a 100644 --- a/src/components/Questions/Question.vue +++ b/src/components/Questions/Question.vue @@ -231,8 +231,12 @@ export default { resizeDescription() { // next tick ensures that the textarea is attached to DOM this.$nextTick(() => { - const rows = this.$refs.description.value.split('\n').length - this.$refs.description.setAttribute('rows', rows) + const textarea = this.$refs.description + if (textarea) { + textarea.style.cssText = 'height: 0' + // include 2px border + textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px` + } }) }, diff --git a/src/views/Create.vue b/src/views/Create.vue index 177dec909..758c76f75 100644 --- a/src/views/Create.vue +++ b/src/views/Create.vue @@ -305,7 +305,7 @@ export default { resizeTitle() { this.$nextTick(() => { const textarea = this.$refs.title - textarea.style.cssText = 'height:auto' + textarea.style.cssText = 'height: 0' // include 2px border textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px` }) @@ -318,7 +318,7 @@ export default { // nextTick to ensure textarea is attached to DOM this.$nextTick(() => { const textarea = this.$refs.description - textarea.style.cssText = 'height:auto' + textarea.style.cssText = 'height: 0' // include 2px border textarea.style.cssText = `height: ${textarea.scrollHeight + 4}px` }) From d188962eeab9440f88f676ce912ddc527aba6292 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Wed, 17 May 2023 00:30:04 +0200 Subject: [PATCH 6/6] fix: Stop content jumping when toggling edit mode by setting line hight to full integer Signed-off-by: Ferdinand Thiessen --- src/views/Create.vue | 4 ++-- src/views/Submit.vue | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/views/Create.vue b/src/views/Create.vue index 758c76f75..4ff9369af 100644 --- a/src/views/Create.vue +++ b/src/views/Create.vue @@ -498,8 +498,8 @@ export default { .form-desc { color: var(--color-text-maxcontrast); - line-height: 1.5em; - min-height: 48px; // one line (25px padding + 1.5em text height), CSS calc will round incorrectly to hardcoded + line-height: 22px; + min-height: 47px; // one line (25px padding + 22px text height) padding-top: 5px; // spacing border<>text margin: 0px; diff --git a/src/views/Submit.vue b/src/views/Submit.vue index 8e463aadf..11417c681 100644 --- a/src/views/Submit.vue +++ b/src/views/Submit.vue @@ -342,10 +342,10 @@ export default { text-overflow: ellipsis; } .form-desc { - line-height: 1.5em; + line-height: 22px; padding-bottom: 20px; resize: none; - min-height: calc(20px + 1.5em); // one line + min-height: 42px; color: var(--color-text-maxcontrast); @include markdown-output;