mirror of https://github.com/nextcloud/server.git
chore(files): add Headers, remove legacy methods and cleanup
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>pull/39808/head
John Molakvoæ
10 months ago
parent
998b3a2581
commit
410f58e43e
@ -0,0 +1,213 @@
|
||||
<!--
|
||||
- @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
|
||||
-
|
||||
- @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||
-
|
||||
- @license GNU AGPL version 3 or any later version
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-
|
||||
-->
|
||||
<template>
|
||||
<tr class="files-list__row-head">
|
||||
<th class="files-list__column files-list__row-checkbox">
|
||||
<NcCheckboxRadioSwitch v-bind="selectAllBind" @update:checked="onToggleAll" />
|
||||
</th>
|
||||
|
||||
<!-- Actions multiple if some are selected -->
|
||||
<FilesListTableHeaderActions v-if="!isNoneSelected"
|
||||
:current-view="currentView"
|
||||
:selected-nodes="selectedNodes" />
|
||||
|
||||
<!-- Columns display -->
|
||||
<template v-else>
|
||||
<!-- Link to file -->
|
||||
<th class="files-list__column files-list__row-name files-list__column--sortable"
|
||||
@click.stop.prevent="toggleSortBy('basename')">
|
||||
<!-- Icon or preview -->
|
||||
<span class="files-list__row-icon" />
|
||||
|
||||
<!-- Name -->
|
||||
<FilesListTableHeaderButton :name="t('files', 'Name')" mode="basename" />
|
||||
</th>
|
||||
|
||||
<!-- Actions -->
|
||||
<th class="files-list__row-actions" />
|
||||
|
||||
<!-- Size -->
|
||||
<th v-if="isSizeAvailable"
|
||||
:class="{'files-list__column--sortable': isSizeAvailable}"
|
||||
class="files-list__column files-list__row-size">
|
||||
<FilesListTableHeaderButton :name="t('files', 'Size')" mode="size" />
|
||||
</th>
|
||||
|
||||
<!-- Mtime -->
|
||||
<th v-if="isMtimeAvailable"
|
||||
:class="{'files-list__column--sortable': isMtimeAvailable}"
|
||||
class="files-list__column files-list__row-mtime">
|
||||
<FilesListTableHeaderButton :name="t('files', 'Modified')" mode="mtime" />
|
||||
</th>
|
||||
|
||||
<!-- Custom views columns -->
|
||||
<th v-for="column in columns"
|
||||
:key="column.id"
|
||||
:class="classForColumn(column)">
|
||||
<FilesListTableHeaderButton v-if="!!column.sort" :name="column.title" :mode="column.id" />
|
||||
<span v-else>
|
||||
{{ column.title }}
|
||||
</span>
|
||||
</th>
|
||||
</template>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { translate } from '@nextcloud/l10n'
|
||||
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
|
||||
import Vue from 'vue'
|
||||
|
||||
import { useFilesStore } from '../store/files.ts'
|
||||
import { useSelectionStore } from '../store/selection.ts'
|
||||
import FilesListTableHeaderActions from './FilesListTableHeaderActions.vue'
|
||||
import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
|
||||
import filesSortingMixin from '../mixins/filesSorting.ts'
|
||||
import logger from '../logger.js'
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'FilesListTableHeader',
|
||||
|
||||
components: {
|
||||
FilesListTableHeaderButton,
|
||||
NcCheckboxRadioSwitch,
|
||||
FilesListTableHeaderActions,
|
||||
},
|
||||
|
||||
mixins: [
|
||||
filesSortingMixin,
|
||||
],
|
||||
|
||||
props: {
|
||||
isMtimeAvailable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isSizeAvailable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
nodes: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
filesListWidth: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
|
||||
setup() {
|
||||
const filesStore = useFilesStore()
|
||||
const selectionStore = useSelectionStore()
|
||||
return {
|
||||
filesStore,
|
||||
selectionStore,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
currentView() {
|
||||
return this.$navigation.active
|
||||
},
|
||||
|
||||
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 = this.isNoneSelected || this.isSomeSelected
|
||||
? this.t('files', 'Select all')
|
||||
: this.t('files', 'Unselect all')
|
||||
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: {
|
||||
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.fileid.toString())
|
||||
logger.debug('Added all nodes to selection', { selection })
|
||||
this.selectionStore.setLastIndex(null)
|
||||
this.selectionStore.set(selection)
|
||||
} else {
|
||||
logger.debug('Cleared selection')
|
||||
this.selectionStore.reset()
|
||||
}
|
||||
},
|
||||
|
||||
t: translate,
|
||||
},
|
||||
})
|
||||
</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>
|
||||
@ -1,55 +0,0 @@
|
||||
/**
|
||||
* @copyright Copyright (c) 2022 John Molakvoæ <skjnldsv@protonmail.com>
|
||||
*
|
||||
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||
*
|
||||
* @license AGPL-3.0-or-later
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
import logger from '../logger.js'
|
||||
|
||||
/**
|
||||
* Fetch and register the legacy files views
|
||||
*/
|
||||
export default function() {
|
||||
const legacyViews = Object.values(loadState('files', 'navigation', {}))
|
||||
|
||||
if (legacyViews.length > 0) {
|
||||
logger.debug('Legacy files views detected. Processing...', legacyViews)
|
||||
legacyViews.forEach(view => {
|
||||
registerLegacyView(view)
|
||||
if (view.sublist) {
|
||||
view.sublist.forEach(subview => registerLegacyView({ ...subview, parent: view.id }))
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const registerLegacyView = function({ id, name, order, icon, parent, classes = '', expanded, params }) {
|
||||
OCP.Files.Navigation.register({
|
||||
id,
|
||||
name,
|
||||
order,
|
||||
params,
|
||||
parent,
|
||||
expanded: expanded === true,
|
||||
iconClass: icon ? `icon-${icon}` : 'nav-icon-' + id,
|
||||
legacy: true,
|
||||
sticky: classes.includes('pinned'),
|
||||
})
|
||||
}
|
||||
Loading…
Reference in New Issue