fix: Fix the bug of long press icon deformation on mobile devices

beclab · Dec 9, 2024 · a2a761b · a2a761b
1 parent ff852e0
commit a2a761b
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/packages/frontend/src/pages/mobile/DockComponent.vue b/packages/frontend/src/pages/mobile/DockComponent.vue
@@ -9,16 +9,19 @@
 				:key="'aood+index' + index"
 			>
 				<div class="launchapp column items-center">
-					<img
+					<div
 						class="app-img"
 						@click="openWindow(element)"
 						:id="element.id"
-						:src="element.icon"
 						:style="{
 							width: element.id === 'bdock:launchpad' ? '0.56rem' : '0.52rem',
 							height: element.id === 'bdock:launchpad' ? '0.56rem' : '0.52rem'
 						}"
-					/>
+					>
+						<img :src="element.icon" />
+						<div class="overlay"></div>
+					</div>
+
 					<div class="app-name q-mt-xs" v-if="element.id !== 'bdock:launchpad'">
 						{{ element.title }}
 					</div>
@@ -101,6 +104,25 @@ defineExpose({
 				width: 0.52rem;
 				height: 0.52rem;
 				border-radius: 0.14rem;
+				-webkit-touch-callout: none;
+				-webkit-user-select: none;
+				-webkit-user-drag: none;
+				overflow: hidden;
+				position: relative;
+				img {
+					width: 100%;
+					height: 100%;
+				}
+				.overlay {
+					width: 100%;
+					height: 100%;
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					background: transparent;
+				}
 			}
 			.app-name {
 				width: 100%;

diff --git a/packages/frontend/src/pages/mobile/LaunchPad.vue b/packages/frontend/src/pages/mobile/LaunchPad.vue
@@ -31,6 +31,7 @@
 								-moz-user-select: none;
 								-ms-user-select: none;
 								user-select: none;
+								position: relative;
 							"
 							v-touch-hold:1200.mouse="handleHold"
 							:id="appStore.desktopApps[element].id"
@@ -68,11 +69,9 @@
 								</svg>
 							</div>
 							<img
+								class="pad-img"
 								:src="appStore.desktopApps[element].icon"
-								:style="`width:58px;height:58px;border-radius: ${borderRadiusFormat(
-									58,
-									58
-								)}px;`"
+								:style="`border-radius: ${borderRadiusFormat(58, 58)}px;`"
 							/>
 							<div
 								class="launchpadapps_name"
@@ -280,6 +279,13 @@ const goto = (value: number) => {
 	grid-template-columns: repeat(4, 25%);
 	grid-row-gap: 30px;
 	padding-top: 60px;
+	.pad-img {
+		width: 58px;
+		height: 58px;
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-webkit-user-drag: none;
+	}
 	.launchpadapps_name {
 		width: 100%;
 		text-align: center;