Skip to content

Commit 41f238d

Browse files
czwe-01czwe-01
committed
fix: consistent border
1 parent 1f4a79c commit 41f238d

File tree

7 files changed

+114
-106
lines changed

7 files changed

+114
-106
lines changed

‎shesha-reactjs/src/components/entityPicker/index.tsx‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,9 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
6363
outcomeValueFunc,
6464
incomeValueFunc,
6565
placeholder,
66-
hideBorder
66+
dividerWidth = '1px',
67+
dividerStyle = 'solid',
68+
dividerColor = '#d9d9d9'
6769
} = props;
6870

6971
if (!entityType)
@@ -147,10 +149,8 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
147149
if (onChange) onChange(null, null);
148150
};
149151

150-
const { background, backgroundImage, borderRadius, borderWidth, borderTopWidth, width, minWidth, maxWidth,
151-
borderBottomWidth, borderRightColor, borderRightStyle, borderColor, borderBottomLeftRadius,
152-
borderTopLeftRadius, MozBorderTopColors, borderTopStyle, borderTopColor, borderTop, boxShadow,
153-
borderBottom, borderBottomColor, borderBottomStyle, borderRight, borderRightWidth, ...restStyle } = style;
152+
const { borderBottomLeftRadius,
153+
borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, width, minWidth, maxWidth, boxShadow, background, backgroundImage, marginTop, marginRight, marginBottom, marginLeft, paddingTop, paddingRight, paddingBottom, paddingLeft, ...restStyle } = style;
154154

155155
const borderRadii = style?.borderRadius?.toString().split(' ');
156156

@@ -164,17 +164,20 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
164164
fontSize: Number(style?.fontSize ?? 14),
165165
colorText: style?.color,
166166
fontFamily: style?.fontFamily,
167-
fontWeightStrong: Number(style.fontWeight)
167+
fontWeightStrong: Number(style.fontWeight),
168+
multipleItemBg: 'rgba(0,0,0,0.06)'
168169
},
169170
},
170171
}}
171172
>
172173
{useButtonPicker ? (
173-
<Button onClick={handleButtonPickerClick} size={size} {...(pickerButtonProps || {})}>
174+
<Button onClick={handleButtonPickerClick} size={size} {...(pickerButtonProps || {})} style={style}>
174175
{title}
175176
</Button>
176177
) : (
177-
<Space.Compact style={{ width: '100%', ...style }}>
178+
<Space.Compact style={{
179+
width, minWidth, maxWidth, boxShadow, marginTop, marginRight, marginBottom, marginLeft, background, backgroundImage, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius
180+
}}>
178181
<Select
179182
size={size}
180183
onDropdownVisibleChange={(_e) => {
@@ -191,11 +194,19 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
191194
allowClear
192195
mode={selectedMode}
193196
options={options}
194-
variant={hideBorder ? 'borderless' : null}
197+
variant='borderless'
195198
suffixIcon={null}
196199
onChange={handleMultiChange}
197200
className={styles.entitySelect}
198-
style={{ width: '100%' }}
201+
style={{
202+
...restStyle,
203+
borderRightStyle: 'none',
204+
borderRightWidth: 0,
205+
marginTop: 0,
206+
marginRight: 0, marginBottom: 0, marginLeft: 0, paddingTop, paddingRight, paddingBottom, paddingLeft,
207+
borderTopRightRadius: 0, borderBottomRightRadius: 0,
208+
borderTopLeftRadius, borderBottomLeftRadius
209+
}}
199210
loading={selection.loading}
200211
>
201212
{''}
@@ -209,10 +220,20 @@ const EntityPickerEditable = (props: IEntityPickerProps) => {
209220
icon={<EllipsisOutlined />}
210221
style={{
211222
...restStyle,
223+
borderTopLeftRadius: 0,
224+
borderBottomLeftRadius: 0,
225+
marginTop: 0,
226+
marginRight: 0,
227+
marginBottom: 0,
228+
marginLeft: 0,
229+
paddingTop,
230+
paddingRight,
231+
paddingBottom,
232+
paddingLeft,
233+
borderLeftStyle: dividerStyle,
234+
borderLeftWidth: dividerWidth,
235+
borderLeftColor: dividerColor,
212236
borderRadius: `0px ${borderRadii?.[1]} ${borderRadii?.[2]} 0px`,
213-
background: 'transparent',
214-
borderLeft: '1px solid #d9d9d9',
215-
height: '100%',
216237
zIndex: 1,
217238
}}
218239
type='text'

‎shesha-reactjs/src/components/entityPicker/models.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,4 +65,7 @@ export interface IEntityPickerProps extends Omit<IWrappedEntityPickerProps, 'onD
6565
placeholder: string;
6666
incomeValueFunc: IncomeValueFunc;
6767
outcomeValueFunc: OutcomeValueFunc;
68+
dividerWidth?: string;
69+
dividerStyle?: CSSProperties['borderLeftStyle'];
70+
dividerColor?: string;
6871
}

‎shesha-reactjs/src/components/entityPicker/styles/styles.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
6565
`);
6666

6767
const entitySelect = cx("entity-select", css`
68+
width: calc(100% - 32px) !important;
6869
&:hover: {
6970
color: colorTextSecondary,
7071
}

‎shesha-reactjs/src/designer-components/dataTable/table/columnsEditor/columnSettings.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -153,18 +153,20 @@ export const getColumnSettings = (data?: any) => ({
153153
"inputs": [
154154
{
155155
"id": "anchored1",
156-
"type": "dropdown",
156+
"type": "radio",
157157
"propertyName": "anchored",
158158
"label": "Anchored",
159159
"jsSetting": true,
160-
"dropdownOptions": [
160+
"buttonGroupOptions": [
161161
{
162-
"label": "Left",
163-
"value": "left"
162+
"title": "Left",
163+
"value": "left",
164+
"icon": "LeftOutlined"
164165
},
165166
{
166-
"label": "Right",
167-
"value": "right"
167+
"title": "Right",
168+
"value": "right",
169+
"icon": "RightOutlined"
168170
}
169171
],
170172
"allowClear": true

‎shesha-reactjs/src/designer-components/entityPicker/index.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ export interface IEntityPickerComponentProps extends IConfigurableFormComponent,
4949
widthUnits?: string;
5050
buttons?: ButtonGroupItemProps[];
5151
footerButtons?: ModalFooterButtons;
52+
dividerWidth?: string;
53+
dividerStyle?: CSSProperties['borderLeftStyle'];
54+
dividerColor?: string;
5255
}
5356

5457
const EntityPickerComponent: IToolboxComponent<IEntityPickerComponentProps> = {
@@ -198,6 +201,9 @@ const EntityPickerComponent: IToolboxComponent<IEntityPickerComponentProps> = {
198201
value={value}
199202
onChange={onChangeInternal}
200203
size={model.size}
204+
dividerWidth={model.dividerWidth}
205+
dividerStyle={model.dividerStyle}
206+
dividerColor={model.dividerColor}
201207
/>
202208
);
203209
}}
@@ -257,7 +263,7 @@ const EntityPickerComponent: IToolboxComponent<IEntityPickerComponentProps> = {
257263
...model,
258264
editMode: 'inherited',
259265
entityType: isEntityReferencePropertyMetadata(propMetadata)
260-
? propMetadata.entityType
266+
? propMetadata.entityType
261267
: isEntityReferenceArrayPropertyMetadata(propMetadata)
262268
? propMetadata.entityType
263269
: undefined,

‎shesha-reactjs/src/designer-components/entityPicker/settingsForm.ts‎

Lines changed: 60 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { DesignerToolbarSettings } from '@/interfaces/toolbarSettings';
22
import { FormLayout } from 'antd/lib/form/Form';
33
import { fontTypes, fontWeights, textAlign } from '../_settings/utils/font/utils';
4-
import { getBorderInputs, getCornerInputs } from '../_settings/utils/border/utils';
4+
import { borderStyles, getBorderInputs, getCornerInputs } from '../_settings/utils/border/utils';
55
import { nanoid } from '@/utils/uuid';
6-
import { repeatOptions } from '../_settings/utils/background/utils';
6+
import { backgroundTypeOptions, positionOptions, repeatOptions, sizeOptions } from '../_settings/utils/background/utils';
77

88
export const getSettings = (data) => {
99

@@ -185,7 +185,7 @@ export const getSettings = (data) => {
185185
label: 'Value Format',
186186
dropdownOptions: [
187187
{
188-
label: 'Simple Id',
188+
label: 'Simple ID',
189189
value: 'simple',
190190
},
191191
{
@@ -309,7 +309,7 @@ export const getSettings = (data) => {
309309
id: nanoid(),
310310
hidden: { _code: 'return !(getSettingValue(data?.showModalFooter) === true || getSettingValue(data?.footerButtons) === "default");', _mode: 'code', _value: false } as any,
311311
propertyName: 'submitHttpVerb',
312-
label: 'Submit Http Verb',
312+
label: 'Submit HTTP Verb',
313313
dropdownOptions: [
314314
{ label: 'POST', value: 'POST' },
315315
{ label: 'PUT', value: 'PUT' },
@@ -329,7 +329,7 @@ export const getSettings = (data) => {
329329
id: '264903ff-b525-4a6e-893f-d560b219df9d',
330330
propertyName: 'modalWidth',
331331
inputType: 'customDropdown',
332-
label: 'Dialog Width (%)',
332+
label: 'Dialog Width',
333333
allowClear: true,
334334
customDropdownMode: 'single',
335335
dropdownOptions: [
@@ -469,6 +469,7 @@ export const getSettings = (data) => {
469469
hideLabel: true,
470470
width: 60,
471471
dropdownOptions: textAlign,
472+
hidden: { _code: 'return getSettingValue(data?.mode) === "multiple";', _mode: 'code', _value: false } as any,
472473
},
473474
],
474475
})
@@ -604,6 +605,7 @@ export const getSettings = (data) => {
604605
]
605606
}
606607
})
608+
607609
.addCollapsiblePanel({
608610
id: 'backgroundStyleCollapsiblePanel',
609611
propertyName: 'pnlBackgroundStyle',
@@ -624,33 +626,7 @@ export const getSettings = (data) => {
624626
propertyName: "background.type",
625627
inputType: "radio",
626628
tooltip: "Select a type of background",
627-
buttonGroupOptions: [
628-
{
629-
value: "color",
630-
icon: "FormatPainterOutlined",
631-
title: "Color"
632-
},
633-
{
634-
value: "gradient",
635-
icon: "BgColorsOutlined",
636-
title: "Gradient"
637-
},
638-
{
639-
value: "image",
640-
icon: "PictureOutlined",
641-
title: "Image"
642-
},
643-
{
644-
value: "url",
645-
icon: "LinkOutlined",
646-
title: "URL"
647-
},
648-
{
649-
value: "storedFile",
650-
icon: "DatabaseOutlined",
651-
title: "Stored File"
652-
}
653-
],
629+
buttonGroupOptions: backgroundTypeOptions,
654630
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
655631
})
656632
.addSettingsInputRow({
@@ -727,74 +703,27 @@ export const getSettings = (data) => {
727703
id: "backgroundStyleRow-controls",
728704
parentId: 'backgroundStyleRow',
729705
inline: true,
706+
hidden: { _code: 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.background?.type) === "color";', _mode: 'code', _value: false } as any,
730707
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
731708
inputs: [
732709
{
733710
type: 'customDropdown',
734711
id: 'backgroundStyleRow-size',
735712
label: "Size",
713+
customTooltip: 'Size of the background image, two space separated values with units e.g "100% 100px"',
736714
hideLabel: true,
737715
propertyName: "background.size",
738-
dropdownOptions: [
739-
{
740-
value: "cover",
741-
label: "Cover"
742-
},
743-
{
744-
value: "contain",
745-
label: "Contain"
746-
},
747-
{
748-
value: "auto",
749-
label: "Auto"
750-
}
751-
],
716+
dropdownOptions: sizeOptions,
752717
},
753718
{
754719
type: 'customDropdown',
755720
id: 'backgroundStyleRow-position',
756721
label: "Position",
757722
hideLabel: true,
723+
customTooltip: 'Position of the background image, two space separated values with units e.g "5em 100px"',
758724
propertyName: "background.position",
759-
dropdownOptions: [
760-
{
761-
value: "center",
762-
label: "Center"
763-
},
764-
{
765-
value: "top",
766-
label: "Top"
767-
},
768-
{
769-
value: "left",
770-
label: "Left"
771-
},
772-
{
773-
value: "right",
774-
label: "Right"
775-
},
776-
{
777-
value: "bottom",
778-
label: "Bottom"
779-
},
780-
{
781-
value: "top left",
782-
label: "Top Left"
783-
},
784-
{
785-
value: "top right",
786-
label: "Top Right"
787-
},
788-
{
789-
value: "bottom left",
790-
label: "Bottom Left"
791-
},
792-
{
793-
value: "bottom right",
794-
label: "Bottom Right"
795-
}
796-
],
797-
}
725+
dropdownOptions: positionOptions,
726+
},
798727
]
799728
})
800729
.addSettingsInputRow({
@@ -925,6 +854,52 @@ export const getSettings = (data) => {
925854
]
926855
}
927856
})
857+
.addCollapsiblePanel({
858+
id: 'entityPickerDividerCollapsiblePanel',
859+
propertyName: 'entityPickerDivider',
860+
label: 'Entity Picker Divider',
861+
labelAlign: 'right',
862+
ghost: true,
863+
content: {
864+
id: 'entityPickerDividerPnl',
865+
components: [...new DesignerToolbarSettings()
866+
.addSettingsInputRow({
867+
id: nanoid(),
868+
parentId: 'borderStylePnl',
869+
inline: true,
870+
readOnly: false,
871+
inputs: [
872+
{
873+
id: nanoid(),
874+
type: 'textField',
875+
label: "Width",
876+
hideLabel: true,
877+
propertyName: 'dividerWidth',
878+
},
879+
{
880+
id: nanoid(),
881+
label: "Style",
882+
propertyName: 'dividerStyle',
883+
type: "dropdown",
884+
hideLabel: true,
885+
width: 60,
886+
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
887+
dropdownOptions: borderStyles,
888+
},
889+
{
890+
id: nanoid(),
891+
label: `Color`,
892+
propertyName: 'dividerColor',
893+
type: "colorPicker",
894+
readOnly: { _code: 'return getSettingValue(data?.readOnly);', _mode: 'code', _value: false } as any,
895+
hideLabel: true,
896+
}
897+
]
898+
})
899+
.toJson()
900+
]
901+
}
902+
})
928903
.toJson()]
929904
}).toJson()]
930905
},

‎shesha-reactjs/src/designer-components/entityPicker/utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const defaultStyles = (prev): IStyleType => {
55

66
return {
77
border: { hideBorder: false, radiusType: 'all', borderType: 'all', border: { all: { width: '1px', style: 'solid', color: '#d9d9d9' } }, radius: { all: 8 } },
8-
dimensions: { width: '100%', height: size === 'small' ? '22px' : size === 'large' ? '38px' : '30px', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: 'auto' },
8+
dimensions: { width: '100%', height: size === 'small' ? '22px' : size === 'large' ? '38px' : 'auto', minHeight: '0px', maxHeight: 'auto', minWidth: '0px', maxWidth: 'auto' },
99
background: {
1010
type: 'color',
1111
color: '#fff',

0 commit comments

Comments
 (0)