Skip to content

Commit 83e8eed

Browse files
sloorushsloorush
committed
add edge style and border to group, list, label, edit, and subform
1 parent 9ce18c9 commit 83e8eed

11 files changed

Lines changed: 1469 additions & 1023 deletions

File tree

‎dist/assets/index-BgR0LO6p.js‎

Lines changed: 1062 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/assets/index-CCWCbohx.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎dist/assets/index-CGHDOY0v.css‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/assets/index-DSeG0Z-z.js‎

Lines changed: 0 additions & 981 deletions
This file was deleted.

‎dist/index.html‎

Lines changed: 13 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Edit/index.jsx‎

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,27 @@ const Edit = ({
8383
const fontProperties = font && font?.Properties;
8484
const customStyles = parseFlexStyles(CSS);
8585
const fontStyles = getFontStyles(font, 12);
86-
86+
87+
const getEdgeStyleBorder = (edgeStyle) => {
88+
if (!edgeStyle) return 'none';
89+
switch (edgeStyle) {
90+
case 'Ridge':
91+
return '2px ridge #E9E9E9';
92+
case 'Groove':
93+
return '2px groove #E9E9E9';
94+
case 'Recess':
95+
return '2px inset #E9E9E9';
96+
case 'Plinth':
97+
return '2px outset #E9E9E9';
98+
case 'Shadow':
99+
return '1px solid #E9E9E9';
100+
case 'None':
101+
return 'none';
102+
default:
103+
return 'none';
104+
}
105+
};
106+
87107
// console.log("291", {dateFormat, emitValue, parse:parseInt(emitValue), data})
88108
const decideInputValue = useCallback(() => {
89109
let propsValue = data?.Properties?.Value;
@@ -783,10 +803,10 @@ const Edit = ({
783803
zIndex: 1,
784804
display: Visible == 0 ? "none" : "block",
785805

786-
border:
787-
(Border && Border == "1") || (EdgeStyle && EdgeStyle == "Ridge")
788-
? "1px solid #6A6A6A"
789-
: "none",
806+
border: EdgeStyle
807+
? getEdgeStyleBorder(EdgeStyle)
808+
: (Border && Border == "1" ? "1px solid #6A6A6A" : "none"),
809+
...(EdgeStyle === 'Shadow' && { boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.3)' }),
790810
textAlign: "right",
791811
verticalAlign: "text-top",
792812
paddingBottom: "6px",
@@ -858,10 +878,10 @@ const Edit = ({
858878
zIndex: 1,
859879
display: Visible == 0 ? "none" : "block",
860880
paddingLeft: "5px",
861-
border:
862-
(Border && Border == "1") || (EdgeStyle && EdgeStyle == "Ridge")
863-
? "1px solid #6A6A6A"
864-
: "none",
881+
border: EdgeStyle
882+
? getEdgeStyleBorder(EdgeStyle)
883+
: (Border && Border == "1" ? "1px solid #6A6A6A" : "none"),
884+
...(EdgeStyle === 'Shadow' && { boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.3)' }),
865885
...(Active === 0 ? {
866886
backgroundColor: "field",
867887
color: "#838383",

‎src/components/Group.jsx‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const Group = ({ data }) => {
2828
CSS,
2929
Event,
3030
FontObj,
31+
EdgeStyle,
3132
} = data?.Properties;
3233
const { findCurrentData, socket } = useAppData();
3334
const dimensions = useResizeObserver(
@@ -54,6 +55,26 @@ const Group = ({ data }) => {
5455
const font = findCurrentData(FontObj);
5556
const fontStyles = getFontStyles(font, 12);
5657

58+
const getEdgeStyleBorder = (edgeStyle) => {
59+
if (!edgeStyle) return {};
60+
switch (edgeStyle) {
61+
case 'Ridge':
62+
return { borderWidth: '2px', borderStyle: 'ridge', borderColor: '#E9E9E9' };
63+
case 'Groove':
64+
return { borderWidth: '2px', borderStyle: 'groove', borderColor: '#E9E9E9' };
65+
case 'Recess':
66+
return { borderWidth: '2px', borderStyle: 'inset', borderColor: '#E9E9E9' };
67+
case 'Plinth':
68+
return { borderWidth: '2px', borderStyle: 'outset', borderColor: '#E9E9E9' };
69+
case 'Shadow':
70+
return { border: '1px solid #E9E9E9', boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.3)' };
71+
case 'None':
72+
return { border: 'none' };
73+
default:
74+
return {};
75+
}
76+
};
77+
5778
const updatedData = excludeKeys(data);
5879

5980
const styles = setStyle(data?.Properties, "absolute", Flex);
@@ -103,7 +124,10 @@ const Group = ({ data }) => {
103124
...styles,
104125
width,
105126
height,
106-
border: Border == 0 ? "none" : "1px solid #E9E9E9",
127+
...(EdgeStyle
128+
? getEdgeStyleBorder(EdgeStyle)
129+
: { border: Border == 0 ? "none" : "1px solid #E9E9E9" }
130+
),
107131
display: Visible == 0 ? "none" : "block",
108132
...imageStyles,
109133
...flexStyles,

‎src/components/Label.jsx‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Label = ({ data, gridValue }) => {
99
const haveColor = data?.Properties.hasOwnProperty("FCol");
1010
const haveFontProperty = data?.Properties.hasOwnProperty("Font");
1111

12-
const { Visible, Caption, Size, Font, FCol, BCol, Justify, Event, CSS } = data?.Properties;
12+
const { Visible, Caption, Size, Font, FCol, BCol, Justify, Event, CSS, EdgeStyle, Border = 0 } = data?.Properties;
1313
const { FontObj } = inheritedProperties(data, 'FontObj');
1414

1515
const customStyles = parseFlexStyles(CSS)
@@ -74,11 +74,38 @@ const Label = ({ data, gridValue }) => {
7474
background: BCol && rgbColor(BCol),
7575
}
7676

77+
const getEdgeStyleBorder = (edgeStyle) => {
78+
if (!edgeStyle) return {};
79+
switch (edgeStyle) {
80+
case 'Ridge':
81+
return { borderWidth: '2px', borderStyle: 'ridge', borderColor: '#E9E9E9' };
82+
case 'Groove':
83+
return { borderWidth: '2px', borderStyle: 'groove', borderColor: '#E9E9E9' };
84+
case 'Recess':
85+
return { borderWidth: '2px', borderStyle: 'inset', borderColor: '#E9E9E9' };
86+
case 'Plinth':
87+
return { borderWidth: '2px', borderStyle: 'outset', borderColor: '#E9E9E9' };
88+
case 'Shadow':
89+
return { border: '1px solid #E9E9E9', boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.3)' };
90+
case 'None':
91+
return { border: 'none' };
92+
default:
93+
return {};
94+
}
95+
};
7796

7897
return (
7998
<div
8099
id={data?.ID}
81-
style={{ ...styles, display: Visible == 0 ? "none" : "block" ,...customStyles}}
100+
style={{
101+
...styles,
102+
display: Visible == 0 ? "none" : "block",
103+
...(EdgeStyle
104+
? getEdgeStyleBorder(EdgeStyle)
105+
: { border: Border == 0 ? "none" : "1px solid #E9E9E9" }
106+
),
107+
...customStyles
108+
}}
82109
onMouseDown={(e) => {
83110
handleMouseDown(e, socket, Event,data?.ID);
84111
}}

‎src/components/List.jsx‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { useAppData, useResizeObserver } from "../hooks";
1717
const List = ({ data }) => {
1818
const { socket, findCurrentData, inheritedProperties } = useAppData();
1919
const styles = setStyle(data?.Properties);
20-
const { Items, SelItems, Visible, Size, Event, CSS } = data?.Properties;
20+
const { Items, SelItems, Visible, Size, Event, CSS, EdgeStyle, Border } = data?.Properties;
2121
const { FontObj } = inheritedProperties(data, 'FontObj');
2222
const customStyles = parseFlexStyles(CSS);
2323

@@ -82,6 +82,26 @@ const List = ({ data }) => {
8282
cursor: "pointer",
8383
};
8484

85+
const getEdgeStyleBorder = (edgeStyle) => {
86+
if (!edgeStyle) return {};
87+
switch (edgeStyle) {
88+
case 'Ridge':
89+
return { borderWidth: '2px', borderStyle: 'ridge', borderColor: '#E9E9E9' };
90+
case 'Groove':
91+
return { borderWidth: '2px', borderStyle: 'groove', borderColor: '#E9E9E9' };
92+
case 'Recess':
93+
return { borderWidth: '2px', borderStyle: 'inset', borderColor: '#E9E9E9' };
94+
case 'Plinth':
95+
return { borderWidth: '2px', borderStyle: 'outset', borderColor: '#E9E9E9' };
96+
case 'Shadow':
97+
return { border: '1px solid #E9E9E9', boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.3)' };
98+
case 'None':
99+
return { border: 'none' };
100+
default:
101+
return {};
102+
}
103+
};
104+
85105
// Meta-click and plain click both reset this state, and then it is used for
86106
// shift-clicking. The logic from Windows is that if you've ctrl-clicked
87107
// multiple items, then the last one clicked is used for the next shift click.
@@ -256,7 +276,12 @@ const List = ({ data }) => {
256276
style={{
257277
...styles,
258278
...width,
259-
border: "1px solid " + (isFocused ? "black" : "darkgrey"),
279+
...(EdgeStyle
280+
? getEdgeStyleBorder(EdgeStyle)
281+
: Border !== undefined
282+
? { border: Border == 0 ? "none" : "1px solid #E9E9E9" }
283+
: { border: "1px solid " + (isFocused ? "black" : "darkgrey") }
284+
),
260285
display: Visible === 0 ? "none" : "block",
261286
}}
262287
tabIndex={0}

‎src/components/SubForm/index.jsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ const SubForm = ({ data }) => {
3030
Flex = 0,
3131
CSS,
3232
Event,
33+
EdgeStyle,
34+
Border = 0,
3335
} = data?.Properties;
3436

3537
const observedDiv = useRef(null);
@@ -50,12 +52,36 @@ const SubForm = ({ data }) => {
5052
const font = findCurrentData(FontObj);
5153
const fontStyles = getFontStyles(font, 12);
5254

55+
const getEdgeStyleBorder = (edgeStyle) => {
56+
if (!edgeStyle) return {};
57+
switch (edgeStyle) {
58+
case 'Ridge':
59+
return { borderWidth: '2px', borderStyle: 'ridge', borderColor: '#E9E9E9' };
60+
case 'Groove':
61+
return { borderWidth: '2px', borderStyle: 'groove', borderColor: '#E9E9E9' };
62+
case 'Recess':
63+
return { borderWidth: '2px', borderStyle: 'inset', borderColor: '#E9E9E9' };
64+
case 'Plinth':
65+
return { borderWidth: '2px', borderStyle: 'outset', borderColor: '#E9E9E9' };
66+
case 'Shadow':
67+
return { border: '1px solid #E9E9E9', boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.3)' };
68+
case 'None':
69+
return { border: 'none' };
70+
default:
71+
return {};
72+
}
73+
};
74+
5375
let updatedStyles = {
5476
overflow: "clip",
5577
...styles,
5678
...imageStyles,
5779
...flexStyles,
5880
...fontStyles,
81+
...(EdgeStyle
82+
? getEdgeStyleBorder(EdgeStyle)
83+
: { border: Border == 0 ? "none" : "1px solid #E9E9E9" }
84+
),
5985
};
6086

6187
// TODO this is extremely suspect and looks to be for one purpose!

0 commit comments

Comments
 (0)