Merge branch 'fixes-roundup5' into shigusegubu-themes3

src/components/attachment/attachment.style.js

@@ -15,7 +15,9 @@ export default {
     },
     {
       component: 'Button',
-      parent: { component: 'Attachment' },
+      parent: {
+        component: 'Attachment'
+      },
       directives: {
         background: '#FFFFFF',
         opacity: 0.5

src/components/button.style.js

@@ -99,7 +99,7 @@ export default {
     {
       state: ['disabled'],
       directives: {
-        background: '$blend(--accent 0.25 --parent)',
+        background: '$blend(--inheritedBackground 0.25 --parent)',
         shadow: ['--buttonDefaultBevel']
       }
     },

src/components/checkbox/checkbox.vue

@@ -1,7 +1,7 @@
 <template>
   <label
     class="checkbox"
-    :class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
+    :class="[{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }, radio ? '-radio' : '-checkbox']"
   >
     <span
       v-if="!!$slots.before"
@@ -19,9 +19,9 @@
       @change="$emit('update:modelValue', $event.target.checked)"
     >
     <i
-      class="input -checkbox checkbox-indicator"
+      class="input checkbox-indicator"
       :aria-hidden="true"
-      :class="{ disabled }"
+      :class="[{ disabled }, radio ? '-radio' : '-checkbox']"
       @transitionend.capture="onTransitionEnd"
     />
     <span
@@ -37,6 +37,7 @@
 <script>
 export default {
   props: [
+    'radio',
     'modelValue',
     'indeterminate',
     'disabled'
@@ -68,6 +69,15 @@ export default {
   display: inline-block;
   min-height: 1.2em;
 
+  &.-radio {
+    .checkbox-indicator {
+      &,
+      &::before {
+        border-radius: 9999px;
+      }
+    }
+  }
+
   &-indicator,
   & .label {
     vertical-align: middle;

src/components/mrf_transparency_panel/mrf_transparency_panel.vue

@@ -238,4 +238,4 @@
 
 <script src="./mrf_transparency_panel.js"></script>
 
-<style src="./mrf_transparency_panel.scss" lang="scss"/>
+<style src="./mrf_transparency_panel.scss" lang="scss" />

src/components/poll/poll.js

@@ -1,6 +1,7 @@
 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 Checkbox from 'components/checkbox/checkbox.vue'
 import { forEach, map } from 'lodash'
 import { usePollsStore } from 'src/stores/polls'
 
@@ -9,7 +10,8 @@ export default {
   props: ['basePoll', 'emoji'],
   components: {
     Timeago,
-    RichContent
+    RichContent,
+    Checkbox
   },
   data () {
     return {
@@ -78,26 +80,15 @@ export default {
     resultTitle (option) {
       return `${option.votes_count}/${this.totalVotesCount} ${this.$t('polls.votes')}`
     },
-    activateOption (index) {
+    activateOption (index, value) {
-      // forgive me father: doing checking the radio/checkboxes
+      let result
-      // in code because of customized input elements need either
-      // a) an extra element for the actual graphic, or b) use a
-      // pseudo element for the label. We use b) which mandates
-      // using "for" and "id" matching which isn't nice when the
-      // same poll appears multiple times on the site (notifs and
-      // timeline for example). With code we can make sure it just
-      // works without altering the pseudo element implementation.
-      const allElements = this.$el.querySelectorAll('input')
-      const clickedElement = this.$el.querySelector(`input[value="${index}"]`)
       if (this.poll.multiple) {
-        // Checkboxes, toggle only the clicked one
+        result = this.choices || this.options.map(() => false)
-        clickedElement.checked = !clickedElement.checked
       } else {
-        // Radio button, uncheck everything and check the clicked one
+        result = this.options.map(() => false)
-        forEach(allElements, element => { element.checked = false })
-        clickedElement.checked = true
       }
-      this.choices = map(allElements, e => e.checked)
+      result[index] = value
+      this.choices = result
     },
     optionId (index) {
       return `poll${this.poll.id}-${index}`

src/components/poll/poll.scss

@@ -0,0 +1,68 @@
+.poll {
+  .votes {
+    display: flex;
+    flex-direction: column;
+    margin: 0 0 0.5em;
+  }
+
+  .poll-option {
+    margin: 0.75em 0.5em;
+
+    .input {
+      line-height: inherit;
+    }
+  }
+
+  .option-result {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    color: var(--textLight);
+  }
+
+  .option-result-label {
+    display: flex;
+    align-items: center;
+    padding: 0.1em 0.25em;
+    z-index: 1;
+    word-break: break-word;
+  }
+
+  .result-percentage {
+    width: 3.5em;
+    flex-shrink: 0;
+  }
+
+  .result-fill {
+    height: 100%;
+    position: absolute;
+    border-radius: var(--roundness);
+    top: 0;
+    left: 0;
+    transition: width 0.5s;
+  }
+
+  input {
+    width: 3.5em;
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  &.loading * {
+    cursor: progress;
+  }
+
+  .poll-vote-button {
+    padding: 0 0.5em;
+    margin-right: 0.5em;
+  }
+
+  .poll-checkbox {
+    display: none;
+  }
+}

src/components/poll/poll.vue

@@ -37,32 +37,21 @@
           :role="poll.multiple ? 'checkbox' : 'radio'"
           :aria-labelledby="`option-vote-${randomSeed}-${index}`"
           :aria-checked="choices[index]"
-          class="input unstyled"
-          @click="activateOption(index)"
         >
-          <!-- TODO: USE CHECKBOX -->
+          <Checkbox
-          <input
+            :radio="!poll.multiple"
-            v-if="poll.multiple"
-            type="checkbox"
-            class="input -checkbox poll-checkbox"
             :disabled="loading"
-            :value="index"
+            :model-value="choices[index]"
+            @update:model-value="value => activateOption(index, value)"
           >
-          <input
+            {{ choices[index] }}
-            v-else
-            type="radio"
-            :disabled="loading"
-            :value="index"
-            class="input -radio"
-          >
-          <label class="option-vote">
             <RichContent
               :id="`option-vote-${randomSeed}-${index}`"
               :html="option.title_html"
               :handle-links="false"
               :emoji="emoji"
             />
-          </label>
+          </Checkbox>
         </div>
       </div>
     </div>
@@ -112,77 +101,4 @@
 
 <script src="./poll.js"></script>
 
-<style lang="scss">
+<style src="./poll.scss" lang="scss"/>
-.poll {
-  .votes {
-    display: flex;
-    flex-direction: column;
-    margin: 0 0 0.5em;
-  }
-
-  .poll-option {
-    margin: 0.75em 0.5em;
-
-    .input {
-      line-height: inherit;
-    }
-  }
-
-  .option-result {
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    position: relative;
-    color: var(--textLight);
-  }
-
-  .option-result-label {
-    display: flex;
-    align-items: center;
-    padding: 0.1em 0.25em;
-    z-index: 1;
-    word-break: break-word;
-  }
-
-  .result-percentage {
-    width: 3.5em;
-    flex-shrink: 0;
-  }
-
-  .result-fill {
-    height: 100%;
-    position: absolute;
-    border-radius: var(--roundness);
-    top: 0;
-    left: 0;
-    transition: width 0.5s;
-  }
-
-  .option-vote {
-    display: flex;
-    align-items: center;
-  }
-
-  input {
-    width: 3.5em;
-  }
-
-  .footer {
-    display: flex;
-    align-items: center;
-  }
-
-  &.loading * {
-    cursor: progress;
-  }
-
-  .poll-vote-button {
-    padding: 0 0.5em;
-    margin-right: 0.5em;
-  }
-
-  .poll-checkbox {
-    display: none;
-  }
-}
-</style>

src/components/status_action_buttons/status_action_buttons.scss

@@ -3,7 +3,7 @@
 .StatusActionButtons {
   .quick-action-buttons {
     display: grid;
-    grid-template-columns: repeat(auto-fill, 4em);
+    grid-template-columns: repeat(auto-fill, minmax(10%, 3em));
     grid-auto-flow: row dense;
     grid-auto-rows: 1fr;
     grid-gap: 1.25em 1em;

src/components/status_action_buttons/status_action_buttons.vue

@@ -87,7 +87,7 @@
                 :func-arg="funcArg"
                 :get-class="getClass"
                 :get-component="getComponent"
-                :outerClose="close"
+                :outer-close="close"
                 :do-action="doAction"
                 @interacted="e => $emit('interacted')"
               />

src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue

@@ -14,7 +14,10 @@
           class="input menu-checkbox -radio"
           :class="{ 'menu-checkbox-checked': status.bookmark_folder_id == folder.id }"
         />
-        <StillImage :src="folder.emoji_url" class="emoji" />
+        <StillImage
+          :src="folder.emoji_url"
+          class="emoji"
+        />
         {{ ' ' + folder.name }}
       </button>
     </div>

src/services/theme_data/theme_data_3.service.js

@@ -516,7 +516,7 @@ export const init = ({
         .filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c))
     } else if (liteMode) {
       validInnerComponents = (component.validInnerComponentsLite || component.validInnerComponents || [])
-    } else if (component.name === 'Root') {
+    } else if (component.name === 'Root' || component.states != null) {
       validInnerComponents = component.validInnerComponents || []
     } else {
       validInnerComponents = component