From 2ff1c00f556633c9c36a9328d4eb77eba2dd25e7 Mon Sep 17 00:00:00 2001 From: John Molakvoæ Date: Sun, 5 Feb 2023 11:22:50 +0100 Subject: fix(files_trashbin): previews crop support MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ --- apps/files/src/components/BreadCrumbs.vue | 20 +++++++++-- apps/files/src/components/FileEntry.vue | 48 ++++++++++++++++++++++++++ apps/files/src/components/FilesListHeader.vue | 3 ++ apps/files/src/components/FilesListVirtual.vue | 4 ++- apps/files/src/mixins/fileslist-row.scss | 44 +++++++++++++++++------ 5 files changed, 105 insertions(+), 14 deletions(-) (limited to 'apps/files/src') diff --git a/apps/files/src/components/BreadCrumbs.vue b/apps/files/src/components/BreadCrumbs.vue index 7d7ebc7f1b3..8da486392f5 100644 --- a/apps/files/src/components/BreadCrumbs.vue +++ b/apps/files/src/components/BreadCrumbs.vue @@ -4,7 +4,8 @@ + v-bind="section" + @click="onClick(section.to)" /> @@ -32,7 +33,9 @@ export default Vue.extend({ computed: { dirs() { const cumulativePath = (acc) => (value) => (acc += `${value}/`) - return ['/', ...this.path.split('/').filter(Boolean).map(cumulativePath('/'))] + const paths = this.path.split('/').filter(Boolean).map(cumulativePath('/')) + // Strip away trailing slash + return ['/', ...paths.map(path => path.replace(/^(.+)\/$/, '$1'))] }, sections() { @@ -46,6 +49,15 @@ export default Vue.extend({ }) }, }, + + methods: { + onClick(to) { + debugger + if (to?.query?.dir === this.$route.query.dir) { + alert('You are already here!') + } + }, + }, }) @@ -54,6 +66,10 @@ export default Vue.extend({ // Take as much space as possible flex: 1 1 100% !important; width: 100%; + + ::v-deep a { + cursor: pointer !important; + } } diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue index 204976061df..9f1df025e1f 100644 --- a/apps/files/src/components/FileEntry.vue +++ b/apps/files/src/components/FileEntry.vue @@ -31,6 +31,10 @@ + + @@ -39,6 +43,20 @@ {{ displayName }} + + + + + + {{ t('files', 'Rename') }} + + + + {{ t('files', 'Delete') }} + + + + @@ -48,12 +66,21 @@ import { Fragment } from 'vue-fragment' import { join } from 'path' import { translate } from '@nextcloud/l10n' import FolderIcon from 'vue-material-design-icons/Folder.vue' +import TrashCan from 'vue-material-design-icons/TrashCan.vue' +import Pencil from 'vue-material-design-icons/Pencil.vue' +import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' +import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' import Vue from 'vue' import logger from '../logger' import { useSelectionStore } from '../store/selection' import { useFilesStore } from '../store/files' +import { loadState } from '@nextcloud/initial-state' + +// TODO: move to store +// TODO: watch 'files:config:updated' event +const userConfig = loadState('files', 'config', {}) export default Vue.extend({ name: 'FileEntry', @@ -61,7 +88,11 @@ export default Vue.extend({ components: { FolderIcon, Fragment, + NcActionButton, + NcActions, NcCheckboxRadioSwitch, + Pencil, + TrashCan, }, props: { @@ -84,6 +115,12 @@ export default Vue.extend({ } }, + data() { + return { + userConfig, + } + }, + computed: { dir() { // Remove any trailing slash but leave root slash @@ -123,6 +160,17 @@ export default Vue.extend({ this.selectionStore.set(selection) }, }, + + previewUrl() { + try { + const url = new URL(window.location.origin + this.source.attributes.previewUrl) + const cropping = this.userConfig?.crop_image_previews === true + url.searchParams.set('a', cropping ? '1' : '0') + return url.href + } catch (e) { + return null + } + }, }, methods: { diff --git a/apps/files/src/components/FilesListHeader.vue b/apps/files/src/components/FilesListHeader.vue index c5593b90dfd..8376a30d55c 100644 --- a/apps/files/src/components/FilesListHeader.vue +++ b/apps/files/src/components/FilesListHeader.vue @@ -32,6 +32,9 @@ {{ t('files', 'Name') }} + + + diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue index 081875ecf0d..8193c3bed1b 100644 --- a/apps/files/src/components/FilesListVirtual.vue +++ b/apps/files/src/components/FilesListVirtual.vue @@ -125,7 +125,9 @@ export default Vue.extend({ background-color: var(--color-main-background); } - thead, .files-list__row { + tr { + display: flex; + align-items: center; border-bottom: 1px solid var(--color-border); } } diff --git a/apps/files/src/mixins/fileslist-row.scss b/apps/files/src/mixins/fileslist-row.scss index 9b0c3197b76..9ebd8f00b36 100644 --- a/apps/files/src/mixins/fileslist-row.scss +++ b/apps/files/src/mixins/fileslist-row.scss @@ -20,25 +20,29 @@ * */ td, th { + display: flex; + align-items: center; + flex: 0 0 var(--row-height); + justify-content: center; + width: var(--row-height); height: var(--row-height); - vertical-align: middle; - padding: 0px; + padding: 0; border: none; } .files-list__row-checkbox { width: var(--row-height); &::v-deep .checkbox-radio-switch { - --icon-size: var(--checkbox-size); - display: flex; justify-content: center; + --icon-size: var(--checkbox-size); + label.checkbox-radio-switch__label { - margin: 0; - height: var(--clickable-area); width: var(--clickable-area); - padding: calc((var(--clickable-area) - var(--checkbox-size)) / 2) + height: var(--clickable-area); + margin: 0; + padding: calc((var(--clickable-area) - var(--checkbox-size)) / 2); } .checkbox-radio-switch__icon { @@ -48,16 +52,34 @@ td, th { } .files-list__row-icon { - // Remove left padding to look nicer with the checkbox - // => ico preview size + one checkbox td padding - width: calc(var(--icon-preview-size) + var(--checkbox-padding)); - padding-right: var(--checkbox-padding); + flex: 0 0 var(--icon-preview-size); + justify-content: left; + // Show same padding as the checkbox right padding for visual balance + margin-right: var(--checkbox-padding); color: var(--color-primary-element); + & > span { justify-content: flex-start; } + &::v-deep svg { width: var(--icon-preview-size); height: var(--icon-preview-size); } + + &-preview { + width: var(--icon-preview-size); + height: var(--icon-preview-size); + // Center and contain the preview + background-position: center; + background-repeat: no-repeat; + background-size: contain; + border-radius: var(--border-radius); + overflow: hidden; + } +} + +.files-list__row-name { + flex: 1 1 100%; + justify-content: left; } -- cgit v1.2.3