wip

IceWhaleTech · Jan 3, 2024 · 6ea4e02 · 6ea4e02
1 parent bd302fb
commit 6ea4e02
Show file tree

Hide file tree

Showing 28 changed files with 320 additions and 569 deletions.
diff --git a/main/.env.dev b/main/.env.dev
@@ -9,6 +9,6 @@ NODE_ENV=dev
 # VUE_APP_DEV_IP=192.168.2.132
 # VUE_APP_DEV_IP=192.168.2.219
 #VUE_APP_DEV_IP=192.168.2.243
-VUE_APP_DEV_IP=192.168.2.132
+VUE_APP_DEV_IP=192.168.2.63
 VUE_APP_DEV_PORT=80
 #VUE_APP_DEV_PORT=81
diff --git a/main/src/assets/lang/en_US.json b/main/src/assets/lang/en_US.json
@@ -373,7 +373,7 @@
   "Connection lost. Retry in 5 seconds...": "Connection lost. Retry in 5 seconds...",
   "cli to compose...": "cli to compose...",
   "View tutorial": "View tutorial",
-  "Add Source": "Add Source",
+  "Add Source": "More apps",
   "More": "More",
   "Search an app...": "Search an app...",
   "Tips": "Tips",

diff --git a/main/src/assets/lang/zh_CN.json b/main/src/assets/lang/zh_CN.json
@@ -370,7 +370,7 @@
   "Connection lost. Retry in 5 seconds...": "连接丢失。5秒后重试...",
   "cli to compose...": "cli 转为 Compose",
   "View tutorial": "观看教程",
-  "Add Source": "添加软件源",
+  "Add Source": "更多应用",
   "More": "浏览更多",
   "Search an app...": "搜索应用……",
   "Tips": "提示",

diff --git a/main/src/assets/scss/common/_others.scss b/main/src/assets/scss/common/_others.scss
@@ -158,7 +158,7 @@
 	}
 
 	.container-icon {
-		padding: 0 0.5rem;
+		padding: 0 0.25rem;
 	}
 }
 
@@ -240,3 +240,11 @@ button.dropdown-item.is-active {
 .w-full {
 	width: 100% !important;
 }
+
+.swiper-button-next, .swiper-button-prev{
+	transition: opacity 0.3s;
+	&.swiper-button-disabled{
+		opacity: 0 !important;
+	}
+}
+
diff --git a/main/src/assets/scss/common/_size.scss b/main/src/assets/scss/common/_size.scss
@@ -23,6 +23,11 @@
 	word-break: keep-all;
 }
 
+.is-14x14 {
+	width: 14px;
+	height: 14px;
+}
+
 .is-16x16 {
 	width: 16px;
 	height: 16px;

diff --git a/main/src/components/Apps/AppCard.vue b/main/src/components/Apps/AppCard.vue
@@ -5,16 +5,17 @@
 		<!-- Action Button Start -->
 		<div v-if="item.app_type !== 'system' && !isContainerApp && !isUninstalling" class="action-btn">
 			<b-dropdown ref="dro" :mobile-modal="false" :triggers="['contextmenu', 'click']" animation="fade1"
-				append-to-body aria-role="list" class="app-card-drop" position="is-bottom-left"
+				append-to-body aria-role="list" class="app-card-drop" :position="dropdownPosition"
 				@active-change="setDropState">
 				<template #trigger>
-					<p role="button">
+					<p role="button" @click="handleDorpdownPosition">
 						<b-icon class="is-clickable" icon="dots-vertical-outline" pack="casa"></b-icon>
 					</p>
 				</template>
 
 				<b-dropdown-item :focusable="false" aria-role="menu-item" custom>
-					<b-button expanded tag="a" type="is-text" @click="openApp(item)">{{ $t('Open') }}</b-button>
+					<b-button expanded tag="a" type="is-text" @click="openApp(item)" :disabled="item.status != 'running'">{{
+						$t('Open') }}</b-button>
 					<b-button v-if="isV2App" expanded icon-pack="casa" icon-right="question-outline" size="is-16"
 						type="is-text" @click="openTips(item.name)">
 						{{ $t('Tips') }}
@@ -23,11 +24,6 @@
 						$t('Setting')
 					}}
 					</b-button>
-					<b-button v-if="false" :loading="isCloning" expanded type="is-text"
-						@click="appClone(item.appstore_id)">{{
-							$t('Clone')
-						}}
-					</b-button>
 
 					<b-button v-if="isV2App" expanded type="is-text" @click="checkAppVersion(item.name)">{{
 						$t('Check then update')
@@ -47,25 +43,6 @@
 					}}
 					</b-button>
 
-					<b-dropdown v-if="false" :triggers="['click']" aria-role="list" class="is-right" expanded>
-						<template #trigger>
-							<b-button :label="$t('Advanced')" expanded type="is-text" />
-						</template>
-						<b-dropdown-item :focusable="false" aria-role="menu-item" custom>
-							<b-button expanded type="is-text">{{ $t('Open') }}</b-button>
-							<b-button expanded type="is-text">{{ $t('Open') }}</b-button>
-							<b-dropdown id="box" aria-role="list" class="is-right" expanded>
-								<template #trigger>
-									<b-button :label="$t('Advanced')" expanded type="is-text" />
-								</template>
-								<b-dropdown-item id="item" :focusable="false" aria-role="menu-item" custom>
-									<b-button expanded type="is-text">{{ $t('Open') }}</b-button>
-									<b-button expanded type="is-text">{{ $t('Open') }}</b-button>
-								</b-dropdown-item>
-							</b-dropdown>
-						</b-dropdown-item>
-					</b-dropdown>
-
 					<b-button v-if="isLinkApp" class="mb-1" expanded type="is-text" @click="uninstallApp(true)">
 						{{ $t('Delete') }}
 						<b-loading v-model="isUninstalling" :is-full-page="false">
@@ -82,16 +59,16 @@
 					<div v-if="!isLinkApp" class="gap">
 						<div class="columns is-gapless _b-bor is-flex">
 							<div class="column is-flex is-justify-content-center is-align-items-center">
-								<b-button :loading="isRestarting" expanded type="is-text" @click="restartApp">
-									<b-icon custom-size="is-size-20px" icon="restart-outline" pack="casa"
-										size="is-20x20"></b-icon>
+								<b-button :loading="isRestarting" expanded type="is-text" @click="restartApp"
+									:disabled="item.status != 'running'">
+									<b-icon custom-size="is-size-20px" icon="restart-outline" pack="casa"></b-icon>
 								</b-button>
 							</div>
 							<div class="column is-flex is-justify-content-center is-align-items-center">
 								<b-button :class="item.status" :loading="isStarting" class="has-text-red" expanded
 									type="is-text" @click="toggle(item)">
 									<b-icon custom-size="is-size-20px" icon="shutdown-outline" pack="casa"
-										size="is-20"></b-icon>
+										:custom-class="shutDownClass"></b-icon>
 								</b-button>
 							</div>
 						</div>
@@ -175,6 +152,7 @@ export default {
 			// Public. Only changes the state of the card, not the state of the button.
 			isSaving: false,
 			isActiveTooltip: false,
+			dropdownPosition: "is-bottom-right",
 		}
 	},
 	props: {
@@ -245,6 +223,9 @@ export default {
 		isLinkApp() {
 			return this.item.app_type === "LinkApp"
 		},
+		shutDownClass() {
+			return this.item.status !== 'running'? "shutdown-rounded": ""
+		},
 
 	},
 
@@ -271,6 +252,15 @@ export default {
 	},
 
 	methods: {
+		handleDorpdownPosition(event) {
+			this.$nextTick(() => {
+				const rightOffset = window.innerWidth - event.clientX - 160
+				const horizontalPos = rightOffset > 0 ? "right" : "left"
+				const bottomOffset = window.innerHeight - event.clientY - 212
+				const verticalPos = bottomOffset > 0 ? "bottom" : "top"
+				this.dropdownPosition = `is-${verticalPos}-${horizontalPos}`
+			})
+		},
 		/**
 		 * @description: Open app in new windows
 		 * @param {String} status App status
@@ -825,6 +815,12 @@ export default {
 	padding-bottom: 3px;
 }
 
+.shutdown-rounded {
+	border-radius: 50%;
+	background-color: #000;
+	color: #fff;
+}
+
 .app-card-drop {
 	.dropdown-menu {
 		min-width: 10rem;
@@ -1026,7 +1022,7 @@ export default {
 		padding-bottom: 1.5rem;
 		padding-right: 1.5rem;
 
-		//styleName: Text 400Regular/Text03;
+
 		font-size: 14px;
 		font-weight: 400;
 		line-height: 20px;

diff --git a/main/src/components/Apps/AppCardSkeleton.vue b/main/src/components/Apps/AppCardSkeleton.vue
@@ -1,13 +1,3 @@
-<!--
- * @Author: Jerryk jerry@icewhale.org
- * @Date: 2023-02-08 12:09:40
- * @LastEditors: Jerryk jerry@icewhale.org
- * @LastEditTime: 2023-02-08 19:16:11
- * @FilePath: /CasaOS-UI/src/components/Apps/AppCardSkeleton.vue
- * @Description: 
- * 
- * Copyright (c) 2023 by IceWhale, All Rights Reserved. 
--->
 <template>
 	<div class="common-card is-flex is-align-items-center is-justify-content-center p-55 app-card" :style="animation">
 		<!-- Action Button End -->
@@ -21,8 +11,7 @@
 				<div class="sk-line mt-3"></div>
 
 			</div>
-			<!-- Card Content End -->
-
+			<!-- Card Content End -->˝
 		</div>
 	</div>
 </template>
@@ -80,7 +69,5 @@ export default {
 		border-radius: 0.25rem;
 		background-color: rgba(133, 149, 163, 0.6);
 	}
-
-
 }
 </style>