From 35a76b4ea96de9fa150f41cc4a167e21c5d0193d Mon Sep 17 00:00:00 2001 From: zhujingyang <72259332+zjy365@users.noreply.github.com> Date: Wed, 2 Aug 2023 15:50:56 +0800 Subject: [PATCH] feat float button & add home button (#3617) * feat float button & add home button * feat:terminal modify loading animation Signed-off-by: jingyang <3161362058@qq.com> --------- Signed-off-by: jingyang <3161362058@qq.com> --- .../desktop/public/icons/clear-outlined.svg | 3 + frontend/desktop/public/icons/home.svg | 8 +++ .../floating_button/index.module.scss | 9 ++- .../src/components/floating_button/index.tsx | 62 ++++++++++++++++--- .../src/components/more_button/index.tsx | 2 +- .../components/notification/index.module.scss | 2 +- .../src/components/notification/index.tsx | 19 +++--- frontend/desktop/src/pages/index.tsx | 7 +++ frontend/desktop/src/stores/app.ts | 7 +-- frontend/package.json | 4 +- frontend/providers/terminal/.env | 1 + .../providers/terminal/src/pages/index.tsx | 1 - 12 files changed, 96 insertions(+), 29 deletions(-) create mode 100644 frontend/desktop/public/icons/clear-outlined.svg create mode 100644 frontend/desktop/public/icons/home.svg diff --git a/frontend/desktop/public/icons/clear-outlined.svg b/frontend/desktop/public/icons/clear-outlined.svg new file mode 100644 index 000000000..4f6a61741 --- /dev/null +++ b/frontend/desktop/public/icons/clear-outlined.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/desktop/public/icons/home.svg b/frontend/desktop/public/icons/home.svg new file mode 100644 index 000000000..e92178755 --- /dev/null +++ b/frontend/desktop/public/icons/home.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/frontend/desktop/src/components/floating_button/index.module.scss b/frontend/desktop/src/components/floating_button/index.module.scss index 0f53ec700..7097029af 100644 --- a/frontend/desktop/src/components/floating_button/index.module.scss +++ b/frontend/desktop/src/components/floating_button/index.module.scss @@ -41,8 +41,8 @@ width: 64px; height: 64px; border-radius: 50%; - background: rgba(21, 37, 57, 0.6); - box-shadow: 0px 1.16667px 2.33333px rgba(0, 0, 0, 0.2); + background: rgba(28, 32, 35, 0.9); + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; @@ -78,6 +78,9 @@ height: 32px; background: rgba(255, 255, 255, 0.9); box-shadow: 0px 0px 2.33333px rgba(0, 0, 0, 0.2); + display: flex; + justify-content: center; + align-items: center; } } @@ -95,7 +98,7 @@ transform: scale(0.1); overflow: hidden; backdrop-filter: blur(150px); - background: rgba(21, 37, 57, 0.75); + background: rgba(28, 32, 35, 0.9); box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); &[data-open='true'] { diff --git a/frontend/desktop/src/components/floating_button/index.tsx b/frontend/desktop/src/components/floating_button/index.tsx index bde06e285..35ce17f9c 100644 --- a/frontend/desktop/src/components/floating_button/index.tsx +++ b/frontend/desktop/src/components/floating_button/index.tsx @@ -1,10 +1,12 @@ import useAppStore, { AppInfo } from '@/stores/app'; -import { Box, Flex, useDisclosure, Image } from '@chakra-ui/react'; +import { Box, Flex, useDisclosure, Image, Img } from '@chakra-ui/react'; import clsx from 'clsx'; import { MouseEvent, useMemo, useState } from 'react'; import Draggable, { DraggableEventHandler } from 'react-draggable'; import Iconfont from '../iconfont'; import styles from './index.module.scss'; +import homeIcon from 'public/icons/home.svg'; +import { APPTYPE } from '@/types'; enum Suction { None, @@ -18,7 +20,8 @@ export default function Index(props: any) { runningInfo, setToHighestLayerById, currentAppPid, - switchAppById + switchAppById, + updateOpenedAppInfo } = useAppStore(); const { isOpen, onOpen, onClose } = useDisclosure(); const [dragging, setDragging] = useState(false); @@ -27,6 +30,28 @@ export default function Index(props: any) { const [endPosition, setEndPosition] = useState({ x: 0, y: 0 }); const [suction, setSuction] = useState(Suction.None); const [lockSuction, setLockSuction] = useState(true); + // Hover Ball Menu + const AppMenuLists: AppInfo[] = [ + { + name: 'home', + icon: '/icons/home.svg', + zIndex: 99999, + isShow: true, + pid: -9, + size: 'maxmin', + cacheSize: 'maxmin', + style: {}, + mouseDowning: false, + key: `system-sealos-home`, + type: APPTYPE.IFRAME, + data: { + url: '', + desc: '' + }, + displayType: 'hidden' + }, + ...runningInfo + ]; const [degree, contentSkewDegree, contentRotateDegree] = useMemo(() => { const len = apps?.length < 6 ? 6 : apps?.length > 8 ? 8 : apps?.length; @@ -100,6 +125,30 @@ export default function Index(props: any) { } }; + // Handle icon click event + const handleNavItem = (e: MouseEvent, item: AppInfo) => { + if (item.key === 'system-sealos-home') { + const isNotMinimized = runningInfo.some((item) => item.size !== 'minimize'); + runningInfo.forEach((item) => { + updateOpenedAppInfo({ + ...item, + size: isNotMinimized ? 'minimize' : item.cacheSize + }); + }); + return; + } + + if (item.pid === currentAppPid && item.size !== 'minimize') { + updateOpenedAppInfo({ + ...item, + size: 'minimize', + cacheSize: item.size + }); + } else { + switchAppById(item.pid); + } + }; + return ( <> - {runningInfo?.map((item: AppInfo, index: number) => { + {AppMenuLists?.map((item: AppInfo, index: number) => { return ( { - switchAppById(item.pid); - setToHighestLayerById(item.pid); - }} + _hover={{ bg: 'rgba(88,90,93,0.5)' }} + onClick={(e) => handleNavItem(e, item)} > {activePage === 'index' ? ( <> - + setActiveTab('unread')} @@ -125,14 +126,12 @@ export default function Notification(props: TNotification) { > {t('Have Read')} - markAllAsRead()} - > - {t('Read All')} - + markAllAsRead()}> + + + {t('Read All')} + + {notifications?.map((item: NotificationItem) => { diff --git a/frontend/desktop/src/pages/index.tsx b/frontend/desktop/src/pages/index.tsx index abb952196..d610d65fc 100644 --- a/frontend/desktop/src/pages/index.tsx +++ b/frontend/desktop/src/pages/index.tsx @@ -32,8 +32,15 @@ export default function Home({ rechargeEnabled }: { rechargeEnabled: boolean }) useEffect(() => { const { query } = router; const is_login = isUserLogin(); + const whitelistApps = ['system-fastdeploy']; + if (!isUpdate || !is_login) { const { appkey, appQuery } = parseOpenappQuery((query?.openapp as string) || ''); + // sealos_inside=true internal call + if (whitelistApps.includes(appkey) && appQuery.indexOf('sealos_inside=true') === -1) { + window.open(`https://fastdeploy.cloud.sealos.io/`, '_self'); + return; + } if (appkey && typeof appQuery === 'string') setAutoLaunch(appkey, { raw: appQuery }); router.replace(destination); } else { diff --git a/frontend/desktop/src/stores/app.ts b/frontend/desktop/src/stores/app.ts index e25e8adfd..75e296425 100644 --- a/frontend/desktop/src/stores/app.ts +++ b/frontend/desktop/src/stores/app.ts @@ -129,8 +129,8 @@ const useAppStore = create()( get().setToHighestLayerById(alreadyApp.pid); return; } - // Up to 8 apps - if (get().runningInfo.length >= 8) { + // Up to 7 apps && one home app + if (get().runningInfo.length >= 7) { get().deleteLeastUsedAppByIndex(); } if (app.type === APPTYPE.LINK) { @@ -158,14 +158,13 @@ const useAppStore = create()( }, // maximize app switchAppById: (pid: number) => { - // const zIndex = get().maxZIndex + 1; set((state) => { let _app = state.runningInfo.find((item) => item.pid === pid); if (!_app) return; _app.isShow = true; _app.size = _app.cacheSize; - state.setToHighestLayerById(pid); }); + get().setToHighestLayerById(pid); }, // get switch floor function setToHighestLayerById: (pid: number) => { diff --git a/frontend/package.json b/frontend/package.json index 02ee8ca44..e8ae715e6 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -6,8 +6,10 @@ "format": "prettier --config .prettierrc.js --write **/src/**/*.ts **/src/**/*.tsx **/src/**/*.scss **/tsconfig.*json **/*config.js **/*config.json", "preinstall": "npx only-allow pnpm", "dev-desktop": " pnpm -r --filter ./desktop run dev", + "dev-app": " pnpm -r --filter ./providers/applaunchpad run dev", "dev-db": " pnpm -r --filter ./providers/dbprovider run dev", - "dev-app": " pnpm -r --filter ./providers/applaunchpad run dev" + "dev-cost": " pnpm -r --filter ./providers/costcenter run dev", + "dev-terminal": " pnpm -r --filter ./providers/terminal run dev" }, "workspaces": [ "./packages/*", diff --git a/frontend/providers/terminal/.env b/frontend/providers/terminal/.env index bd1d14eb6..12101aec3 100644 --- a/frontend/providers/terminal/.env +++ b/frontend/providers/terminal/.env @@ -1,2 +1,3 @@ +NEXT_PUBLIC_MOCK_KUBECONFIG="" SITE="https://cloud.sealos.io" TTYD_IMAGE="docker.io/labring/docker-terminal:1.20.4-6" \ No newline at end of file diff --git a/frontend/providers/terminal/src/pages/index.tsx b/frontend/providers/terminal/src/pages/index.tsx index ad3e8f4f3..cafa2c452 100644 --- a/frontend/providers/terminal/src/pages/index.tsx +++ b/frontend/providers/terminal/src/pages/index.tsx @@ -55,7 +55,6 @@ export default function Index(props: ServiceEnv) { if (isLoading) { return ( -