Skip to content

Commit 32da143

Browse files
ghiscodingghiscoding
authored
fix(core): rollback slickgrid width UI change & drop ::ms styling (#1977)
* fix(core): rollback slickgrid width UI regression & drop :ms styling
1 parent 6a4cbbe commit 32da143

6 files changed

Lines changed: 126 additions & 142 deletions

File tree

‎packages/common/src/core/slickGrid.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2969,7 +2969,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
29692969
continue;
29702970
}
29712971
const absMinWidth = Math.max(c.minWidth!, this.absoluteColumnMinWidth);
2972-
let shrinkSize = Math.fround(shrinkProportion * (width - absMinWidth)) || 1;
2972+
let shrinkSize = Math.floor(shrinkProportion * (width - absMinWidth)) || 1;
29732973
shrinkSize = Math.min(shrinkSize, width - absMinWidth);
29742974
total -= shrinkSize;
29752975
shrinkLeeway -= shrinkSize;
@@ -2996,7 +2996,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
29962996
if (!c.resizable || c.maxWidth! <= currentWidth) {
29972997
growSize = 0;
29982998
} else {
2999-
growSize = Math.min(Math.fround(growProportion * currentWidth) - currentWidth, c.maxWidth! - currentWidth || 1000000) || 1;
2999+
growSize = Math.min(Math.floor(growProportion * currentWidth) - currentWidth, c.maxWidth! - currentWidth || 1000000) || 1;
30003000
}
30013001
total += growSize;
30023002
widths[i] += total <= availWidth ? growSize : 0;

‎packages/common/src/styles/extra-styling.scss‎

Lines changed: 46 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
@use './variables' as v;
22

3-
$slick-font-size-count: 50;
4-
$slick-margin-max-count: 50;
3+
$slick-margin-max-count: 30;
54
$slick-padding-max-count: 30;
65

7-
.pointer { cursor: pointer; }
8-
.bold { font-weight: bold; }
6+
.pointer {
7+
cursor: pointer;
8+
}
9+
.bold {
10+
font-weight: bold;
11+
}
912

1013
.fake-hyperlink {
1114
cursor: pointer;
1215
color: v.$slick-link-color;
1316
&:hover {
14-
text-decoration: underline;
17+
text-decoration: underline;
1518
}
1619
}
1720

@@ -27,45 +30,63 @@ $slick-padding-max-count: 30;
2730
}
2831
}
2932

30-
.delete-icon {
31-
&:hover {
32-
color: #b14c4a;
33-
}
33+
.delete-icon :hover {
34+
color: #b14c4a;
3435
}
35-
.edit-icon,
36-
.info-icon {
37-
&:hover {
38-
color: rgb(0, 153, 255);
39-
}
36+
.edit-icon:hover,
37+
.info-icon:hover {
38+
color: #0099ff;
4039
}
4140

4241
@for $percent from 1 through 10 {
43-
.height-#{$percent * 10} { height: #{$percent * 10%} !important; }
42+
.height-#{$percent * 10} {
43+
height: #{$percent * 10%} !important;
44+
}
4445
}
4546

4647
// margin-0px up to margin-30px
4748
@for $i from 0 through $slick-margin-max-count {
48-
.margin-#{$i}px { margin: #{$i}px; }
49+
.margin-#{$i}px {
50+
margin: #{$i}px;
51+
}
4952
}
5053

5154
// padding-0px up to padding-30px
5255
@for $i from 0 through $slick-padding-max-count {
53-
.padding-#{$i}px { padding: #{$i}px; }
56+
.padding-#{$i}px {
57+
padding: #{$i}px;
58+
}
5459
}
5560

5661
.margin-auto {
5762
margin: auto;
5863
}
5964

6065
/* Text and Alignment Utilities */
61-
.text-bold { font-weight: bold !important; }
62-
.text-italic { font-style: italic !important; }
63-
.text-center { text-align: center !important; }
64-
.text-left { text-align: left !important; }
65-
.text-right { text-align: right !important; }
66-
.text-lowercase { text-transform: lowercase !important; }
67-
.text-uppercase { text-transform: uppercase !important; }
68-
.text-underline { text-decoration: underline !important; }
66+
.text-bold {
67+
font-weight: bold !important;
68+
}
69+
.text-italic {
70+
font-style: italic !important;
71+
}
72+
.text-center {
73+
text-align: center !important;
74+
}
75+
.text-left {
76+
text-align: left !important;
77+
}
78+
.text-right {
79+
text-align: right !important;
80+
}
81+
.text-lowercase {
82+
text-transform: lowercase !important;
83+
}
84+
.text-uppercase {
85+
text-transform: uppercase !important;
86+
}
87+
.text-underline {
88+
text-decoration: underline !important;
89+
}
6990

7091
.vertical-align-bottom,
7192
.vertical-align-middle,

‎packages/common/src/styles/slick-editors.scss‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@use './slick.layout' as sl;
33
@use './svg-utilities' as svg;
44

5-
.slick-cell {
5+
.slick-cell {
66
input.dual-editor-text,
77
input.editor-text {
88
border: var(--slick-text-editor-border, v.$slick-text-editor-border);
@@ -115,11 +115,14 @@
115115
}
116116

117117
/* Long Text Editor */
118+
.slick-large-editor-text,
119+
.slick-large-editor-text textarea {
120+
background: var(--slick-large-editor-background-color, v.$slick-large-editor-background-color);
121+
color: var(--slick-large-editor-text-color, v.$slick-large-editor-text-color);
122+
}
118123
.slick-large-editor-text {
119124
z-index: 10000;
120125
position: absolute;
121-
background: var(--slick-large-editor-background-color, v.$slick-large-editor-background-color);
122-
color: var(--slick-large-editor-text-color, v.$slick-large-editor-text-color);
123126
padding: var(--slick-large-editor-text-padding, v.$slick-large-editor-text-padding);
124127
border: var(--slick-large-editor-border, v.$slick-large-editor-border);
125128
border-radius: var(--slick-large-editor-border-radius, v.$slick-large-editor-border-radius);
@@ -133,8 +136,6 @@
133136
}
134137

135138
textarea {
136-
background: var(--slick-large-editor-background-color, v.$slick-large-editor-background-color);
137-
color: var(--slick-large-editor-text-color, v.$slick-large-editor-text-color);
138139
border: 0;
139140
outline: 0;
140141
}
@@ -181,9 +182,9 @@
181182
left: var(--slick-editor-modal-container-left, v.$slick-editor-modal-container-left);
182183
transform: var(--slick-editor-modal-container-transform, v.$slick-editor-modal-container-transform);
183184
transition: var(--slick-editor-modal-backdrop-transition-end, v.$slick-editor-modal-backdrop-transition-end);
184-
transition-property: opacity,transform;
185+
transition-property: opacity, transform;
185186

186-
@media only screen and (min-width : 768px) {
187+
@media only screen and (min-width: 768px) {
187188
&.split-view {
188189
width: calc(#{v.$slick-editor-modal-container-width} * 2);
189190
}
@@ -193,7 +194,7 @@
193194
}
194195

195196
/** we'll triple the width only a large screen */
196-
@media only screen and (max-width : 1200px) {
197+
@media only screen and (max-width: 1200px) {
197198
&.triple-split-view {
198199
width: calc(#{v.$slick-editor-modal-container-width} * 2);
199200
}
@@ -349,7 +350,10 @@
349350
height: var(--slick-editor-modal-footer-btn-saving-icon-height, v.$slick-editor-modal-footer-btn-saving-icon-height);
350351
width: var(--slick-editor-modal-footer-btn-saving-icon-width, v.$slick-editor-modal-footer-btn-saving-icon-width);
351352
display: var(--slick-editor-modal-footer-btn-saving-icon-display, v.$slick-editor-modal-footer-btn-saving-icon-display);
352-
vertical-align: var(--slick-editor-modal-footer-btn-saving-icon-vertical-align, v.$slick-editor-modal-footer-btn-saving-icon-vertical-align);
353+
vertical-align: var(
354+
--slick-editor-modal-footer-btn-saving-icon-vertical-align,
355+
v.$slick-editor-modal-footer-btn-saving-icon-vertical-align
356+
);
353357
margin: var(--slick-editor-modal-footer-btn-saving-icon-margin, v.$slick-editor-modal-footer-btn-saving-icon-margin);
354358
animation: var(--slick-editor-modal-footer-btn-saving-icon-animation, v.$slick-editor-modal-footer-btn-saving-icon-animation);
355359
content: var(--slick-editor-modal-footer-btn-saving-icon-content, v.$slick-editor-modal-footer-btn-saving-icon-content);
@@ -385,27 +389,24 @@
385389
margin: var(--slick-editor-modal-detail-container-margin, v.$slick-editor-modal-detail-container-margin);
386390
padding: var(--slick-editor-modal-detail-container-padding, v.$slick-editor-modal-detail-container-padding);
387391

392+
input,
393+
.input-group,
394+
.input-group input {
395+
height: var(--slick-editor-modal-input-editor-height, v.$slick-editor-modal-input-editor-height);
396+
}
388397
input {
389398
color: var(--slick-editor-modal-text-color, v.$slick-editor-modal-text-color);
390-
height: var(--slick-editor-modal-input-editor-height, v.$slick-editor-modal-input-editor-height);
391399
margin: var(--slick-editor-modal-input-editor-margin, v.$slick-editor-modal-input-editor-margin);
392400
border: var(--slick-editor-modal-input-editor-border, v.$slick-editor-modal-input-editor-border);
393401
padding: var(--slick-editor-modal-input-editor-padding, v.$slick-editor-modal-input-editor-padding);
394402
&:focus {
395403
border-color: var(--slick-text-editor-focus-border-color, v.$slick-text-editor-focus-border-color);
396404
box-shadow: var(--slick-text-editor-focus-box-shadow, v.$slick-text-editor-focus-box-shadow);
397405
}
398-
&:disabled {
399-
background-color: var(--slick-editor-input-disabled-color, v.$slick-editor-input-disabled-color);
400-
}
401406
}
402407
.input-group {
403408
display: flex;
404409
position: relative;
405-
height: var(--slick-editor-modal-input-editor-height, v.$slick-editor-modal-input-editor-height);
406-
input {
407-
height: var(--slick-editor-modal-input-editor-height, v.$slick-editor-modal-input-editor-height);
408-
}
409410
}
410411
.slick-large-editor-text {
411412
border: var(--slick-editor-modal-large-editor-border, v.$slick-editor-modal-large-editor-border);
@@ -418,9 +419,6 @@
418419
textarea {
419420
width: 100%;
420421
height: 100%;
421-
&:disabled {
422-
background-color: var(--slick-editor-input-disabled-color, v.$slick-editor-input-disabled-color);
423-
}
424422
}
425423
.editor-footer {
426424
height: var(--slick-editor-modal-large-editor-footer-height, v.$slick-editor-modal-large-editor-footer-height);
@@ -435,15 +433,9 @@
435433
&.invalid {
436434
border: var(--slick-editor-modal-detail-container-border-invalid, v.$slick-editor-modal-detail-container-border-invalid);
437435
}
438-
&:disabled, &.disabled {
439-
background-color: var(--slick-editor-input-disabled-color, v.$slick-editor-input-disabled-color);
440-
}
441436
}
442437
button.ms-choice {
443438
height: var(--slick-editor-modal-multiselect-editor-height, v.$slick-editor-modal-multiselect-editor-height);
444-
&:disabled {
445-
background-color: var(--slick-editor-input-disabled-color, v.$slick-editor-input-disabled-color);
446-
}
447439
}
448440
.checkbox-editor-container {
449441
padding: var(--slick-editor-modal-checkbox-editor-padding, v.$slick-editor-modal-checkbox-editor-padding);
@@ -453,9 +445,6 @@
453445
input {
454446
height: inherit;
455447
}
456-
&.disabled {
457-
background-color: var(--slick-editor-input-disabled-color, v.$slick-editor-input-disabled-color);
458-
}
459448
}
460449

461450
.autocomplete-container.input-group,
@@ -478,7 +467,6 @@
478467
cursor: pointer;
479468
background-color: var(--slick-date-picker-bg-color, v.$slick-date-picker-bg-color);
480469
&:disabled {
481-
background-color: var(--slick-editor-input-disabled-color, v.$slick-editor-input-disabled-color);
482470
cursor: initial;
483471
}
484472
}
@@ -495,16 +483,28 @@
495483
}
496484

497485
&.modified {
498-
input, .slick-large-editor-text, .ms-choice, .checkbox-editor-container {
486+
input,
487+
.slick-large-editor-text,
488+
.ms-choice,
489+
.checkbox-editor-container {
499490
border: var(--slick-editor-modal-detail-container-border-modified, v.$slick-editor-modal-detail-container-border-modified);
500-
border-width: var(--slick-editor-modal-detail-container-border-width-modified, v.$slick-editor-modal-detail-container-border-width-modified);
491+
border-width: var(
492+
--slick-editor-modal-detail-container-border-width-modified,
493+
v.$slick-editor-modal-detail-container-border-width-modified
494+
);
501495
}
502496
}
503497
&.invalid {
504-
input, .slick-large-editor-text {
498+
input,
499+
.slick-large-editor-text {
505500
border: var(--slick-editor-modal-detail-container-border-invalid, v.$slick-editor-modal-detail-container-border-invalid);
506501
}
507502
}
503+
}
504+
505+
.item-details-editor-container,
506+
.item-details-editor-container .form-control {
507+
&:disabled,
508508
&.disabled {
509509
background-color: var(--slick-editor-input-disabled-color, v.$slick-editor-input-disabled-color);
510510
}

‎packages/common/src/styles/slick-grid.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -668,8 +668,8 @@
668668
/* like TH */
669669
& {
670670
background: var(--slick-header-background-color, v.$slick-header-background-color);
671-
font-family: var(--slick-font-family, v.$slick-font-family);
672671
color: var(--slick-header-text-color, v.$slick-header-text-color);
672+
font-family: var(--slick-font-family, v.$slick-font-family);
673673
font-size: var(--slick-header-font-size, v.$slick-header-font-size);
674674
font-weight: var(--slick-header-font-weight, v.$slick-header-font-weight);
675675
}

0 commit comments

Comments
 (0)