diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/Photos.vue | 13 | ||||
| -rw-r--r-- | src/components/File.vue | 17 | ||||
| -rw-r--r-- | src/components/Settings/CroppedLayoutSettings.vue | 48 | ||||
| -rw-r--r-- | src/mixins/GridConfig.js | 2 | ||||
| -rw-r--r-- | src/mixins/UserConfig.js | 64 |
5 files changed, 138 insertions, 6 deletions
diff --git a/src/Photos.vue b/src/Photos.vue index d812132e..f9598fa8 100644 --- a/src/Photos.vue +++ b/src/Photos.vue @@ -39,6 +39,11 @@ :title="t('photos', 'Locations')" icon="icon-address" /> </template> + <template #footer> + <AppNavigationSettings :title="t('photos', 'Settings')"> + <CroppedLayoutSettings /> + </AppNavigationSettings> + </template> </AppNavigation> <AppContent :class="{ 'icon-loading': loading }"> <router-view v-show="!loading" :loading.sync="loading" /> @@ -55,23 +60,29 @@ </template> <script> +import { getCurrentUser } from '@nextcloud/auth' + import Content from '@nextcloud/vue/dist/Components/Content' import AppContent from '@nextcloud/vue/dist/Components/AppContent' import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation' import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem' +import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings' + +import CroppedLayoutSettings from './components/Settings/CroppedLayoutSettings' import svgplaceholder from './assets/file-placeholder.svg' import imgplaceholder from './assets/image.svg' import videoplaceholder from './assets/video.svg' import isMapsInstalled from './services/IsMapsInstalled' -import { getCurrentUser } from '@nextcloud/auth' export default { name: 'Photos', components: { Content, + CroppedLayoutSettings, AppContent, AppNavigation, AppNavigationItem, + AppNavigationSettings, }, data() { return { 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> diff --git a/src/mixins/GridConfig.js b/src/mixins/GridConfig.js index e7b18817..2663d854 100644 --- a/src/mixins/GridConfig.js +++ b/src/mixins/GridConfig.js @@ -36,7 +36,7 @@ export default { getGridConfig.$on('changed', val => { this.gridConfig = val }) - console.debug('Current grid config', getGridConfig.gridConfig) + console.debug(`[${appName}]`, 'Grid config', Object.assign({}, getGridConfig.gridConfig)) this.gridConfig = getGridConfig.gridConfig }, diff --git a/src/mixins/UserConfig.js b/src/mixins/UserConfig.js new file mode 100644 index 00000000..efa123dc --- /dev/null +++ b/src/mixins/UserConfig.js @@ -0,0 +1,64 @@ +/** + * @copyright Copyright (c) 2020 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/>. + * + */ + +import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus' +import { generateUrl } from '@nextcloud/router' +import { loadState } from '@nextcloud/initial-state' +import axios from '@nextcloud/axios' + +const eventName = 'photos:user-config-changed' + +export default { + data() { + const croppedLayoutLocalStorage = localStorage.getItem('photos:croppedLayout') + return { + croppedLayout: croppedLayoutLocalStorage !== null + ? croppedLayoutLocalStorage === 'true' + : loadState('photos', 'croppedLayout') === 'true', + } + }, + + created() { + subscribe(eventName, this.updateLocalSetting) + }, + + beforeDestroy() { + unsubscribe(eventName, this.updateLocalSetting) + }, + + methods: { + updateLocalSetting({ setting, value }) { + this[setting] = value + }, + updateSetting(setting) { + const value = this[setting] + // Long time save setting + axios.put(generateUrl('apps/photos/api/v1/config/' + setting), { + value: value.toString(), + }) + // Current session save setting + localStorage.setItem('photos:' + setting, value) + // Visible elements update setting + emit(eventName, { setting, value }) + }, + }, +} |