Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(styling): empty warning should separate icon & text #1491

Merged
merged 1 commit into from
Apr 29, 2024
Merged

fix(styling): empty warning should separate icon & text #1491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/common/src/styles/slick-component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@
// ----------------------------------------------

.slick-empty-data-warning {
display: flex;
align-items: center;
gap: 5px;
position: relative;
color: var(--slick-empty-data-warning-color, $slick-empty-data-warning-color);
font-family: var(--slick-empty-data-warning-font-family, $slick-empty-data-warning-font-family);
Expand All @@ -54,6 +57,11 @@
margin: var(--slick-empty-data-warning-margin, $slick-empty-data-warning-margin);
padding: var(--slick-empty-data-warning-padding, $slick-empty-data-warning-padding);
z-index: var(--slick-empty-data-warning-z-index, $slick-empty-data-warning-z-index);
div {
display: flex;
align-items: center;
gap: 5px;
}
}


Expand Down
8 changes: 4 additions & 4 deletions packages/empty-warning-component/src/slick-empty-warning.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,9 @@ export class SlickEmptyWarningComponent implements ExternalResource {
// when using a frozen/pinned grid, we also have extra options to hide left/right message
if (this._warningLeftElement) {
// display/hide right/left messages
let leftDisplay = isShowing ? 'block' : 'none';
let leftDisplay = isShowing ? 'flex' : 'none';
if (isFrozenGrid && isShowing) {
leftDisplay = (mergedOptions.hideFrozenLeftWarning) ? 'none' : 'block';
leftDisplay = (mergedOptions.hideFrozenLeftWarning) ? 'none' : 'flex';
}
this._warningLeftElement.style.display = leftDisplay;

Expand All @@ -123,9 +123,9 @@ export class SlickEmptyWarningComponent implements ExternalResource {

if (this._warningRightElement) {
// use correct left margin (defaults to 40% on regular grid or 10px on frozen grid)
let rightDisplay = isShowing ? 'block' : 'none';
let rightDisplay = isShowing ? 'flex' : 'none';
if (isFrozenGrid && isShowing) {
rightDisplay = (mergedOptions.hideFrozenRightWarning) ? 'none' : 'block';
rightDisplay = (mergedOptions.hideFrozenRightWarning) ? 'none' : 'flex';
}
this._warningRightElement.style.display = rightDisplay;

Expand Down
40 changes: 20 additions & 20 deletions packages/empty-warning-component/src/slick-empty-warning.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,8 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.textContent).toBe('No data to display.');
expect(componentRightElm.textContent).toBe('No data to display.');
});
Expand Down Expand Up @@ -139,7 +139,7 @@ describe('Slick-Empty-Warning Component', () => {
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('none');
expect(componentRightElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.style.marginLeft).toBe('0px');
expect(componentRightElm.style.marginLeft).toBe('0px');
expect(componentLeftElm.textContent).toBe('No data to display.');
Expand All @@ -159,8 +159,8 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.style.marginLeft).toBe('40%');
expect(componentRightElm.style.marginLeft).toBe('0px');
expect(componentLeftElm.textContent).toBe('No data to display.');
Expand All @@ -183,8 +183,8 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.style.marginLeft).toBe('40%');
expect(componentRightElm.style.marginLeft).toBe('0px');
expect(componentLeftElm.textContent).toBe('No data to display.');
Expand Down Expand Up @@ -215,8 +215,8 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.style.marginLeft).toBe('40%');
expect(componentRightElm.style.marginLeft).toBe('0px');
expect(componentLeftElm.textContent).toBe('No data to display.');
Expand Down Expand Up @@ -269,8 +269,8 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.style.marginLeft).toBe('0px');
expect(componentRightElm.style.marginLeft).toBe('40%');
expect(componentLeftElm.textContent).toBe('No data to display.');
Expand All @@ -291,8 +291,8 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.style.marginLeft).toBe('15px');
expect(componentRightElm.style.marginLeft).toBe('0px');
expect(componentLeftElm.textContent).toBe('No data to display.');
Expand All @@ -313,8 +313,8 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentRightElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('flex');
expect(componentLeftElm.style.marginLeft).toBe('0px');
expect(componentRightElm.style.marginLeft).toBe('22px');
expect(componentLeftElm.textContent).toBe('No data to display.');
Expand All @@ -335,7 +335,7 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentLeftElm).toBeTruthy();
expect(componentLeftElm.style.display).toBe('block');
expect(componentLeftElm.style.display).toBe('flex');
expect(componentRightElm.style.display).toBe('none');
expect(componentLeftElm.textContent).toBe('No data to display.');
expect(componentRightElm.textContent).toBe('No data to display.');
Expand All @@ -352,7 +352,7 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentElm).toBeTruthy();
expect(componentElm.style.display).toBe('block');
expect(componentElm.style.display).toBe('flex');
expect(componentElm.classList.contains('custom-class')).toBeTruthy();
expect(componentElm.innerHTML).toBe('<span class="mdi mdi-alert text-color-warning"></span> No Record found.');
});
Expand All @@ -372,7 +372,7 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentElm).toBeTruthy();
expect(componentElm.style.display).toBe('block');
expect(componentElm.style.display).toBe('flex');
expect(componentElm.classList.contains('custom-class')).toBeTruthy();
expect(componentElm.innerHTML).toBe('<span class="mdi mdi-alert text-color-warning"></span> No Record found.');
});
Expand All @@ -392,7 +392,7 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentElm).toBeTruthy();
expect(componentElm.style.display).toBe('block');
expect(componentElm.style.display).toBe('flex');
expect(componentElm.classList.contains('custom-class')).toBeTruthy();
expect(componentElm.innerHTML).toBe('<div class="container"><span class="mdi mdi-alert text-color-warning"></span> No Record found.</div>');
});
Expand All @@ -410,7 +410,7 @@ describe('Slick-Empty-Warning Component', () => {
expect(component).toBeTruthy();
expect(component.constructor).toBeDefined();
expect(componentElm).toBeTruthy();
expect(componentElm.style.display).toBe('block');
expect(componentElm.style.display).toBe('flex');
expect(componentElm.textContent).toBe('Aucune donnée à afficher.');
});
});
Expand Down
2 changes: 1 addition & 1 deletion packages/vanilla-force-bundle/src/salesforce-global-grid-options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { EventNamingStyle } from '@slickgrid-universal/event-pub-sub';
// create empty warning message as Document Fragment to be CSP safe
const emptyWarningElm = document.createElement('div');
emptyWarningElm.appendChild(createDomElement('span', { className: 'mdi mdi-alert text-color-warning' }));
emptyWarningElm.appendChild(document.createTextNode(' No data to display.'));
emptyWarningElm.appendChild(createDomElement('span', { textContent: 'No data to display.' }));

/** Global Grid Options Defaults for Salesforce */
export const SalesforceGlobalGridOptions = {
Expand Down
Loading