Sharkey/src/client/app/common/views/components/poll-editor.vue

146 lines
2.6 KiB
Vue
Raw Normal View History

2018-02-14 14:36:30 +02:00
<template>
<div class="mk-poll-editor">
<p class="caution" v-if="choices.length < 2">
<fa icon="exclamation-triangle"/>{{ $t('no-only-one-choice') }}
2018-02-14 14:36:30 +02:00
</p>
<ul ref="choices">
2018-02-21 22:57:24 +02:00
<li v-for="(choice, i) in choices">
2018-11-09 15:11:11 +02:00
<input :value="choice" @input="onInput(i, $event)" :placeholder="$t('choice-n').replace('{}', i + 1)">
<button @click="remove(i)" :title="$t('remove')">
<fa icon="times"/>
2018-02-14 14:36:30 +02:00
</button>
</li>
</ul>
<button class="add" v-if="choices.length < 10" @click="add">{{ $t('add') }}</button>
<button class="destroy" @click="destroy" :title="$t('destroy')">
<fa icon="times"/>
2018-02-14 14:36:30 +02:00
</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
2018-09-06 18:02:55 +03:00
import { erase } from '../../../../../prelude/array';
2018-02-14 14:36:30 +02:00
export default Vue.extend({
i18n: i18n('common/views/components/poll-editor.vue'),
2018-02-14 14:36:30 +02:00
data() {
return {
choices: ['', '']
};
},
2018-02-21 22:57:24 +02:00
watch: {
choices() {
this.$emit('updated');
}
},
2018-02-14 14:36:30 +02:00
methods: {
onInput(i, e) {
2018-02-20 18:23:25 +02:00
Vue.set(this.choices, i, e.target.value);
2018-02-14 14:36:30 +02:00
},
add() {
this.choices.push('');
2018-02-21 22:57:24 +02:00
this.$nextTick(() => {
(this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
});
2018-02-14 14:36:30 +02:00
},
remove(i) {
this.choices = this.choices.filter((_, _i) => _i != i);
},
destroy() {
this.$emit('destroyed');
},
get() {
return {
2018-09-06 18:02:55 +03:00
choices: erase('', this.choices)
2018-02-14 14:36:30 +02:00
}
},
set(data) {
if (data.choices.length == 0) return;
this.choices = data.choices;
2018-02-21 22:57:24 +02:00
if (data.choices.length == 1) this.choices = this.choices.concat('');
2018-02-14 14:36:30 +02:00
}
}
});
</script>
<style lang="stylus" scoped>
2018-09-28 06:10:15 +03:00
.mk-poll-editor
2018-02-14 14:36:30 +02:00
padding 8px
> .caution
margin 0 0 8px 0
font-size 0.8em
color #f00
> [data-icon]
2018-02-14 14:36:30 +02:00
margin-right 4px
> ul
display block
margin 0
padding 0
list-style none
> li
display block
margin 8px 0
padding 0
width 100%
&:first-child
margin-top 0
&:last-child
margin-bottom 0
> input
2018-02-24 20:05:29 +02:00
padding 6px 8px
width 300px
font-size 14px
2018-09-27 16:50:34 +03:00
color var(--inputText)
2018-09-28 06:10:15 +03:00
background var(--pollEditorInputBg)
2018-09-26 14:19:35 +03:00
border solid 1px var(--primaryAlpha01)
2018-02-14 14:36:30 +02:00
border-radius 4px
&:hover
2018-09-26 14:19:35 +03:00
border-color var(--primaryAlpha02)
2018-02-14 14:36:30 +02:00
&:focus
2018-09-26 14:19:35 +03:00
border-color var(--primaryAlpha05)
2018-02-14 14:36:30 +02:00
> button
padding 4px 8px
2018-09-26 14:19:35 +03:00
color var(--primaryAlpha04)
2018-02-14 14:36:30 +02:00
&:hover
2018-09-26 14:19:35 +03:00
color var(--primaryAlpha06)
2018-02-14 14:36:30 +02:00
&:active
2018-09-26 14:19:35 +03:00
color var(--primaryDarken30)
2018-02-14 14:36:30 +02:00
> .add
margin 8px 0 0 0
vertical-align top
2018-09-26 14:19:35 +03:00
color var(--primary)
2018-02-14 14:36:30 +02:00
> .destroy
position absolute
top 0
right 0
padding 4px 8px
2018-09-26 14:19:35 +03:00
color var(--primaryAlpha04)
2018-02-14 14:36:30 +02:00
&:hover
2018-09-26 14:19:35 +03:00
color var(--primaryAlpha06)
2018-02-14 14:36:30 +02:00
&:active
2018-09-26 14:19:35 +03:00
color var(--primaryDarken30)
2018-02-14 14:36:30 +02:00
</style>