aboutsummaryrefslogtreecommitdiffstats
path: root/apps/files/src/components/FilesListTableHeader.vue
blob: 723dd574da89e65c7b154ee5dbb0e11a5ba5ba9e (plain) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-w
<!--
  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<tr class="files-list__row-head">
		<th class="files-list__column files-list__row-checkbox"
			@keyup.esc.exact="resetSelection">
			<NcCheckboxRadioSwitch v-bind="selectAllBind" @update:checked="onToggleAll" />
		</th>

		<!-- Columns display -->

		<!-- Link to file -->
		<th class="files-list__column files-list__row-name files-list__column--sortable"
			:aria-sort="ariaSortForMode('basename')">
			<!-- Icon or preview -->
			<span class="files-list__row-icon" />

			<!-- Name -->
			<FilesListTableHeaderButto
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-14 20:44:37 +0000
lumn files-list__row-size" :class="{ 'files-list__column--sortable': isSizeAvailable }" :aria-sort="ariaSortForMode('size')"> <FilesListTableHeaderButton :name="t('files', 'Size')" mode="size" /> </th> <!-- Mtime --> <th v-if="isMtimeAvailable" class="files-list__column files-list__row-mtime" :class="{ 'files-list__column--sortable': isMtimeAvailable }" :aria-sort="ariaSortForMode('mtime')"> <FilesListTableHeaderButton :name="t('files', 'Modified')" mode="mtime" /> </th> <!-- Custom views columns --> <th v-for="column in columns" :key="column.id" :class="classForColumn(column)" :aria-sort="ariaSortForMode(column.id)"> <FilesListTableHeaderButton v-if="!!column.sort" :name="column.title" :mode="column.id" /> <span v-else> {{ column.title }} </span> </th> </tr> </template> <script lang="ts"> import type { Node } from '@nextcloud/files' import type { PropType } from 'vue' import type { FileSource } from '../types.ts' import { translate as t } from '@nextcloud/l10n' import { defineComponent } from 'vue' import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue' import { useNavigation } from '../composables/useNavigation' import { useFilesStore } from '../store/files.ts' import { useSelectionStore } from '../store/selection.ts' import filesSortingMixin from '../mixins/filesSorting.ts' import logger from '../logger.js' export default defineComponent({ name: 'FilesListTableHeader', components: { FilesListTableHeaderButton, NcCheckboxRadioSwitch, }, mixins: [ filesSortingMixin, ], props: { isMtimeAvailable: { type: Boolean, default: false, }, isSizeAvailable: { type: Boolean, default: false, }, nodes: { type: Array as PropType<Node[]>, required: true, }, filesListWidth: { type: Number, default: 0, }, }, setup() { const filesStore = useFilesStore() const selectionStore = useSelectionStore() const { currentView } = useNavigation() return { filesStore, selectionStore, currentView, } }, computed: { columns() { // Hide columns if the list is too small if (this.filesListWidth < 512) { return [] } return this.currentView?.columns || [] }, dir() { // Remove any trailing slash but leave root slash return (this.$route?.query?.dir || '/').replace(/^(.+)\/$/, '$1') }, selectAllBind() { const label = t('files', 'Toggle selection for all files and folders') return { 'aria-label': label, checked: this.isAllSelected, indeterminate: this.isSomeSelected, title: label, } }, selectedNodes() { return this.selectionStore.selected }, isAllSelected() { return this.selectedNodes.length === this.nodes.length }, isNoneSelected() { return this.selectedNodes.length === 0 }, isSomeSelected() { return !this.isAllSelected && !this.isNoneSelected }, }, methods: { ariaSortForMode(mode: string): ARIAMixin['ariaSort'] { if (this.sortingMode === mode) { return this.isAscSorting ? 'ascending' : 'descending' } return null }, classForColumn(column) { return { 'files-list__column': true, 'files-list__column--sortable': !!column.sort, 'files-list__row-column-custom': true, [`files-list__row-${this.currentView?.id}-${column.id}`]: true, } }, onToggleAll(selected) { if (selected) { const selection = this.nodes.map(node => node.source).filter(Boolean) as FileSource[] logger.debug('Added all nodes to selection', { selection }) this.selectionStore.setLastIndex(null) this.selectionStore.set(selection) } else { logger.debug('Cleared selection') this.selectionStore.reset() } }, resetSelection() { this.selectionStore.reset() }, t, }, }) </script> <style scoped lang="scss"> .files-list__column { user-select: none; // Make sure the cell colors don't apply to column headers color: var(--color-text-maxcontrast) !important; &--sortable { cursor: pointer; } } </style>
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-14 20:44:38 +0000