Merge pull request #55 from xuzhu-591/improve-ui

Improve UI
horizoncd · Oct 19, 2023 · e2919ab · e2919ab
2 parents a6b1350 + aa61daf
commit e2919ab
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 93 deletions.
diff --git a/src/components/Widget/DangerMessage.tsx b/src/components/Widget/DangerMessage.tsx
diff --git a/src/components/Widget/Text.tsx b/src/components/Widget/Text.tsx
@@ -8,3 +8,11 @@ export const MainText = styled.span`
 export const BoldText = styled.span`
   font-weight: ${(props: { theme: Theme }) => props.theme.fontWeight.bold};
 `;
+
+export const DangerText = styled.span`
+  color: ${(props: { theme: Theme }) => props.theme.color.danger};
+`;
+
+export const WarningText = styled.span`
+  color: ${(props: { theme: Theme }) => props.theme.color.warning};
+`;
diff --git a/src/components/Widget/index.tsx b/src/components/Widget/index.tsx
@@ -1,10 +1,11 @@
 import CenterSpin from './CenterSpin';
-import DangerMessage from './DangerMessage';
 import DropdownSwitch from './DropdownSwitch';
 import ExactTime from './ExactTime';
 import MaxSpace from './MaxSpace';
 import PopupTime from './PopupTime';
-import { MainText, BoldText } from './Text';
+import {
+  MainText, BoldText, DangerText, WarningText,
+} from './Text';
 import ResourceAvatar from './ResourceAvatar';
 import LocationBox from './LocationBox';
 import StyledDropdownSwitch from './DropdownSwitch';
@@ -16,7 +17,7 @@ import IdentAvatar from './RandomAvatar';
 import CircleTag from './CircleTag';
 
 export {
-  BoldText, StyledDropdownSwitch, CenterSpin, DangerMessage,
+  BoldText, StyledDropdownSwitch, CenterSpin, DangerText, WarningText,
   DropdownSwitch, ExactTime, MaxSpace, PopupTime, QueryBoldSpan,
   MainText, ResourceAvatar, LocationBox, MicroApp, Progressing,
   FavoriteStar, IdentAvatar as RandomAvatar, CircleTag,

diff --git a/src/pages/applications/Detail/Basic/index.tsx b/src/pages/applications/Detail/Basic/index.tsx
@@ -1,25 +1,33 @@
 import {
-  Button, Divider, Dropdown, Menu, Modal, Tooltip,
+  Button, Divider, Modal, Tooltip,
 } from 'antd';
 import copy from 'copy-to-clipboard';
-import { DownOutlined, ExclamationCircleOutlined, ReloadOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined, ReloadOutlined } from '@ant-design/icons';
 import { useModel } from '@@/plugin-model/useModel';
 import { useIntl } from '@@/plugin-locale/localeExports';
 import styles from '@/pages/applications/Detail/index.less';
 import RBAC from '@/rbac';
 import DetailCard from '@/components/DetailCard';
 import ResourceAvatar from '@/components/Widget/ResourceAvatar';
+import { DangerText } from '@/components/Widget';
 
 export default (props: any) => {
   const {
-    id, name: applicationName, refreshApplication,
-    delApplication, onEditClick, serviceDetail,
+    id,
+    name: applicationName,
+    refreshApplication,
+    delApplication,
+    onEditClick,
+    serviceDetail,
   } = props;
   const intl = useIntl();
   const { successAlert } = useModel('alert');
 
   const refreshButton = (
-    <Button className={styles.button} onClick={refreshApplication}><ReloadOutlined /></Button>);
+    <Button className={styles.button} onClick={refreshApplication}>
+      <ReloadOutlined />
+    </Button>
+  );
 
   const editButton = (
     <Button
@@ -32,52 +40,38 @@ export default (props: any) => {
     </Button>
   );
 
-  const operateDropdown = (
-    <Menu>
-      <Menu.Item
-        disabled={!RBAC.Permissions.deleteApplication.allowed}
-        onClick={() => {
-          Modal.confirm({
-            title: intl.formatMessage({ id: 'pages.applicationDelete.confirm.title' }, {
+  const deleteButton = (
+    <Button
+      className={styles.button}
+      disabled={!RBAC.Permissions.deleteApplication.allowed}
+      onClick={() => {
+        Modal.confirm({
+          title: intl.formatMessage(
+            { id: 'pages.applicationDelete.confirm.title' },
+            {
               application: (
                 <span className={styles.bold}>
-                  {' '}
                   {applicationName}
                 </span>
               ),
-            }),
-            icon: <ExclamationCircleOutlined />,
-            content: (
-              <div
-                className={styles.bold}
-              >
-                {intl.formatMessage({ id: 'pages.applicationDelete.confirm.content' })}
-              </div>
-            ),
-            okText: intl.formatMessage({ id: 'pages.applicationDelete.confirm.ok' }),
-            cancelText: intl.formatMessage({ id: 'pages.applicationDelete.confirm.cancel' }),
-            onOk: () => {
-              delApplication();
             },
-          });
-        }}
-      >
-        {intl.formatMessage({ id: 'pages.applicationDetail.basic.delete' })}
-      </Menu.Item>
-    </Menu>
-  );
-
-  const dropDownButton = (
-    <Dropdown
-      className={styles.button}
-      overlay={operateDropdown}
-      trigger={['click']}
+          ),
+          icon: <ExclamationCircleOutlined />,
+          content: (
+            <div className={styles.bold}>
+              {intl.formatMessage({ id: 'pages.applicationDelete.confirm.content' })}
+            </div>
+          ),
+          okText: intl.formatMessage({ id: 'pages.applicationDelete.confirm.ok' }),
+          cancelText: intl.formatMessage({ id: 'pages.applicationDelete.confirm.cancel' }),
+          onOk: () => {
+            delApplication();
+          },
+        });
+      }}
     >
-      <Button>
-        {intl.formatMessage({ id: 'pages.common.more' })}
-        <DownOutlined />
-      </Button>
-    </Dropdown>
+      <DangerText>{intl.formatMessage({ id: 'pages.applicationDetail.basic.delete' })}</DangerText>
+    </Button>
   );
 
   return (
@@ -106,13 +100,16 @@ export default (props: any) => {
           <div className={styles.flex} />
           {refreshButton}
           {editButton}
-          {dropDownButton}
+          {deleteButton}
         </div>
       </div>
       <Divider className={styles.groupDivider} />
       <DetailCard
         title={(
-          <span className={styles.cardTitle}>{intl.formatMessage({ id: 'pages.applicationDetail.basic.detail' })}</span>)}
+          <span className={styles.cardTitle}>
+            {intl.formatMessage({ id: 'pages.applicationDetail.basic.detail' })}
+          </span>
+        )}
         data={serviceDetail}
       />
     </div>

diff --git a/src/pages/instances/Pods/components/ButtonBar.tsx b/src/pages/instances/Pods/components/ButtonBar.tsx
diff --git a/src/pages/instances/Pods/components/ButtonBarV2.tsx b/src/pages/instances/Pods/components/ButtonBarV2.tsx
diff --git a/src/pages/user/components/BanHint.tsx b/src/pages/user/components/BanHint.tsx
@@ -1,20 +1,20 @@
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import { useIntl } from 'umi';
-import DangerMessage from '@/components/Widget/DangerMessage';
+import { DangerText } from '@/components/Widget';
 
 function BanHint(props: { isBanned: boolean }) {
   const { isBanned } = props;
   const intl = useIntl();
   return isBanned
     ? (
-      <DangerMessage>
+      <DangerText>
         {intl.formatMessage({ id: 'pages.common.true' })}
         {' '}
         <Tooltip title={intl.formatMessage({ id: 'pages.message.user.banned.desc' })}>
           <QuestionCircleOutlined />
         </Tooltip>
-      </DangerMessage>
+      </DangerText>
     )
     : <span>{intl.formatMessage({ id: 'pages.common.false' })}</span>;
 }

diff --git a/src/services/theme.d.ts b/src/services/theme.d.ts
@@ -1,5 +1,6 @@
 interface Color {
   emphasis: string,
+  warning: string,
   danger: string,
 }
 

diff --git a/src/theme.tsx b/src/theme.tsx
@@ -4,6 +4,7 @@ import { ThemeProvider } from 'styled-components';
 const theme: Theme = {
   color: {
     emphasis: '#1890ff',
+    warning: '#faad14',
     danger: '#ff4d4f',
   },
   fontFamily: 'sans-serif',