From 28ea6b58385b703a8a5ff888a0c018145a136710 Mon Sep 17 00:00:00 2001
From: Leonardo Christino <leomilho@gmail.com>
Date: Tue, 11 Apr 2023 19:26:07 +0200
Subject: [PATCH] feat(querybuilder): porting the rest of the pills and fixing
style to match expected
---
.../attributepill/attributepill.module.scss | 32 ++---
.../attributepill/select-component.tsx | 22 +--
.../entitypill/entitypill.module.scss | 51 +++----
.../relationpill/relationpill.module.scss | 136 ++++++++++--------
.../querybuilder/pills/querypills.module.scss | 36 ++---
libs/shared/package.json | 2 +-
6 files changed, 131 insertions(+), 148 deletions(-)
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/attributepill/attributepill.module.scss b/libs/shared/lib/querybuilder/pills/customFlowPills/attributepill/attributepill.module.scss
index b6a94dd87..880216ca8 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/attributepill/attributepill.module.scss
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/attributepill/attributepill.module.scss
@@ -42,21 +42,15 @@
font-family: monospace;
font-weight: bold;
font-size: 11px;
- padding-top: 2px;
- padding-right: 5px;
- padding-bottom: 12px;
- padding-left: 5px;
+ padding-top: 0.1em;
+ padding-right: 0.5em;
+ padding-bottom: 0.1em;
+ padding-left: 0.5em;
}
.attributeHandleLeft {
- border: 0;
- border-radius: 5;
- left: 12;
- width: 8;
- height: 8;
- margin-bottom: 8.5;
+ left: 4px !important;
background: rgba(0, 0, 0, 0.3);
- transform-origin: center;
&::before {
content: '';
width: 6;
@@ -99,23 +93,24 @@
}
.attributeWrapper {
- height: 4;
- margin-left: 15;
- margin-right: 5;
+ height: 100%;
color: black;
+ display: flex;
+ align-items: center;
+ gap: 0.6em;
+ margin-left: 0.8em;
}
.attributeWrapperSpan {
- float: left;
- width: 60;
+ margin-left: 4px;
}
// Attribute select component
.matchTypeSelect {
- float: left;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 2px;
display: flex;
- margin-right: 10px;
+ pointer-events: all;
+ cursor: pointer;
& select {
background: transparent;
border: none;
@@ -131,7 +126,6 @@
}
}
.matchModifierTypeSelect {
- float: left;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 2px;
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/attributepill/select-component.tsx b/libs/shared/lib/querybuilder/pills/customFlowPills/attributepill/select-component.tsx
index f26713d4b..38a35b85e 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/attributepill/select-component.tsx
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/attributepill/select-component.tsx
@@ -11,11 +11,10 @@
import { useTheme } from '@mui/material';
import React, { useState } from 'react';
import styles from './attributepill.module.scss';
+import { AttributeData } from '../../../graph/reactflow/model';
-export default function SelectComponent({ data }: any) {
+export default function SelectComponent({ data }: { data: AttributeData }) {
const theme = useTheme();
- const [disable, setDisable] = useState(true);
- const [disClass, setDisClass] = useState(styles.disable);
/**
* Calculate the width of the select element based on the displayed value.
@@ -29,18 +28,6 @@ export default function SelectComponent({ data }: any) {
return str.length + 1.5 + 'ch';
};
- /** Disable the select field */
- const disableSelect = (): void => {
- setDisable(true);
- setDisClass(styles.disable);
- };
-
- /** Enable the select field */
- const enableSelect = (): void => {
- setDisable(false);
- setDisClass('');
- };
-
/**
* Constant switch to append the right options for the select element based on the data.dataType.
* @returns {JSX.Element} Option list using React.Fragment as parent element.
@@ -83,15 +70,12 @@ export default function SelectComponent({ data }: any) {
return (
<div
className={styles.matchTypeSelect}
- onDoubleClick={enableSelect}
- onBlur={disableSelect}
style={{ backgroundColor: theme.palette.custom.elements.attribute[1] }}
>
<select
style={{ maxWidth: calcSelectWidth('==') }}
+ value={data.matchType}
name="operators"
- className={disClass}
- disabled={disable}
onChange={(e) => {
data.matchType = e.target.value;
e.target.style.maxWidth = calcSelectWidth(e.target.value);
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss
index a7985865a..d4d61cec4 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss
@@ -69,12 +69,8 @@
font-family: monospace;
font-weight: bold;
font-size: 11px;
- min-width: 165px;
color: black;
- padding-top: 2;
- padding-right: 5;
- padding-bottom: 12;
- padding-left: 5;
+ padding-left: 45px;
}
.entityFade {
@@ -144,38 +140,31 @@
}
.entityWrapper {
- height: 6;
- margin-left: 55;
- margin-right: 5;
- color: black;
+ display: block;
}
.entitySpan {
- float: left;
+ display: block;
}
// General style
-.handleFunction {
- border: 0;
- border-radius: 50%;
- left: 40;
- width: 6;
- height: 6;
- background: rgba(0, 0, 0, 0.3);
- margin-bottom: 16;
- &::before {
- content: '';
- width: 4;
- height: 4;
- left: 1;
- bottom: 1;
- border: 0;
- border-radius: 50%;
- background: rgba(255, 255, 255, 0.6);
- z-index: -1;
- display: inline-block;
- position: fixed;
- }
+.ToRelationHandle {
+ border-radius: 1px !important;
+ left: 5px !important;
+ background: rgba(0, 0, 0, 0.3) !important;
+}
+
+.ToAttributeHandle {
+ border-radius: 1px !important;
+ left: 22.5px !important;
+ background: rgba(0, 0, 0, 0.3) !important;
+ transform: rotate(45deg) translate(-68%, 0) scale(0.9) !important;
+ transform-origin: center, center;
+}
+
+.ReceiveFunctionHandle {
+ left: 33px !important;
+ background: rgba(0, 0, 0, 0.3) !important;
}
.handleFunctionEntity {
diff --git a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss
index 1cfa7a09d..e07658643 100644
--- a/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss
+++ b/libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss
@@ -1,13 +1,13 @@
@import '../../querypills.module.scss';
-.relation {
- display: flex;
- text-align: center;
- font-family: monospace;
- font-weight: bold;
- font-size: 10px;
- background-color: transparent;
-}
+// .relation {
+// display: flex;
+// text-align: center;
+// font-family: monospace;
+// font-weight: bold;
+// font-size: 10px;
+// background-color: blue;
+// }
.highlighted {
box-shadow: black 0 0 2px;
@@ -130,6 +130,30 @@ $width: 325;
font-weight: bold;
font-size: 11px;
}
+
+.rightArrow {
+ border-style: solid;
+ border-width: $height 0 $height $height * 1.5;
+ border-color: transparent transparent transparent black;
+ margin-top: 0.5;
+ background: transparent;
+ display: inline-block;
+ position: absolute;
+ right: -$height * 1.5;
+ transform: translate(-0.2px, 0px) scale(1.02);
+}
+.leftArrow {
+ border-style: solid;
+ border-width: $height $height * 1.5 $height 0;
+ border-color: transparent black transparent transparent;
+ margin-top: 0.5;
+ background: transparent;
+ display: inline-block;
+ position: absolute;
+ z-index: -1;
+ left: -$height * 1.5;
+ transform: translate(0.2px, 0px) scale(1.02);
+}
.relationTop {
position: absolute;
content: '';
@@ -163,82 +187,72 @@ $width: 325;
flex: 1 1 0;
}
.relationHandleLeft {
- position: absolute;
- top: 25%;
- border-style: solid;
- border-width: 6px 12px 6px 0;
- border-radius: 0px;
- left: unset;
- border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
- background: transparent;
- margin: $width + px;
+ position: absolute !important;
+ border-style: solid !important;
+ border-width: 6px 10px 6px 0 !important;
+ border-radius: 0px !important;
+ border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent !important;
+ background: transparent !important;
+ min-height: 0 !important;
+ min-width: 0 !important;
+ width: 0 !important;
+ height: 0 !important;
+
&::before {
content: '';
border-style: solid;
- border-width: 4px 8px 4px 0;
+ border-width: 4px 7.5px 4px 0;
border-color: transparent rgba(255, 255, 255, 0.6) transparent transparent;
margin-top: 0.5;
background: transparent;
z-index: -1;
display: inline-block;
position: absolute;
- top: -0.4em;
- left: 0.25em;
+ top: -4px;
+ left: 2px;
}
}
-.relationHandleBottom {
- border: 0;
- border-radius: 0;
- width: 8;
- height: 8;
- left: unset;
- margin-bottom: 10;
- background: rgba(0, 0, 0, 0.3);
- transform: rotate(-45deg);
- transform-origin: center;
- margin: $width + px;
- &::before {
- content: '';
- width: 6;
- height: 6;
- left: 1;
- bottom: 1;
- border: 0;
- border-radius: 0;
- background: rgba(255, 255, 255, 0.6);
- z-index: -1;
- display: inline-block;
- position: fixed;
- }
+.relationHandleAttribute {
+ border-radius: 1px !important;
+ left: 22.5px !important;
+ background: rgba(255, 255, 255, 0.6) !important;
+ transform: rotate(45deg) translate(-68%, 0) scale(0.9) !important;
+ border-color: rgba(22, 110, 110, 1) !important;
+ border-width: 1px !important;
+ transform-origin: center, center;
}
.relationHandleRight {
- position: absolute;
- top: -5%;
- bottom: -4px;
- transform: translate(-50%);
- border-style: solid;
- border-width: 6px 0 6px 12px;
- border-radius: 0px;
- left: unset;
- border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
- background: transparent;
- margin: $width + px;
+ width: 0 !important;
+ height: 0 !important;
+ position: absolute !important;
+
+ border-radius: 1px !important;
+ border-width: 6px 0px 6px 10px !important;
+ border-color: transparent transparent transparent rgba(0, 0, 0, 0.3) !important;
+ background: transparent !important;
+ min-height: 0 !important;
+ min-width: 0 !important;
+
&::before {
content: '';
border-style: solid;
- border-width: 4px 0 4px 8px;
+ border-width: 4px 0 4px 7.5px;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.6);
margin-top: 0.5;
background: transparent;
z-index: -1;
display: inline-block;
position: absolute;
- top: -0.4em;
- right: 0.25em;
+ top: -4px;
+ right: 2px;
}
}
.relationHandleFunction {
- margin-left: 40;
+ left: 39px !important;
+ background: rgba(255, 255, 255, 0.6) !important;
+ border-color: rgba(22, 110, 110, 1) !important;
+ border-width: 1px !important;
+ transform-origin: center, center;
}
.relationInputHolder {
display: flex;
@@ -288,5 +302,7 @@ $width: 325;
}
.relationDataWrapper {
- display: block;
+ display: flex;
+ width: 100%;
+ justify-content: center;
}
diff --git a/libs/shared/lib/querybuilder/pills/querypills.module.scss b/libs/shared/lib/querybuilder/pills/querypills.module.scss
index 2a278db4c..2cb3fedf0 100644
--- a/libs/shared/lib/querybuilder/pills/querypills.module.scss
+++ b/libs/shared/lib/querybuilder/pills/querypills.module.scss
@@ -40,24 +40,24 @@
// General style
.handleFunction {
- border: 0;
- border-radius: 50%;
- left: 40;
- width: 6;
- height: 6;
- background: rgba(0, 0, 0, 0.3);
- margin-bottom: 16;
+ border: 0 !important;
+ border-radius: 50% !important;
+ left: 40 !important;
+ width: 6 !important;
+ height: 6 !important;
+ background: rgba(0, 0, 0, 0.3) !important;
+ margin-bottom: 16 !important;
&::before {
- content: '';
- width: 4;
- height: 4;
- left: 1;
- bottom: 1;
- border: 0;
- border-radius: 50%;
- background: rgba(255, 255, 255, 0.6);
- z-index: -1;
- display: inline-block;
- position: fixed;
+ content: '' !important;
+ width: 4 !important;
+ height: 4 !important;
+ left: 1 !important;
+ bottom: 1 !important;
+ border: 0 !important;
+ border-radius: 50% !important;
+ background: rgba(255, 255, 255, 0.6) !important;
+ z-index: -1 !important;
+ display: inline-block !important;
+ position: fixed !important;
}
}
diff --git a/libs/shared/package.json b/libs/shared/package.json
index f5d77dbee..717ce13fa 100644
--- a/libs/shared/package.json
+++ b/libs/shared/package.json
@@ -43,7 +43,7 @@
"react-grid-layout": "^1.3.4",
"react-json-view": "^1.21.3",
"react-router-dom": "^6.8.1",
- "reactflow": "next",
+ "reactflow": "^11.7.0",
"regenerator-runtime": "0.13.11",
"sass": "^1.59.3",
"scss": "^0.2.4",
--
GitLab