butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Resolve "Polling: Updated poll admin UX"

Browse source
This commit is contained in:
N Pex 2022-06-08 18:53:50 +00:00 • committed by n8fr8
parent 90daf060cc
commit 4f6238bc59
11 changed files with 1531 additions and 1111 deletions
Download patch file Download diff file Expand all files Collapse all files

1880
src/assets/css/chat.scss
View file

File diff suppressed because it is too large Load diff

194
src/assets/css/components/_poll.scss
View file

@ -1,5 +1,6 @@
.poll-bubble {
width: 70%;
text-align: start;
}
.poll-bubble {
@ -36,6 +37,7 @@
border-radius: 4px;
padding: 15px 14px;
margin: 0px;
height: 48px;
&.winner {
font-weight: 700;
}
@ -77,40 +79,190 @@
.poll-status {
justify-content: space-between;
align-items: flex-start;
font-size: 13px;
line-height: 117%;
margin: 0px;
margin: 17px 0px 0px 0px;
.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 {
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 {
.v-btn {
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 11 * $chat-text-size;
color: white;
text-transform: uppercase;
background-color: $poll-hilite-color !important;
border: 1px solid black;
border-radius: 21px !important;
height: 42px !important;
margin-top: $chat-standard-padding-xs;
margin-bottom: $chat-standard-padding-xs;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(0deg, #6360f0, #6360f0), #536dfe;
border-radius: 32px;
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-size: 11.5411px;
line-height: 140%;
text-align: center;
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
//
.poll-create-dialog-content {
max-height: 50vh;
overflow-x: hidden;
overflow-y: auto;
}
.poll-create-status {
font-size: 0.7rem;
.poll-create {
.poll-create-dialog-content {
overflow-x: hidden;
overflow-y: auto;
font-family: "Inter";
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
View 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>
Side by side

After

Width:  |  Height:  |  Size: 1,010 B

3
src/assets/icons/ic_check_small.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 620 B

17
src/assets/translations/en.json
View file

@ -238,26 +238,31 @@
"download_name": "Download"
},
"poll_create": {
"title": "Create poll",
"intro": "Please fill in details below.",
"create": "Create",
"title": "New Poll",
"create": "Publish",
"creating": "Creating poll",
"poll_disclosed": "Open - current results are shown at all times.",
"poll_undisclosed": "Closed - users will see the results when poll is closed.",
"add_answer": "Add answer",
"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!",
"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.",
"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",
"poll_status_closed": "Poll is closed",
"poll_status_disclosed": "Results will be shown when poll is closed.",
"poll_status_open": "Poll is open",
"poll_status_open_not_voted": "Poll is open - vote to see the results",
"view_results": "View Results",
"close_poll": "Close poll",
"poll_submit": "Submit",
"num_answered": "{count} have answered"
"num_answered": "{count} answers",
"results_shared": "Results shared to the room."
},
"export": {
"exported_date": "Exported on {date}",

81
src/components/Chat.vue
View file

@ -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>

145
src/components/CreatePollDialog.vue
View file

@ -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
View 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>

71
src/components/messages/MessageIncomingPoll.vue
View file

@ -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>

70
src/components/messages/MessageOutgoingPoll.vue
View file

@ -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>

14
src/components/messages/pollMixin.js
View file

@ -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);
});
},