Skip to content

Commit 4bb2f92

Browse files
Chartman123Chartman123
committed
move insert-menu to question slot and fix animations
Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
1 parent 0cc3402 commit 4bb2f92

12 files changed

Lines changed: 349 additions & 233 deletions

‎src/components/Questions/Question.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,8 @@
157157

158158
<!-- Question content -->
159159
<slot />
160+
<!-- Insert question menu -->
161+
<slot name="insert" />
160162
</li>
161163
</template>
162164

‎src/components/Questions/QuestionColor.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@
3535
</NcButton>
3636
</div>
3737
</div>
38+
<template #insert>
39+
<slot name="insert" />
40+
</template>
3841
</Question>
3942
</template>
4043

‎src/components/Questions/QuestionDate.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,9 @@
9898
rangeSeparator=" - "
9999
@update:modelValue="onValueChange" />
100100
</div>
101+
<template #insert>
102+
<slot name="insert" />
103+
</template>
101104
</Question>
102105
</template>
103106

‎src/components/Questions/QuestionDropdown.vue‎

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -50,45 +50,48 @@
5050
v-else
5151
v-model="choices"
5252
class="question__content"
53-
:animation="200"
53+
:animation="300"
5454
direction="vertical"
5555
handle=".option__drag-handle"
5656
invertSwap
57-
tag="transition-group"
58-
:componentData="{
59-
name: isDragging
60-
? 'no-external-transition-on-drag'
61-
: 'options-list-transition',
62-
}"
57+
target=".sort-target"
6358
@change="saveOptionsOrder('choice')"
64-
@start="isDragging = true"
65-
@end="isDragging = false">
66-
<AnswerInput
67-
v-for="(answer, index) in choices"
68-
:key="answer.local ? 'option-local' : answer.id"
69-
ref="input"
70-
:answer="answer"
71-
:formId="formId"
72-
isDropdown
73-
:index="index"
74-
:isUnique="!isMultiple"
75-
:maxIndex="options.length - 1"
76-
:maxOptionLength="maxStringLengths.optionText"
77-
optionType="choice"
78-
@createAnswer="onCreateAnswer"
79-
@update:answer="updateAnswer"
80-
@delete="deleteOption"
81-
@focusNext="focusNextInput"
82-
@moveUp="onOptionMoveUp(index, OptionType.Choice)"
83-
@moveDown="onOptionMoveDown(index, OptionType.Choice)"
84-
@tabbedOut="checkValidOption" />
59+
@start="onDragStart"
60+
@end="onDragEnd">
61+
<TransitionGroup
62+
tag="ul"
63+
:name="isDragging ? undefined : 'options-list-transition'"
64+
class="sort-target">
65+
<AnswerInput
66+
v-for="(answer, index) in choices"
67+
:key="answer.local ? 'option-local' : answer.id"
68+
ref="input"
69+
:answer="answer"
70+
:formId="formId"
71+
isDropdown
72+
:index="index"
73+
:isUnique="!isMultiple"
74+
:maxIndex="options.length - 1"
75+
:maxOptionLength="maxStringLengths.optionText"
76+
optionType="choice"
77+
@createAnswer="onCreateAnswer"
78+
@update:answer="updateAnswer"
79+
@delete="deleteOption"
80+
@focusNext="focusNextInput"
81+
@moveUp="onOptionMoveUp(index, OptionType.Choice)"
82+
@moveDown="onOptionMoveDown(index, OptionType.Choice)"
83+
@tabbedOut="checkValidOption" />
84+
</TransitionGroup>
8585
</Draggable>
8686
</template>
8787

8888
<!-- Add multiple options modal -->
8989
<OptionInputDialog
9090
v-model:open="isOptionDialogShown"
9191
@multipleAnswers="handleMultipleOptions" />
92+
<template #insert>
93+
<slot name="insert" />
94+
</template>
9295
</Question>
9396
</template>
9497

@@ -181,6 +184,16 @@ export default {
181184
},
182185
183186
methods: {
187+
onDragStart() {
188+
this.isDragging = true
189+
},
190+
191+
onDragEnd() {
192+
this.$nextTick(() => {
193+
this.isDragging = false
194+
})
195+
},
196+
184197
onInput(option) {
185198
if (Array.isArray(option)) {
186199
this.$emit('update:values', [
@@ -225,7 +238,7 @@ export default {
225238
.options-list-transition-enter-from,
226239
.options-list-transition-leave-to {
227240
opacity: 0;
228-
transform: translateX(44px);
241+
transform: translateX(var(--default-clickable-area));
229242
}
230243
231244
/* ensure leaving items are taken out of layout flow so that moving

‎src/components/Questions/QuestionFile.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,9 @@
141141
</li>
142142
</ul>
143143
</div>
144+
<template #insert>
145+
<slot name="insert" />
146+
</template>
144147
</Question>
145148
</template>
146149

‎src/components/Questions/QuestionGrid.vue‎

Lines changed: 69 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -96,79 +96,82 @@
9696
<Draggable
9797
v-model="columns"
9898
class="question__content"
99-
:animation="200"
99+
:animation="300"
100100
direction="vertical"
101101
handle=".option__drag-handle"
102102
invertSwap
103-
tag="transition-group"
104-
:componentData="{
105-
name: isDragging
106-
? 'no-external-transition-on-drag'
107-
: 'options-list-transition',
108-
}"
103+
target=".sort-target"
109104
@change="saveOptionsOrder('column')"
110-
@start="isDragging = true"
111-
@end="isDragging = false">
105+
@start="onDragStart"
106+
@end="onDragEnd">
112107
<!-- Column input edit -->
113-
<AnswerInput
114-
v-for="(answer, index) in columns"
115-
:key="answer.local ? 'option-local' : answer.id"
116-
ref="input"
117-
:answer="answer"
118-
:formId="formId"
119-
:index="index"
120-
:isUnique="isUnique"
121-
:maxIndex="columns.length - 2"
122-
:maxOptionLength="maxStringLengths.optionText"
123-
optionType="column"
124-
@createAnswer="onCreateAnswer"
125-
@update:answer="updateAnswer"
126-
@delete="deleteOption"
127-
@focusNext="focusNextInput"
128-
@moveUp="onOptionMoveUp(index, 'column')"
129-
@moveDown="onOptionMoveDown(index, 'column')"
130-
@tabbedOut="checkValidOption('column')" />
108+
<TransitionGroup
109+
tag="ul"
110+
:name="isDragging ? undefined : 'options-list-transition'"
111+
class="sort-target">
112+
<AnswerInput
113+
v-for="(answer, index) in columns"
114+
:key="answer.local ? 'option-local' : answer.id"
115+
ref="input"
116+
:answer="answer"
117+
:formId="formId"
118+
:index="index"
119+
:isUnique="isUnique"
120+
:maxIndex="columns.length - 2"
121+
:maxOptionLength="maxStringLengths.optionText"
122+
optionType="column"
123+
@createAnswer="onCreateAnswer"
124+
@update:answer="updateAnswer"
125+
@delete="deleteOption"
126+
@focusNext="focusNextInput"
127+
@moveUp="onOptionMoveUp(index, 'column')"
128+
@moveDown="onOptionMoveDown(index, 'column')"
129+
@tabbedOut="checkValidOption('column')" />
130+
</TransitionGroup>
131131
</Draggable>
132132

133133
<div>{{ t('forms', 'Rows') }}</div>
134134
<Draggable
135135
v-model="rows"
136136
class="question__content"
137-
:animation="200"
137+
:animation="300"
138138
direction="vertical"
139139
handle=".option__drag-handle"
140140
invertSwap
141-
tag="transition-group"
142-
:componentData="{
143-
name: isDragging
144-
? 'no-external-transition-on-drag'
145-
: 'options-list-transition',
146-
}"
141+
target=".sort-target"
147142
@change="saveOptionsOrder('row')"
148-
@start="isDragging = true"
149-
@end="isDragging = false">
150-
<!-- Row input edit -->
151-
<AnswerInput
152-
v-for="(answer, index) in rows"
153-
:key="answer.local ? 'option-local' : answer.id"
154-
ref="input"
155-
:answer="answer"
156-
:formId="formId"
157-
:index="index"
158-
:isUnique="isUnique"
159-
:maxIndex="rows.length - 2"
160-
:maxOptionLength="maxStringLengths.optionText"
161-
optionType="row"
162-
@createAnswer="onCreateAnswer"
163-
@update:answer="updateAnswer"
164-
@delete="deleteOption"
165-
@focusNext="focusNextInput"
166-
@moveUp="onOptionMoveUp(index, 'row')"
167-
@moveDown="onOptionMoveDown(index, 'row')"
168-
@tabbedOut="checkValidOption('row')" />
143+
@start="onDragStart"
144+
@end="onDragEnd">
145+
<TransitionGroup
146+
tag="ul"
147+
:name="isDragging ? undefined : 'options-list-transition'"
148+
class="sort-target">
149+
<!-- Row input edit -->
150+
<AnswerInput
151+
v-for="(answer, index) in rows"
152+
:key="answer.local ? 'option-local' : answer.id"
153+
ref="input"
154+
:answer="answer"
155+
:formId="formId"
156+
:index="index"
157+
:isUnique="isUnique"
158+
:maxIndex="rows.length - 2"
159+
:maxOptionLength="maxStringLengths.optionText"
160+
optionType="row"
161+
@createAnswer="onCreateAnswer"
162+
@update:answer="updateAnswer"
163+
@delete="deleteOption"
164+
@focusNext="focusNextInput"
165+
@moveUp="onOptionMoveUp(index, 'row')"
166+
@moveDown="onOptionMoveDown(index, 'row')"
167+
@tabbedOut="checkValidOption('row')" />
168+
</TransitionGroup>
169169
</Draggable>
170170
</template>
171171
</template>
172+
<template #insert>
173+
<slot name="insert" />
174+
</template>
172175
</Question>
173176
</template>
174177

@@ -289,6 +292,16 @@ export default {
289292
return true
290293
},
291294
295+
onDragStart() {
296+
this.isDragging = true
297+
},
298+
299+
onDragEnd() {
300+
this.$nextTick(() => {
301+
this.isDragging = false
302+
})
303+
},
304+
292305
onChangeCheckboxRadio(rowId, value) {
293306
const values = { ...this.values }
294307
values[rowId] = value
@@ -408,7 +421,7 @@ export default {
408421
.options-list-transition-enter-from,
409422
.options-list-transition-leave-to {
410423
opacity: 0;
411-
transform: translateX(44px);
424+
transform: translateX(var(--default-clickable-area));
412425
}
413426
414427
/* ensure leaving items are taken out of layout flow so that moving

‎src/components/Questions/QuestionLinearScale.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,9 @@
107107
{{ optionsLabelHighest }}
108108
</div>
109109
</div>
110+
<template #insert>
111+
<slot name="insert" />
112+
</template>
110113
</Question>
111114
</template>
112115

‎src/components/Questions/QuestionLong.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@
2727
@keypress="autoSizeText"
2828
@keydown.ctrl.enter="onKeydownCtrlEnter" />
2929
</div>
30+
<template #insert>
31+
<slot name="insert" />
32+
</template>
3033
</Question>
3134
</template>
3235

0 commit comments

Comments
 (0)