This is an automated email from the ASF dual-hosted git repository.
fanjia pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/seatunnel-web.git
The following commit(s) were added to refs/heads/main by this push:
new ec3e6558 [Improve][feature] Add Info Icon and [Bug] Fix Design Issue
In the Task Definition (#171)
ec3e6558 is described below
commit ec3e6558dacbebfbe65e77e8d06a8280428fbcc0
Author: SachinS10-lab <[email protected]>
AuthorDate: Tue Aug 13 00:28:41 2024 +0530
[Improve][feature] Add Info Icon and [Bug] Fix Design Issue In the Task
Definition (#171)
---
seatunnel-ui/src/assets/styles/default.scss | 23 ++++++++++++++++++++++
.../dag/sidebar/index.module.scss | 1 +
.../dag/sidebar/index.tsx | 19 ++++++++++++++++++
3 files changed, 43 insertions(+)
diff --git a/seatunnel-ui/src/assets/styles/default.scss
b/seatunnel-ui/src/assets/styles/default.scss
index 374169ed..2dd19ee5 100644
--- 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;
+}
\ No newline at end of file
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
index c2a429c6..37d153d4 100644
---
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
index 612b86de..cf05a971 100644
---
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>
)
})}
