162 lines
3.4 KiB
Vue
162 lines
3.4 KiB
Vue
<template>
|
|
<div
|
|
v-if="visible"
|
|
class="poll-form"
|
|
>
|
|
<div
|
|
v-for="(option, index) in options"
|
|
:key="index"
|
|
class="poll-option"
|
|
>
|
|
<div class="input-container">
|
|
<input
|
|
:id="`poll-${index}`"
|
|
v-model="options[index]"
|
|
class="poll-option-input"
|
|
type="text"
|
|
:placeholder="$t('polls.option')"
|
|
:maxlength="maxLength"
|
|
@change="updatePollToParent"
|
|
@keydown.enter.stop.prevent="nextOption(index)"
|
|
>
|
|
</div>
|
|
<div
|
|
v-if="options.length > 2"
|
|
class="icon-container"
|
|
>
|
|
<i
|
|
class="icon-cancel"
|
|
@click="deleteOption(index)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<a
|
|
v-if="options.length < maxOptions"
|
|
class="add-option faint"
|
|
@click="addOption"
|
|
>
|
|
<i class="icon-plus" />
|
|
{{ $t("polls.add_option") }}
|
|
</a>
|
|
<div class="poll-type-expiry">
|
|
<div
|
|
class="poll-type"
|
|
:title="$t('polls.type')"
|
|
>
|
|
<label
|
|
for="poll-type-selector"
|
|
class="select"
|
|
>
|
|
<select
|
|
v-model="pollType"
|
|
class="select"
|
|
@change="updatePollToParent"
|
|
>
|
|
<option value="single">{{ $t('polls.single_choice') }}</option>
|
|
<option value="multiple">{{ $t('polls.multiple_choices') }}</option>
|
|
</select>
|
|
<i class="icon-down-open" />
|
|
</label>
|
|
</div>
|
|
<div
|
|
class="poll-expiry"
|
|
:title="$t('polls.expiry')"
|
|
>
|
|
<input
|
|
v-model="expiryAmount"
|
|
type="number"
|
|
class="expiry-amount hide-number-spinner"
|
|
:min="minExpirationInCurrentUnit"
|
|
:max="maxExpirationInCurrentUnit"
|
|
@change="expiryAmountChange"
|
|
>
|
|
<label class="expiry-unit select">
|
|
<select
|
|
v-model="expiryUnit"
|
|
@change="expiryAmountChange"
|
|
>
|
|
<option
|
|
v-for="unit in expiryUnits"
|
|
:value="unit"
|
|
>
|
|
{{ $t(`time.${unit}_short`, ['']) }}
|
|
</option>
|
|
</select>
|
|
<i class="icon-down-open" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./poll_form.js"></script>
|
|
|
|
<style lang="scss">
|
|
@import '../../_variables.scss';
|
|
|
|
.poll-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 0.5em 0.5em;
|
|
|
|
.add-option {
|
|
align-self: flex-start;
|
|
padding-top: 0.25em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.poll-option {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
.input-container {
|
|
width: 100%;
|
|
input {
|
|
// Hack: dodge the floating X icon
|
|
padding-right: 2.5em;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.icon-container {
|
|
// Hack: Move the icon over the input box
|
|
width: 2em;
|
|
margin-left: -2em;
|
|
z-index: 1;
|
|
}
|
|
|
|
.poll-type-expiry {
|
|
margin-top: 0.5em;
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.poll-type {
|
|
margin-right: 0.75em;
|
|
flex: 1 1 60%;
|
|
.select {
|
|
border: none;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.poll-expiry {
|
|
display: flex;
|
|
|
|
.expiry-amount {
|
|
width: 3em;
|
|
text-align: right;
|
|
}
|
|
|
|
.expiry-unit {
|
|
border: none;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
</style>
|