feat(lb-components): Add tips showing in annotationTips

open-mmlab · Sep 30, 2022 · 5255983 · 5255983
1 parent 2eb3ae8
commit 5255983
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/packages/lb-components/src/App.tsx b/packages/lb-components/src/App.tsx
@@ -58,6 +58,7 @@ export interface AppProps {
   setToolInstance?: (tool: ToolInstance) => void;
   mode?: 'light' | 'dark'; // 临时需求应用于 toolFooter 的操作
   showTips?: boolean; // 是否展示 tips
+  tips?: string; // Tips 具体内容
   defaultLang: 'en' | 'cn'; // 国际化设置
   leftSider?: () => React.ReactNode | React.ReactNode;
 

diff --git a/packages/lb-components/src/index.scss b/packages/lb-components/src/index.scss
@@ -558,7 +558,7 @@ $prefix: bee;
 
 .#{$prefix}-tips {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   background-color: #333;
   color: rgba(255, 255, 255, 0.4);
   line-height: 40px;
@@ -568,6 +568,12 @@ $prefix: bee;
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
+  .#{$prefix}-tips__leftContent {
+    max-width: 60%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
 
   .#{$prefix}-tips__path {
     max-width: 40%;

diff --git a/packages/lb-components/src/views/MainView/annotationTips/index.tsx b/packages/lb-components/src/views/MainView/annotationTips/index.tsx
@@ -10,18 +10,24 @@ import { Tooltip } from 'antd';
 import { prefix } from '@/constant';
 
 interface IProps {
-  tips: string;
+  tips?: string;
+  path?: string;
 }
 
-const AnnotationTips = ({ tips }: IProps) => {
-  if (!tips) {
+const AnnotationTips = ({ path, tips }: IProps) => {
+  if (!path && !tips) {
     return null;
   }
 
   return (
     <div className={`${prefix}-tips`}>
       <Tooltip placement='bottomRight' title={tips}>
-        <span className={`${prefix}-tips__path`}>{tips}</span>
+        <span className={`${prefix}-tips__leftContent`} title={tips}>
+          {tips}
+        </span>
+      </Tooltip>
+      <Tooltip placement='bottomRight' title={path}>
+        <span className={`${prefix}-tips__path`}>{path}</span>
       </Tooltip>
     </div>
   );

diff --git a/packages/lb-components/src/views/MainView/index.tsx b/packages/lb-components/src/views/MainView/index.tsx
@@ -33,7 +33,7 @@ const layoutCls = `${prefix}-layout`;
 const ImageAnnotate: React.FC<AppProps & IProps> = (props) => {
   return (
     <>
-      {props.showTips === true && <AnnotationTips tips={props.path} />}
+      {props.showTips === true && <AnnotationTips path={props.path} tips={props.tips} />}
       <AnnotationOperation {...props} />
       <ToolFooter style={props.style?.footer} mode={props.mode} footer={props?.footer} />
     </>