UX: Create new poll via modal
This commit is contained in:
10G Meow
N Pex
parent
b6ee49e5f9
commit
ad7544a765
5 changed files with 92 additions and 107 deletions
|
|
@ -1,93 +1,104 @@
|
|||
<template>
|
||||
<div v-if="showDialog" v-show="room" class="ma-0 pa-0 fullscreen-dialog poll-create">
|
||||
<div class="chat-header">
|
||||
<v-dialog
|
||||
v-model="showDialog"
|
||||
v-show="room"
|
||||
scrollable
|
||||
class="ma-0 pa-0"
|
||||
:width="$vuetify.breakpoint.smAndUp ? '940px' : '95%'"
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<v-container fluid>
|
||||
<div class="room-name no-upper">{{ $t("poll_create.title") }}</div>
|
||||
<v-btn id="btn-close" text class="header-button-right" @click.stop="showDialog = false">
|
||||
<v-icon>close</v-icon>
|
||||
</v-btn>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text class="poll-create">
|
||||
<div class="text-center">
|
||||
<v-form v-model="isValid" ref="pollcreateform">
|
||||
<v-container fluid class="poll-create-dialog-content">
|
||||
<!-- <v-row cols="12" no-gutters class="ma-0 pa-0">
|
||||
<v-col cols="12">
|
||||
<v-switch
|
||||
v-model="pollIsDisclosed"
|
||||
inset
|
||||
:label="pollIsDisclosed ? $t('poll_create.poll_disclosed') : $t('poll_create.poll_undisclosed')"
|
||||
></v-switch>
|
||||
</v-col>
|
||||
</v-row> -->
|
||||
<v-row cols="12" no-gutters class="ma-0 pa-0">
|
||||
<v-col cols="12" class="ma-0 pa-0">
|
||||
<InputControl
|
||||
v-model="pollQuestion"
|
||||
:label="$t('poll_create.question_label')"
|
||||
:disabled="isCreating"
|
||||
:error="$t('poll_create.please_complete')"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<div class="text-center">
|
||||
<v-form v-model="isValid" ref="pollcreateform">
|
||||
<v-container fluid class="poll-create-dialog-content">
|
||||
<!-- <v-row cols="12" no-gutters class="ma-0 pa-0">
|
||||
<v-col cols="12">
|
||||
<v-switch
|
||||
v-model="pollIsDisclosed"
|
||||
inset
|
||||
:label="pollIsDisclosed ? $t('poll_create.poll_disclosed') : $t('poll_create.poll_undisclosed')"
|
||||
></v-switch>
|
||||
</v-col>
|
||||
</v-row> -->
|
||||
<v-row cols="12" no-gutters class="ma-0 pa-0">
|
||||
<v-col cols="12" class="ma-0 pa-0">
|
||||
<InputControl
|
||||
v-model="pollQuestion"
|
||||
:label="$t('poll_create.question_label')"
|
||||
:disabled="isCreating"
|
||||
:error="$t('poll_create.please_complete')"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-for="(answer, index) in pollAnswers" cols="12" :key="answer.id" no-gutters class="ma-0 pa-0">
|
||||
<v-col cols="12" class="ma-0 pa-0">
|
||||
<InputControl
|
||||
v-model="answer.text"
|
||||
:label="
|
||||
index == 0 ? $t('poll_create.answer_label_1') : $t('poll_create.answer_label_n', { index: index + 1 })
|
||||
"
|
||||
:disabled="isCreating"
|
||||
:error="$t('poll_create.please_complete')"
|
||||
:class="{ deletable: pollAnswers.length > 1 }"
|
||||
ref="answerInput"
|
||||
>
|
||||
<v-btn v-if="pollAnswers.length > 1" icon @click="removeAnswer(index)"><v-icon>delete</v-icon></v-btn>
|
||||
</InputControl>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row v-for="(answer, index) in pollAnswers" cols="12" :key="answer.id" no-gutters class="ma-0 pa-0">
|
||||
<v-col cols="12" class="ma-0 pa-0">
|
||||
<InputControl
|
||||
v-model="answer.text"
|
||||
:label="
|
||||
index == 0 ? $t('poll_create.answer_label_1') : $t('poll_create.answer_label_n', { index: index + 1 })
|
||||
"
|
||||
:disabled="isCreating"
|
||||
:error="$t('poll_create.please_complete')"
|
||||
:class="{ deletable: pollAnswers.length > 1 }"
|
||||
ref="answerInput"
|
||||
>
|
||||
<v-btn v-if="pollAnswers.length > 1" icon @click="removeAnswer(index)"><v-icon>delete</v-icon></v-btn>
|
||||
</InputControl>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row cols="12" no-gutters class="ma-0 pa-0">
|
||||
<v-col class="ma-0 pa-0">
|
||||
<div :class="{'add-answer-button':true, 'clickable': true, 'hidden': addingAnswer}" @click.stop="addAnswer">
|
||||
<img src="@/assets/icons/ic_add.svg" />
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-form>
|
||||
<div class="poll-create-status">
|
||||
{{ status }}
|
||||
<v-progress-circular v-if="isCreating" indeterminate color="primary" size="14"></v-progress-circular>
|
||||
<v-row cols="12" no-gutters class="ma-0 pa-0">
|
||||
<v-col class="ma-0 pa-0">
|
||||
<div :class="{'add-answer-button':true, 'clickable': true, 'hidden': addingAnswer}" @click.stop="addAnswer">
|
||||
<img src="@/assets/icons/ic_add.svg" />
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row justify="center">
|
||||
<v-col cols="auto">
|
||||
<v-btn
|
||||
id="btn-create-poll"
|
||||
depressed
|
||||
block
|
||||
class="filled-button publish-button"
|
||||
@click.stop="onCreatePoll()"
|
||||
:disabled="isCreating || !publishButtonEnabled"
|
||||
>{{ $t("poll_create.create") }}</v-btn
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-form>
|
||||
<div class="poll-create-status">
|
||||
{{ status }}
|
||||
<v-progress-circular v-if="isCreating" indeterminate color="primary" size="14"></v-progress-circular>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-container>
|
||||
<v-row justify="center">
|
||||
<v-col cols="auto">
|
||||
<v-btn
|
||||
id="btn-create-poll"
|
||||
color="red"
|
||||
depressed
|
||||
block
|
||||
class="filled-button publish-button"
|
||||
@click.stop="onCreatePoll()"
|
||||
:disabled="isCreating || !publishButtonEnabled"
|
||||
>{{ $t("poll_create.create") }}</v-btn
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="auto">
|
||||
<div class="tip">
|
||||
<b>{{ $t("poll_create.tip_title") }}</b
|
||||
>{{ $t("poll_create.tip_text") }}
|
||||
> {{ $t("poll_create.tip_text") }}
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import roomInfoMixin from "./roomInfoMixin";
|
||||
|
|
@ -209,17 +220,4 @@ export default {
|
|||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
@import "@/assets/css/components/poll.scss";
|
||||
.fullscreen-dialog {
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
.chat-header {
|
||||
position: static;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue