fix: editor css (#121)

* fix: editor css * fix: editor css * fix: editor css * fix: 选中颜色 * fix: 选中颜色 --------- Co-authored-by: yxh01132861 <[email protected]>
antvis · Jan 11, 2024 · f836b60 · f836b60
1 parent edac767
commit f836b60
Show file tree

Hide file tree

Showing 12 changed files with 173 additions and 129 deletions.
diff --git a/packages/li-editor/src/components/EditName/index.less b/packages/li-editor/src/components/EditName/index.less
diff --git a/packages/li-editor/src/components/EditName/index.tsx b/packages/li-editor/src/components/EditName/index.tsx
@@ -2,7 +2,8 @@ import { EnterOutlined } from '@ant-design/icons';
 import { Input, message, Tooltip } from 'antd';
 import classnames from 'classnames';
 import React, { useCallback, useEffect, useState } from 'react';
-import './index.less';
+import { usePrefixCls } from '../../hooks';
+import useStyle from './style';
 
 type EditNameProps = {
   className?: string;
@@ -16,6 +17,8 @@ type EditNameProps = {
 export default ({ className, name, isEdit, onClick, onCancel, onChange }: EditNameProps) => {
   const [cacheName, setCacheName] = useState('');
   const [messageApi, messageContextHolder] = message.useMessage();
+  const prefixCls = usePrefixCls('title-name');
+  const styles = useStyle();
 
   const onSubmit = useCallback(() => {
     if (!cacheName) {
@@ -37,7 +40,7 @@ export default ({ className, name, isEdit, onClick, onCancel, onChange }: EditNa
   }, [isEdit, name]);
 
   return (
-    <div className={classnames('li-title-name', className)}>
+    <div className={classnames(`${prefixCls}`, styles.titleName, className)}>
       {messageContextHolder}
       {isEdit ? (
         <Input
@@ -52,8 +55,8 @@ export default ({ className, name, isEdit, onClick, onCancel, onChange }: EditNa
           onBlur={onCancel}
         />
       ) : (
-        <span className="li-title-name__text">
-          <span className="li-title-name__title" onClick={onClick}>
+        <span className={classnames(`${prefixCls}__text`, styles.titleNameText)}>
+          <span className={classnames(`${prefixCls}__title`, styles.titleNameTitle)} onClick={onClick}>
             <Tooltip title={name}>{name}</Tooltip>
           </span>
         </span>

diff --git a/packages/li-editor/src/components/EditName/style.ts b/packages/li-editor/src/components/EditName/style.ts
@@ -0,0 +1,25 @@
+import { css } from '@emotion/css';
+
+const useStyle = () => {
+  return {
+    titleName: css`
+      display: flex;
+    `,
+
+    titleNameText: css`
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      justify-content: space-between;
+      max-width: 180px;
+    `,
+
+    titleNameTitle: css`
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    `,
+  };
+};
+
+export default useStyle;
diff --git a/packages/li-editor/src/layout/SideNav/NavMenu/index.less b/packages/li-editor/src/layout/SideNav/NavMenu/index.less
diff --git a/packages/li-editor/src/layout/SideNav/NavMenu/index.tsx b/packages/li-editor/src/layout/SideNav/NavMenu/index.tsx
@@ -1,8 +1,9 @@
 import { Tooltip } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
+import { usePrefixCls } from '../../../hooks';
 import type { NavMenuItem } from '../../../types/menu';
-import './index.less';
+import useStyle from './style';
 
 export type NavMenuProps = {
   className?: string;
@@ -13,9 +14,11 @@ export type NavMenuProps = {
 
 const NavMenu: React.FC<NavMenuProps> = (props) => {
   const { className, selectedKey, items, onChange } = props;
+  const prefixCls = usePrefixCls('nav-menu');
+  const styles = useStyle();
 
   return (
-    <ul className={classNames('li-nav-menu', className)}>
+    <ul className={classNames(prefixCls, styles.navMenu, className)}>
       {items.map((item) => {
         const { icon, key, name } = item;
         const isActive = key === selectedKey;
@@ -26,11 +29,12 @@ const NavMenu: React.FC<NavMenuProps> = (props) => {
               onClick={() => {
                 onChange(item.key);
               }}
-              className={classNames('li-nav-menu__item', {
-                ['li-nav-menu__item_active']: isActive,
+              className={classNames(`${prefixCls}__item`, styles.menuItem, {
+                [styles.menuItemActive]: isActive,
+                [`${prefixCls}__item-active`]: isActive,
               })}
             >
-              <span className="li-nav-menu__item-icon">{icon}</span>
+              <span className={classNames(`${prefixCls}__item-icon`, styles.menuItemIcon, className)}>{icon}</span>
               {/* <span className='li-nav-menu__item-icon'>{name}</span> */}
             </li>
           </Tooltip>

diff --git a/packages/li-editor/src/layout/SideNav/NavMenu/style.ts b/packages/li-editor/src/layout/SideNav/NavMenu/style.ts
@@ -0,0 +1,64 @@
+import { css } from '@emotion/css';
+import { useAntdToken } from '../../../hooks';
+
+const useStyle = () => {
+  const { colorText, colorPrimaryTextActive } = useAntdToken();
+
+  return {
+    navMenu: css`
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      text-align: center;
+    `,
+
+    menuItem: css`
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      padding: 10px 0;
+      color: ${colorText};
+      text-align: center;
+      cursor: pointer;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: -3px;
+        display: block;
+        width: 3px;
+        border-radius: 0 100px 100px 0;
+        visibility: hidden;
+        transition: left 0.4s ease-in;
+        content: '';
+      }
+    `,
+
+    menuItemActive: css`
+      color: ${colorPrimaryTextActive};
+
+      &::before {
+        left: 0;
+        background: ${colorPrimaryTextActive};
+        visibility: visible;
+      }
+    `,
+
+    menuItemIcon: css`
+      padding: 4px 0;
+      font-size: 18px;
+      line-height: 1;
+    `,
+
+    menuItemTitle: css`
+      padding: 2px 0;
+      font-weight: bold;
+      font-size: 12px;
+      line-height: 1;
+      white-space: nowrap;
+    `,
+  };
+};
+
+export default useStyle;
diff --git a/packages/li-editor/src/layout/SideNav/index.less b/packages/li-editor/src/layout/SideNav/index.less
diff --git a/packages/li-editor/src/layout/SideNav/index.tsx b/packages/li-editor/src/layout/SideNav/index.tsx
@@ -1,16 +1,18 @@
 import { Space } from 'antd';
 import classNames from 'classnames';
 import React, { useMemo } from 'react';
-import { useEditorState } from '../../hooks';
+import { useEditorState, usePrefixCls } from '../../hooks';
 import { useEditorContext } from '../../hooks/internal';
-import './index.less';
 import NavMenu from './NavMenu';
+import useStyle from './style';
 
 type SideNavProps = {
   className?: string;
 };
 
 const SideNav: React.FC<SideNavProps> = (props) => {
+  const prefixCls = usePrefixCls('side-nav');
+  const styles = useStyle();
   const { containerSlotMap, editorService } = useEditorContext();
   const { state, updateState } = useEditorState();
   const topWidgets = containerSlotMap.SideNav?.top || [];
@@ -28,19 +30,19 @@ const SideNav: React.FC<SideNavProps> = (props) => {
   };
 
   return (
-    <div className={classNames('li-side-nav', props.className)}>
+    <div className={classNames(`${prefixCls}`, styles.sideNav, props.className)}>
       <div className="li-side-nav__top">
         {topWidgets.map((widget) => (
           <widget.component key={widget.metadata.name} />
         ))}
       </div>
       <NavMenu
-        className="li-side-nav__menu"
+        className={classNames(`${prefixCls}__nemu`, styles.sideNavMenu)}
         selectedKey={state.activeNavMenuKey}
         items={navMenuList}
         onChange={onChange}
       />
-      <div className={'li-side-nav__bottom'}>
+      <div className={classNames(`${prefixCls}__bottom`, styles.sideNavBottom)}>
         <Space direction="vertical" size="middle">
           {actionsWidgets.map((widget) => (
             <widget.component key={widget.metadata.name} />

diff --git a/packages/li-editor/src/layout/SideNav/style.ts b/packages/li-editor/src/layout/SideNav/style.ts
@@ -0,0 +1,27 @@
+import { css } from '@emotion/css';
+import { useAntdToken } from '../../hooks';
+
+const useStyle = () => {
+  const { colorBgElevated } = useAntdToken();
+
+  return {
+    sideNav: css`
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 46px;
+      background-color: ${colorBgElevated};
+    `,
+
+    sideNavMenu: css`
+      margin-top: 0;
+    `,
+
+    sideNavBottom: css`
+      margin-top: auto;
+      padding-bottom: 25px;
+    `,
+  };
+};
+
+export default useStyle;
diff --git a/packages/li-editor/src/layout/SidePanel/index.less b/packages/li-editor/src/layout/SidePanel/index.less
diff --git a/packages/li-editor/src/layout/SidePanel/index.tsx b/packages/li-editor/src/layout/SidePanel/index.tsx
@@ -1,25 +1,27 @@
 import classNames from 'classnames';
 import React, { useMemo } from 'react';
-import { useEditorState } from '../../hooks';
+import { useEditorState, usePrefixCls } from '../../hooks';
 import { useEditorContext } from '../../hooks/internal';
-import './index.less';
+import useStyle from './style';
 
 type SidePanelProps = {
   className?: string;
 };
 
 const SidePanel: React.FC<SidePanelProps> = (props) => {
   const { className } = props;
+  const prefixCls = usePrefixCls('side-panel');
+  const styles = useStyle();
   const { editorService } = useEditorContext();
   const { state } = useEditorState();
   const navMenuList = useMemo(() => editorService.getNavMenuList(), []);
   const matchItem = navMenuList.find((item) => item.key === state.activeNavMenuKey);
   const { component: Component } = matchItem!;
 
   return (
-    <div className={classNames('li-side-panel', className)}>
-      <div className="li-side-bar__header" />
-      <Component className="li-side-panel__content" />
+    <div className={classNames(`${prefixCls}`, styles.sidePanel, className)}>
+      <div className={classNames(`${prefixCls}__header`, styles.panelHeader)} />
+      <Component className={classNames(`${prefixCls}__content`, styles.panelContent)} />
     </div>
   );
 };