mirror of
https://github.com/nextcloud/server.git
synced 2026-02-27 03:50:37 -05:00
fix(files): Fix checkbox state semantics
Signed-off-by: Christopher Ng <chrng8@gmail.com>
This commit is contained in:
parent
6f1393d34b
commit
1b0eb2bebd
4 changed files with 23 additions and 17 deletions
|
|
@ -32,10 +32,10 @@
|
|||
<span v-if="source.attributes.failed" class="files-list__row--failed" />
|
||||
|
||||
<!-- Checkbox -->
|
||||
<FileEntryCheckbox :display-name="displayName"
|
||||
:fileid="fileid"
|
||||
<FileEntryCheckbox :fileid="fileid"
|
||||
:is-loading="isLoading"
|
||||
:nodes="nodes" />
|
||||
:nodes="nodes"
|
||||
:source="source" />
|
||||
|
||||
<!-- Link to file -->
|
||||
<td class="files-list__row-name" data-cy-files-list-row-name>
|
||||
|
|
|
|||
|
|
@ -24,14 +24,14 @@
|
|||
@keyup.esc.exact="resetSelection">
|
||||
<NcLoadingIcon v-if="isLoading" />
|
||||
<NcCheckboxRadioSwitch v-else
|
||||
:aria-label="t('files', 'Select the row for {displayName}', { displayName })"
|
||||
:aria-label="ariaLabel"
|
||||
:checked="isSelected"
|
||||
@update:checked="onSelectionChange" />
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Node } from '@nextcloud/files'
|
||||
import { Node, FileType } from '@nextcloud/files'
|
||||
import { translate as t } from '@nextcloud/l10n'
|
||||
import Vue, { PropType } from 'vue'
|
||||
|
||||
|
|
@ -51,10 +51,6 @@ export default Vue.extend({
|
|||
},
|
||||
|
||||
props: {
|
||||
displayName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
fileid: {
|
||||
type: String,
|
||||
required: true,
|
||||
|
|
@ -67,6 +63,10 @@ export default Vue.extend({
|
|||
type: Array as PropType<Node[]>,
|
||||
required: true,
|
||||
},
|
||||
source: {
|
||||
type: Object as PropType<Node>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
setup() {
|
||||
|
|
@ -88,6 +88,14 @@ export default Vue.extend({
|
|||
index() {
|
||||
return this.nodes.findIndex((node: Node) => node.fileid === parseInt(this.fileid))
|
||||
},
|
||||
isFile() {
|
||||
return this.source.type === FileType.File
|
||||
},
|
||||
ariaLabel() {
|
||||
return this.isFile
|
||||
? t('files', 'Toggle selection for file "{displayName}"', { displayName: this.source.basename })
|
||||
: t('files', 'Toggle selection for folder "{displayName}"', { displayName: this.source.basename })
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -37,10 +37,10 @@
|
|||
<span v-if="source.attributes.failed" class="files-list__row--failed" />
|
||||
|
||||
<!-- Checkbox -->
|
||||
<FileEntryCheckbox :display-name="displayName"
|
||||
:fileid="fileid"
|
||||
<FileEntryCheckbox :fileid="fileid"
|
||||
:is-loading="isLoading"
|
||||
:nodes="nodes" />
|
||||
:nodes="nodes"
|
||||
:source="source" />
|
||||
|
||||
<!-- Link to file -->
|
||||
<td class="files-list__row-name" data-cy-files-list-row-name>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { translate } from '@nextcloud/l10n'
|
||||
import { translate as t } from '@nextcloud/l10n'
|
||||
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
|
||||
import Vue from 'vue'
|
||||
|
||||
|
|
@ -142,9 +142,7 @@ export default Vue.extend({
|
|||
},
|
||||
|
||||
selectAllBind() {
|
||||
const label = this.isNoneSelected || this.isSomeSelected
|
||||
? this.t('files', 'Select all')
|
||||
: this.t('files', 'Unselect all')
|
||||
const label = t('files', 'Toggle selection for all files and folders')
|
||||
return {
|
||||
'aria-label': label,
|
||||
checked: this.isAllSelected,
|
||||
|
|
@ -203,7 +201,7 @@ export default Vue.extend({
|
|||
this.selectionStore.reset()
|
||||
},
|
||||
|
||||
t: translate,
|
||||
t,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue