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

UX: Create new poll via modal

Browse source
This commit is contained in:
10G Meow 2023-01-05 09:35:47 +00:00 • committed by n8fr8
parent d318937348
commit 11dcc24859
5 changed files with 92 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -38,6 +38,9 @@
padding: 15px 14px; padding: 15px 14px;
margin: 0px; margin: 0px;
height: 48px; height: 48px;
&:hover {
cursor: pointer;
}
&.winner { &.winner {
font-weight: 700; font-weight: 700;
} }
@ -50,8 +53,9 @@
&.result { &.result {
border: none; border: none;
padding: 15px 0px; padding: 15px 0px;
} &:hover {
.poll-answer-title { cursor: default;
}
} }
.poll-answer-num-votes { .poll-answer-num-votes {
font-size: 0.75rem; font-size: 0.75rem;
@ -207,6 +211,7 @@
// Creation dialog // Creation dialog
// //
.poll-create { .poll-create {
height: 500px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
.poll-create-dialog-content { .poll-create-dialog-content {

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

@ -256,7 +256,7 @@
"download_name": "Download" "download_name": "Download"
}, },
"poll_create": { "poll_create": {
"title": "New Poll", "title": "Create new poll",
"create": "Publish", "create": "Publish",
"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.",
@ -270,7 +270,7 @@
"please_complete": "Please complete", "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_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..", "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.",

19
src/components/Chat.vue
View file

@ -174,24 +174,7 @@
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-btn icon large color="black" @click="showCreatePollDialog = true"> <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"> <v-icon dark>$vuetify.icons.poll</v-icon>
<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-btn>
</v-col> </v-col>

166
src/components/CreatePollDialog.vue
View file

@ -1,93 +1,104 @@
<template> <template>
<div v-if="showDialog" v-show="room" class="ma-0 pa-0 fullscreen-dialog poll-create"> <v-dialog
<div class="chat-header"> v-model="showDialog"
v-show="room"
scrollable
class="ma-0 pa-0"
:width="$vuetify.breakpoint.smAndUp ? '940px' : '95%'"
>
<v-card>
<v-card-title>
<v-container fluid> <v-container fluid>
<div class="room-name no-upper">{{ $t("poll_create.title") }}</div> <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-btn id="btn-close" text class="header-button-right" @click.stop="showDialog = false">
<v-icon>close</v-icon> <v-icon>close</v-icon>
</v-btn> </v-btn>
</v-container> </v-container>
</div> </v-card-title>
<v-divider></v-divider>
<v-card-text class="poll-create">
<div class="text-center">
<v-form v-model="isValid" ref="pollcreateform">
<v-container fluid class="poll-create-dialog-content">
<!-- <v-row cols="12" no-gutters class="ma-0 pa-0">
<v-col cols="12">
<v-switch
v-model="pollIsDisclosed"
inset
:label="pollIsDisclosed ? $t('poll_create.poll_disclosed') : $t('poll_create.poll_undisclosed')"
></v-switch>
</v-col>
</v-row> -->
<v-row cols="12" no-gutters class="ma-0 pa-0">
<v-col cols="12" class="ma-0 pa-0">
<InputControl
v-model="pollQuestion"
:label="$t('poll_create.question_label')"
:disabled="isCreating"
:error="$t('poll_create.please_complete')"
/>
</v-col>
</v-row>
<div class="text-center"> <v-row v-for="(answer, index) in pollAnswers" cols="12" :key="answer.id" no-gutters class="ma-0 pa-0">
<v-form v-model="isValid" ref="pollcreateform"> <v-col cols="12" class="ma-0 pa-0">
<v-container fluid class="poll-create-dialog-content"> <InputControl
<!-- <v-row cols="12" no-gutters class="ma-0 pa-0"> v-model="answer.text"
<v-col cols="12"> :label="
<v-switch index == 0 ? $t('poll_create.answer_label_1') : $t('poll_create.answer_label_n', { index: index + 1 })
v-model="pollIsDisclosed" "
inset :disabled="isCreating"
:label="pollIsDisclosed ? $t('poll_create.poll_disclosed') : $t('poll_create.poll_undisclosed')" :error="$t('poll_create.please_complete')"
></v-switch> :class="{ deletable: pollAnswers.length > 1 }"
</v-col> ref="answerInput"
</v-row> --> >
<v-row cols="12" no-gutters class="ma-0 pa-0"> <v-btn v-if="pollAnswers.length > 1" icon @click="removeAnswer(index)"><v-icon>delete</v-icon></v-btn>
<v-col cols="12" class="ma-0 pa-0"> </InputControl>
<InputControl </v-col>
v-model="pollQuestion" </v-row>
:label="$t('poll_create.question_label')"
:disabled="isCreating"
:error="$t('poll_create.please_complete')"
/>
</v-col>
</v-row>
<v-row v-for="(answer, index) in pollAnswers" cols="12" :key="answer.id" no-gutters class="ma-0 pa-0"> <v-row cols="12" no-gutters class="ma-0 pa-0">
<v-col cols="12" class="ma-0 pa-0"> <v-col class="ma-0 pa-0">
<InputControl <div :class="{'add-answer-button':true, 'clickable': true, 'hidden': addingAnswer}" @click.stop="addAnswer">
v-model="answer.text" <img src="@/assets/icons/ic_add.svg" />
:label=" </div>
index == 0 ? $t('poll_create.answer_label_1') : $t('poll_create.answer_label_n', { index: index + 1 }) </v-col>
" </v-row>
:disabled="isCreating" <v-row justify="center">
:error="$t('poll_create.please_complete')" <v-col cols="auto">
:class="{ deletable: pollAnswers.length > 1 }" <v-btn
ref="answerInput" id="btn-create-poll"
> depressed
<v-btn v-if="pollAnswers.length > 1" icon @click="removeAnswer(index)"><v-icon>delete</v-icon></v-btn> block
</InputControl> class="filled-button publish-button"
</v-col> @click.stop="onCreatePoll()"
</v-row> :disabled="isCreating || !publishButtonEnabled"
>{{ $t("poll_create.create") }}</v-btn
<v-row cols="12" no-gutters class="ma-0 pa-0"> >
<v-col class="ma-0 pa-0"> </v-col>
<div :class="{'add-answer-button':true, 'clickable': true, 'hidden': addingAnswer}" @click.stop="addAnswer"> </v-row>
<img src="@/assets/icons/ic_add.svg" /> </v-container>
</div> </v-form>
</v-col> <div class="poll-create-status">
</v-row> {{ status }}
</v-container> <v-progress-circular v-if="isCreating" indeterminate color="primary" size="14"></v-progress-circular>
</v-form> </div>
<div class="poll-create-status">
{{ status }}
<v-progress-circular v-if="isCreating" indeterminate color="primary" size="14"></v-progress-circular>
</div> </div>
</v-card-text>
<v-card-actions>
<v-container> <v-container>
<v-row justify="center">
<v-col cols="auto">
<v-btn
id="btn-create-poll"
color="red"
depressed
block
class="filled-button publish-button"
@click.stop="onCreatePoll()"
:disabled="isCreating || !publishButtonEnabled"
>{{ $t("poll_create.create") }}</v-btn
>
</v-col>
</v-row>
<v-row> <v-row>
<v-col cols="auto"> <v-col cols="auto">
<div class="tip"> <div class="tip">
<b>{{ $t("poll_create.tip_title") }}</b <b>{{ $t("poll_create.tip_title") }}</b
>{{ $t("poll_create.tip_text") }} > {{ $t("poll_create.tip_text") }}
</div> </div>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
</div> </v-card-actions>
</div> </v-card>
</v-dialog>
</template> </template>
<script> <script>
import roomInfoMixin from "./roomInfoMixin"; import roomInfoMixin from "./roomInfoMixin";
@ -209,17 +220,4 @@ export default {
<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>

1
src/components/messages/messageMixin.js
View file

@ -77,7 +77,6 @@ export default {
if (relatesTo && relatesTo['m.in_reply_to']) if (relatesTo && relatesTo['m.in_reply_to'])
{ {
const content = this.event.getContent(); const content = this.event.getContent();
const lines = content.body.split('\n').reverse(); const lines = content.body.split('\n').reverse();
while (lines.length && !lines[0].startsWith('> ')) lines.shift(); while (lines.length && !lines[0].startsWith('> ')) lines.shift();
// Reply fallback has a blank line after it, so remove it to prevent leading newline // Reply fallback has a blank line after it, so remove it to prevent leading newline