Fix selecting an accessibility theme with the keyboard

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
This commit is contained in:
Christoph Wurst 2019-03-22 13:47:40 +01:00
parent eb783d0eb7
commit 6a5f081fc6
No known key found for this signature in database
GPG Key ID: CC42AC2A7F0E56D8
3 changed files with 11 additions and 7 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -4,8 +4,8 @@
<div class="preview-description">
<h3>{{preview.title}}</h3>
<p>{{preview.text}}</p>
<input type="checkbox" class="checkbox" :id="'accessibility-' + preview.id" :checked="selected === preview.id" />
<label :for="'accessibility-' + preview.id" @click="selectItem">{{t('accessibility', 'Enable')}} {{preview.title.toLowerCase()}}</label>
<input type="checkbox" class="checkbox" :id="'accessibility-' + preview.id" v-model="checked" @change="selectItem" />
<label :for="'accessibility-' + preview.id">{{t('accessibility', 'Enable')}} {{preview.title.toLowerCase()}}</label>
</div>
</div>
</template>
@ -14,12 +14,16 @@
export default {
name: 'itemPreview',
props: ['preview', 'selected'],
data() {
return {
checked: this.selected === this.preview.id,
};
},
methods: {
selectItem() {
this.$emit(
'select',
// if we clicked the already selected one: disable it
this.preview.id === this.selected ? false : this.preview.id
this.checked ? this.preview.id : false
);
}
}