[Improve][feature] Add Info Icon and [Bug] Fix Design Issue In the Ta…

…sk Definition (#171)
apache · Aug 12, 2024 · ec3e655 · ec3e655
1 parent b12506d
commit ec3e655
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 0 deletions.
diff --git a/seatunnel-ui/src/assets/styles/default.scss b/seatunnel-ui/src/assets/styles/default.scss
@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+ $box-node-content: "Double click to configure. After configure, Connect each node ends to another.";
 
 .x6-graph-scroller {
   overflow: hidden !important;
@@ -31,3 +32,25 @@
   transition: all 0.2s;
   background-color: rgba(0, 0, 0, 0.25);
 }
+.x6-widget-selection-box.x6-widget-selection-box-node:hover {
+  position: relative;
+  &::before {
+    content: $box-node-content;
+    width: 210px;
+    height: 40px;
+    background: #eeecec;
+    color: #131313;
+    border-radius: 5px;
+    position: absolute;
+    top: -45px;
+    right: -25px;
+    text-align: center;
+    box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.5);
+    font-size: 11.5px;
+    line-height: 1.1;
+    padding: 3px;
+  }
+}
+.task-item-info {
+  cursor: help;
+}
diff --git a/seatunnel-ui/src/views/task/synchronization-definition/dag/sidebar/index.module.scss b/seatunnel-ui/src/views/task/synchronization-definition/dag/sidebar/index.module.scss
@@ -18,6 +18,7 @@
 .task-container {
   width: 250px;
   flex-shrink: 0;
+  overflow-y: auto;
 }
 
 .task-item {

diff --git a/seatunnel-ui/src/views/task/synchronization-definition/dag/sidebar/index.tsx b/seatunnel-ui/src/views/task/synchronization-definition/dag/sidebar/index.tsx
@@ -28,6 +28,7 @@ import ReplaceImg from '../images/replace.png'
 import SplitImg from '../images/spilt.png'
 import CopyImg from '../images/copy.png'
 import SqlImg from '../images/sql.png'
+import { InfoCircleOutlined } from '@vicons/antd'
 
 const DagSidebar = defineComponent({
   name: 'DagSidebar',
@@ -67,6 +68,12 @@ const DagSidebar = defineComponent({
               <img class={styles['task-image']} src={SourceImg} />
               <span>Source</span>
             </NSpace>
+            <span 
+              class="task-item-info ml-auto inline-block"
+              title={'Drag Source into Canvas and Double Click to Setup Configurations'}
+            >
+             <InfoCircleOutlined width="17px" height="17px" />
+            </span>
           </div>
           <div
             class={styles['task-item']}
@@ -77,6 +84,12 @@ const DagSidebar = defineComponent({
               <img class={styles['task-image']} src={SinkImg} />
               <span>Sink</span>
             </NSpace>
+            <span 
+              class="task-item-info ml-auto inline-block"
+              title={'Drag Sink into Canvas and Double Click to Setup Configurations'}
+            >
+              <InfoCircleOutlined width="17px" height="17px" />
+            </span>
           </div>
           {this.transforms.length > 0 && (
             <h3>{this.t('project.synchronization_definition.transforms')}</h3>
@@ -116,6 +129,12 @@ const DagSidebar = defineComponent({
                     <img class={styles['task-image']} src={item.icon} />
                     <span>{item.name}</span>
                   </NSpace>
+                  <span 
+                    class="task-item-info ml-auto inline-block"
+                    title={'Drag '+ item.name +' into Canvas and Double Click to Setup Configurations'}
+                  >
+                    <InfoCircleOutlined width="17px" height="17px" />
+                  </span>
                 </div>
               )
             })}