Skip to content
Snippets Groups Projects
Commit 0777130c authored by Leonardo Christino's avatar Leonardo Christino
Browse files

fix(qb): added an invisible padding to entity nodes

parent 3e3ee40b
No related branches found
No related tags found
1 merge request!43fix(qb): added an invisible padding to entity nodes
Hide whitespace changes
Inline Side-by-side
Showing
with 65 additions and 180 deletions
apps/web/.env
+ 1
− 2
View file @ 0777130c
VITE_BACKEND_URL=https://api.graphpolaris.com
VITE_STAGING=local
VITE_GRAPHPOLARIS_VERSION=dev-build
\ No newline at end of file
VITE_STAGING=local
\ No newline at end of file
apps/web/.env.development
+ 0
− 1
View file @ 0777130c
......@@ -5,4 +5,3 @@ VITE_SKIP_LOGIN=true
VITE_BACKEND_USER=:3000
VITE_BACKEND_QUERY=:3003
VITE_BACKEND_SCHEMA=:3002
VITE_GRAPHPOLARIS_VERSION=dev-build
apps/web/.env.production
+ 0
− 1
View file @ 0777130c
......@@ -6,5 +6,4 @@ VITE_SKIP_LOGIN=false
VITE_BACKEND_USER=/user
VITE_BACKEND_QUERY=/query
VITE_BACKEND_SCHEMA=/schema
GRAPHPOLARIS_VERSION=prod-build
apps/web/src/components/navbar/navbar.tsx
+ 4
− 2
View file @ 0777130c
......@@ -69,6 +69,8 @@ export const Navbar = (props: NavbarComponentProps) => {
const currentLogo = !'dark' ? logo_white : logo; // TODO: support dark mode
const buildInfo = import.meta.env.VITE_GRAPHPOLAIRS_VERSION || 'dev';
return (
<div className="w-full h-auto px-5">
<NewDatabaseForm open={addDatabaseFormOpen} onClose={() => setAddDatabaseFormOpen(false)} />
......@@ -163,7 +165,7 @@ export const Navbar = (props: NavbarComponentProps) => {
</li>
<div className="menu-title">
<div className="absolute left-0 h-0.5 w-full bg-offwhite-300"></div>
<h3 className="text-xs mt-3">Version: {import.meta.env.VITE_GRAPHPOLARIS_VERSION}</h3>
<h3 className="text-xs mt-3">Version: {buildInfo}</h3>
</div>
</>
) : (
......@@ -185,7 +187,7 @@ export const Navbar = (props: NavbarComponentProps) => {
</div>
<div className="menu-title">
<div className="absolute left-0 h-0.5 w-full bg-offwhite-300"></div>
<h3 className="text-xs mt-3">Version: {import.meta.env.VITE_GRAPHPOLARIS_VERSION}</h3>
<h3 className="text-xs mt-3">Version: {buildInfo}</h3>
</div>
</>
)}
......
libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss
+ 0
− 98
View file @ 0777130c
@import '../../querypills.module.scss';
.highlighted {
box-shadow: black 0 0 2px;
}
.react-flow__edge-default .selected {
stroke: gray !important;
}
.contentWrapper {
margin-left: 3ch;
span {
max-width: 20ch;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
}
}
// Entity element
.entity {
border-left: 3px solid;
@apply bg-entity-50;
@apply border-l-entity-600;
font-weight: bold;
min-width: 8rem;
font-size: 13px;
.title {
position: relative;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
padding: 0.2rem 1.2rem;
text-align: center;
flex-grow: 1;
background-color: '#eee';
}
@keyframes slide-down {
0% {
max-height: 0px;
opacity: 0;
transform: translateY(0%);
}
100% {
max-height: 100000px;
opacity: 1;
transform: translateY(0);
}
}
.content {
padding: 0.2rem 1.2rem;
// visibility: hidden;
display: none;
animation: slide-down 0.2s ease-out;
overflow: hidden;
max-height: 0;
font-weight: normal;
// border-left: 1px solid;
// @apply bg-entity-50;
// @apply border-l-entity-800;
// @apply bg-base-100;
}
.content_display {
// visibility: visible;
display: block;
max-height: unset;
}
.io {
top: auto;
transform: translate(0, -115%);
}
.io_right {
right: 0.5rem;
}
}
.entityFade {
opacity: 1;
animation-iteration-count: 1;
animation: fade-id, 600ms, cubic-bezier(0.4, 0, 1, 1);
@keyframes fade-id {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.module.scss.d.ts
+ 0
− 11
View file @ 0777130c
......@@ -9,8 +9,6 @@ declare const classNames: {
readonly handle_logic_float: 'handle_logic_float';
readonly handle_logic_int: 'handle_logic_int';
readonly handle_logic_string: 'handle_logic_string';
readonly handle_from_relation: 'handle_from_relation';
readonly handle_to_relation: 'handle_to_relation';
readonly 'react-flow__node': 'react-flow__node';
readonly selected: 'selected';
readonly entityWrapper: 'entityWrapper';
......@@ -21,14 +19,5 @@ declare const classNames: {
readonly handleConnectedBorderRight: 'handleConnectedBorderRight';
readonly handleConnectedBorderLeft: 'handleConnectedBorderLeft';
readonly handleFunction: 'handleFunction';
readonly highlighted: 'highlighted';
readonly contentWrapper: 'contentWrapper';
readonly entity: 'entity';
readonly title: 'title';
readonly content: 'content';
readonly content_display: 'content_display';
readonly io: 'io';
readonly io_right: 'io_right';
readonly entityFade: 'entityFade';
};
export = classNames;
libs/shared/lib/querybuilder/pills/customFlowPills/entitypill/entitypill.tsx
+ 60
− 43
View file @ 0777130c
......@@ -47,52 +47,69 @@ export const EntityFlowElement = React.memo((node: SchemaReactflowEntityNode) =>
console.log('EntityPill onConnect', params);
};
const showingDropdown = hovered || handleBeingDragged !== -1 || attributeEdges.length > 0;
const showingDropdown = hovered || handleBeingDragged !== -1 || attributeEdges.length > 0 || forceOpen;
const dropDown = useMemo(() => {
if (!data?.attributes) return null;
return data.attributes
.filter(
(attribute, i) =>
forceOpen ||
hovered ||
handleBeingDragged === i ||
(attributeEdges.some(
(edge) =>
edge?.attributes?.sourceHandleData &&
toHandleId(edge?.attributes?.sourceHandleData) === handleDataFromReactflowToId(node, attribute)
) &&
!!attribute.handleData.attributeName)
)
.map((attribute, i) => (
<div
className="px-5 py-1 font-semibold"
key={(attribute.handleData.attributeName || '') + i}
onMouseDown={(event: React.MouseEvent) => {
onHandleMouseDown(attribute, i, event);
}}
>
{attribute.handleData.attributeName}
<Handle
id={handleDataFromReactflowToId(node, attribute)}
type="source"
position={Position.Right}
className={
styles.handle +
' ' +
(attribute.handleData.attributeType ? styleHandleMap[attribute.handleData.attributeType] : '') +
' !top-auto !-translate-y-[115%] !right-[1.2rem]'
}
></Handle>
</div>
));
}, [data.attributes, hovered, handleBeingDragged, attributeEdges]);
return (
<div className={`${styles.entity} ${styles.entityFade} query_builder-entity`} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<Handle id={toHandleId(data.leftRelationHandleId)} type="target" position={Position.Left} className={styles.handle_from_relation} />
<Handle id={toHandleId(data.rightRelationHandleId)} type="source" position={Position.Right} className={styles.handle_to_relation} />
<div className={styles.title}>{data.name}</div>
{data?.attributes && (
<div className={styles.content + ' ' + (showingDropdown || forceOpen || hovered ? styles.content_display : '')}>
{data.attributes
.filter(
(attribute, i) =>
forceOpen ||
hovered ||
handleBeingDragged === i ||
(attributeEdges.some(
(edge) =>
edge?.attributes?.sourceHandleData &&
toHandleId(edge?.attributes?.sourceHandleData) === handleDataFromReactflowToId(node, attribute)
) &&
!!attribute.handleData.attributeName)
)
.map((attribute, i) => (
<div
key={(attribute.handleData.attributeName || '') + i}
onMouseDown={(event: React.MouseEvent) => {
onHandleMouseDown(attribute, i, event);
}}
>
{attribute.handleData.attributeName}
<Handle
id={handleDataFromReactflowToId(node, attribute)}
type="source"
position={Position.Right}
className={
(attribute.handleData.attributeType ? styleHandleMap[attribute.handleData.attributeType] : '') +
' ' +
styles.io +
' ' +
styles.io_right
}
></Handle>
</div>
))}
<div className="p-3 bg-transparent" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<div className={`border-l-[3px] border-solid bg-entity-50 border-l-entity-600 font-bold text-xs min-w-[8rem] query_builder-entity`}>
<div>
<Handle
id={toHandleId(data.leftRelationHandleId)}
type="target"
position={Position.Left}
className={styles.handle + ' !top-6 !left-2 !bg-entity-800 !rounded-none'}
/>
<Handle
id={toHandleId(data.rightRelationHandleId)}
type="source"
position={Position.Right}
className={styles.handle + ' !top-6 !right-2 !bg-entity-800 !rounded-none'}
/>
<div className="text-center py-1">{data.name}</div>
</div>
)}
{data?.attributes && showingDropdown && (
<div className={'collapse-content ' + showingDropdown ? 'animate-openmenu ' : 'animate-closemenu '}>{dropDown}</div>
)}
</div>
</div>
);
});
......
libs/shared/lib/querybuilder/pills/customFlowPills/logicpill/logicpill.module.scss.d.ts
+ 0
− 2
View file @ 0777130c
......@@ -9,8 +9,6 @@ declare const classNames: {
readonly handle_logic_float: 'handle_logic_float';
readonly handle_logic_int: 'handle_logic_int';
readonly handle_logic_string: 'handle_logic_string';
readonly handle_from_relation: 'handle_from_relation';
readonly handle_to_relation: 'handle_to_relation';
readonly 'react-flow__node': 'react-flow__node';
readonly selected: 'selected';
readonly entityWrapper: 'entityWrapper';
......
libs/shared/lib/querybuilder/pills/customFlowPills/relationpill/relationpill.module.scss.d.ts
+ 0
− 2
View file @ 0777130c
......@@ -9,8 +9,6 @@ declare const classNames: {
readonly handle_logic_float: 'handle_logic_float';
readonly handle_logic_int: 'handle_logic_int';
readonly handle_logic_string: 'handle_logic_string';
readonly handle_from_relation: 'handle_from_relation';
readonly handle_to_relation: 'handle_to_relation';
readonly 'react-flow__node': 'react-flow__node';
readonly selected: 'selected';
readonly entityWrapper: 'entityWrapper';
......
libs/shared/lib/querybuilder/pills/handles.module.scss
+ 0
− 14
View file @ 0777130c
......@@ -4,20 +4,6 @@
width: 8px !important;
}
.handle_to_relation {
@extend .handle;
border-radius: 1px !important;
top: 0.75rem !important;
@apply bg-entity-800 #{!important}; //css-ignore
}
.handle_from_relation {
@extend .handle;
border-radius: 1px !important;
top: 0.75rem !important;
@apply bg-entity-800 #{!important}; //css-ignore
}
.handle_logic {
@extend .handle;
......
libs/shared/lib/querybuilder/pills/handles.module.scss.d.ts
+ 0
− 2
View file @ 0777130c
......@@ -9,7 +9,5 @@ declare const classNames: {
readonly handle_logic_float: 'handle_logic_float';
readonly handle_logic_int: 'handle_logic_int';
readonly handle_logic_string: 'handle_logic_string';
readonly handle_from_relation: 'handle_from_relation';
readonly handle_to_relation: 'handle_to_relation';
};
export = classNames;
libs/shared/lib/querybuilder/pills/querypills.module.scss.d.ts
+ 0
− 2
View file @ 0777130c
......@@ -9,8 +9,6 @@ declare const classNames: {
readonly handle_logic_float: 'handle_logic_float';
readonly handle_logic_int: 'handle_logic_int';
readonly handle_logic_string: 'handle_logic_string';
readonly handle_from_relation: 'handle_from_relation';
readonly handle_to_relation: 'handle_to_relation';
readonly 'react-flow__node': 'react-flow__node';
readonly selected: 'selected';
readonly entityWrapper: 'entityWrapper';
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment