From 2ff1c00f556633c9c36a9328d4eb77eba2dd25e7 Mon Sep 17 00:00:00 2001 From: =?utf8?q?John=20Molakvo=C3=A6?= Date: Sun, 5 Feb 2023 11:22:50 +0100 Subject: [PATCH] fix(files_trashbin): previews crop support MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 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 ++ .../files/src/components/FilesListVirtual.vue | 4 +- apps/files/src/mixins/fileslist-row.scss | 44 ++++++++++++----- .../lib/Controller/PreviewController.php | 7 +-- apps/files_trashbin/src/services/trashbin.ts | 5 +- 7 files changed, 113 insertions(+), 18 deletions(-) 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; } diff --git a/apps/files_trashbin/lib/Controller/PreviewController.php b/apps/files_trashbin/lib/Controller/PreviewController.php index 22ca56d8f36..652570dccd7 100644 --- a/apps/files_trashbin/lib/Controller/PreviewController.php +++ b/apps/files_trashbin/lib/Controller/PreviewController.php @@ -89,8 +89,9 @@ class PreviewController extends Controller { */ public function getPreview( int $fileId = -1, - int $x = 128, - int $y = 128 + int $x = 32, + int $y = 32, + bool $a = false, ) { if ($fileId === -1 || $x === 0 || $y === 0) { return new DataResponse([], Http::STATUS_BAD_REQUEST); @@ -118,7 +119,7 @@ class PreviewController extends Controller { $mimeType = $this->mimeTypeDetector->detectPath($file->getName()); } - $f = $this->previewManager->getPreview($file, $x, $y, true, IPreview::MODE_FILL, $mimeType); + $f = $this->previewManager->getPreview($file, $x, $y, $a, IPreview::MODE_FILL, $mimeType); $response = new Http\FileDisplayResponse($f, Http::STATUS_OK, ['Content-Type' => $f->getMimeType()]); // Cache previews for 24H diff --git a/apps/files_trashbin/src/services/trashbin.ts b/apps/files_trashbin/src/services/trashbin.ts index 2070cfc92b0..2be4c39dbfc 100644 --- a/apps/files_trashbin/src/services/trashbin.ts +++ b/apps/files_trashbin/src/services/trashbin.ts @@ -22,7 +22,7 @@ /* eslint-disable */ import { getCurrentUser } from '@nextcloud/auth' import { File, Folder, parseWebdavPermissions } from '@nextcloud/files' -import { generateRemoteUrl } from '@nextcloud/router' +import { generateRemoteUrl, generateUrl } from '@nextcloud/router' import type { FileStat, ResponseDataDetailed } from 'webdav' import type { ContentsWithRoot } from '../../../files/src/services/Navigation' @@ -49,9 +49,11 @@ const data = ` ` + const resultToNode = function(node: FileStat): File | Folder { const permissions = parseWebdavPermissions(node.props?.permissions) const owner = getCurrentUser()?.uid as string + const previewUrl = generateUrl('/apps/files_trashbin/preview?fileId={fileid}', node.props) const nodeData = { id: node.props?.fileid as number || 0, @@ -67,6 +69,7 @@ const resultToNode = function(node: FileStat): File | Folder { ...node.props, // Override displayed name on the list displayName: node.props?.['trashbin-filename'], + previewUrl, }, } -- 2.39.5