From 612f75e06fa8ccb6793de527d16ee3fc01787e8c Mon Sep 17 00:00:00 2001
From: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Date: Wed, 27 May 2020 21:52:35 +0200
Subject: [PATCH] Add Pseudoinput to show on edit

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
---
 src/components/Questions/AnswerInput.vue      | 52 +++++++++++++++++
 src/components/Questions/Question.vue         | 10 ++++
 src/components/Questions/QuestionLong.vue     |  4 +-
 src/components/Questions/QuestionMultiple.vue | 57 +++++++++++++++++--
 src/components/Questions/QuestionShort.vue    |  2 +-
 5 files changed, 117 insertions(+), 8 deletions(-)

diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index 83f2c1a..d9aacb3 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -1,5 +1,6 @@
 <template>
 	<li class="question__item">
+		<div class="question__item__pseudoInput" :class="{'question__item__pseudoInput--unique':isUnique}" />
 		<input
 			ref="input"
 			:aria-label="t('forms', 'An answer for the {index} option', { index: index + 1 })"
@@ -49,6 +50,10 @@ export default {
 			type: Number,
 			required: true,
 		},
+		isUnique: {
+			type: Boolean,
+			required: true,
+		},
 		maxOptionLength: {
 			type: Number,
 			required: true,
@@ -173,3 +178,50 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.question__item {
+	position: relative;
+	display: inline-flex;
+	min-height: 44px;
+
+	// Taking styles from server radio-input items
+	&__pseudoInput {
+		flex-shrink: 0;
+		display: inline-block;
+		height: 16px;
+		width: 16px !important;
+		vertical-align: middle;
+		margin: 0 14px 0px 0px;
+		border: 1px solid #878787;
+		border-radius: 1px;
+		// Adjust position manually to match input-checkbox
+		position: relative;
+		top: 10px;
+
+		// Show round for Pseudo-Radio-Button
+		&--unique {
+			border-radius: 50%;
+		}
+
+		&:hover {
+			border-color: var(--color-primary-element);
+		}
+	}
+}
+
+// Using type to have a higher order than the input styling of server
+.question__input[type=text] {
+	width: 100%;
+	// Height 34px + 1px Border
+	min-height: 35px;
+	margin: 0;
+	padding: 0 0;
+	border: 0;
+	border-bottom: 1px dotted var(--color-border-dark);
+	border-radius: 0;
+	font-size: 14px;
+	position: relative;
+}
+
+</style>
diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index d85b804..2d8121e 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -30,6 +30,7 @@
 		<!-- TODO: implement arrow key mapping to reorder question -->
 		<div v-if="!readOnly"
 			class="question__drag-handle icon-drag-handle"
+			:class="{'question__drag-handle--shiftup': shiftDragHandle}"
 			:aria-label="t('forms', 'Drag to reorder the questions')" />
 
 		<!-- Header -->
@@ -97,6 +98,10 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		shiftDragHandle: {
+			type: Boolean,
+			default: false,
+		},
 		edit: {
 			type: Boolean,
 			required: true,
@@ -184,6 +189,11 @@ export default {
 		height: 100%;
 		opacity: .5;
 
+		// Avoid moving drag-handle due to newAnswer-input on multiple-Questions
+		&--shiftup {
+			height: calc(100% - 44px);
+		}
+
 		&:hover,
 		&:focus {
 			opacity: 1;
diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
index 7939ab8..6870ced 100644
--- a/src/components/Questions/QuestionLong.vue
+++ b/src/components/Questions/QuestionLong.vue
@@ -94,8 +94,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
-// Using type to have a higher order than the input styling of server
+<style lang="scss" scoped>
 .question__text {
 	// make sure height calculations are correct
 	box-sizing: content-box !important;
@@ -109,6 +108,7 @@ export default {
 	border-bottom: 1px dotted var(--color-border-dark);
 	border-radius: 0;
 	resize: none;
+	font-size: 14px;
 
 	&:disabled {
 		// Just overrides Server CSS-Styling for disabled inputs. -> Not Good??
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index f9cbb8a..bde4f91 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -29,6 +29,7 @@
 		:read-only="readOnly"
 		:max-question-length="maxStringLengths.questionText"
 		:title-placeholder="answerType.titlePlaceholder"
+		:shift-drag-handle="shiftDragHandle"
 		@update:text="onTitleChange"
 		@update:mandatory="onMandatoryChange"
 		@delete="onDelete">
@@ -62,6 +63,7 @@
 					ref="input"
 					:answer="answer"
 					:index="index"
+					:is-unique="isUnique"
 					:max-option-length="maxStringLengths.optionText"
 					@add="addNewEntry"
 					@delete="deleteOption"
@@ -69,6 +71,7 @@
 			</template>
 
 			<li v-if="(edit && !isLastEmpty) || hasNoAnswer" class="question__item">
+				<div class="question__item__pseudoInput" :class="{'question__item__pseudoInput--unique':isUnique}" />
 				<input
 					:aria-label="t('forms', 'Add a new answer')"
 					:placeholder="t('forms', 'Add a new answer')"
@@ -121,6 +124,10 @@ export default {
 		areNoneChecked() {
 			return this.values.length === 0
 		},
+
+		shiftDragHandle() {
+			return this.edit && this.options.length !== 0 && !this.isLastEmpty
+		},
 	},
 
 	watch: {
@@ -333,15 +340,51 @@ export default {
 .question__item {
 	position: relative;
 	display: inline-flex;
-	align-items: center;
 	min-height: 44px;
 
+	// Taking styles from server radio-input items
+	&__pseudoInput {
+		flex-shrink: 0;
+		display: inline-block;
+		height: 16px;
+		width: 16px !important;
+		vertical-align: middle;
+		margin: 0 14px 0px 0px;
+		border: 1px solid #878787;
+		border-radius: 1px;
+		// Adjust position manually to match pseudo-input and proper position to text
+		position: relative;
+		top: 10px;
+
+		// Show round for Pseudo-Radio-Button
+		&--unique {
+			border-radius: 50%;
+		}
+
+		&:hover {
+			border-color: var(--color-primary-element);
+		}
+	}
+
 	.question__label {
 		flex: 1 1 100%;
 		// Overwrite guest page core styles
 		text-align: left !important;
-		padding: 11px 0 11px 30px;
+		// Some rounding issues lead to this strange number, so label and answerInput show up a the same position, working on different browsers.
+		padding: 6.5px 0 0 30px;
+		line-height: 22px;
+		min-height: 34px;
+		height: min-content;
+		position: relative;
+
 		&::before {
+			box-sizing: border-box;
+			// Adjust position manually for proper position to text
+			position: absolute;
+			top: 10px;
+			width: 16px;
+			height: 16px;
+			margin-bottom: 0;
 			margin-left: -30px !important;
 			margin-right: 14px !important;
 		}
@@ -351,12 +394,15 @@ export default {
 // Using type to have a higher order than the input styling of server
 .question__input[type=text] {
 	width: 100%;
-	min-height: 44px;
+	// Height 34px + 1px Border
+	min-height: 35px;
 	margin: 0;
-	padding: 6px 0;
+	padding: 0 0;
 	border: 0;
 	border-bottom: 1px dotted var(--color-border-dark);
 	border-radius: 0;
+	font-size: 14px;
+	position: relative;
 }
 
 input.question__radio,
@@ -364,7 +410,8 @@ input.question__checkbox {
 	z-index: -1;
 	// make sure browser warnings are properly
 	// displayed at the correct location
-	left: 22px;
+	left: 0px;
+	width: 16px;
 }
 
 </style>
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index 9cfb97b..8ebc914 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -75,7 +75,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 // Using type to have a higher order than the input styling of server
 .question__input[type=text] {
 	width: 100%;