Merge remote-tracking branch 'origin/develop' into migrate/vuex-to-pinia

src/components/poll/poll.js

@@ -1,4 +1,5 @@
 import Timeago from 'components/timeago/timeago.vue'
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import RichContent from 'components/rich_content/rich_content.jsx'
 import { forEach, map } from 'lodash'
 import { usePollsStore } from '../../stores/polls'
@@ -14,7 +15,7 @@ export default {
     return {
       loading: false,
       choices: [],
-      randomSeed: `${Math.random()}`.replace('.', '-')
+      randomSeed: genRandomSeed()
     }
   },
   created () {
@@ -38,7 +39,7 @@ export default {
       return (this.poll && this.poll.options) || []
     },
     expiresAt () {
-      return (this.poll && this.poll.expires_at) || 0
+      return (this.poll && this.poll.expires_at) || null
     },
     expired () {
       return (this.poll && this.poll.expired) || false

src/components/poll/poll.vue

@@ -37,12 +37,14 @@
           :role="poll.multiple ? 'checkbox' : 'radio'"
           :aria-labelledby="`option-vote-${randomSeed}-${index}`"
           :aria-checked="choices[index]"
+          class="input unstyled"
           @click="activateOption(index)"
         >
+          <!-- TODO: USE CHECKBOX -->
           <input
             v-if="poll.multiple"
             type="checkbox"
-            class="poll-checkbox"
+            class="input -checkbox poll-checkbox"
             :disabled="loading"
             :value="index"
           >
@@ -51,6 +53,7 @@
             type="radio"
             :disabled="loading"
             :value="index"
+            class="input -radio"
           >
           <label class="option-vote">
             <RichContent
@@ -73,15 +76,25 @@
       >
         {{ $t('polls.vote') }}
       </button>
+      <span
+        v-if="poll.pleroma?.non_anonymous"
+        :title="$t('polls.non_anonymous_title')"
+      >
+        {{ $t('polls.non_anonymous') }}
+        &nbsp;·&nbsp;
+      </span>
       <div class="total">
         <template v-if="typeof poll.voters_count === 'number'">
-          {{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }}&nbsp;·&nbsp;
+          {{ $t("polls.people_voted_count", { count: poll.voters_count }, poll.voters_count) }}
         </template>
         <template v-else>
-          {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }}&nbsp;·&nbsp;
+          {{ $t("polls.votes_count", { count: poll.votes_count }, poll.votes_count) }}
         </template>
+        <span v-if="expiresAt !== null">
+          &nbsp;·&nbsp;
+        </span>
       </div>
-      <span>
+      <span v-if="expiresAt !== null">
         <i18n-t
           scope="global"
           :keypath="expired ? 'polls.expired' : 'polls.expires_in'"
@@ -100,8 +113,6 @@
 <script src="./poll.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .poll {
   .votes {
     display: flex;
@@ -111,6 +122,10 @@
 
   .poll-option {
     margin: 0.75em 0.5em;
+
+    .input {
+      line-height: inherit;
+    }
   }
 
   .option-result {
@@ -118,8 +133,7 @@
     display: flex;
     flex-direction: row;
     position: relative;
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
+    color: var(--textLight);
   }
 
   .option-result-label {
@@ -138,12 +152,7 @@
   .result-fill {
     height: 100%;
     position: absolute;
-    color: $fallback--text;
-    color: var(--pollText, $fallback--text);
-    background-color: $fallback--lightBg;
-    background-color: var(--poll, $fallback--lightBg);
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-radius: var(--roundness);
     top: 0;
     left: 0;
     transition: width 0.5s;

src/components/poll/poll_form.js

@@ -1,5 +1,5 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
-import { uniq } from 'lodash'
+import { pollFallback } from 'src/services/poll/poll.service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import Select from '../select/select.vue'
 import {
@@ -17,14 +17,33 @@ export default {
     Select
   },
   name: 'PollForm',
-  props: ['visible'],
-  data: () => ({
-    pollType: 'single',
-    options: ['', ''],
-    expiryAmount: 10,
-    expiryUnit: 'minutes'
-  }),
+  props: {
+    visible: {},
+    params: {
+      type: Object,
+      required: true
+    }
+  },
   computed: {
+    pollType: {
+      get () { return pollFallback(this.params, 'pollType') },
+      set (newVal) { this.params.pollType = newVal }
+    },
+    options () {
+      const hasOptions = !!this.params.options
+      if (!hasOptions) {
+        this.params.options = pollFallback(this.params, 'options')
+      }
+      return this.params.options
+    },
+    expiryAmount: {
+      get () { return pollFallback(this.params, 'expiryAmount') },
+      set (newVal) { this.params.expiryAmount = newVal }
+    },
+    expiryUnit: {
+      get () { return pollFallback(this.params, 'expiryUnit') },
+      set (newVal) { this.params.expiryUnit = newVal }
+    },
     pollLimits () {
       return this.$store.state.instance.pollLimits
     },
@@ -89,7 +108,6 @@ export default {
     deleteOption (index, event) {
       if (this.options.length > 2) {
         this.options.splice(index, 1)
-        this.updatePollToParent()
       }
     },
     convertExpiryToUnit (unit, amount) {
@@ -104,24 +122,6 @@ export default {
         Math.max(this.minExpirationInCurrentUnit, this.expiryAmount)
       this.expiryAmount =
         Math.min(this.maxExpirationInCurrentUnit, this.expiryAmount)
-      this.updatePollToParent()
-    },
-    updatePollToParent () {
-      const expiresIn = this.convertExpiryFromUnit(
-        this.expiryUnit,
-        this.expiryAmount
-      )
-
-      const options = uniq(this.options.filter(option => option !== ''))
-      if (options.length < 2) {
-        this.$emit('update-poll', { error: this.$t('polls.not_enough_options') })
-        return
-      }
-      this.$emit('update-poll', {
-        options,
-        multiple: this.pollType === 'multiple',
-        expiresIn
-      })
     }
   }
 }

src/components/poll/poll_form.vue

@@ -13,7 +13,7 @@
           :id="`poll-${index}`"
           v-model="options[index]"
           size="1"
-          class="poll-option-input"
+          class="input poll-option-input"
           type="text"
           :placeholder="$t('polls.option')"
           :maxlength="maxLength"
@@ -67,7 +67,7 @@
         <input
           v-model="expiryAmount"
           type="number"
-          class="expiry-amount hide-number-spinner"
+          class="input expiry-amount hide-number-spinner"
           :min="minExpirationInCurrentUnit"
           :max="maxExpirationInCurrentUnit"
           @change="expiryAmountChange"
@@ -84,7 +84,7 @@
             :key="unit"
             :value="unit"
           >
-            {{ $tc(`time.unit.${unit}_short`, expiryAmount, ['']) }}
+            {{ $t(`time.unit.${unit}_short`, [''], expiryAmount) }}
           </option>
         </Select>
       </div>
@@ -95,8 +95,6 @@
 <script src="./poll_form.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .poll-form {
   display: flex;
   flex-direction: column;

src/components/poll/poll_graph.style.js

@@ -0,0 +1,12 @@
+export default {
+  name: 'PollGraph',
+  selector: '.result-fill',
+  defaultRules: [
+    {
+      directives: {
+        background: '--accent',
+        opacity: 0.5
+      }
+    }
+  ]
+}