feat: add desktop tooltip for improved user experience (#4945)

* feat:add desktop tooltip * persist the state of the appbar * delete
labring · Aug 6, 2024 · 1fe875a · 1fe875a
1 parent 594f3af
commit 1fe875a
Show file tree

Hide file tree

Showing 12 changed files with 214 additions and 56 deletions.
diff --git a/frontend/desktop/public/locales/en/common.json b/frontend/desktop/public/locales/en/common.json
@@ -10,6 +10,7 @@
   "alerts": "Alerts",
   "all_apps": "All Apps",
   "already_sent_code": "Already sent code",
+  "amount_forecast": "Make predictions based on consumption amount in the past day",
   "and": "and",
   "app_info": "App Info",
   "app_launchpad": "App Launchpad",
@@ -73,6 +74,7 @@
   "healthy_pod": "Healthy Pod: {{count}}",
   "hello_welcome": "Hello, welcome to",
   "help_you_enable_high_availability_database": "Help you enable high availability database",
+  "home": "home",
   "idCard": "ID CARD",
   "idCard_invalid": "INVAILD ID CARD FORMAT",
   "in_payment": "In Payment ...",
@@ -120,6 +122,7 @@
   "nickname": "Nickname",
   "no_apps_found": "No Apps Found",
   "no_realname_auth": "NO REALNAME AUTH",
+  "notification": "notify",
   "noworkspacecreated": "You haven't created a workspace yet",
   "official_account_login": "Official account login",
   "old_email": "Old email",

diff --git a/frontend/desktop/public/locales/zh/common.json b/frontend/desktop/public/locales/zh/common.json
@@ -10,6 +10,7 @@
   "alerts": "告警",
   "all_apps": "所有应用",
   "already_sent_code": "已经发送验证码",
+  "amount_forecast": "根据近一天消耗金额进行预测",
   "and": "和",
   "app_info": "应用信息",
   "avatar": "头像",
@@ -70,6 +71,7 @@
   "healthy_pod": "健康 Pod: {{count}}",
   "hello_welcome": "您好, 欢迎来到",
   "help_you_enable_high_availability_database": "帮您启用高可用数据库",
+  "home": "首页",
   "idCard": "身份证",
   "idCard_invalid": "身份证格式不对",
   "in_payment": "支付中 ...",
@@ -116,6 +118,7 @@
   "nickname": "昵称",
   "no_apps_found": "未找到任何应用",
   "no_realname_auth": "未实名认证",
+  "notification": "通知",
   "noworkspacecreated": "您还没有创建工作空间",
   "official_account_login": "公众号登录",
   "old_email": "旧电子邮箱",

diff --git a/frontend/desktop/src/api/platform.ts b/frontend/desktop/src/api/platform.ts
@@ -15,7 +15,7 @@ import { AccountCRD } from '@/types/user';
 export const uploadConvertData = (newType: number[], url?: string) => {
   const defaultUrl = 'https://sealos.run/self-hosting';
   const main_url = url || defaultUrl;
-  const bd_vid = sessionStorage.getItem('bd_vid');
+  const bd_vid = localStorage.getItem('bd_vid');
   if (!bd_vid) {
     return Promise.reject('upload convert data params error');
   }

diff --git a/frontend/desktop/src/components/AppDock/CustomTooltip.tsx b/frontend/desktop/src/components/AppDock/CustomTooltip.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { Tooltip, TooltipProps } from '@chakra-ui/react';
+
+type ArrowDirection = 'top' | 'bottom' | 'left' | 'right';
+
+interface CustomTooltipProps extends Omit<TooltipProps, 'children' | 'placement'> {
+  placement: ArrowDirection;
+  children: React.ReactNode;
+}
+
+const CustomTooltip: React.FC<CustomTooltipProps> = ({ placement = 'top', children, ...props }) => {
+  const getArrowStyles = (placement: ArrowDirection) => {
+    switch (placement) {
+      case 'top':
+        return {
+          bottom: '-16px',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          borderColor: 'rgba(239, 239, 242, 0.7) transparent transparent transparent'
+        };
+      case 'bottom':
+        return {
+          top: '-16px',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          borderColor: 'transparent transparent rgba(239, 239, 242, 0.7) transparent'
+        };
+      case 'left':
+        return {
+          right: '-16px',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          borderColor: 'transparent transparent transparent rgba(239, 239, 242, 0.7)'
+        };
+      case 'right':
+        return {
+          left: '-16px',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          borderColor: 'transparent rgba(239, 239, 242, 0.7) transparent transparent'
+        };
+    }
+  };
+
+  return (
+    <Tooltip
+      bg={'rgba(239, 239, 242, 0.7)'}
+      px={'10px'}
+      py={'8px'}
+      borderRadius={'6px'}
+      fontSize={'12px'}
+      fontWeight={500}
+      color={'grayModern.900'}
+      hasArrow
+      placement={placement}
+      backdropFilter="blur(80px) saturate(150%)"
+      sx={{
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          borderWidth: '8px',
+          borderStyle: 'solid',
+          ...getArrowStyles(placement)
+        },
+        '& .chakra-tooltip__arrow': {
+          display: 'none'
+        },
+        '& .chakra-tooltip__arrow-bg': {
+          display: 'none'
+        },
+        ...props.sx
+      }}
+      {...props}
+    >
+      {children}
+    </Tooltip>
+  );
+};
+
+export default CustomTooltip;
diff --git a/frontend/desktop/src/components/AppDock/index.tsx b/frontend/desktop/src/components/AppDock/index.tsx
@@ -4,16 +4,18 @@ import { useConfigStore } from '@/stores/config';
 import { useDesktopConfigStore } from '@/stores/desktopConfig';
 import { APPTYPE, TApp } from '@/types';
 import { Box, Center, Flex, Image } from '@chakra-ui/react';
-import { MouseEvent, useContext, useMemo, useState } from 'react';
+import { MouseEvent, useContext, useMemo } from 'react';
 import { Menu, useContextMenu } from 'react-contexify';
 import { ChevronDownIcon } from '../icons';
 import styles from './index.module.css';
 import { useTranslation } from 'next-i18next';
+import CustomTooltip from './CustomTooltip';
+import { I18nCommonKey } from '@/types/i18next';
 
 const APP_DOCK_MENU_ID = 'APP_DOCK_MENU_ID';
 
 export default function AppDock() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const {
     installedApps: apps,
     runningInfo,
@@ -26,7 +28,8 @@ export default function AppDock() {
   } = useAppStore();
   const logo = useConfigStore().layoutConfig?.logo;
   const moreAppsContent = useContext(MoreAppsContext);
-  const [isNavbarVisible, setNavbarVisible] = useState(true);
+  const { isNavbarVisible, toggleNavbarVisibility } = useDesktopConfigStore();
+
   const { show } = useContextMenu({
     id: APP_DOCK_MENU_ID
   });
@@ -116,7 +119,7 @@ export default function AppDock() {
   const transitionValue = 'transform 200ms ease-in-out, opacity 200ms ease-in-out';
 
   return (
-    <Box position="absolute" left="50%" bottom={'4px'} transform="translateX(-50%)" zIndex={'9999'}>
+    <Box position="absolute" left="50%" bottom={'4px'} transform="translateX(-50%)" zIndex={'1000'}>
       <Center
         width={'48px'}
         height={'16px'}
@@ -133,7 +136,7 @@ export default function AppDock() {
         top={'-80px'}
         transform={isNavbarVisible ? 'translate(-50%, 0)' : 'translate(-50%, 64px)'}
         will-change="transform, opacity"
-        onClick={() => setNavbarVisible((prev) => !prev)}
+        onClick={toggleNavbarVisibility}
       >
         <ChevronDownIcon
           transform={isNavbarVisible ? 'rotate(0deg)' : 'rotate(180deg)'}
@@ -164,44 +167,53 @@ export default function AppDock() {
       >
         {AppMenuLists.map((item: AppInfo, index: number) => {
           return (
-            <Flex
-              flexDirection={'column'}
-              alignItems={'center'}
-              cursor={'pointer'}
+            <CustomTooltip
+              placement="top"
               key={item?.name}
-              pt={'6px'}
-              pb={'2px'}
-              onClick={(e) => handleNavItem(e, item)}
+              label={
+                item?.i18n?.[i18n?.language]?.name
+                  ? item?.i18n?.[i18n?.language]?.name
+                  : t(item?.name as I18nCommonKey)
+              }
             >
-              <Center
-                w="40px"
-                h="40px"
-                borderRadius={'8px'}
-                bg={'rgba(255, 255, 255, 0.85)'}
-                backdropFilter={'blur(25px)'}
-                boxShadow={'0px 1.167px 2.333px 0px rgba(0, 0, 0, 0.20)'}
+              <Flex
+                flexDirection={'column'}
+                alignItems={'center'}
+                cursor={'pointer'}
+                key={item?.name}
+                pt={'6px'}
+                pb={'2px'}
+                onClick={(e) => handleNavItem(e, item)}
               >
-                <Image
-                  src={item?.icon}
-                  fallbackSrc={logo || '/logo.svg'}
-                  alt={item?.name}
-                  w="32px"
-                  h="32px"
-                />
-              </Center>
-              <Box
-                opacity={currentAppPid === item.pid ? 1 : 0}
-                mt={'6px'}
-                width={'4px'}
-                height={'4px'}
-                borderRadius={'full'}
-                bg={'rgba(7, 27, 65, 0.50)'}
-              ></Box>
-            </Flex>
+                <Center
+                  w="40px"
+                  h="40px"
+                  borderRadius={'8px'}
+                  bg={'rgba(255, 255, 255, 0.85)'}
+                  backdropFilter={'blur(25px)'}
+                  boxShadow={'0px 1.167px 2.333px 0px rgba(0, 0, 0, 0.20)'}
+                >
+                  <Image
+                    src={item?.icon}
+                    fallbackSrc={logo || '/logo.svg'}
+                    alt={item?.name}
+                    w="32px"
+                    h="32px"
+                  />
+                </Center>
+                <Box
+                  opacity={currentAppPid === item.pid ? 1 : 0}
+                  mt={'6px'}
+                  width={'4px'}
+                  height={'4px'}
+                  borderRadius={'full'}
+                  bg={'rgba(7, 27, 65, 0.50)'}
+                ></Box>
+              </Flex>
+            </CustomTooltip>
           );
         })}
       </Flex>
-
       <Menu className={styles.contexify} id={APP_DOCK_MENU_ID}>
         <>
           <Box

diff --git a/frontend/desktop/src/components/account/cost.tsx b/frontend/desktop/src/components/account/cost.tsx
@@ -24,7 +24,8 @@ import { useTranslation } from 'next-i18next';
 import { useMemo } from 'react';
 import { blurBackgroundStyles } from '../desktop_content';
 import Monitor from '../desktop_content/monitor';
-import { ClockIcon, DesktopSealosCoinIcon, InfiniteIcon } from '../icons';
+import { ClockIcon, DesktopSealosCoinIcon, HelpIcon, InfiniteIcon } from '../icons';
+import CustomTooltip from '../AppDock/CustomTooltip';
 
 export default function Cost() {
   const { t } = useTranslation();
@@ -183,9 +184,16 @@ export default function Cost() {
                 bg={'#C74FFF'}
                 borderRadius={'2px'}
               ></Center>
-              <Text fontSize={'12px'} fontWeight={'bold'} color={'rgba(255, 255, 255, 0.90)'}>
-                {t('common:expected_to_use_next_month')}
-              </Text>
+              <Flex alignItems={'center'} gap={'4px'} position={'relative'}>
+                <Text fontSize={'12px'} fontWeight={'bold'} color={'rgba(255, 255, 255, 0.90)'}>
+                  {t('common:expected_to_use_next_month')}
+                </Text>
+                <CustomTooltip placement="bottom" label={t('common:amount_forecast')}>
+                  <Box cursor={'pointer'}>
+                    <HelpIcon />
+                  </Box>
+                </CustomTooltip>
+              </Flex>
               <Text mr={'4px'} ml={'auto'} color={'white'} fontSize={'14px'} fontWeight={700}>
                 {formatMoney(calculations.estimatedNextMonthAmount).toFixed(2)}
               </Text>

diff --git a/frontend/desktop/src/components/account/index.tsx b/frontend/desktop/src/components/account/index.tsx
@@ -17,6 +17,7 @@ import GithubComponent from './github';
 import { ArrowIcon } from '../icons';
 import useAppStore from '@/stores/app';
 import AccountCenter from './AccountCenter';
+import CustomTooltip from '../AppDock/CustomTooltip';
 
 const baseItemStyle = {
   w: '52px',
@@ -118,19 +119,34 @@ export default function Account() {
         </Flex>
         <Flex mt={'16px'} justifyContent={'space-between'} position={'relative'}>
           {layoutConfig?.common.docsUrl && (
-            <Center
-              cursor={'pointer'}
-              {...baseItemStyle}
-              onClick={() => window.open(layoutConfig?.common?.docsUrl)}
-            >
-              <DocsIcon />
+            <CustomTooltip placement={'bottom'} label={t('common:doc')}>
+              <Center
+                cursor={'pointer'}
+                {...baseItemStyle}
+                onClick={() => window.open(layoutConfig?.common?.docsUrl)}
+              >
+                <DocsIcon />
+              </Center>
+            </CustomTooltip>
+          )}
+          <CustomTooltip placement={'bottom'} label={t('common:language')}>
+            <Center>
+              <LangSelectSimple {...baseItemStyle} />
             </Center>
+          </CustomTooltip>
+          {layoutConfig?.common.githubStarEnabled && (
+            <CustomTooltip placement="bottom" label={t('common:github')}>
+              <Center>
+                <GithubComponent {...baseItemStyle} />
+              </Center>
+            </CustomTooltip>
           )}
-          <LangSelectSimple {...baseItemStyle} />
-          {layoutConfig?.common.githubStarEnabled && <GithubComponent {...baseItemStyle} />}
-          <Center cursor={'pointer'} {...baseItemStyle} onClick={() => showDisclosure.onOpen()}>
-            <NotificationIcon />
-          </Center>
+
+          <CustomTooltip placement={'bottom'} label={t('common:notification')}>
+            <Center cursor={'pointer'} {...baseItemStyle} onClick={() => showDisclosure.onOpen()}>
+              <NotificationIcon />
+            </Center>
+          </CustomTooltip>
           <Notification key={'notification'} disclosure={showDisclosure} onAmount={onAmount} />
         </Flex>
 

diff --git a/frontend/desktop/src/components/desktop_content/monitor.tsx b/frontend/desktop/src/components/desktop_content/monitor.tsx
@@ -65,7 +65,7 @@ export default function Monitor({ needStyles = true }: { needStyles?: boolean })
       <Flex alignItems={'center'} mt={'12px'} gap={'20px'}>
         <CircularProgress
           size={'90px'}
-          trackColor={'#FF8398'}
+          trackColor={runningPodPercentage === 0 ? '#FFFFFF33' : '#FF8398'}
           value={runningPodPercentage}
           color="#2BE0B3"
         >

diff --git a/frontend/desktop/src/components/icons/index.tsx b/frontend/desktop/src/components/icons/index.tsx
@@ -355,3 +355,31 @@ export function ArrowIcon(props: IconProps) {
     </Icon>
   );
 }
+
+export function HelpIcon(props: IconProps) {
+  return (
+    <Icon
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="13px"
+      height="12px"
+      viewBox="0 0 13 12"
+      fill="currentColor"
+    >
+      <g clipPath="url(#clip0_7211_4442)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.71375 1.9176C4.4591 1.9176 2.63135 3.74536 2.63135 6C2.63135 8.25465 4.4591 10.0824 6.71375 10.0824C8.9684 10.0824 10.7962 8.25465 10.7962 6C10.7962 3.74536 8.9684 1.9176 6.71375 1.9176ZM1.63135 6C1.63135 3.19307 3.90682 0.917603 6.71375 0.917603C9.52068 0.917603 11.7962 3.19307 11.7962 6C11.7962 8.80694 9.52068 11.0824 6.71375 11.0824C3.90682 11.0824 1.63135 8.80694 1.63135 6ZM6.82497 4.21935C6.62137 4.18442 6.41198 4.22268 6.23389 4.32735C6.05579 4.43202 5.92049 4.59634 5.85194 4.79121C5.7603 5.0517 5.47484 5.18859 5.21435 5.09695C4.95385 5.00531 4.81697 4.71986 4.9086 4.45936C5.05552 4.04172 5.34551 3.68954 5.7272 3.46522C6.1089 3.24089 6.55767 3.15889 6.99403 3.23374C7.43039 3.30859 7.82618 3.53545 8.1113 3.87415C8.39636 4.21278 8.5524 4.64135 8.55181 5.08398C8.55158 5.8074 8.0156 6.28139 7.6418 6.53059C7.43964 6.66536 7.24105 6.7643 7.09496 6.82923C7.0212 6.86201 6.95905 6.88691 6.91416 6.90401C6.89167 6.91257 6.8734 6.91923 6.86003 6.92398L6.84372 6.9297L6.83845 6.93149L6.83657 6.93213L6.83582 6.93238C6.83567 6.93243 6.8352 6.93259 6.67709 6.45824L6.8352 6.93259C6.57323 7.01991 6.29007 6.87833 6.20275 6.61636C6.11545 6.35447 6.25691 6.07142 6.51871 5.98399L6.52502 5.98177C6.5318 5.97936 6.54306 5.97527 6.55816 5.96952C6.58845 5.95798 6.63369 5.93992 6.68882 5.91542C6.80049 5.86579 6.94558 5.79289 7.0871 5.69854C7.40058 5.48955 7.55181 5.27633 7.55181 5.08352L7.55181 5.08278C7.55212 4.87621 7.47931 4.67619 7.34627 4.51815C7.21324 4.36012 7.02857 4.25427 6.82497 4.21935ZM6.21375 8.2912C6.21375 8.01506 6.43761 7.7912 6.71375 7.7912H6.71833C6.99447 7.7912 7.21833 8.01506 7.21833 8.2912C7.21833 8.56735 6.99447 8.7912 6.71833 8.7912H6.71375C6.43761 8.7912 6.21375 8.56735 6.21375 8.2912Z"
+          fill="white"
+          fillOpacity="0.8"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_7211_4442">
+          <rect width="12" height="12" fill="white" transform="translate(0.713867)" />
+        </clipPath>
+      </defs>
+    </Icon>
+  );
+}