From ad7544a765c6fb03d88267690218e1e6fedf112a Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Thu, 5 Jan 2023 09:35:47 +0000
Subject: [PATCH] UX: Create new poll via modal

---
 src/assets/css/components/_poll.scss    |   9 +-
 src/assets/translations/en.json         |   4 +-
 src/components/Chat.vue                 |  19 +--
 src/components/CreatePollDialog.vue     | 166 ++++++++++++------------
 src/components/messages/messageMixin.js |   1 -
 5 files changed, 92 insertions(+), 107 deletions(-)

diff --git a/src/assets/css/components/_poll.scss b/src/assets/css/components/_poll.scss
index 5b1ef54..89374a2 100644
--- a/src/assets/css/components/_poll.scss
+++ b/src/assets/css/components/_poll.scss
@@ -38,6 +38,9 @@
   padding: 15px 14px;
   margin: 0px;
   height: 48px;
+  &:hover {
+    cursor: pointer;
+  }
   &.winner {
     font-weight: 700;
   }
@@ -50,8 +53,9 @@
   &.result {
     border: none;
     padding: 15px 0px;
-  }
-  .poll-answer-title {
+    &:hover {
+      cursor: default;
+    }
   }
   .poll-answer-num-votes {
     font-size: 0.75rem;
@@ -207,6 +211,7 @@
 // Creation dialog
 //
 .poll-create {
+  height: 500px;
   overflow-x: hidden;
   overflow-y: auto;
   .poll-create-dialog-content {
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index e473cb7..02d95a0 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -256,7 +256,7 @@
     "download_name": "Download"
   },
   "poll_create": {
-    "title": "New Poll",
+    "title": "Create new poll",
     "create": "Publish",
     "creating": "Creating poll",
     "poll_disclosed": "Open - current results are shown at all times.",
@@ -270,7 +270,7 @@
     "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..",
+    "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.",
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 43873e0..c0d2568 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -174,24 +174,7 @@
             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-icon dark>$vuetify.icons.poll</v-icon>
             </v-btn>
           </v-col>
 
diff --git a/src/components/CreatePollDialog.vue b/src/components/CreatePollDialog.vue
index c5ff2aa..7fb7b76 100644
--- a/src/components/CreatePollDialog.vue
+++ b/src/components/CreatePollDialog.vue
@@ -1,93 +1,104 @@
 <template>
-  <div v-if="showDialog" v-show="room" class="ma-0 pa-0 fullscreen-dialog poll-create">
-    <div class="chat-header">
+ <v-dialog
+    v-model="showDialog"
+    v-show="room"
+    scrollable
+    class="ma-0 pa-0"
+    :width="$vuetify.breakpoint.smAndUp ? '940px' : '95%'"
+  >
+  <v-card>
+    <v-card-title>
       <v-container fluid>
         <div class="room-name no-upper">{{ $t("poll_create.title") }}</div>
         <v-btn id="btn-close" text class="header-button-right" @click.stop="showDialog = false">
           <v-icon>close</v-icon>
         </v-btn>
       </v-container>
-    </div>
+    </v-card-title>
+    <v-divider></v-divider>
+    <v-card-text class="poll-create">
+      <div class="text-center">
+        <v-form v-model="isValid" ref="pollcreateform">
+          <v-container fluid class="poll-create-dialog-content">
+            <!-- <v-row cols="12" no-gutters class="ma-0 pa-0">
+              <v-col cols="12">
+                <v-switch
+                  v-model="pollIsDisclosed"
+                  inset
+                  :label="pollIsDisclosed ? $t('poll_create.poll_disclosed') : $t('poll_create.poll_undisclosed')"
+                ></v-switch>
+              </v-col>
+            </v-row> -->
+            <v-row cols="12" no-gutters class="ma-0 pa-0">
+              <v-col cols="12" class="ma-0 pa-0">
+                <InputControl
+                  v-model="pollQuestion"
+                  :label="$t('poll_create.question_label')"
+                  :disabled="isCreating"
+                  :error="$t('poll_create.please_complete')"
+                />
+              </v-col>
+            </v-row>
 
-    <div class="text-center">
-      <v-form v-model="isValid" ref="pollcreateform">
-        <v-container fluid class="poll-create-dialog-content">
-          <!-- <v-row cols="12" no-gutters class="ma-0 pa-0">
-            <v-col cols="12">
-              <v-switch
-                v-model="pollIsDisclosed"
-                inset
-                :label="pollIsDisclosed ? $t('poll_create.poll_disclosed') : $t('poll_create.poll_undisclosed')"
-              ></v-switch>
-            </v-col>
-          </v-row> -->
-          <v-row cols="12" no-gutters class="ma-0 pa-0">
-            <v-col cols="12" class="ma-0 pa-0">
-              <InputControl
-                v-model="pollQuestion"
-                :label="$t('poll_create.question_label')"
-                :disabled="isCreating"
-                :error="$t('poll_create.please_complete')"
-              />
-            </v-col>
-          </v-row>
+            <v-row v-for="(answer, index) in pollAnswers" cols="12" :key="answer.id" no-gutters class="ma-0 pa-0">
+              <v-col cols="12" class="ma-0 pa-0">
+                <InputControl
+                  v-model="answer.text"
+                  :label="
+                    index == 0 ? $t('poll_create.answer_label_1') : $t('poll_create.answer_label_n', { index: index + 1 })
+                  "
+                  :disabled="isCreating"
+                  :error="$t('poll_create.please_complete')"
+                  :class="{ deletable: pollAnswers.length > 1 }"
+                  ref="answerInput"
+                >
+                  <v-btn v-if="pollAnswers.length > 1" icon @click="removeAnswer(index)"><v-icon>delete</v-icon></v-btn>
+                </InputControl>
+              </v-col>
+            </v-row>
 
-          <v-row v-for="(answer, index) in pollAnswers" cols="12" :key="answer.id" no-gutters class="ma-0 pa-0">
-            <v-col cols="12" class="ma-0 pa-0">
-              <InputControl
-                v-model="answer.text"
-                :label="
-                  index == 0 ? $t('poll_create.answer_label_1') : $t('poll_create.answer_label_n', { index: index + 1 })
-                "
-                :disabled="isCreating"
-                :error="$t('poll_create.please_complete')"
-                :class="{ deletable: pollAnswers.length > 1 }"
-                ref="answerInput"
-              >
-                <v-btn v-if="pollAnswers.length > 1" icon @click="removeAnswer(index)"><v-icon>delete</v-icon></v-btn>
-              </InputControl>
-            </v-col>
-          </v-row>
-
-          <v-row cols="12" no-gutters class="ma-0 pa-0">
-            <v-col class="ma-0 pa-0">
-                <div :class="{'add-answer-button':true, 'clickable': true, 'hidden': addingAnswer}" @click.stop="addAnswer">
-                  <img src="@/assets/icons/ic_add.svg" />
-                </div>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-form>
-      <div class="poll-create-status">
-        {{ status }}
-        <v-progress-circular v-if="isCreating" indeterminate color="primary" size="14"></v-progress-circular>
+            <v-row cols="12" no-gutters class="ma-0 pa-0">
+              <v-col class="ma-0 pa-0">
+                  <div :class="{'add-answer-button':true, 'clickable': true, 'hidden': addingAnswer}" @click.stop="addAnswer">
+                    <img src="@/assets/icons/ic_add.svg" />
+                  </div>
+              </v-col>
+            </v-row>
+            <v-row justify="center">
+              <v-col cols="auto">
+                <v-btn
+                  id="btn-create-poll"
+                  depressed
+                  block
+                  class="filled-button publish-button"
+                  @click.stop="onCreatePoll()"
+                  :disabled="isCreating || !publishButtonEnabled"
+                  >{{ $t("poll_create.create") }}</v-btn
+                >
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-form>
+        <div class="poll-create-status">
+          {{ status }}
+          <v-progress-circular v-if="isCreating" indeterminate color="primary" size="14"></v-progress-circular>
+        </div>
       </div>
+    </v-card-text>
+    <v-card-actions>
       <v-container>
-        <v-row justify="center">
-          <v-col cols="auto">
-            <v-btn
-              id="btn-create-poll"
-              color="red"
-              depressed
-              block
-              class="filled-button publish-button"
-              @click.stop="onCreatePoll()"
-              :disabled="isCreating || !publishButtonEnabled"
-              >{{ $t("poll_create.create") }}</v-btn
-            >
-          </v-col>
-        </v-row>
         <v-row>
           <v-col cols="auto">
             <div class="tip">
               <b>{{ $t("poll_create.tip_title") }}</b
-              >{{ $t("poll_create.tip_text") }}
+              > {{ $t("poll_create.tip_text") }}
             </div>
           </v-col>
         </v-row>
       </v-container>
-    </div>
-  </div>
+    </v-card-actions>
+  </v-card>
+ </v-dialog>
 </template>
 <script>
 import roomInfoMixin from "./roomInfoMixin";
@@ -209,17 +220,4 @@ export default {
 <style lang="scss">
 @import "@/assets/css/chat.scss";
 @import "@/assets/css/components/poll.scss";
-.fullscreen-dialog {
-  background-color: white;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 10;
-  .chat-header {
-    position: static;
-    border: none;
-  }
-}
 </style>
diff --git a/src/components/messages/messageMixin.js b/src/components/messages/messageMixin.js
index ba2a917..1820781 100644
--- a/src/components/messages/messageMixin.js
+++ b/src/components/messages/messageMixin.js
@@ -77,7 +77,6 @@ export default {
       if (relatesTo && relatesTo['m.in_reply_to'])
       {
         const content = this.event.getContent();
-
         const lines = content.body.split('\n').reverse();
         while (lines.length && !lines[0].startsWith('> ')) lines.shift();
         // Reply fallback has a blank line after it, so remove it to prevent leading newline