Skip to content

Commit

Permalink
fix: Move css into GridTheme (#406)
Browse files Browse the repository at this point in the history 
* Move css into GridTheme
  • Loading branch information
@matttdawson
matttdawson authored Aug 31, 2023
1 parent fcae1eb commit cca2605
Show file tree
Hide file tree
Showing 3 changed files with 133 additions and 129 deletions.
2 changes: 1 addition & 1 deletion src/stories/grid/GridDragRow.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const GridDragRowTemplate: ComponentStory<typeof Grid> = (props: GridProps) => {
columnDefs={columnDefs}
defaultColDef={{ sortable: false }}
rowData={rowData}
onRowDragEnd={(row, _, targetIndex) => {
onRowDragEnd={async (row, _, targetIndex) => {
alert(`Row ${row.id} request to be moved to index ${targetIndex}.`);
}}
rowDragText={(params) => `${params.rowNode?.data.id} - ${params.rowNode?.data.position}`}
Expand Down
60 changes: 6 additions & 54 deletions src/styles/Grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
flex: 1;
}


.Grid-sortIsStale {
span.ag-icon.ag-icon-desc::after {
content: "*";
Expand Down Expand Up @@ -71,60 +72,6 @@
padding: 0.375rem 0.75rem;
}

.ag-cell-value {
display: flex;
align-items: center;
}

.ag-cell .GridCell-editableIcon {
fill: colors.$silver;
visibility: hidden;
}

.ag-cell:hover .GridCell-editableIcon, .ag-cell.ag-cell-focus .GridCell-editableIcon {
visibility: visible;
}

.ag-drag-handle.ag-row-drag{
opacity: 0;

.ag-icon-grip{
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%239999B3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2Zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z' /%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: cover;
color:transparent;
}
}

.ag-row:hover{
.ag-drag-handle.ag-row-drag{
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
}

.GridFormMessage-container {
padding: 4px 8px;
max-width: 400px;
}

.GridCell-readonly {
color: colors.$fuscous;
}

.Grid-container.ag-theme-alpine .ag-cell:not(.ag-cell-focus) .Grid-displayWhenCellFocused {
visibility: hidden;
}

.Grid-container.ag-theme-alpine .ag-cell:hover .Grid-displayWhenCellFocused {
visibility: inherit;
}

.Grid-container.ag-theme-alpine .ag-cell-wrapper {
width: 100%;
}

.flex-col-center {
display: flex;
flex-direction: column;
Expand All @@ -137,3 +84,8 @@
align-items: center;
}

.GridFormMessage-container {
padding: 4px 8px;
max-width: 400px;
}

200 changes: 126 additions & 74 deletions src/styles/GridTheme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,98 +47,150 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
)
);

.ag-theme-step-default,
.ag-theme-step-compact {
.ag-cell[col-id="selection"] {
display: flex; // Fix that when you click below checkbox it doesn't process a click
}

.ag-cell[col-id="selection"] {
display: flex;// Fix that when you click below checkbox it doesn't process a click
}
// fix alignment of cell content when grabber is present
.ag-header-cell-comp-wrapper {
justify-content: end;
}

// fix alignment of cell content when grabber is present
.ag-header-cell-comp-wrapper {
justify-content: end;
}
// Fix that when you click below checkbox it doesn't process a click
.ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
height: auto;
}

// Fix that when you click below checkbox it doesn't process a click
.ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
height: auto;
}
.ag-row:last-of-type {
border-bottom: 1px solid lui.$dew;
}

.ag-row:last-of-type {
border-bottom: 1px solid lui.$dew;
}
.ag-header-cell {
font-size: 14px;
font-weight: 600;

// fix: Display descender line
padding: 0 11px;

.ag-header-cell {
font-size: 14px;
font-weight: 600;
.LuiIcon {
fill: lui.$surfie;
}
}

// fix: Display descender line
padding: 0 11px;
.ag-cell-label-container {
padding: 8px 0;

.LuiIcon {
fill: lui.$surfie;
// Help ag-grid to calculate column height in react portal
height: fit-content;
}
}

.ag-cell-label-container {
padding: 8px 0;
.ag-header .ag-header-cell[aria-colindex="1"] {
padding-left: 17px;
padding-right: 15px;
}

// Help ag-grid to calculate column height in react portal
height: fit-content;
}
.ag-cell[role="gridcell"] {
border-right: none;
border-left: 1px var(--ag-cell-horizontal-border);
}

.ag-header .ag-header-cell[aria-colindex="1"] {
padding-left: 17px;
padding-right: 15px;
}
.ag-cell[aria-colindex="1"] {
border-left: 1px solid transparent;
padding-left: lui.$unit-rg;
}

.ag-cell[role="gridcell"] {
border-right: none;
border-left: 1px var(--ag-cell-horizontal-border);
}
.ag-cell {
padding-left: 11px;
padding-right: 11px;
display: flex;
align-items: center;
}

.ag-cell[aria-colindex="1"] {
border-left: 1px solid transparent;
padding-left: lui.$unit-rg;
}
.ag-cell-wrap-text {
word-break: break-word;
}

.ag-cell {
padding-left: 11px;
padding-right: 11px;
display: flex;
align-items: center;
}
.ag-cell.ag-cell-popup-editing,
.ag-cell.ag-selected-for-edit,
.ag-cell-inline-editing {
padding-left: 9px;
padding-right: 9px;
background: rgb(72 160 244 / 20%);

.ag-cell-wrap-text {
word-break: break-word;
}
// These are important, it needs to override ag-grid to work
border: 3px solid #48a0f4 !important;
border-right: 3px solid #48a0f4 !important;
}

.ag-cell.ag-cell-popup-editing,
.ag-cell.ag-selected-for-edit,
.ag-cell-inline-editing {
padding-left: 9px;
padding-right: 9px;
background: rgb(72 160 244 / 20%);
.ag-row .ag-cell-data-changed {
// ag-grid natively has !important on this style so we have to use it here :(
background-color: lightgoldenrodyellow;
}

// These are important, it needs to override ag-grid to work
border: 3px solid #48a0f4 !important;
border-right: 3px solid #48a0f4 !important;
}
.ag-center-cols-clipper {
// when using domLayout={"autoHeight"}, ag grid has a default min-height
// set to 150px so the !important is necessary here
min-height: 40px !important;
}

.ag-row .ag-cell-data-changed {
// ag-grid natively has !important on this style so we have to use it here :(
background-color: lightgoldenrodyellow;
}
.ag-body-horizontal-scroll-viewport {
// It's set to scroll by default, but this causes issues with selecting the last row
overflow-x: auto;
}

.ag-center-cols-clipper {
// when using domLayout={"autoHeight"}, ag grid has a default min-height
// set to 150px so the !important is necessary here
min-height: 40px !important;
}
.ag-cell {
font-weight: 400;
}

.ag-body-horizontal-scroll-viewport {
// It's set to scroll by default, but this causes issues with selecting the last row
overflow-x: auto;
}
.ag-cell-value {
display: flex;
align-items: center;
}

.ag-cell .GridCell-editableIcon {
fill: lui.$silver;
visibility: hidden;
}

.ag-cell:hover .GridCell-editableIcon,
.ag-cell.ag-cell-focus .GridCell-editableIcon {
visibility: visible;
}

.ag-drag-handle.ag-row-drag {
opacity: 0;

.Grid-container .ag-cell {
font-weight: 400;
}
.ag-icon-grip {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%239999B3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2Zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z' /%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: cover;
color: transparent;
}
}

.ag-row:hover {
.ag-drag-handle.ag-row-drag {
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
}

.GridCell-readonly {
color: lui.$fuscous;
}

.ag-cell:not(.ag-cell-focus) .Grid-displayWhenCellFocused {
visibility: hidden;
}

.ag-cell:hover .Grid-displayWhenCellFocused {
visibility: inherit;
}

.ag-cell-wrapper {
width: 100%;
}
}

0 comments on commit cca2605

Please sign in to comment.