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
File diff suppressed because it is too large
Load diff
|
|
@ -1,5 +1,6 @@
|
||||||
.poll-bubble {
|
.poll-bubble {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.poll-bubble {
|
.poll-bubble {
|
||||||
|
|
@ -36,6 +37,7 @@
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 15px 14px;
|
padding: 15px 14px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
height: 48px;
|
||||||
&.winner {
|
&.winner {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
@ -77,40 +79,190 @@
|
||||||
|
|
||||||
.poll-status {
|
.poll-status {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 117%;
|
line-height: 117%;
|
||||||
margin: 0px;
|
margin: 17px 0px 0px 0px;
|
||||||
.poll-status-title {
|
.poll-status-title {
|
||||||
|
font-family: "Inter";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 117%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
color: #1d1d1d;
|
||||||
|
opacity: 0.8;
|
||||||
|
.from-admin & {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.poll-status-close {
|
.poll-status-close {
|
||||||
color: $poll-hilite-color;
|
background: transparent;
|
||||||
|
border: 1px solid #000000;
|
||||||
|
border-radius: 32px;
|
||||||
|
font-family: "Inter";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 133%;
|
||||||
|
letter-spacing: 0.34px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #181719;
|
||||||
|
padding: 7px 14px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll-status-closed {
|
||||||
|
background: white;
|
||||||
|
border-radius: 32px;
|
||||||
|
font-family: "Inter";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 133%;
|
||||||
|
letter-spacing: 0.34px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #181719;
|
||||||
|
padding: 7px 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.icon {
|
||||||
|
width: 9px;
|
||||||
|
height: 8px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.poll-submit {
|
.poll-submit {
|
||||||
.v-btn {
|
display: flex;
|
||||||
font-family: "Inter", sans-serif;
|
align-items: center;
|
||||||
font-weight: 700;
|
justify-content: center;
|
||||||
font-size: 11 * $chat-text-size;
|
background: linear-gradient(0deg, #6360f0, #6360f0), #536dfe;
|
||||||
color: white;
|
border-radius: 32px;
|
||||||
text-transform: uppercase;
|
font-family: "Inter";
|
||||||
background-color: $poll-hilite-color !important;
|
font-style: normal;
|
||||||
border: 1px solid black;
|
font-weight: 700;
|
||||||
border-radius: 21px !important;
|
font-size: 11.5411px;
|
||||||
height: 42px !important;
|
line-height: 140%;
|
||||||
margin-top: $chat-standard-padding-xs;
|
text-align: center;
|
||||||
margin-bottom: $chat-standard-padding-xs;
|
letter-spacing: 0.34px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 14px 18px;
|
||||||
|
color: white;
|
||||||
|
text-transform: uppercase;
|
||||||
|
height: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll-disclose {
|
||||||
|
height: 18px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: "Inter";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
color: #1d1d1d;
|
||||||
|
opacity: 0.8;
|
||||||
|
.poll-disclose-track {
|
||||||
|
position: relative;
|
||||||
|
width: 30px;
|
||||||
|
height: 18px;
|
||||||
|
background: #ededed;
|
||||||
|
border-radius: 16px;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
margin-left: 8px;
|
||||||
|
transition: background-color 0.3s linear;
|
||||||
|
.poll-disclose-knob {
|
||||||
|
position: absolute;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.12);
|
||||||
|
border-radius: 16px;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
width: 16px;
|
||||||
|
right: 1px;
|
||||||
|
top: 1px;
|
||||||
|
bottom: 1px;
|
||||||
|
transition: right 0.3s linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected .poll-disclose-track {
|
||||||
|
background: #1d1d1d;
|
||||||
|
.poll-disclose-knob {
|
||||||
|
right: 13px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Creation dialog
|
// Creation dialog
|
||||||
//
|
//
|
||||||
.poll-create-dialog-content {
|
.poll-create {
|
||||||
max-height: 50vh;
|
.poll-create-dialog-content {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
|
||||||
.poll-create-status {
|
font-family: "Inter";
|
||||||
font-size: 0.7rem;
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 117%;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
color: rgba(0, 0, 0, 0.7);
|
||||||
|
|
||||||
|
.add-answer-button {
|
||||||
|
border-radius: 4px;
|
||||||
|
height: 48px;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #242424;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 1s linear, height 0.3s linear;
|
||||||
|
&.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
height: 0;
|
||||||
|
transition: opacity 0s linear, height 0s linear;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 14.88px;
|
||||||
|
height: 14.88px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.filled-button.publish-button {
|
||||||
|
background: linear-gradient(0deg, #6360f0, #6360f0), #536dfe !important;
|
||||||
|
padding-left: 30px;
|
||||||
|
padding-right: 30px;
|
||||||
|
height: 42px !important;
|
||||||
|
border-radius: 32px;
|
||||||
|
}
|
||||||
|
.tip {
|
||||||
|
font-family: "Inter";
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 117%;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
color: #1d1d1d;
|
||||||
|
opacity: 0.8;
|
||||||
|
text-align: left;
|
||||||
|
b {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.poll-create-status {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
4
src/assets/icons/ic_add.svg
Normal file
4
src/assets/icons/ic_add.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M13.7674 6.32558H8.55814V1.11628C8.55814 0.483721 8.07442 0 7.44186 0C6.8093 0 6.32558 0.483721 6.32558 1.11628V6.32558H1.11628C0.483721 6.32558 0 6.8093 0 7.44186C0 8.07442 0.483721 8.55814 1.11628 8.55814H6.32558V13.7674C6.32558 14.4 6.8093 14.8837 7.44186 14.8837C8.07442 14.8837 8.55814 14.4 8.55814 13.7674V8.55814H13.7674C14.4 8.55814 14.8837 8.07442 14.8837 7.44186C14.8837 6.8093 14.4 6.32558 13.7674 6.32558Z" fill="black" fill-opacity="0.5"/>
|
||||||
|
<path d="M13.7674 6.32558H8.55814V1.11628C8.55814 0.483721 8.07442 0 7.44186 0C6.8093 0 6.32558 0.483721 6.32558 1.11628V6.32558H1.11628C0.483721 6.32558 0 6.8093 0 7.44186C0 8.07442 0.483721 8.55814 1.11628 8.55814H6.32558V13.7674C6.32558 14.4 6.8093 14.8837 7.44186 14.8837C8.07442 14.8837 8.55814 14.4 8.55814 13.7674V8.55814H13.7674C14.4 8.55814 14.8837 8.07442 14.8837 7.44186C14.8837 6.8093 14.4 6.32558 13.7674 6.32558Z" fill="#242424"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1,010 B |
3
src/assets/icons/ic_check_small.svg
Normal file
3
src/assets/icons/ic_check_small.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8.83799 0.185699C8.63338 -0.0470852 8.2762 -0.0635505 8.05605 0.150657L3.00935 5.0643C2.96298 5.11167 2.89351 5.11379 2.84524 5.07047L1.55358 3.95998C1.40102 3.83021 1.22148 3.76012 1.03229 3.76012C0.777422 3.76012 0.536097 3.88787 0.371977 4.10621L0.20399 4.33081C-0.0971529 4.73456 -0.0605251 5.328 0.285096 5.68226L2.31232 7.74863C2.47065 7.91143 2.67725 8 2.88963 8C3.13285 8 3.36453 7.88467 3.52865 7.68068L8.85337 1.05907C9.0542 0.809911 9.04842 0.42676 8.83794 0.185681L8.83799 0.185699Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 620 B |
|
|
@ -238,26 +238,31 @@
|
||||||
"download_name": "Download"
|
"download_name": "Download"
|
||||||
},
|
},
|
||||||
"poll_create": {
|
"poll_create": {
|
||||||
"title": "Create poll",
|
"title": "New Poll",
|
||||||
"intro": "Please fill in details below.",
|
"create": "Publish",
|
||||||
"create": "Create",
|
|
||||||
"creating": "Creating poll",
|
"creating": "Creating poll",
|
||||||
"poll_disclosed": "Open - current results are shown at all times.",
|
"poll_disclosed": "Open - current results are shown at all times.",
|
||||||
"poll_undisclosed": "Closed - users will see the results when poll is closed.",
|
"poll_undisclosed": "Closed - users will see the results when poll is closed.",
|
||||||
"add_answer": "Add answer",
|
"add_answer": "Add answer",
|
||||||
"failed": "Failed to create poll, please try again later.",
|
"failed": "Failed to create poll, please try again later.",
|
||||||
"question_label": "Type your question here",
|
"question_label": "Ask your question*",
|
||||||
"question_required": "You need to enter a question!",
|
"question_required": "You need to enter a question!",
|
||||||
"answer_label": "Answer no {index}",
|
"answer_label_1": "Answer*",
|
||||||
|
"answer_label_n": "Answer",
|
||||||
|
"please_complete": "Please complete",
|
||||||
"answer_required": "Answer can't be empty. Please enter some text or remove this option.",
|
"answer_required": "Answer can't be empty. Please enter some text or remove this option.",
|
||||||
|
"tip_title": "PRO TIP",
|
||||||
|
"tip_text": "Members will see the poll results after they answer. Close the poll when you're done to show results to everyone in the room..",
|
||||||
"create_poll_menu_option": "Create poll",
|
"create_poll_menu_option": "Create poll",
|
||||||
"poll_status_closed": "Poll is closed",
|
"poll_status_closed": "Poll is closed",
|
||||||
"poll_status_disclosed": "Results will be shown when poll is closed.",
|
"poll_status_disclosed": "Results will be shown when poll is closed.",
|
||||||
"poll_status_open": "Poll is open",
|
"poll_status_open": "Poll is open",
|
||||||
"poll_status_open_not_voted": "Poll is open - vote to see the results",
|
"poll_status_open_not_voted": "Poll is open - vote to see the results",
|
||||||
|
"view_results": "View Results",
|
||||||
"close_poll": "Close poll",
|
"close_poll": "Close poll",
|
||||||
"poll_submit": "Submit",
|
"poll_submit": "Submit",
|
||||||
"num_answered": "{count} have answered"
|
"num_answered": "{count} answers",
|
||||||
|
"results_shared": "Results shared to the room."
|
||||||
},
|
},
|
||||||
"export": {
|
"export": {
|
||||||
"exported_date": "Exported on {date}",
|
"exported_date": "Exported on {date}",
|
||||||
|
|
|
||||||
|
|
@ -78,6 +78,7 @@
|
||||||
v-on:own-avatar-clicked="viewProfile"
|
v-on:own-avatar-clicked="viewProfile"
|
||||||
v-on:other-avatar-clicked="showAvatarMenuForEvent($event)"
|
v-on:other-avatar-clicked="showAvatarMenuForEvent($event)"
|
||||||
v-on:download="download(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">EventID: {{ event.getId() }}</div> -->
|
||||||
<!-- <div v-if="debugging" style="user-select:text">Event: {{ JSON.stringify(event) }}</div> -->
|
<!-- <div v-if="debugging" style="user-select:text">Event: {{ JSON.stringify(event) }}</div> -->
|
||||||
|
|
@ -163,6 +164,32 @@
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-col>
|
</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
|
<v-col
|
||||||
class="input-area-button text-center flex-grow-0 flex-shrink-1"
|
class="input-area-button text-center flex-grow-0 flex-shrink-1"
|
||||||
v-if="!currentInput || currentInput.length == 0 || showRecorder"
|
v-if="!currentInput || currentInput.length == 0 || showRecorder"
|
||||||
|
|
@ -242,45 +269,6 @@
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
</v-col>
|
</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>
|
</v-row>
|
||||||
<VoiceRecorder
|
<VoiceRecorder
|
||||||
:micButtonRef="$refs.mic_button"
|
:micButtonRef="$refs.mic_button"
|
||||||
|
|
@ -896,7 +884,11 @@ export default {
|
||||||
this.handleScrolledToBottom(false);
|
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();
|
this.restartRRTimer();
|
||||||
},
|
},
|
||||||
|
|
@ -1481,6 +1473,15 @@ export default {
|
||||||
onInvitationsClick() {
|
onInvitationsClick() {
|
||||||
this.$navigation.push({ name: "Home" }, -1);
|
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>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'">
|
<div v-if="showDialog" v-show="room" class="ma-0 pa-0 fullscreen-dialog poll-create">
|
||||||
<div class="dialog-content text-center">
|
<div class="chat-header">
|
||||||
<template>
|
<v-container fluid>
|
||||||
<v-icon color="black" size="30">poll</v-icon>
|
<div class="room-name no-upper">{{ $t("poll_create.title") }}</div>
|
||||||
<h2 class="dialog-title">
|
<v-btn id="btn-close" text class="header-button-right" @click.stop="showDialog = false">
|
||||||
{{ $t("poll_create.title") }}
|
<v-icon>close</v-icon>
|
||||||
</h2>
|
</v-btn>
|
||||||
<div class="dialog-text">{{ $t("poll_create.intro") }}</div>
|
</v-container>
|
||||||
</template>
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
<v-form v-model="isValid" ref="pollcreateform">
|
<v-form v-model="isValid" ref="pollcreateform">
|
||||||
<v-container fluid class="poll-create-dialog-content">
|
<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-col cols="12">
|
||||||
<v-switch
|
<v-switch
|
||||||
v-model="pollIsDisclosed"
|
v-model="pollIsDisclosed"
|
||||||
|
|
@ -18,78 +20,79 @@
|
||||||
:label="pollIsDisclosed ? $t('poll_create.poll_disclosed') : $t('poll_create.poll_undisclosed')"
|
:label="pollIsDisclosed ? $t('poll_create.poll_disclosed') : $t('poll_create.poll_undisclosed')"
|
||||||
></v-switch>
|
></v-switch>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row> -->
|
||||||
<v-row cols="12">
|
<v-row cols="12" no-gutters class="ma-0 pa-0">
|
||||||
<v-col cols="12">
|
<v-col cols="12" class="ma-0 pa-0">
|
||||||
<v-text-field
|
<InputControl
|
||||||
outlined
|
|
||||||
:disabled="isCreating"
|
|
||||||
v-model="pollQuestion"
|
v-model="pollQuestion"
|
||||||
:label="$t('poll_create.question_label')"
|
: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"
|
:disabled="isCreating"
|
||||||
v-model="answer.text"
|
:error="$t('poll_create.please_complete')"
|
||||||
: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>
|
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
|
||||||
<v-row
|
<v-row v-for="(answer, index) in pollAnswers" cols="12" :key="answer.id" no-gutters class="ma-0 pa-0">
|
||||||
><v-col
|
<v-col cols="12" class="ma-0 pa-0">
|
||||||
><v-btn @click.stop="addAnswer">{{ $t("poll_create.add_answer") }}</v-btn></v-col
|
<InputControl
|
||||||
></v-row
|
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-container>
|
||||||
</v-form>
|
</v-form>
|
||||||
<div class="poll-create-status">
|
<div class="poll-create-status">
|
||||||
{{ status }}
|
{{ status }}
|
||||||
<v-progress-circular v-if="isCreating" indeterminate color="primary" size="14"></v-progress-circular>
|
<v-progress-circular v-if="isCreating" indeterminate color="primary" size="14"></v-progress-circular>
|
||||||
</div>
|
</div>
|
||||||
<v-container fluid>
|
<v-container>
|
||||||
<v-row cols="12">
|
<v-row justify="center">
|
||||||
<v-col cols="6">
|
<v-col cols="auto">
|
||||||
<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-btn
|
<v-btn
|
||||||
id="btn-create-poll"
|
id="btn-create-poll"
|
||||||
color="red"
|
color="red"
|
||||||
depressed
|
depressed
|
||||||
block
|
block
|
||||||
class="filled-button"
|
class="filled-button publish-button"
|
||||||
@click.stop="onCreatePoll()"
|
@click.stop="onCreatePoll()"
|
||||||
:disabled="isCreating"
|
:disabled="isCreating"
|
||||||
>{{ $t("poll_create.create") }}</v-btn
|
>{{ $t("poll_create.create") }}</v-btn
|
||||||
>
|
>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</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>
|
</v-container>
|
||||||
</div>
|
</div>
|
||||||
</v-dialog>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import roomInfoMixin from "./roomInfoMixin";
|
import roomInfoMixin from "./roomInfoMixin";
|
||||||
import util from "../plugins/utils";
|
import util from "../plugins/utils";
|
||||||
|
import InputControl from "./InputControl.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "CreatePollDialog",
|
name: "CreatePollDialog",
|
||||||
|
|
@ -124,13 +127,13 @@ export default {
|
||||||
this.pollQuestion = defaults.pollQuestion;
|
this.pollQuestion = defaults.pollQuestion;
|
||||||
this.pollAnswers = defaults.pollAnswers;
|
this.pollAnswers = defaults.pollAnswers;
|
||||||
this.autoIncrementId = defaults.autoIncrementId;
|
this.autoIncrementId = defaults.autoIncrementId;
|
||||||
|
this.addingAnswer = defaults.addingAnswer;
|
||||||
if (this.$refs.pollcreateform) {
|
if (this.$refs.pollcreateform) {
|
||||||
this.$refs.pollcreateform.resetValidation();
|
this.$refs.pollcreateform.resetValidation();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
defaultData() {
|
defaultData() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -138,20 +141,29 @@ export default {
|
||||||
isValid: true,
|
isValid: true,
|
||||||
isCreating: false,
|
isCreating: false,
|
||||||
status: String.fromCharCode(160),
|
status: String.fromCharCode(160),
|
||||||
pollIsDisclosed: true,
|
pollIsDisclosed: false,
|
||||||
pollQuestion: "",
|
pollQuestion: null,
|
||||||
pollAnswers: [
|
pollAnswers: [
|
||||||
{ id: "1", text: "" },
|
{ id: "1", text: null },
|
||||||
{ id: "2", text: "" },
|
{ id: "2", text: null },
|
||||||
],
|
],
|
||||||
autoIncrementId: 2,
|
autoIncrementId: 2,
|
||||||
|
addingAnswer: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
addAnswer() {
|
addAnswer() {
|
||||||
if (this.pollAnswers.length < 20) {
|
if (this.pollAnswers.length < 20) {
|
||||||
// MAX length according to spec
|
// MAX length according to spec
|
||||||
|
this.addingAnswer = true;
|
||||||
|
const idx = this.pollAnswers.length;
|
||||||
this.autoIncrementId += 1;
|
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) {
|
removeAnswer(index) {
|
||||||
|
|
@ -179,17 +191,30 @@ export default {
|
||||||
this.isCreating = false;
|
this.isCreating = false;
|
||||||
this.status = this.$t("poll_create.failed");
|
this.status = this.$t("poll_create.failed");
|
||||||
});
|
});
|
||||||
|
|
||||||
setTimeout(() => {}, 3000);
|
setTimeout(() => {}, 3000);
|
||||||
} else {
|
} else {
|
||||||
this.isValid = false;
|
this.isValid = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
components: { InputControl },
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import "@/assets/css/chat.scss";
|
@import "@/assets/css/chat.scss";
|
||||||
@import "@/assets/css/components/poll.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>
|
</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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="poll-question">{{ pollQuestion }}</div>
|
<div class="poll-question">{{ pollQuestion }}</div>
|
||||||
<v-container fluid ma-0 pa-0>
|
<v-container fluid ma-0 pa-0>
|
||||||
<v-row
|
<v-row
|
||||||
|
|
@ -30,8 +31,8 @@
|
||||||
:class="{
|
:class="{
|
||||||
'poll-answer': true,
|
'poll-answer': true,
|
||||||
selected: !userHasVoted && answer.id == pollTentativeAnswer,
|
selected: !userHasVoted && answer.id == pollTentativeAnswer,
|
||||||
result: userHasVoted || pollIsClosed,
|
result: userHasVoted || pollIsClosed || pollViewResults,
|
||||||
winner: answer.winner,
|
winner: answer.winner && (userHasVoted || pollIsClosed || pollViewResults),
|
||||||
}"
|
}"
|
||||||
ma-0
|
ma-0
|
||||||
pa-0
|
pa-0
|
||||||
|
|
@ -41,41 +42,55 @@
|
||||||
><v-img class="poll-check-icon" src="@/assets/icons/ic_check.svg"
|
><v-img class="poll-check-icon" src="@/assets/icons/ic_check.svg"
|
||||||
/></v-col>
|
/></v-col>
|
||||||
<v-col
|
<v-col
|
||||||
v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin"
|
v-if="
|
||||||
|
pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
|
||||||
|
"
|
||||||
cols="auto"
|
cols="auto"
|
||||||
class="ma-0 pa-0 poll-answer-num-votes"
|
class="ma-0 pa-0 poll-answer-num-votes"
|
||||||
>{{ answer.percentage }}%</v-col
|
>{{ 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 class="bar" :style="{ width: `${answer.percentage}%` }"></div>
|
||||||
</div>
|
</div>
|
||||||
</v-row>
|
</v-row>
|
||||||
<v-row class="poll-status">
|
<v-row v-if="pollTentativeAnswer" class="pa-0 poll-status" justify="center">
|
||||||
<v-col cols="auto" class="ma-0 pa-0 poll-status-title">
|
<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 }) }}
|
{{ $t("poll_create.num_answered", { count: pollNumAnswers }) }}
|
||||||
</v-col>
|
</v-col>
|
||||||
<!-- <v-col cols="auto" class="ma-0 pa-0 poll-status-title">{{
|
<v-col cols="auto" class="ma-0 pa-0">
|
||||||
pollIsClosed
|
<div
|
||||||
? $t("poll_create.poll_status_closed")
|
:class="{ 'poll-disclose': true, clickable: true, selected: pollViewResults, 'mb-4': true }"
|
||||||
: pollIsDisclosed
|
v-if="!pollIsClosed && userCanClosePoll && !userHasVoted"
|
||||||
? userHasVoted
|
>
|
||||||
? $t("poll_create.poll_status_open")
|
{{ $t("poll_create.view_results") }}
|
||||||
: $t("poll_create.poll_status_open_not_voted")
|
|
||||||
: $t("poll_create.poll_status_disclosed")
|
<div class="poll-disclose-track" @click.stop="pollViewResults = !pollViewResults">
|
||||||
}}</v-col> -->
|
<div class="poll-disclose-knob"></div>
|
||||||
<v-col
|
</div>
|
||||||
cols="auto"
|
</div>
|
||||||
class="ma-0 pa-0 poll-status-close clickable"
|
<div
|
||||||
v-if="!pollIsClosed && userCanClosePoll"
|
class="poll-status-close clickable"
|
||||||
@click.stop="pollClose"
|
v-if="userCanClosePoll && (userHasVoted || pollViewResults) && !pollIsClosed"
|
||||||
>{{ $t("poll_create.close_poll") }}</v-col
|
@click.stop="pollClose"
|
||||||
>
|
>
|
||||||
</v-row>
|
{{ $t("poll_create.close_poll") }}
|
||||||
<v-row v-if="pollTentativeAnswer" justify="center">
|
</div>
|
||||||
<v-col cols="auto" class="ma-0 pa-0 poll-submit">
|
<div class="poll-status-closed clickable" v-else-if="pollIsAdmin && pollIsClosed" @click.stop="pollClose">
|
||||||
<v-btn @click.stop="pollAnswerSubmit">
|
<img class="icon" src="@/assets/icons/ic_check_small.svg" />
|
||||||
{{ $t("poll_create.poll_submit") }}
|
{{ $t("poll_create.poll_status_closed") }}
|
||||||
</v-btn>
|
</div>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
|
||||||
|
|
@ -31,8 +31,8 @@
|
||||||
:class="{
|
:class="{
|
||||||
'poll-answer': true,
|
'poll-answer': true,
|
||||||
selected: !userHasVoted && answer.id == pollTentativeAnswer,
|
selected: !userHasVoted && answer.id == pollTentativeAnswer,
|
||||||
result: userHasVoted || pollIsClosed,
|
result: userHasVoted || pollIsClosed || pollViewResults,
|
||||||
winner: answer.winner,
|
winner: answer.winner && (userHasVoted || pollIsClosed || pollViewResults),
|
||||||
}"
|
}"
|
||||||
ma-0
|
ma-0
|
||||||
pa-0
|
pa-0
|
||||||
|
|
@ -42,41 +42,55 @@
|
||||||
><v-img class="poll-check-icon" src="@/assets/icons/ic_check.svg"
|
><v-img class="poll-check-icon" src="@/assets/icons/ic_check.svg"
|
||||||
/></v-col>
|
/></v-col>
|
||||||
<v-col
|
<v-col
|
||||||
v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin"
|
v-if="
|
||||||
|
pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
|
||||||
|
"
|
||||||
cols="auto"
|
cols="auto"
|
||||||
class="ma-0 pa-0 poll-answer-num-votes"
|
class="ma-0 pa-0 poll-answer-num-votes"
|
||||||
>{{ answer.percentage }}%</v-col
|
>{{ 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 class="bar" :style="{ width: `${answer.percentage}%` }"></div>
|
||||||
</div>
|
</div>
|
||||||
</v-row>
|
</v-row>
|
||||||
<v-row class="poll-status">
|
<v-row v-if="pollTentativeAnswer" class="pa-0 poll-status" justify="center">
|
||||||
<v-col cols="auto" class="ma-0 pa-0 poll-status-title">
|
<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 }) }}
|
{{ $t("poll_create.num_answered", { count: pollNumAnswers }) }}
|
||||||
</v-col>
|
</v-col>
|
||||||
<!-- <v-col cols="auto" class="ma-0 pa-0 poll-status-title">{{
|
<v-col cols="auto" class="ma-0 pa-0">
|
||||||
pollIsClosed
|
<div
|
||||||
? $t("poll_create.poll_status_closed")
|
:class="{ 'poll-disclose': true, clickable: true, selected: pollViewResults, 'mb-4': true }"
|
||||||
: pollIsDisclosed
|
v-if="!pollIsClosed && userCanClosePoll && !userHasVoted"
|
||||||
? userHasVoted
|
>
|
||||||
? $t("poll_create.poll_status_open")
|
{{ $t("poll_create.view_results") }}
|
||||||
: $t("poll_create.poll_status_open_not_voted")
|
|
||||||
: $t("poll_create.poll_status_disclosed")
|
<div class="poll-disclose-track" @click.stop="pollViewResults = !pollViewResults">
|
||||||
}}</v-col> -->
|
<div class="poll-disclose-knob"></div>
|
||||||
<v-col
|
</div>
|
||||||
cols="auto"
|
</div>
|
||||||
class="ma-0 pa-0 poll-status-close clickable"
|
<div
|
||||||
v-if="!pollIsClosed && userCanClosePoll"
|
class="poll-status-close clickable"
|
||||||
@click.stop="pollClose"
|
v-if="userCanClosePoll && (userHasVoted || pollViewResults) && !pollIsClosed"
|
||||||
>{{ $t("poll_create.close_poll") }}</v-col
|
@click.stop="pollClose"
|
||||||
>
|
>
|
||||||
</v-row>
|
{{ $t("poll_create.close_poll") }}
|
||||||
<v-row v-if="pollTentativeAnswer" justify="center">
|
</div>
|
||||||
<v-col cols="auto" class="ma-0 pa-0 poll-submit">
|
<div class="poll-status-closed clickable" v-else-if="pollIsAdmin && pollIsClosed" @click.stop="pollClose">
|
||||||
<v-btn @click.stop="pollAnswerSubmit">
|
<img class="icon" src="@/assets/icons/ic_check_small.svg" />
|
||||||
{{ $t("poll_create.poll_submit") }}
|
{{ $t("poll_create.poll_status_closed") }}
|
||||||
</v-btn>
|
</div>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-container>
|
</v-container>
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ export default {
|
||||||
pollEndTs: null,
|
pollEndTs: null,
|
||||||
pollIsDisclosed: true,
|
pollIsDisclosed: true,
|
||||||
pollTentativeAnswer: null,
|
pollTentativeAnswer: null,
|
||||||
|
pollViewResults: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -145,8 +146,13 @@ export default {
|
||||||
this.pollTotalVotes = totalVotes;
|
this.pollTotalVotes = totalVotes;
|
||||||
},
|
},
|
||||||
pollAnswer(id) {
|
pollAnswer(id) {
|
||||||
if (!this.userHasVoted) {
|
// Only if not voted and not currently viewing poll results.
|
||||||
this.pollTentativeAnswer = id;
|
if (!this.userHasVoted && !this.pollViewResults) {
|
||||||
|
if (id == this.pollTentativeAnswer) {
|
||||||
|
this.pollTentativeAnswer = null;
|
||||||
|
} else {
|
||||||
|
this.pollTentativeAnswer = id;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
pollAnswerSubmit() {
|
pollAnswerSubmit() {
|
||||||
|
|
@ -163,7 +169,9 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
pollClose() {
|
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);
|
console.log("Failed to send:", err);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue