Skip to content

Commit 37bffae

Browse files
IvanIlyichevIvanIlyichev
authored
Merge pull request #4161 from czwe-01/thulasizwe/fix/3558
Thulasizwe/fix/3558
2 parents 3abd157 + 90b0840 commit 37bffae

File tree

4 files changed

+24
-55
lines changed

4 files changed

+24
-55
lines changed

‎shesha-reactjs/src/components/formDesigner/componentPropertiesPanel/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const ComponentPropertiesPanelInner: FC = () => {
1515
description={readOnly ? 'Please select a component to view settings' : 'Please select a component to begin editing'}
1616
/>
1717
)}
18-
<div style={{ paddingBottom: '50px' }} ref={settingsPanelRef}></div>
18+
<div ref={settingsPanelRef}></div>
1919
</>
2020
);
2121
};

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

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
9090
formName,
9191
formTitle,
9292
formNameParent,
93-
// mainArea,
9493
} = useStyles().styles;
9594

9695
const quickEditModal = cx("sha-designer-modal", css`
@@ -176,6 +175,7 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
176175
overflow-y: auto;
177176
overflow-x: hidden;
178177
margin-bottom: 1rem;
178+
${sheshaStyles.thinScrollbars}
179179
}
180180
.${shaDesignerToolbar} {
181181
background: white;
@@ -254,7 +254,6 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
254254
}
255255
}
256256
.${shaDesignerToolbox} {
257-
height: 85vh;
258257
margin-bottom: 3rem;
259258
.${shaDatasourceTree} {
260259
.${prefixCls}-tree-switcher-noop {
@@ -374,7 +373,7 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
374373
}
375374
}
376375
}
377-
376+
378377
.${designerWorkArea}{
379378
background-color: white;
380379
height: 100%;
@@ -392,33 +391,6 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
392391
.${shaComponent} {
393392
min-height: 30px;
394393
}
395-
396-
/* Improve dropzone visibility during drag operations */
397-
&.sha-components-container-inner {
398-
min-height: 20px;
399-
transition: background-color 0.2s ease, border 0.2s ease;
400-
401-
&:empty {
402-
min-height: 40px;
403-
border: 2px dashed transparent;
404-
border-radius: 4px;
405-
}
406-
}
407-
}
408-
409-
/* Enhanced visual feedback when dragging */
410-
&.${shaDragging} {
411-
.${shaComponentsContainer} {
412-
&.sha-components-container-inner:empty {
413-
border-color: ${token.colorPrimary}40;
414-
background-color: ${token.colorPrimaryBg}20;
415-
}
416-
417-
&.sha-components-container-inner:hover {
418-
border-color: ${token.colorPrimary};
419-
background-color: ${token.colorPrimaryBg}40;
420-
}
421-
}
422394
}
423395
424396
> div {

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

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { createStyles, sheshaStyles } from '@/styles';
22

33
export const useStyles = createStyles(({ css, cx, prefixCls }) => {
4-
const leftSidebarWidth = "550px";
5-
const sidebarBtnHeight = "35px";
4+
const LEFT_SIDEBAR_WIDTH = "550px";
5+
const SIDEBAR_BTN_HEIGHT = "35px";
6+
const TOOLBAR_HEIGHT = "56px";
7+
const HEADER_HEIGHT = "60px";
68

79
const sidebarContainerHeader = "sidebar-container-header";
810
const sidebarContainerBody = "sidebar-container-body";
@@ -26,7 +28,7 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
2628
.${sidebarContainerMainAreaBody}{
2729
overflow: auto;
2830
height: 100%;
29-
31+
${sheshaStyles.thinScrollbars}
3032
}
3133
3234
.${sidebarContainerHeader} {
@@ -48,15 +50,17 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
4850
}
4951
5052
&.open {
51-
width: ${leftSidebarWidth};
53+
width: ${LEFT_SIDEBAR_WIDTH};
5254
display: block;
55+
overflow: auto;
56+
${sheshaStyles.thinScrollbars}
5357
5458
.${sidebarHeader} {
5559
.sidebar-header-title {
5660
display: flex;
5761
width:100%;
5862
}
59-
63+
6064
}
6165
}
6266
@@ -76,7 +80,7 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
7680
display: flex;
7781
7882
.sidebar-header-title {
79-
width: calc(${leftSidebarWidth} - ${sidebarBtnHeight});
83+
width: calc(${LEFT_SIDEBAR_WIDTH} - ${SIDEBAR_BTN_HEIGHT});
8084
display: none;
8185
align-items: center;
8286
padding: 0 ${sheshaStyles.paddingLG}px;
@@ -85,8 +89,8 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
8589
}
8690
8791
.${sidebarHeaderBtn} {
88-
height: ${sidebarBtnHeight};
89-
width: ${sidebarBtnHeight};
92+
height: ${SIDEBAR_BTN_HEIGHT};
93+
width: ${SIDEBAR_BTN_HEIGHT};
9094
display: flex;
9195
justify-content: center;
9296
align-items: center;
@@ -99,21 +103,22 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
99103
overflow-x: hidden;
100104
overflow-y: auto;
101105
display: flex;
106+
height: calc(100vh - ${HEADER_HEIGHT} - ${TOOLBAR_HEIGHT} - ${SIDEBAR_BTN_HEIGHT});
102107
padding: ${sheshaStyles.paddingLG}px;
103108
flex: 1;
109+
${sheshaStyles.thinScrollbars}
104110
105111
.sidebar-body-content {
106112
width: 100%;
107113
display: none;
108114
109115
&.open {
110116
display: block;
111-
height: 85vh;
112117
}
113118
}
114119
115120
.sidebar-body-placeholder {
116-
width: ${sidebarBtnHeight};
121+
width: ${SIDEBAR_BTN_HEIGHT};
117122
118123
&.open {
119124
width: 0;
@@ -124,7 +129,6 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
124129
125130
.${sidebarContainerLeft} {
126131
border-right: 1px solid lightgrey;
127-
min-height: calc(100vh - 102px);
128132
129133
&.open {
130134
.toggle-open-btn {
@@ -135,7 +139,6 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
135139
136140
.${sidebarContainerRight} {
137141
border-left: 1px solid lightgrey;
138-
min-height: calc(100vh - 102px);
139142
140143
&.open {
141144
.toggle-open-btn {
@@ -166,15 +169,8 @@ export const useStyles = createStyles(({ css, cx, prefixCls }) => {
166169
167170
.${canvasWrapper} {
168171
height: calc(100vh - 120px);
169-
}
170-
171-
[data-sha-c-type="datatable"] {
172-
.${canvasWrapper} {
173-
height: 100%;
174-
display: flex;
175-
flex-direction: column;
176172
overflow: auto;
177-
}
173+
${sheshaStyles.thinScrollbars}
178174
}
179175
180176
.${sidebarContainerMainArea} {

‎shesha-reactjs/src/configuration-studio/styles.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createStyles } from '@/styles';
1+
import { createStyles, sheshaStyles } from '@/styles';
22

33
export const useStyles = createStyles(({ css, cx, token, prefixCls, iconPrefixCls }) => {
44
const csHeader = "sha-cs-header";
@@ -55,7 +55,7 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls, iconPrefixCl
5555
}
5656
.${csTreeArea}{
5757
height: calc(100vh - ${headerHeight}px);
58-
overflow: 'auto';
58+
overflow: auto;
5959
.${csNavPanelSpinner}{
6060
height: 100%;
6161
>.${prefixCls}-spin-container {
@@ -85,21 +85,22 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls, iconPrefixCl
8585
}
8686
.${csWorkArea}{
8787
height: calc(100vh - ${headerHeight}px);
88-
overflow: 'auto';
88+
overflow: auto;
8989
.${csDocTabs}{
9090
height: 100%;
9191
>.ant-tabs-content-holder{
9292
height: 100%;
93+
${sheshaStyles.thinScrollbars}
9394
>.ant-tabs-content{
9495
height: 100%;
9596
overflow: hidden;
9697
}
9798
}
9899
}
100+
}
99101
.${csDocEditor}{
100102
padding: 0;
101103
}
102-
}
103104
`);
104105

105106
return {

0 commit comments

Comments
 (0)