fix poll checkboxes
This commit is contained in:
Henry Jameson
parent
1adb8236d9
commit
9f1f37ec7e
4 changed files with 101 additions and 112 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
// forgive me father: doing checking the radio/checkboxes
|
||||
// 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}"]`)
|
||||
activateOption (index, value) {
|
||||
let result
|
||||
if (this.poll.multiple) {
|
||||
// Checkboxes, toggle only the clicked one
|
||||
clickedElement.checked = !clickedElement.checked
|
||||
result = this.choices || this.options.map(() => false)
|
||||
} else {
|
||||
// Radio button, uncheck everything and check the clicked one
|
||||
forEach(allElements, element => { element.checked = false })
|
||||
clickedElement.checked = true
|
||||
result = this.options.map(() => false)
|
||||
}
|
||||
this.choices = map(allElements, e => e.checked)
|
||||
result[index] = value
|
||||
this.choices = result
|
||||
},
|
||||
optionId (index) {
|
||||
return `poll${this.poll.id}-${index}`
|
||||
|
|
|
|||
72
src/components/poll/poll.scss
Normal file
72
src/components/poll/poll.scss
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 -->
|
||||
<input
|
||||
v-if="poll.multiple"
|
||||
type="checkbox"
|
||||
class="input -checkbox poll-checkbox"
|
||||
<Checkbox
|
||||
:radio="!poll.multiple"
|
||||
:disabled="loading"
|
||||
:value="index"
|
||||
:model-value="choices[index]"
|
||||
@update:model-value="value => activateOption(index, value)"
|
||||
>
|
||||
<input
|
||||
v-else
|
||||
type="radio"
|
||||
:disabled="loading"
|
||||
:value="index"
|
||||
class="input -radio"
|
||||
>
|
||||
<label class="option-vote">
|
||||
{{ choices[index] }}
|
||||
<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">
|
||||
.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>
|
||||
<style src="./poll.scss" lang="scss"/>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue