diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/File.vue | 17 | ||||
| -rw-r--r-- | src/components/Settings/CroppedLayoutSettings.vue | 48 |
2 files changed, 61 insertions, 4 deletions
diff --git a/src/components/File.vue b/src/components/File.vue index 591a78b9..73c7dffe 100644 --- a/src/components/File.vue +++ b/src/components/File.vue @@ -21,7 +21,10 @@ --> <template> - <a :class="{'file--clear': !loaded}" + <a :class="{ + 'file--clear': !loaded, + 'file--cropped': croppedLayout, + }" class="file" :href="davPath" :aria-label="ariaLabel" @@ -54,10 +57,12 @@ import { generateRemoteUrl, generateUrl } from '@nextcloud/router' import { getCurrentUser } from '@nextcloud/auth' +import UserConfig from '../mixins/UserConfig' + export default { name: 'File', + mixins: [UserConfig], inheritAttrs: false, - props: { item: { type: Object, @@ -85,7 +90,7 @@ export default { return this.item.injected.mime.startsWith('image') }, src() { - return generateUrl(`/core/preview?fileId=${this.item.injected.fileid}&x=${256}&y=${256}&a=false&v=${this.item.injected.etag}`) + return generateUrl(`/core/preview?fileId=${this.item.injected.fileid}&x=${256}&y=${256}&a=${!this.croppedLayout}&v=${this.item.injected.etag}`) }, }, @@ -127,7 +132,11 @@ img { width: 100%; height: 100%; - object-fit: cover; + object-fit: contain; + + .file--cropped & { + object-fit: cover; + } } svg { diff --git a/src/components/Settings/CroppedLayoutSettings.vue b/src/components/Settings/CroppedLayoutSettings.vue new file mode 100644 index 00000000..d31cea05 --- /dev/null +++ b/src/components/Settings/CroppedLayoutSettings.vue @@ -0,0 +1,48 @@ +<!-- + - @copyright Copyright (c) 2019 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> + <div class="section"> + <h2>{{ t('photos', 'Layout') }}</h2> + <p> + <input + id="enable-cropped-layout" + v-model="croppedLayout" + type="checkbox" + class="checkbox" + @change="updateSetting('croppedLayout')"> + <label for="enable-cropped-layout">{{ t('photos', 'Enable cropped layout') }}</label> + </p> + </div> +</template> + +<script> +import UserConfig from '../../mixins/UserConfig' + +export default { + name: 'CroppedLayoutSettings', + + mixins: [ + UserConfig, + ], +} +</script> |