Add option to limit maximum icon size.

CHANGELOG.md

@@ -4,8 +4,9 @@ SPDX-License-Identifier: CC0-1.0
 -->
 
 # External Portal changelog
-## [1.1.0] - TBA
+## [1.1.0] - 2023-04-03
 ### Added
+- Option to limit icon maximum size to avoid overly stretched pixmap icons
 - Bump supported Nextcloud versions.
 ### Fixed
 - Update dependencies to fix some security issues.

lib/Controller/ConfigController.php

@@ -78,8 +78,9 @@ public function setAdminConfig(array $values): DataResponse {
 	public function getConfig(): DataResponse {
 
 		$extraWide = $this->config->getAppValue(Application::APP_ID, 'extraWide', false);
+		$maxSize = $this->config->getAppValue(Application::APP_ID, 'maxSize', false);
 		$showFiles = $this->config->getAppValue(Application::APP_ID, 'showFiles', false);
-		return new DataResponse(['extraWide' => $extraWide, 'showFiles' => $showFiles]);
+		return new DataResponse(['extraWide' => $extraWide, 'showFiles' => $showFiles, 'maxSize' => $maxSize]);
 	}
 
 	}

lib/Settings/Admin.php

@@ -66,11 +66,13 @@ public function __construct(IConfig $config,
 	public function getForm(): TemplateResponse {
 		$widgetTitle = $this->config->getAppValue(Application::APP_ID, 'widgetTitle', '');
 		$extraWide = $this->config->getAppValue(Application::APP_ID, 'extraWide', false);
+		$maxSize = $this->config->getAppValue(Application::APP_ID, 'maxSize', false);
 		$showFiles = $this->config->getAppValue(Application::APP_ID, 'showFiles', false);
 
 		$adminConfig = [
 			'widgetTitle' => $widgetTitle,
 			'extraWide' => $extraWide,
+			'maxSize' => $maxSize,
 			'showFiles' => $showFiles,
 		];
 		$this->initialStateService->provideInitialState('admin-config', $adminConfig);

src/AdminSettings.vue

@@ -38,6 +38,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 		<label for="extraWide">Make the widget wider when there are many links</label>
 		<input v-model="state.extraWide" type="checkbox" name="extraWide">
 		<br>
+		<label for="maxSize">Limit maximum icon size to to avoid over-stretching 32x32 pixmap icons</label>
+		<input v-model="state.maxSize" type="checkbox" name="maxSize">
+		<br>
 		<label for="showFiles">Show Files link for everyone</label>
 		<input v-model="state.showFiles" type="checkbox" name="showFiles">
 		<br>
@@ -68,6 +71,7 @@ export default {
 			this.saving = true
 			const values = {
 				widgetTitle: this.state.widgetTitle,
+				maxSize: this.state.maxSize,
 				extraWide: this.state.extraWide,
 				showFiles: this.state.showFiles,
 			}

src/Dashboard.vue

@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 		<span v-else-if="number > 0">
 			<div v-for="item in content"
 				:key="item.id"
-				:class="{ smaller: content.length>4 && content.length < 7, smallest: content.length>6}">
+				:class="{ smaller: content.length>4 && content.length < 7, smallest: content.length>6, maxsized: maxSize}">
 				<a v-bind="{ target: item.sameWindow ? '' : '_blank' }" :href="item.url">
 					<img class="linkitem"
 						preserveAspectRatio="xMinYMin meet"
@@ -47,6 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
 import axios from '@nextcloud/axios'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
+import { translate as t } from '@nextcloud/l10n'
 
 export default {
 	name: 'Dashboard',
@@ -64,6 +65,7 @@ export default {
 			number: 0,
 			content: [],
 			extraWide: false,
+			maxSize: false,
 			showFiles: false,
 		}
 	},
@@ -80,6 +82,7 @@ export default {
 			const url = generateUrl('/apps/externalportal/config')
 			axios.get(url).then((response) => {
 				this.extraWide = response.data.extraWide
+				this.maxSize = response.data.maxSize
 				this.showFiles = response.data.showFiles
 				console.debug('"' + JSON.stringify(response.data) + '"')
 			}).catch((error) => {
@@ -153,6 +156,10 @@ div.smaller {
 div.smallest {
 	width: 30%;
 }
+div.maxsized {
+	max-width: 64px;
+	margin: 0.5rem;
+}
 .linkitem {
 	width: 95%;
 	height: 95%;