Resolve "Polling: Updated poll admin UX"
This commit is contained in:
N Pex
parent
90daf060cc
commit
4f6238bc59
11 changed files with 1531 additions and 1111 deletions
|
|
@ -78,6 +78,7 @@
|
|||
v-on:own-avatar-clicked="viewProfile"
|
||||
v-on:other-avatar-clicked="showAvatarMenuForEvent($event)"
|
||||
v-on:download="download(event)"
|
||||
v-on:poll-closed="pollWasClosed(event)"
|
||||
/>
|
||||
<!-- <div v-if="debugging" style="user-select:text">EventID: {{ event.getId() }}</div> -->
|
||||
<!-- <div v-if="debugging" style="user-select:text">Event: {{ JSON.stringify(event) }}</div> -->
|
||||
|
|
@ -163,6 +164,32 @@
|
|||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
v-if="(!currentInput || currentInput.length == 0) && !showRecorder && canCreatePoll"
|
||||
class="input-area-button text-center flex-grow-0 flex-shrink-1"
|
||||
>
|
||||
<v-btn icon large color="black" @click="showCreatePollDialog = true">
|
||||
<svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M3.31462 16.4718C3.31462 16.9496 3.70026 17.3368 4.17609 17.3368L16.1385 17.3368C16.6144 17.3368 17 16.9496 17 16.4718L16.9998 13.6229C16.9998 13.1452 16.6142 12.7579 16.1383 12.7579L4.1764 12.7579C3.70056 12.7579 3.31492 13.1452 3.31492 13.6229L3.31512 16.4718L3.31462 16.4718Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M3.31462 10.4557C3.31462 10.9335 3.70026 11.3208 4.17609 11.3208L11.3428 11.3208C11.8186 11.3208 12.2043 10.9335 12.2043 10.4557L12.2043 7.60711C12.2043 7.12931 11.8186 6.74208 11.3428 6.74208L4.17609 6.74208C3.70026 6.74208 3.31462 7.12932 3.31462 7.60711L3.31462 10.4557Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M3.31451 1.59127L3.31451 4.44011C3.31451 4.91791 3.70016 5.30514 4.17598 5.30514L6.99509 5.30514C7.47093 5.30514 7.85657 4.91791 7.85657 4.44011L7.85637 1.59127C7.85637 1.11347 7.47073 0.726242 6.9949 0.726242L4.17599 0.726242C3.70035 0.726242 3.31452 1.11348 3.31452 1.59127L3.31451 1.59127Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M-2.00529e-05 0.587841L-2.0791e-05 17.4747C-2.08052e-05 17.7995 0.262306 18.0625 0.585404 18.0625L1.38198 18.0625C1.70528 18.0625 1.96741 17.7995 1.96741 17.4747L1.96741 0.587841C1.96741 0.263208 1.70508 -1.14667e-08 1.38198 -2.55897e-08L0.585405 -6.04092e-08C0.261911 -7.45496e-08 -2.00387e-05 0.263213 -2.00529e-05 0.587841Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="input-area-button text-center flex-grow-0 flex-shrink-1"
|
||||
v-if="!currentInput || currentInput.length == 0 || showRecorder"
|
||||
|
|
@ -242,45 +269,6 @@
|
|||
/>
|
||||
</label>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
v-if="!showRecorder && canCreatePoll"
|
||||
ref="sendOptions"
|
||||
class="input-area-button text-center flex-grow-0 flex-shrink-1 send-options"
|
||||
>
|
||||
<v-menu close-on-click>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn icon v-bind="attrs" v-on="on">
|
||||
<v-icon>more_vert</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item @click="showCreatePollDialog = true">
|
||||
<v-list-item-icon>
|
||||
<svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M3.31462 16.4718C3.31462 16.9496 3.70026 17.3368 4.17609 17.3368L16.1385 17.3368C16.6144 17.3368 17 16.9496 17 16.4718L16.9998 13.6229C16.9998 13.1452 16.6142 12.7579 16.1383 12.7579L4.1764 12.7579C3.70056 12.7579 3.31492 13.1452 3.31492 13.6229L3.31512 16.4718L3.31462 16.4718Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M3.31462 10.4557C3.31462 10.9335 3.70026 11.3208 4.17609 11.3208L11.3428 11.3208C11.8186 11.3208 12.2043 10.9335 12.2043 10.4557L12.2043 7.60711C12.2043 7.12931 11.8186 6.74208 11.3428 6.74208L4.17609 6.74208C3.70026 6.74208 3.31462 7.12932 3.31462 7.60711L3.31462 10.4557Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M3.31451 1.59127L3.31451 4.44011C3.31451 4.91791 3.70016 5.30514 4.17598 5.30514L6.99509 5.30514C7.47093 5.30514 7.85657 4.91791 7.85657 4.44011L7.85637 1.59127C7.85637 1.11347 7.47073 0.726242 6.9949 0.726242L4.17599 0.726242C3.70035 0.726242 3.31452 1.11348 3.31452 1.59127L3.31451 1.59127Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M-2.00529e-05 0.587841L-2.0791e-05 17.4747C-2.08052e-05 17.7995 0.262306 18.0625 0.585404 18.0625L1.38198 18.0625C1.70528 18.0625 1.96741 17.7995 1.96741 17.4747L1.96741 0.587841C1.96741 0.263208 1.70508 -1.14667e-08 1.38198 -2.55897e-08L0.585405 -6.04092e-08C0.261911 -7.45496e-08 -2.00387e-05 0.263213 -2.00529e-05 0.587841Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-title>{{ $t("poll_create.create_poll_menu_option") }}</v-list-item-title></v-list-item
|
||||
>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<VoiceRecorder
|
||||
:micButtonRef="$refs.mic_button"
|
||||
|
|
@ -896,7 +884,11 @@ export default {
|
|||
this.handleScrolledToBottom(false);
|
||||
}
|
||||
|
||||
this.showScrollToEnd = container.scrollHeight === container.clientHeight ? false : container.scrollHeight - container.scrollTop.toFixed(0) > container.clientHeight || (this.timelineWindow && this.timelineWindow.canPaginate(EventTimeline.FORWARDS));
|
||||
this.showScrollToEnd =
|
||||
container.scrollHeight === container.clientHeight
|
||||
? false
|
||||
: container.scrollHeight - container.scrollTop.toFixed(0) > container.clientHeight ||
|
||||
(this.timelineWindow && this.timelineWindow.canPaginate(EventTimeline.FORWARDS));
|
||||
|
||||
this.restartRRTimer();
|
||||
},
|
||||
|
|
@ -1481,6 +1473,15 @@ export default {
|
|||
onInvitationsClick() {
|
||||
this.$navigation.push({ name: "Home" }, -1);
|
||||
},
|
||||
pollWasClosed(ignoredE) {
|
||||
let div = document.createElement("div");
|
||||
div.classList.add("toast");
|
||||
div.innerText = this.$t("poll_create.results_shared");
|
||||
this.$refs.chatContainer.parentElement.appendChild(div);
|
||||
setTimeout(() => {
|
||||
this.$refs.chatContainer.parentElement.removeChild(div);
|
||||
}, 3000);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
<template>
|
||||
<v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'">
|
||||
<div class="dialog-content text-center">
|
||||
<template>
|
||||
<v-icon color="black" size="30">poll</v-icon>
|
||||
<h2 class="dialog-title">
|
||||
{{ $t("poll_create.title") }}
|
||||
</h2>
|
||||
<div class="dialog-text">{{ $t("poll_create.intro") }}</div>
|
||||
</template>
|
||||
<div v-if="showDialog" v-show="room" class="ma-0 pa-0 fullscreen-dialog poll-create">
|
||||
<div class="chat-header">
|
||||
<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>
|
||||
|
||||
<div class="text-center">
|
||||
<v-form v-model="isValid" ref="pollcreateform">
|
||||
<v-container fluid class="poll-create-dialog-content">
|
||||
<v-row cols="12">
|
||||
<!-- <v-row cols="12" no-gutters class="ma-0 pa-0">
|
||||
<v-col cols="12">
|
||||
<v-switch
|
||||
v-model="pollIsDisclosed"
|
||||
|
|
@ -18,78 +20,79 @@
|
|||
:label="pollIsDisclosed ? $t('poll_create.poll_disclosed') : $t('poll_create.poll_undisclosed')"
|
||||
></v-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row cols="12">
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
outlined
|
||||
:disabled="isCreating"
|
||||
</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')"
|
||||
:rules="[(v) => !!v || $t('poll_create.question_required')]"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row v-for="(answer, index) in pollAnswers" cols="12" :key="answer.id">
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
outlined
|
||||
:disabled="isCreating"
|
||||
v-model="answer.text"
|
||||
:label="$t('poll_create.answer_label', { index: index + 1 })"
|
||||
:append-icon="pollAnswers.length > 1 ? 'delete' : null"
|
||||
@click:append="removeAnswer(index)"
|
||||
:rules="[(v) => !!v || $t('poll_create.answer_required')]"
|
||||
></v-text-field>
|
||||
:error="$t('poll_create.please_complete')"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row
|
||||
><v-col
|
||||
><v-btn @click.stop="addAnswer">{{ $t("poll_create.add_answer") }}</v-btn></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 > 0" 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>
|
||||
</div>
|
||||
<v-container fluid>
|
||||
<v-row cols="12">
|
||||
<v-col cols="6">
|
||||
<v-btn
|
||||
id="btn-create-poll-cancel"
|
||||
depressed
|
||||
text
|
||||
block
|
||||
class="text-button"
|
||||
@click="showDialog = false"
|
||||
:disabled="isCreating"
|
||||
>{{ $t("menu.cancel") }}</v-btn
|
||||
>
|
||||
</v-col>
|
||||
<v-col cols="6" align="center">
|
||||
<v-container>
|
||||
<v-row justify="center">
|
||||
<v-col cols="auto">
|
||||
<v-btn
|
||||
id="btn-create-poll"
|
||||
color="red"
|
||||
depressed
|
||||
block
|
||||
class="filled-button"
|
||||
class="filled-button publish-button"
|
||||
@click.stop="onCreatePoll()"
|
||||
:disabled="isCreating"
|
||||
>{{ $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") }}
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import roomInfoMixin from "./roomInfoMixin";
|
||||
import util from "../plugins/utils";
|
||||
import InputControl from "./InputControl.vue";
|
||||
|
||||
export default {
|
||||
name: "CreatePollDialog",
|
||||
|
|
@ -124,13 +127,13 @@ export default {
|
|||
this.pollQuestion = defaults.pollQuestion;
|
||||
this.pollAnswers = defaults.pollAnswers;
|
||||
this.autoIncrementId = defaults.autoIncrementId;
|
||||
this.addingAnswer = defaults.addingAnswer;
|
||||
if (this.$refs.pollcreateform) {
|
||||
this.$refs.pollcreateform.resetValidation();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
defaultData() {
|
||||
return {
|
||||
|
|
@ -138,20 +141,29 @@ export default {
|
|||
isValid: true,
|
||||
isCreating: false,
|
||||
status: String.fromCharCode(160),
|
||||
pollIsDisclosed: true,
|
||||
pollQuestion: "",
|
||||
pollIsDisclosed: false,
|
||||
pollQuestion: null,
|
||||
pollAnswers: [
|
||||
{ id: "1", text: "" },
|
||||
{ id: "2", text: "" },
|
||||
{ id: "1", text: null },
|
||||
{ id: "2", text: null },
|
||||
],
|
||||
autoIncrementId: 2,
|
||||
addingAnswer: false,
|
||||
};
|
||||
},
|
||||
addAnswer() {
|
||||
if (this.pollAnswers.length < 20) {
|
||||
// MAX length according to spec
|
||||
this.addingAnswer = true;
|
||||
const idx = this.pollAnswers.length;
|
||||
this.autoIncrementId += 1;
|
||||
this.pollAnswers.push({ id: "" + this.autoIncrementId, text: "" });
|
||||
this.pollAnswers.push({ id: "" + this.autoIncrementId, text: null });
|
||||
this.$nextTick(() => {
|
||||
this.$refs.answerInput[idx].focus();
|
||||
this.$nextTick(() => {
|
||||
this.addingAnswer = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
removeAnswer(index) {
|
||||
|
|
@ -179,17 +191,30 @@ export default {
|
|||
this.isCreating = false;
|
||||
this.status = this.$t("poll_create.failed");
|
||||
});
|
||||
|
||||
setTimeout(() => {}, 3000);
|
||||
} else {
|
||||
this.isValid = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
components: { InputControl },
|
||||
};
|
||||
</script>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
163
src/components/InputControl.vue
Normal file
163
src/components/InputControl.vue
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
<template>
|
||||
<div :class="{ 'input-field': true, errored: modelValue !== null && modelValue.length <= 0 }">
|
||||
<input
|
||||
ref="input"
|
||||
type="text"
|
||||
:value="modelValue"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
v-on:blur="onBlur"
|
||||
/>
|
||||
<div class="placeholder-container">
|
||||
<div :class="{ placeholder: true, large: !modelValue || modelValue.length == 0 }">
|
||||
{{ label }}
|
||||
</div>
|
||||
<div class="error-message" v-if="modelValue !== null && modelValue.length <= 0">{{ error }}</div>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "InputControl",
|
||||
model: {
|
||||
prop: "modelValue",
|
||||
event: "update:modelValue",
|
||||
},
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
error: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: function() {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return null;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
focus() {
|
||||
this.$refs.input.focus();
|
||||
},
|
||||
onBlur() {
|
||||
if (this.modelValue === null) {
|
||||
this.$emit("update:modelValue", "");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-height: 48px;
|
||||
|
||||
background: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.4s, box-shadow 0.4s;
|
||||
margin-bottom: 12px;
|
||||
&.errored {
|
||||
border: 1px solid #e31b00;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
background: white;
|
||||
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.placeholder-container {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
display: flex;
|
||||
}
|
||||
.placeholder {
|
||||
text-align: start;
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
font-size: 12px;
|
||||
line-height: 117%;
|
||||
letter-spacing: 0.4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #e31b00;
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 117%;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
&:not(:focus-within) .placeholder.large {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 14px;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
margin-right: 0px;
|
||||
&:only-child {
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 117%;
|
||||
letter-spacing: 0.4px;
|
||||
color: #000000;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
bottom: 0;
|
||||
&:focus {
|
||||
top: 12px;
|
||||
}
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="poll-question">{{ pollQuestion }}</div>
|
||||
<v-container fluid ma-0 pa-0>
|
||||
<v-row
|
||||
|
|
@ -30,8 +31,8 @@
|
|||
:class="{
|
||||
'poll-answer': true,
|
||||
selected: !userHasVoted && answer.id == pollTentativeAnswer,
|
||||
result: userHasVoted || pollIsClosed,
|
||||
winner: answer.winner,
|
||||
result: userHasVoted || pollIsClosed || pollViewResults,
|
||||
winner: answer.winner && (userHasVoted || pollIsClosed || pollViewResults),
|
||||
}"
|
||||
ma-0
|
||||
pa-0
|
||||
|
|
@ -41,41 +42,55 @@
|
|||
><v-img class="poll-check-icon" src="@/assets/icons/ic_check.svg"
|
||||
/></v-col>
|
||||
<v-col
|
||||
v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin"
|
||||
v-if="
|
||||
pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
|
||||
"
|
||||
cols="auto"
|
||||
class="ma-0 pa-0 poll-answer-num-votes"
|
||||
>{{ answer.percentage }}%</v-col
|
||||
>
|
||||
<div v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin" class="poll-percent-indicator">
|
||||
<div
|
||||
v-if="
|
||||
pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
|
||||
"
|
||||
class="poll-percent-indicator"
|
||||
>
|
||||
<div class="bar" :style="{ width: `${answer.percentage}%` }"></div>
|
||||
</div>
|
||||
</v-row>
|
||||
<v-row class="poll-status">
|
||||
<v-col cols="auto" class="ma-0 pa-0 poll-status-title">
|
||||
<v-row v-if="pollTentativeAnswer" class="pa-0 poll-status" justify="center">
|
||||
<v-col class="ma-0 pa-0" cols="auto"
|
||||
><div class="poll-submit clickable" @click.stop="pollAnswerSubmit">
|
||||
{{ $t("poll_create.poll_submit") }}
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-else class="pa-0 poll-status">
|
||||
<v-col class="ma-0 pa-0 poll-status-title">
|
||||
{{ $t("poll_create.num_answered", { count: pollNumAnswers }) }}
|
||||
</v-col>
|
||||
<!-- <v-col cols="auto" class="ma-0 pa-0 poll-status-title">{{
|
||||
pollIsClosed
|
||||
? $t("poll_create.poll_status_closed")
|
||||
: pollIsDisclosed
|
||||
? userHasVoted
|
||||
? $t("poll_create.poll_status_open")
|
||||
: $t("poll_create.poll_status_open_not_voted")
|
||||
: $t("poll_create.poll_status_disclosed")
|
||||
}}</v-col> -->
|
||||
<v-col
|
||||
cols="auto"
|
||||
class="ma-0 pa-0 poll-status-close clickable"
|
||||
v-if="!pollIsClosed && userCanClosePoll"
|
||||
@click.stop="pollClose"
|
||||
>{{ $t("poll_create.close_poll") }}</v-col
|
||||
>
|
||||
</v-row>
|
||||
<v-row v-if="pollTentativeAnswer" justify="center">
|
||||
<v-col cols="auto" class="ma-0 pa-0 poll-submit">
|
||||
<v-btn @click.stop="pollAnswerSubmit">
|
||||
{{ $t("poll_create.poll_submit") }}
|
||||
</v-btn>
|
||||
<v-col cols="auto" class="ma-0 pa-0">
|
||||
<div
|
||||
:class="{ 'poll-disclose': true, clickable: true, selected: pollViewResults, 'mb-4': true }"
|
||||
v-if="!pollIsClosed && userCanClosePoll && !userHasVoted"
|
||||
>
|
||||
{{ $t("poll_create.view_results") }}
|
||||
|
||||
<div class="poll-disclose-track" @click.stop="pollViewResults = !pollViewResults">
|
||||
<div class="poll-disclose-knob"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="poll-status-close clickable"
|
||||
v-if="userCanClosePoll && (userHasVoted || pollViewResults) && !pollIsClosed"
|
||||
@click.stop="pollClose"
|
||||
>
|
||||
{{ $t("poll_create.close_poll") }}
|
||||
</div>
|
||||
<div class="poll-status-closed clickable" v-else-if="pollIsAdmin && pollIsClosed" @click.stop="pollClose">
|
||||
<img class="icon" src="@/assets/icons/ic_check_small.svg" />
|
||||
{{ $t("poll_create.poll_status_closed") }}
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@
|
|||
:class="{
|
||||
'poll-answer': true,
|
||||
selected: !userHasVoted && answer.id == pollTentativeAnswer,
|
||||
result: userHasVoted || pollIsClosed,
|
||||
winner: answer.winner,
|
||||
result: userHasVoted || pollIsClosed || pollViewResults,
|
||||
winner: answer.winner && (userHasVoted || pollIsClosed || pollViewResults),
|
||||
}"
|
||||
ma-0
|
||||
pa-0
|
||||
|
|
@ -42,41 +42,55 @@
|
|||
><v-img class="poll-check-icon" src="@/assets/icons/ic_check.svg"
|
||||
/></v-col>
|
||||
<v-col
|
||||
v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin"
|
||||
v-if="
|
||||
pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
|
||||
"
|
||||
cols="auto"
|
||||
class="ma-0 pa-0 poll-answer-num-votes"
|
||||
>{{ answer.percentage }}%</v-col
|
||||
>
|
||||
<div v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin" class="poll-percent-indicator">
|
||||
<div
|
||||
v-if="
|
||||
pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
|
||||
"
|
||||
class="poll-percent-indicator"
|
||||
>
|
||||
<div class="bar" :style="{ width: `${answer.percentage}%` }"></div>
|
||||
</div>
|
||||
</v-row>
|
||||
<v-row class="poll-status">
|
||||
<v-col cols="auto" class="ma-0 pa-0 poll-status-title">
|
||||
<v-row v-if="pollTentativeAnswer" class="pa-0 poll-status" justify="center">
|
||||
<v-col class="ma-0 pa-0" cols="auto"
|
||||
><div class="poll-submit clickable" @click.stop="pollAnswerSubmit">
|
||||
{{ $t("poll_create.poll_submit") }}
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-else class="pa-0 poll-status">
|
||||
<v-col class="ma-0 pa-0 poll-status-title">
|
||||
{{ $t("poll_create.num_answered", { count: pollNumAnswers }) }}
|
||||
</v-col>
|
||||
<!-- <v-col cols="auto" class="ma-0 pa-0 poll-status-title">{{
|
||||
pollIsClosed
|
||||
? $t("poll_create.poll_status_closed")
|
||||
: pollIsDisclosed
|
||||
? userHasVoted
|
||||
? $t("poll_create.poll_status_open")
|
||||
: $t("poll_create.poll_status_open_not_voted")
|
||||
: $t("poll_create.poll_status_disclosed")
|
||||
}}</v-col> -->
|
||||
<v-col
|
||||
cols="auto"
|
||||
class="ma-0 pa-0 poll-status-close clickable"
|
||||
v-if="!pollIsClosed && userCanClosePoll"
|
||||
@click.stop="pollClose"
|
||||
>{{ $t("poll_create.close_poll") }}</v-col
|
||||
>
|
||||
</v-row>
|
||||
<v-row v-if="pollTentativeAnswer" justify="center">
|
||||
<v-col cols="auto" class="ma-0 pa-0 poll-submit">
|
||||
<v-btn @click.stop="pollAnswerSubmit">
|
||||
{{ $t("poll_create.poll_submit") }}
|
||||
</v-btn>
|
||||
<v-col cols="auto" class="ma-0 pa-0">
|
||||
<div
|
||||
:class="{ 'poll-disclose': true, clickable: true, selected: pollViewResults, 'mb-4': true }"
|
||||
v-if="!pollIsClosed && userCanClosePoll && !userHasVoted"
|
||||
>
|
||||
{{ $t("poll_create.view_results") }}
|
||||
|
||||
<div class="poll-disclose-track" @click.stop="pollViewResults = !pollViewResults">
|
||||
<div class="poll-disclose-knob"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="poll-status-close clickable"
|
||||
v-if="userCanClosePoll && (userHasVoted || pollViewResults) && !pollIsClosed"
|
||||
@click.stop="pollClose"
|
||||
>
|
||||
{{ $t("poll_create.close_poll") }}
|
||||
</div>
|
||||
<div class="poll-status-closed clickable" v-else-if="pollIsAdmin && pollIsClosed" @click.stop="pollClose">
|
||||
<img class="icon" src="@/assets/icons/ic_check_small.svg" />
|
||||
{{ $t("poll_create.poll_status_closed") }}
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ export default {
|
|||
pollEndTs: null,
|
||||
pollIsDisclosed: true,
|
||||
pollTentativeAnswer: null,
|
||||
pollViewResults: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -145,8 +146,13 @@ export default {
|
|||
this.pollTotalVotes = totalVotes;
|
||||
},
|
||||
pollAnswer(id) {
|
||||
if (!this.userHasVoted) {
|
||||
this.pollTentativeAnswer = id;
|
||||
// Only if not voted and not currently viewing poll results.
|
||||
if (!this.userHasVoted && !this.pollViewResults) {
|
||||
if (id == this.pollTentativeAnswer) {
|
||||
this.pollTentativeAnswer = null;
|
||||
} else {
|
||||
this.pollTentativeAnswer = id;
|
||||
}
|
||||
}
|
||||
},
|
||||
pollAnswerSubmit() {
|
||||
|
|
@ -163,7 +169,9 @@ export default {
|
|||
});
|
||||
},
|
||||
pollClose() {
|
||||
util.closePoll(this.$matrix.matrixClient, this.room.roomId, this.event).catch((err) => {
|
||||
util.closePoll(this.$matrix.matrixClient, this.room.roomId, this.event).then(() => {
|
||||
this.$emit("poll-closed", this);
|
||||
}).catch((err) => {
|
||||
console.log("Failed to send:", err);
|
||||
});
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue