Merge pull request #9 from beclab/dev/update_icon

fix: Calculate icon radius
beclab · May 22, 2024 · 1bcdccb · 1bcdccb
2 parents dc358a5 + d27a705
commit 1bcdccb
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git a/packages/frontend/src/pages/DockComponent.vue b/packages/frontend/src/pages/DockComponent.vue
@@ -28,7 +28,10 @@
 								appStore.DOCKER_APP_SIZE
 							}px;height:${appStore.DOCKER_APP_SIZE}px;left:${
 								(60 - appStore.DOCKER_APP_SIZE) / 2
-							}px;border-radius: 12px`"
+							}px;border-radius: ${borderRadiusFormat(
+								appStore.DOCKER_APP_SIZE,
+								appStore.DOCKER_APP_SIZE
+							)}px`"
 							draggable="true"
 							@dragstart="onDragStart"
 							@dragenter="onDragEnter"
@@ -97,6 +100,8 @@ import { Loading, Notify } from 'quasar';
 import { DockerAppInfo, AppClickInfo } from '@desktop/core/src/types';
 import { useTokenStore } from 'stores/token';
 import { useAppStore } from 'stores/app';
+import { borderRadiusFormat } from 'src/utils/utils';
+
 // import { useNotificationStore } from 'stores/notification';
 
 const props = defineProps({

diff --git a/packages/frontend/src/pages/LaunchPad.vue b/packages/frontend/src/pages/LaunchPad.vue
@@ -102,7 +102,12 @@
 							</div>
 							<img
 								:src="appStore.desktopApps[element].icon"
-								:style="`width:${appStore.DESKTOP_APP_SIZE}px;height:${appStore.DESKTOP_APP_SIZE}px;border-radius: 16px;`"
+								:style="`width:${appStore.DESKTOP_APP_SIZE}px;height:${
+									appStore.DESKTOP_APP_SIZE
+								}px;border-radius: ${borderRadiusFormat(
+									appStore.DESKTOP_APP_SIZE,
+									appStore.DESKTOP_APP_SIZE
+								)}px;`"
 							/>
 							<div
 								class="launchpadapps_name"
@@ -130,6 +135,7 @@ import {
 import { useI18n } from 'vue-i18n';
 import { useAppStore, isSystemApp } from 'stores/app';
 import DeleteAppDialog from 'components/ConfirmDeleteAppDialog.vue';
+import { borderRadiusFormat } from 'src/utils/utils';
 
 defineProps({
 	isShowLaunc: {
@@ -143,7 +149,6 @@ const emits = defineEmits(['appClick', 'dismiss', 'drag_launch_app']);
 const { t } = useI18n();
 const launchpadPage = ref<HTMLElement>();
 const searchBox = ref<HTMLElement>();
-
 onMounted(() => {
 	let grid_x: number = Math.floor(launchpadPage.value!.offsetWidth / 20);
 	const grid_y: number = Math.floor(launchpadPage.value!.offsetHeight / 11.5);

diff --git a/packages/frontend/src/pages/Notification.vue b/packages/frontend/src/pages/Notification.vue
@@ -89,7 +89,6 @@ export default defineComponent({
 	setup() {
 		const notificationStore = useNotificationStore();
 		const notificationData = ref(notificationStore.data);
-		console.log('notificationStore', notificationStore.data);
 
 		const toggleNotiyItem = (appName: string) => {
 			console.log('appNameappNameappName', appName);

diff --git a/packages/frontend/src/utils/utils.ts b/packages/frontend/src/utils/utils.ts
@@ -135,3 +135,7 @@ export function sizeFormat(size: number) {
 	}
 	return sizestr;
 }
+
+export function borderRadiusFormat(width: number, height: number) {
+	return Math.round(width * 0.28);
+}