New answer menu
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
Jonas Rittershofer
parent
1d76b7e854
commit
ed950c3c9b
|
|
@ -2,6 +2,9 @@
|
|||
// Icon definitions
|
||||
@include icon-black-white('forms', 'forms', 3);
|
||||
@include icon-black-white('clone', 'forms', 1);
|
||||
@include icon-black-white('answer-short', 'forms', 1);
|
||||
@include icon-black-white('answer-long', 'forms', 1);
|
||||
@include icon-black-white('answer-checkbox', 'forms', 1);
|
||||
|
||||
.icon-yes {
|
||||
@include icon-color('checkmark', 'actions', $color-success, 1, true);
|
||||
|
|
|
|||
4
img/answer-checkbox.svg
Normal file
4
img/answer-checkbox.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
|
||||
<path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M2.43 2a.43.43 0 00-.43.43V4.3l.86.86V2.86h8.73l.86-.86H2.43zM14 5.86l-.86.86v6.42H2.86v-2.6L2 9.68v3.9a.43.43 0 00.43.42h11.14a.43.43 0 00.43-.43v-7.7z" color="#000" font-weight="400" font-family="sans-serif" overflow="visible" paint-order="markers fill stroke"/>
|
||||
<path d="M6.09 12.5L1.14 7.55l1.41-1.41L6.1 9.67l6.34-6.38 1.44 1.43z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 881 B |
86
img/answer-long.svg
Normal file
86
img/answer-long.svg
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="16"
|
||||
height="16"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="answer-long.svg"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="2520"
|
||||
inkscape:window-height="1353"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
inkscape:zoom="20.279588"
|
||||
inkscape:cx="8.6803276"
|
||||
inkscape:cy="2.7931198"
|
||||
inkscape:window-x="20"
|
||||
inkscape:window-y="67"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg6" />
|
||||
<rect
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
|
||||
id="rect822"
|
||||
width="12.000001"
|
||||
height="1.9999999"
|
||||
x="2"
|
||||
y="2"
|
||||
rx="1.3877789e-16"
|
||||
ry="1.3877788e-16" />
|
||||
<rect
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
|
||||
id="rect822-3"
|
||||
width="6.0000005"
|
||||
height="1.9999999"
|
||||
x="2"
|
||||
y="11"
|
||||
rx="1.3877789e-16"
|
||||
ry="1.3877788e-16" />
|
||||
<rect
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
|
||||
id="rect822-6"
|
||||
width="12.000001"
|
||||
height="1.9999999"
|
||||
x="2"
|
||||
y="5"
|
||||
rx="1.3877789e-16"
|
||||
ry="1.3877788e-16" />
|
||||
<rect
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
|
||||
id="rect822-6-7"
|
||||
width="12.000001"
|
||||
height="1.9999999"
|
||||
x="2"
|
||||
y="8"
|
||||
rx="1.3877789e-16"
|
||||
ry="1.3877788e-16" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
68
img/answer-short.svg
Normal file
68
img/answer-short.svg
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="16"
|
||||
height="16"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="answer-short.svg"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="2520"
|
||||
inkscape:window-height="1353"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
inkscape:zoom="20.279588"
|
||||
inkscape:cx="8.6803276"
|
||||
inkscape:cy="2.7931198"
|
||||
inkscape:window-x="20"
|
||||
inkscape:window-y="67"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg6" />
|
||||
<rect
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
|
||||
id="rect822"
|
||||
width="12.000001"
|
||||
height="1.9999999"
|
||||
x="2"
|
||||
y="5"
|
||||
rx="1.3877789e-16"
|
||||
ry="1.3877788e-16" />
|
||||
<rect
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.99999976;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
|
||||
id="rect822-3"
|
||||
width="6.0000005"
|
||||
height="1.9999999"
|
||||
x="2"
|
||||
y="8"
|
||||
rx="1.3877789e-16"
|
||||
ry="1.3877788e-16" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -46,6 +46,9 @@ export default {
|
|||
<style lang="scss">
|
||||
.emptycontent {
|
||||
margin-top: 20vh;
|
||||
button {
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,34 +20,29 @@
|
|||
*
|
||||
*/
|
||||
|
||||
export default class {
|
||||
|
||||
#data
|
||||
|
||||
/**
|
||||
* Construct the form
|
||||
* @param {Object} data the form data
|
||||
*/
|
||||
constructor(data) {
|
||||
// Id check
|
||||
if (!('id' in data && typeof data.id === 'number')) {
|
||||
throw new Error('A new form must at least contain a valid id')
|
||||
}
|
||||
|
||||
// Hash check
|
||||
if (!('hash' in data && typeof data.id === 'string')) {
|
||||
throw new Error('A new form must at least contain a valid hash')
|
||||
}
|
||||
|
||||
this.#data = data
|
||||
}
|
||||
|
||||
get id() {
|
||||
return this.#data.id
|
||||
}
|
||||
|
||||
get hash() {
|
||||
return this.#data.hash
|
||||
}
|
||||
|
||||
}
|
||||
export default [
|
||||
{
|
||||
label: t('forms', 'Multiple choice'),
|
||||
value: 'radiogroup',
|
||||
icon: 'icon-forms',
|
||||
},
|
||||
{
|
||||
label: t('forms', 'Checkboxes'),
|
||||
value: 'checkbox',
|
||||
icon: 'icon-answer-checkbox',
|
||||
},
|
||||
{
|
||||
label: t('forms', 'Short answer'),
|
||||
value: 'text',
|
||||
icon: 'icon-answer-short',
|
||||
},
|
||||
{
|
||||
label: t('forms', 'Long text'),
|
||||
value: 'comment',
|
||||
icon: 'icon-answer-long',
|
||||
},
|
||||
// {
|
||||
// label: 'Drop Down',
|
||||
// value: 'dropdown',
|
||||
// },
|
||||
]
|
||||
|
|
@ -47,6 +47,7 @@
|
|||
:minlength="0"
|
||||
:placeholder="t('forms', 'Title')"
|
||||
:required="true"
|
||||
autofocus
|
||||
type="text">
|
||||
<label class="hidden-visually" for="form-desc">{{ t('forms', 'Description') }}</label>
|
||||
<textarea
|
||||
|
|
@ -58,6 +59,17 @@
|
|||
</header>
|
||||
|
||||
<section>
|
||||
<!-- Add new questions toolbar -->
|
||||
<!-- <div class="question-toolbar" role="toolbar">
|
||||
<button v-for="type in answerTypes"
|
||||
:key="type.label"
|
||||
class="question-toolbar__question"
|
||||
@click="addQuestion">
|
||||
<span class="question-toolbar__icon" :class="type.icon" />
|
||||
{{ type.label }}
|
||||
</button>
|
||||
</div> -->
|
||||
|
||||
<div id="quiz-form-selector-text">
|
||||
<!--shows inputs for question types: drop down box to select the type, text box for question, and button to add-->
|
||||
<label for="ans-type">Answer Type: </label>
|
||||
|
|
@ -79,8 +91,20 @@
|
|||
{{ t('forms', 'Add Question') }}
|
||||
</button>
|
||||
</div>
|
||||
<!--Transition group to list the already added questions (in the form of quizFormItems)-->
|
||||
|
||||
<!-- No questions -->
|
||||
<EmptyContent v-if="form.questions.length === 0">
|
||||
{{ t('forms', 'This form does not have any questions') }}
|
||||
<template #desc>
|
||||
<button class="primary" @click="openQuestionMenu">
|
||||
{{ t('forms', 'Add a new one') }}
|
||||
</button>
|
||||
</template>
|
||||
</EmptyContent>
|
||||
|
||||
<!-- Questions list -->
|
||||
<transitionGroup
|
||||
v-else
|
||||
id="form-list"
|
||||
name="list"
|
||||
tag="ul"
|
||||
|
|
@ -103,11 +127,15 @@ import { generateUrl } from '@nextcloud/router'
|
|||
import axios from '@nextcloud/axios'
|
||||
import moment from '@nextcloud/moment'
|
||||
import { emit } from '@nextcloud/event-bus'
|
||||
import { showError } from '@nextcloud/dialogs'
|
||||
import debounce from 'debounce'
|
||||
|
||||
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
||||
import Actions from '@nextcloud/vue/dist/Components/Actions'
|
||||
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
|
||||
import { showError, showSuccess } from '@nextcloud/dialogs'
|
||||
|
||||
import answerTypes from '../models/AnswerTypes'
|
||||
import EmptyContent from '../components/EmptyContent'
|
||||
import QuizFormItem from '../components/quizFormItem'
|
||||
import TopBar from '../components/TopBar'
|
||||
|
||||
|
|
@ -116,7 +144,10 @@ import ViewsMixin from '../mixins/ViewsMixin'
|
|||
export default {
|
||||
name: 'Create',
|
||||
components: {
|
||||
ActionButton,
|
||||
Actions,
|
||||
AppContent,
|
||||
EmptyContent,
|
||||
QuizFormItem,
|
||||
TopBar,
|
||||
},
|
||||
|
|
@ -143,14 +174,11 @@ export default {
|
|||
{ text: 'Long Response', value: 'comment' },
|
||||
{ text: 'Drop Down', value: 'dropdown' },
|
||||
],
|
||||
answerTypes,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
langShort() {
|
||||
return this.lang.split('-')[0]
|
||||
},
|
||||
|
||||
title() {
|
||||
if (this.form.form.title === '') {
|
||||
return t('forms', 'Create new form')
|
||||
|
|
@ -169,11 +197,6 @@ export default {
|
|||
return t('forms', 'Done')
|
||||
}
|
||||
},
|
||||
|
||||
localeData() {
|
||||
return moment.localeData(moment.locale(this.locale))
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
@ -191,12 +214,7 @@ export default {
|
|||
},
|
||||
|
||||
created() {
|
||||
if (this.$route.name === 'create') {
|
||||
// TODO: manage this from Forms.vue, request a new form to the server
|
||||
this.form.form.owner = OC.getCurrentUser().uid
|
||||
this.loadingForm = false
|
||||
} else if (this.$route.name === 'edit') {
|
||||
// TODO: fetch & update form?
|
||||
if (this.$route.name === 'edit') {
|
||||
this.form.mode = 'edit'
|
||||
} else if (this.$route.name === 'clone') {
|
||||
// TODO: CLONE
|
||||
|
|
@ -343,6 +361,13 @@ export default {
|
|||
toggleSidebar() {
|
||||
emit('toggleSidebar')
|
||||
},
|
||||
|
||||
/**
|
||||
* Add question methods
|
||||
*/
|
||||
openQuestionMenu() {
|
||||
this.$refs.questionMenu.opened = true
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -380,6 +405,10 @@ export default {
|
|||
resize: none
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
/* Transitions for inserting and removing list items */
|
||||
|
|
|
|||
Loading…
Reference in a new issue