Add Pseudoinput to show on edit
Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
This commit is contained in:
parent
c7577a3834
commit
612f75e06f
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<li class="question__item">
|
<li class="question__item">
|
||||||
|
<div class="question__item__pseudoInput" :class="{'question__item__pseudoInput--unique':isUnique}" />
|
||||||
<input
|
<input
|
||||||
ref="input"
|
ref="input"
|
||||||
:aria-label="t('forms', 'An answer for the {index} option', { index: index + 1 })"
|
:aria-label="t('forms', 'An answer for the {index} option', { index: index + 1 })"
|
||||||
|
@ -49,6 +50,10 @@ export default {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
isUnique: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
maxOptionLength: {
|
maxOptionLength: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: true,
|
required: true,
|
||||||
|
@ -173,3 +178,50 @@ export default {
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
||||||
|
|
|
@ -30,6 +30,7 @@
|
||||||
<!-- TODO: implement arrow key mapping to reorder question -->
|
<!-- TODO: implement arrow key mapping to reorder question -->
|
||||||
<div v-if="!readOnly"
|
<div v-if="!readOnly"
|
||||||
class="question__drag-handle icon-drag-handle"
|
class="question__drag-handle icon-drag-handle"
|
||||||
|
:class="{'question__drag-handle--shiftup': shiftDragHandle}"
|
||||||
:aria-label="t('forms', 'Drag to reorder the questions')" />
|
:aria-label="t('forms', 'Drag to reorder the questions')" />
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
|
@ -97,6 +98,10 @@ export default {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
shiftDragHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
edit: {
|
edit: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: true,
|
required: true,
|
||||||
|
@ -184,6 +189,11 @@ export default {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
|
|
||||||
|
// Avoid moving drag-handle due to newAnswer-input on multiple-Questions
|
||||||
|
&--shiftup {
|
||||||
|
height: calc(100% - 44px);
|
||||||
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
|
@ -94,8 +94,7 @@ export default {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
// Using type to have a higher order than the input styling of server
|
|
||||||
.question__text {
|
.question__text {
|
||||||
// make sure height calculations are correct
|
// make sure height calculations are correct
|
||||||
box-sizing: content-box !important;
|
box-sizing: content-box !important;
|
||||||
|
@ -109,6 +108,7 @@ export default {
|
||||||
border-bottom: 1px dotted var(--color-border-dark);
|
border-bottom: 1px dotted var(--color-border-dark);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
resize: none;
|
resize: none;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
// Just overrides Server CSS-Styling for disabled inputs. -> Not Good??
|
// Just overrides Server CSS-Styling for disabled inputs. -> Not Good??
|
||||||
|
|
|
@ -29,6 +29,7 @@
|
||||||
:read-only="readOnly"
|
:read-only="readOnly"
|
||||||
:max-question-length="maxStringLengths.questionText"
|
:max-question-length="maxStringLengths.questionText"
|
||||||
:title-placeholder="answerType.titlePlaceholder"
|
:title-placeholder="answerType.titlePlaceholder"
|
||||||
|
:shift-drag-handle="shiftDragHandle"
|
||||||
@update:text="onTitleChange"
|
@update:text="onTitleChange"
|
||||||
@update:mandatory="onMandatoryChange"
|
@update:mandatory="onMandatoryChange"
|
||||||
@delete="onDelete">
|
@delete="onDelete">
|
||||||
|
@ -62,6 +63,7 @@
|
||||||
ref="input"
|
ref="input"
|
||||||
:answer="answer"
|
:answer="answer"
|
||||||
:index="index"
|
:index="index"
|
||||||
|
:is-unique="isUnique"
|
||||||
:max-option-length="maxStringLengths.optionText"
|
:max-option-length="maxStringLengths.optionText"
|
||||||
@add="addNewEntry"
|
@add="addNewEntry"
|
||||||
@delete="deleteOption"
|
@delete="deleteOption"
|
||||||
|
@ -69,6 +71,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<li v-if="(edit && !isLastEmpty) || hasNoAnswer" class="question__item">
|
<li v-if="(edit && !isLastEmpty) || hasNoAnswer" class="question__item">
|
||||||
|
<div class="question__item__pseudoInput" :class="{'question__item__pseudoInput--unique':isUnique}" />
|
||||||
<input
|
<input
|
||||||
:aria-label="t('forms', 'Add a new answer')"
|
:aria-label="t('forms', 'Add a new answer')"
|
||||||
:placeholder="t('forms', 'Add a new answer')"
|
:placeholder="t('forms', 'Add a new answer')"
|
||||||
|
@ -121,6 +124,10 @@ export default {
|
||||||
areNoneChecked() {
|
areNoneChecked() {
|
||||||
return this.values.length === 0
|
return this.values.length === 0
|
||||||
},
|
},
|
||||||
|
|
||||||
|
shiftDragHandle() {
|
||||||
|
return this.edit && this.options.length !== 0 && !this.isLastEmpty
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -333,15 +340,51 @@ export default {
|
||||||
.question__item {
|
.question__item {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
|
||||||
min-height: 44px;
|
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 {
|
.question__label {
|
||||||
flex: 1 1 100%;
|
flex: 1 1 100%;
|
||||||
// Overwrite guest page core styles
|
// Overwrite guest page core styles
|
||||||
text-align: left !important;
|
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 {
|
&::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-left: -30px !important;
|
||||||
margin-right: 14px !important;
|
margin-right: 14px !important;
|
||||||
}
|
}
|
||||||
|
@ -351,12 +394,15 @@ export default {
|
||||||
// Using type to have a higher order than the input styling of server
|
// Using type to have a higher order than the input styling of server
|
||||||
.question__input[type=text] {
|
.question__input[type=text] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 44px;
|
// Height 34px + 1px Border
|
||||||
|
min-height: 35px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 6px 0;
|
padding: 0 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: 1px dotted var(--color-border-dark);
|
border-bottom: 1px dotted var(--color-border-dark);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
input.question__radio,
|
input.question__radio,
|
||||||
|
@ -364,7 +410,8 @@ input.question__checkbox {
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
// make sure browser warnings are properly
|
// make sure browser warnings are properly
|
||||||
// displayed at the correct location
|
// displayed at the correct location
|
||||||
left: 22px;
|
left: 0px;
|
||||||
|
width: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -75,7 +75,7 @@ export default {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
// Using type to have a higher order than the input styling of server
|
// Using type to have a higher order than the input styling of server
|
||||||
.question__input[type=text] {
|
.question__input[type=text] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
Loading…
Reference in a new issue