Merge pull request #389 from nextcloud/enh/specific_question_placeholder
Question-specific placeholders
This commit is contained in:
commit
b3d51d3603
|
@ -35,7 +35,7 @@
|
|||
<!-- Header -->
|
||||
<div class="question__header">
|
||||
<input v-if="edit || !text"
|
||||
:placeholder="t('forms', 'Question title')"
|
||||
:placeholder="titlePlaceholder"
|
||||
:aria-label="t('forms', 'Title of question number {index}', {index})"
|
||||
:value="text"
|
||||
class="question__header-title"
|
||||
|
@ -89,6 +89,10 @@ export default {
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
titlePlaceholder: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
mandatory: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
|
|
|
@ -26,14 +26,17 @@
|
|||
:text="text"
|
||||
:mandatory="mandatory"
|
||||
:edit.sync="edit"
|
||||
:read-only="readOnly"
|
||||
:max-question-length="maxStringLengths.questionText"
|
||||
:title-placeholder="answerType.titlePlaceholder"
|
||||
@update:text="onTitleChange"
|
||||
@update:mandatory="onMandatoryChange"
|
||||
@delete="onDelete">
|
||||
<div class="question__content">
|
||||
<textarea ref="textarea"
|
||||
:aria-label="t('forms', 'A long answer for the question “{text}”', { text })"
|
||||
:placeholder="t('forms', 'Long answer text')"
|
||||
:placeholder="submissionInputPlaceholder"
|
||||
:disabled="!readOnly"
|
||||
:required="mandatory"
|
||||
:value="values[0]"
|
||||
class="question__text"
|
||||
|
@ -60,6 +63,15 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
submissionInputPlaceholder() {
|
||||
if (this.readOnly) {
|
||||
return this.answerType.submitPlaceholder
|
||||
}
|
||||
return this.answerType.createPlaceholder
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.autoSizeText()
|
||||
},
|
||||
|
@ -97,6 +109,12 @@ export default {
|
|||
border-bottom: 1px dotted var(--color-border-dark);
|
||||
border-radius: 0;
|
||||
resize: none;
|
||||
|
||||
&:disabled {
|
||||
// Just overrides Server CSS-Styling for disabled inputs. -> Not Good??
|
||||
background-color: var(--color-main-background);
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
@ -26,7 +26,9 @@
|
|||
:text="text"
|
||||
:mandatory="mandatory"
|
||||
:edit.sync="edit"
|
||||
:read-only="readOnly"
|
||||
:max-question-length="maxStringLengths.questionText"
|
||||
:title-placeholder="answerType.titlePlaceholder"
|
||||
@update:text="onTitleChange"
|
||||
@update:mandatory="onMandatoryChange"
|
||||
@delete="onDelete">
|
||||
|
@ -108,7 +110,7 @@ export default {
|
|||
},
|
||||
|
||||
isUnique() {
|
||||
return this.model.unique === true
|
||||
return this.answerType.unique === true
|
||||
},
|
||||
|
||||
hasNoAnswer() {
|
||||
|
|
|
@ -26,14 +26,17 @@
|
|||
:text="text"
|
||||
:mandatory="mandatory"
|
||||
:edit.sync="edit"
|
||||
:read-only="readOnly"
|
||||
:max-question-length="maxStringLengths.questionText"
|
||||
:title-placeholder="answerType.titlePlaceholder"
|
||||
@update:text="onTitleChange"
|
||||
@update:mandatory="onMandatoryChange"
|
||||
@delete="onDelete">
|
||||
<div class="question__content">
|
||||
<input ref="input"
|
||||
:aria-label="t('forms', 'A short answer for the question “{text}”', { text })"
|
||||
:placeholder="t('forms', 'Short answer text')"
|
||||
:placeholder="submissionInputPlaceholder"
|
||||
:disabled="!readOnly"
|
||||
:required="mandatory"
|
||||
:value="values[0]"
|
||||
class="question__input"
|
||||
|
@ -54,6 +57,15 @@ export default {
|
|||
|
||||
mixins: [QuestionMixin],
|
||||
|
||||
computed: {
|
||||
submissionInputPlaceholder() {
|
||||
if (this.readOnly) {
|
||||
return this.answerType.submitPlaceholder
|
||||
}
|
||||
return this.answerType.createPlaceholder
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput() {
|
||||
const input = this.$refs.input
|
||||
|
@ -73,6 +85,12 @@ export default {
|
|||
border: 0;
|
||||
border-bottom: 1px dotted var(--color-border-dark);
|
||||
border-radius: 0;
|
||||
|
||||
&:disabled {
|
||||
// Just overrides Server CSS-Styling for disabled inputs. -> Not Good??
|
||||
background-color: var(--color-main-background);
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
@ -74,11 +74,19 @@ export default {
|
|||
/**
|
||||
* Answer type model object
|
||||
*/
|
||||
model: {
|
||||
answerType: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
|
||||
/**
|
||||
* Submission or Edit-Mode
|
||||
*/
|
||||
readOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
/**
|
||||
* Database-Restrictions
|
||||
*/
|
||||
|
|
|
@ -32,34 +32,58 @@ import QuestionMultiple from '../components/Questions/QuestionMultiple'
|
|||
* @property {string} long
|
||||
*/
|
||||
export default {
|
||||
/**
|
||||
* Specifying Question-Models in a common place
|
||||
* Further type-specific parameters are possible.
|
||||
* @prop component The vue-component this answer-type relies on
|
||||
* @prop icon The icon corresponding to this answer-type
|
||||
* @prop label The answer-type label, that users will see as answer-type.
|
||||
* @prop validate *optional* Define conditions where this question is not ok
|
||||
*
|
||||
* @prop titlePlaceholder The placeholder users see as empty question-title in edit-mode
|
||||
* @prop createPlaceholder *optional* The placeholder that is visible in edit-mode, to indicate a submission form-input field
|
||||
* @prop submitPlaceholder *optional* The placeholder that is visible in submit-mode, to indicate a form input-field
|
||||
*/
|
||||
|
||||
multiple_unique: {
|
||||
component: QuestionMultiple,
|
||||
icon: 'icon-answer-multiple',
|
||||
label: t('forms', 'Multiple choice'),
|
||||
unique: true,
|
||||
// Define conditions where this questions is not ok
|
||||
validate: question => question.options.length > 0,
|
||||
|
||||
titlePlaceholder: t('forms', 'Multiple choice question title'),
|
||||
|
||||
// Using the same vue-component as multiple, this specifies that the component renders as multiple_unique.
|
||||
unique: true,
|
||||
},
|
||||
|
||||
multiple: {
|
||||
component: QuestionMultiple,
|
||||
icon: 'icon-answer-checkbox',
|
||||
label: t('forms', 'Checkboxes'),
|
||||
// Define conditions where this questions is not ok
|
||||
validate: question => question.options.length > 0,
|
||||
|
||||
titlePlaceholder: t('forms', 'Checkbox question title'),
|
||||
},
|
||||
|
||||
short: {
|
||||
component: QuestionShort,
|
||||
icon: 'icon-answer-short',
|
||||
label: t('forms', 'Short answer'),
|
||||
|
||||
titlePlaceholder: t('forms', 'Short answer question title'),
|
||||
createPlaceholder: t('forms', 'People can enter a short answer'),
|
||||
submitPlaceholder: t('forms', 'Enter a short answer'),
|
||||
},
|
||||
|
||||
long: {
|
||||
component: QuestionLong,
|
||||
icon: 'icon-answer-long',
|
||||
label: t('forms', 'Long text'),
|
||||
|
||||
titlePlaceholder: t('forms', 'Long text question title'),
|
||||
createPlaceholder: t('forms', 'People can enter a long text'),
|
||||
submitPlaceholder: t('forms', 'Enter a long text'),
|
||||
},
|
||||
|
||||
}
|
||||
|
|
|
@ -90,7 +90,7 @@
|
|||
v-for="(question, index) in form.questions"
|
||||
ref="questions"
|
||||
:key="question.id"
|
||||
:model="answerTypes[question.type]"
|
||||
:answer-type="answerTypes[question.type]"
|
||||
:index="index + 1"
|
||||
:max-string-lengths="maxStringLengths"
|
||||
v-bind.sync="question"
|
||||
|
|
|
@ -48,7 +48,7 @@
|
|||
ref="questions"
|
||||
:key="question.id"
|
||||
:read-only="true"
|
||||
:model="answerTypes[question.type]"
|
||||
:answer-type="answerTypes[question.type]"
|
||||
:index="index + 1"
|
||||
:max-string-lengths="maxStringLengths"
|
||||
v-bind="question"
|
||||
|
|
Loading…
Reference in a new issue