From 704abc930f207646d16e808d14e2fb5544b572ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6?= Date: Mon, 22 Jun 2020 15:28:21 +0200 Subject: [PATCH 01/57] Revert "Allow navigation through edit via Tab-Key" --- src/components/Questions/Question.vue | 50 +------------------ src/components/Questions/QuestionMultiple.vue | 16 +----- 2 files changed, 4 insertions(+), 62 deletions(-) diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue index cb64cbc..999ce2a 100644 --- a/src/components/Questions/Question.vue +++ b/src/components/Questions/Question.vue @@ -25,9 +25,7 @@ :class="{ 'question--edit': edit }" :aria-label="t('forms', 'Question number {index}', {index})" class="question" - @click="enableEdit" - @focusin="onFocusIn" - @focusout="onFocusOut"> + @click="enableEdit">
-

+

{ - this.$refs.titleInput.focus() - }) - } - }, - - /** - * Enable & disable resp. edit, if focus jumps to next question (e.g. by tab-navigation) - * @param {Object} event The triggered focusIn/focusOut event - */ - onFocusIn(event) { - if (event.target.closest('.question') !== event.relatedTarget?.closest('.question')) { - this.enableEdit() - } - }, - - onFocusOut(event) { - if (event.target.closest('.question') !== event.relatedTarget?.closest('.question')) { - this.disableEdit() - } - }, - /** * Enable the edit mode */ diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue index 423d682..abdfa3a 100644 --- a/src/components/Questions/QuestionMultiple.vue +++ b/src/components/Questions/QuestionMultiple.vue @@ -37,10 +37,7 @@ @delete="onDelete">
    - - - diff --git a/src/components/Questions/QuestionDatetime.vue b/src/components/Questions/QuestionDatetime.vue index 04ed091..c0f5a2e 100644 --- a/src/components/Questions/QuestionDatetime.vue +++ b/src/components/Questions/QuestionDatetime.vue @@ -1,7 +1,7 @@ - - - - diff --git a/src/components/Questions/QuestionEmail.vue b/src/components/Questions/QuestionEmail.vue index 2ac0300..b6658e4 100644 --- a/src/components/Questions/QuestionEmail.vue +++ b/src/components/Questions/QuestionEmail.vue @@ -1,7 +1,7 @@ - - - - diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue index 42c2288..468e7ea 100644 --- a/src/components/Questions/QuestionShort.vue +++ b/src/components/Questions/QuestionShort.vue @@ -43,7 +43,7 @@ class="question__input" :maxlength="maxStringLengths.answerText" minlength="1" - type="text" + v-bind:type="type" @input="onInput" @keydown.enter.exact.prevent="onKeydownEnter">
@@ -58,6 +58,12 @@ export default { mixins: [QuestionMixin], + data() { + return { + type: 'text', + } + }, + computed: { submissionInputPlaceholder() { if (this.readOnly) { @@ -72,13 +78,17 @@ export default { const input = this.$refs.input this.$emit('update:values', [input.value]) }, + + getType() { + return 'text' + } }, } diff --git a/src/components/Questions/QuestionDatetime.vue b/src/components/Questions/QuestionDatetime.vue new file mode 100644 index 0000000..b576d4f --- /dev/null +++ b/src/components/Questions/QuestionDatetime.vue @@ -0,0 +1,97 @@ + + + + + + + diff --git a/src/models/AnswerTypes.js b/src/models/AnswerTypes.js index f8b4631..3d909af 100644 --- a/src/models/AnswerTypes.js +++ b/src/models/AnswerTypes.js @@ -24,6 +24,8 @@ import QuestionMultiple from '../components/Questions/QuestionMultiple' import QuestionDropdown from '../components/Questions/QuestionDropdown' import QuestionShort from '../components/Questions/QuestionShort' import QuestionLong from '../components/Questions/QuestionLong' +import QuestionDate from '../components/Questions/QuestionDate' +import QuestionDatetime from '../components/Questions/QuestionDatetime' /** * @typedef {Object} AnswerTypes @@ -105,4 +107,25 @@ export default { warningInvalid: t('forms', 'This question needs a title!'), }, + date: { + component: QuestionDate, + icon: 'icon-answer-date', + label: t('forms', 'Date'), + + titlePlaceholder: t('forms', 'Date question title'), + createPlaceholder: t('forms', ''), + submitPlaceholder: t('forms', 'Enter a date'), + warningInvalid: t('forms', 'This question needs a title!'), + }, + + datetime: { + component: QuestionDatetime, + icon: 'icon-answer-datetime', + label: t('forms', 'Datetime'), + + titlePlaceholder: t('forms', 'Datetime question title'), + createPlaceholder: t('forms', ''), + submitPlaceholder: t('forms', 'Enter a date'), + warningInvalid: t('forms', 'This question needs a title!'), + }, } From c07543d878d8cf101bf7e91ec4c54a27a3bfb810 Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Fri, 10 Jul 2020 14:53:28 +0200 Subject: [PATCH 21/57] fix date/datetime css Signed-off-by: Simon Vieille --- src/components/Questions/QuestionDate.vue | 2 +- src/components/Questions/QuestionDatetime.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Questions/QuestionDate.vue b/src/components/Questions/QuestionDate.vue index 33307b8..51be528 100644 --- a/src/components/Questions/QuestionDate.vue +++ b/src/components/Questions/QuestionDate.vue @@ -78,7 +78,7 @@ export default { diff --git a/src/models/AnswerTypes.js b/src/models/AnswerTypes.js index 3d909af..e07ff7c 100644 --- a/src/models/AnswerTypes.js +++ b/src/models/AnswerTypes.js @@ -26,6 +26,7 @@ import QuestionShort from '../components/Questions/QuestionShort' import QuestionLong from '../components/Questions/QuestionLong' import QuestionDate from '../components/Questions/QuestionDate' import QuestionDatetime from '../components/Questions/QuestionDatetime' +import QuestionEmail from '../components/Questions/QuestionEmail' /** * @typedef {Object} AnswerTypes @@ -128,4 +129,15 @@ export default { submitPlaceholder: t('forms', 'Enter a date'), warningInvalid: t('forms', 'This question needs a title!'), }, + + email: { + component: QuestionEmail, + icon: 'icon-answer-email', + label: t('forms', 'Email'), + + titlePlaceholder: t('forms', 'Email question title'), + createPlaceholder: t('forms', ''), + submitPlaceholder: t('forms', 'Enter an email'), + warningInvalid: t('forms', 'This question needs a title!'), + }, } From 4285fbaafb356656ad3bcac7711485639312742b Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Fri, 10 Jul 2020 15:11:56 +0200 Subject: [PATCH 23/57] update icons Signed-off-by: Simon Vieille --- img/answer-date.svg | 77 ++++++++----------------------------- img/answer-datetime.svg | 85 +++++++---------------------------------- 2 files changed, 29 insertions(+), 133 deletions(-) diff --git a/img/answer-date.svg b/img/answer-date.svg index f73e6ed..161303b 100644 --- a/img/answer-date.svg +++ b/img/answer-date.svg @@ -21,7 +21,7 @@ image/svg+xml - + @@ -37,14 +37,14 @@ inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1918" - inkscape:window-height="1027" + inkscape:window-height="1008" id="namedview959" showgrid="false" - inkscape:zoom="23.71875" - inkscape:cx="5.7986639" - inkscape:cy="9.3162873" + inkscape:zoom="33.543378" + inkscape:cx="8.6003143" + inkscape:cy="9.8220565" inkscape:window-x="1920" - inkscape:window-y="21" + inkscape:window-y="41" inkscape:window-maximized="0" inkscape:current-layer="svg957" /> - - - - - - - - + diff --git a/img/answer-datetime.svg b/img/answer-datetime.svg index 0c88190..0842b44 100644 --- a/img/answer-datetime.svg +++ b/img/answer-datetime.svg @@ -21,7 +21,7 @@ image/svg+xml - + @@ -37,14 +37,14 @@ inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1918" - inkscape:window-height="1027" + inkscape:window-height="1008" id="namedview959" showgrid="false" - inkscape:zoom="23.71875" - inkscape:cx="5.7986639" - inkscape:cy="9.3162873" + inkscape:zoom="16.771689" + inkscape:cx="6.5224393" + inkscape:cy="13.0769" inkscape:window-x="1920" - inkscape:window-y="21" + inkscape:window-y="41" inkscape:window-maximized="0" inkscape:current-layer="svg957" /> - - - - - - - - - + ry="5.7344108" + rx="5.7344108" /> + From be6fe224402fb78d524e4cb27184030018501eba Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Fri, 10 Jul 2020 15:14:46 +0200 Subject: [PATCH 24/57] optimize icons Signed-off-by: Simon Vieille --- img/answer-date.svg | 78 +++-------------------------------------- img/answer-datetime.svg | 67 ++--------------------------------- img/answer-email.svg | 60 ++----------------------------- 3 files changed, 10 insertions(+), 195 deletions(-) diff --git a/img/answer-date.svg b/img/answer-date.svg index 161303b..354bd02 100644 --- a/img/answer-date.svg +++ b/img/answer-date.svg @@ -1,75 +1,5 @@ - - - - - - image/svg+xml - - - - - - - - - - + + + + diff --git a/img/answer-datetime.svg b/img/answer-datetime.svg index 0842b44..6fd29ab 100644 --- a/img/answer-datetime.svg +++ b/img/answer-datetime.svg @@ -1,65 +1,4 @@ - - - - - - image/svg+xml - - - - - - - - - + + + diff --git a/img/answer-email.svg b/img/answer-email.svg index 06756dc..e046163 100644 --- a/img/answer-email.svg +++ b/img/answer-email.svg @@ -1,59 +1,5 @@ - - - - - - image/svg+xml - - - - - - - - - + + + From 1f6328a9732a6f2188821dbd73c9370345b30711 Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Thu, 16 Jul 2020 15:32:09 +0200 Subject: [PATCH 25/57] refactoring of questions (date, datetime, short) Signed-off-by: Simon Vieille --- src/components/Questions/QuestionDate.vue | 74 ++----------------- src/components/Questions/QuestionDatetime.vue | 74 ++----------------- src/components/Questions/QuestionEmail.vue | 74 ++----------------- src/components/Questions/QuestionShort.vue | 14 +++- 4 files changed, 33 insertions(+), 203 deletions(-) diff --git a/src/components/Questions/QuestionDate.vue b/src/components/Questions/QuestionDate.vue index 51be528..009aebf 100644 --- a/src/components/Questions/QuestionDate.vue +++ b/src/components/Questions/QuestionDate.vue @@ -1,7 +1,7 @@ -
- -
- - - - - diff --git a/src/components/Questions/QuestionDatetime.vue b/src/components/Questions/QuestionDatetime.vue index 04ed091..c0f5a2e 100644 --- a/src/components/Questions/QuestionDatetime.vue +++ b/src/components/Questions/QuestionDatetime.vue @@ -1,7 +1,7 @@ - - - - diff --git a/src/components/Questions/QuestionEmail.vue b/src/components/Questions/QuestionEmail.vue index 2ac0300..b6658e4 100644 --- a/src/components/Questions/QuestionEmail.vue +++ b/src/components/Questions/QuestionEmail.vue @@ -1,7 +1,7 @@ - - - - diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue index 42c2288..468e7ea 100644 --- a/src/components/Questions/QuestionShort.vue +++ b/src/components/Questions/QuestionShort.vue @@ -43,7 +43,7 @@ class="question__input" :maxlength="maxStringLengths.answerText" minlength="1" - type="text" + v-bind:type="type" @input="onInput" @keydown.enter.exact.prevent="onKeydownEnter">

@@ -58,6 +58,12 @@ export default { mixins: [QuestionMixin], + data() { + return { + type: 'text', + } + }, + computed: { submissionInputPlaceholder() { if (this.readOnly) { @@ -72,13 +78,17 @@ export default { const input = this.$refs.input this.$emit('update:values', [input.value]) }, + + getType() { + return 'text' + } }, }