fix: styles

FirefoxBar · Jun 20, 2023 · 238430c · 238430c
1 parent 1b66f96
commit 238430c
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/src/pages/options/sections/rules/rule-group-card.tsx b/src/pages/options/sections/rules/rule-group-card.tsx
@@ -26,6 +26,7 @@ import type { InitdRule, Rule } from '@/share/core/types';
 import { VIRTUAL_KEY, TABLE_NAMES_ARR } from '@/share/core/constant';
 import useMarkCommon from '@/share/hooks/use-mark-common';
 import RuleContentSwitcher from '@/share/components/rule-content-switcher';
+import { textEllipsis } from '@/share/pages/styles';
 import { remove, toggleRule } from './utils';
 import type { ColumnProps, RowSelectionProps } from '@douyinfe/semi-ui/lib/es/table';
 
@@ -88,7 +89,7 @@ const RuleGroupCard = (props: RuleCardProps) => {
       dataIndex: 'name',
       render: (value: string, item: InitdRule) => (
         <Popover showArrow position="top" content={<RuleDetail rule={item} />} style={{ maxWidth: '300px' }}>
-          <div>{value}</div>
+          <div className={textEllipsis}>{value}</div>
         </Popover>
       ),
     },
@@ -103,7 +104,7 @@ const RuleGroupCard = (props: RuleCardProps) => {
       title: t('action'),
       className: 'cell-action',
       dataIndex: 'action',
-      width: 128,
+      width: 160,
       render: (v, item: InitdRule) => {
         const isMarked = commonRuleKeys.includes(item[VIRTUAL_KEY]);
         return (
@@ -114,7 +115,7 @@ const RuleGroupCard = (props: RuleCardProps) => {
             <Tooltip content={t('view')}>
               <Button theme="borderless" type="tertiary" onClick={() => onRulePreview(item)} icon={<IconSearch />} />
             </Tooltip>
-            <RuleContentSwitcher key={getVirtualKey(item)} rule={item} type={item.ruleType}>
+            <RuleContentSwitcher key={getVirtualKey(item)} rule={item} type={item.ruleType} add>
               <Button theme="borderless" type="tertiary" icon={<IconBranch />} />
             </RuleContentSwitcher>
             <Dropdown
@@ -320,6 +321,7 @@ const RuleGroupCard = (props: RuleCardProps) => {
         pagination={false}
         rowSelection={rowSelection}
         columns={tableColumns}
+        style={{ tableLayout: 'fixed' }}
       />
     </Card>
   );

diff --git a/src/pages/popup/rule/rules.tsx b/src/pages/popup/rule/rules.tsx
@@ -10,6 +10,7 @@ import useMarkCommon from '@/share/hooks/use-mark-common';
 import RuleDetail from '@/share/components/rule-detail';
 import notify from '@/share/core/notify';
 import RuleContentSwitcher from '@/share/components/rule-content-switcher';
+import { textEllipsis } from '@/share/pages/styles';
 
 const Rules = () => {
   const { keys } = useMarkCommon('rule');
@@ -73,6 +74,7 @@ const Rules = () => {
       dataSource={data}
       showHeader={false}
       size="small"
+      style={{ tableLayout: 'fixed' }}
       columns={[
         {
           title: 'enable',
@@ -98,7 +100,7 @@ const Rules = () => {
           dataIndex: 'name',
           render: (value: string, item: Rule) => (
             <Popover showArrow position="top" content={<RuleDetail rule={item} />} style={{ maxWidth: '300px' }}>
-              <div>{value}</div>
+              <div className={textEllipsis}>{value}</div>
             </Popover>
           ),
         },

diff --git a/src/share/components/rule-content-switcher.tsx b/src/share/components/rule-content-switcher.tsx
@@ -106,7 +106,7 @@ const RuleContentSwitcher: FC<RuleContentSwitcherProps> = (props) => {
     return result;
   }, [add, value]);
 
-  if (![RULE_TYPE.MODIFY_SEND_HEADER, RULE_TYPE.MODIFY_RECV_HEADER, RULE_TYPE.REDIRECT].includes(type)) {
+  if (![RULE_TYPE.MODIFY_SEND_HEADER, RULE_TYPE.MODIFY_RECV_HEADER, RULE_TYPE.REDIRECT].includes(type) || menu.length === 0) {
     return null;
   }
 

diff --git a/src/share/pages/styles.ts b/src/share/pages/styles.ts
@@ -0,0 +1,7 @@
+import { css } from '@emotion/css';
+
+export const textEllipsis = css`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;