jprdonnelly/nebula.js
1
0
Fork 0
mirror of https://github.com/qlik-oss/nebula.js.git synced 2025-12-19 17:58:43 -05:00
Code Issues Projects Releases Wiki Activity

fix: more cell spacing fixes (#1734)

Browse Source 
* fix: more cell spacing fixes

* feat: reduce number of different cases
This commit is contained in:
Tobias Linsefors
2025-05-12 15:26:08 +02:00
committed by GitHub
parent e838b21a15
commit bfb15f5eb1
2 changed files with 63 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
apis/nucleus/src/utils/__tests__/cell-padding.test.js
View File

@@ -116,15 +116,6 @@ describe('cell padding', () => {
expect(bodyPadding).toBeUndefined();
});
test('card theme with action-button visualization do include padding if showTitels is true', () => {
const bodyPadding = testFn({
isCardTheme: true,
visualization: 'action-button',
showTitles: true,
});
expect(bodyPadding).toBe('10px 10px 5px');
});
test('card theme with sn-filter-pane visualization type the do include footer styling', () => {
const bodyPadding = testFn({
isCardTheme: true,
@@ -148,4 +139,40 @@ describe('cell padding', () => {
expect(titleStyles.footer.padding).toBeUndefined();
expect(titleStyles.footer.borderTop).toBeUndefined();
});
test('card theme with sn-table visualization should still padd title', () => {
const bodyPadding = testFn({
cardTheme: true,
visualization: 'sn-table',
showTitles: true,
title: 'X',
});
expect(bodyPadding).toBeUndefined();
expect(titleStyles.main.padding).toBe('10px 10px 0');
});
test('card theme with sn-table visualization should still padd subtitle', () => {
const bodyPadding = testFn({
cardTheme: true,
visualization: 'sn-table',
showTitles: true,
subtitle: 'X',
});
expect(bodyPadding).toBeUndefined();
expect(titleStyles.main.padding).toBeUndefined();
expect(titleStyles.subTitle.padding).toBe('10px 10px 0');
});
test('card theme with filterpane visualization', () => {
const bodyPadding = testFn({
cardTheme: true,
visualization: 'filterpane',
showTitles: true,
title: 'X',
subtitle: 'X',
});
expect(bodyPadding).toBeUndefined();
expect(titleStyles.main.padding).toBe('10px 0 0');
expect(titleStyles.subTitle.padding).toBe('0');
});
});

55
apis/nucleus/src/utils/cell-padding.js
View File

@@ -1,69 +1,68 @@
import { generateFiltersString } from './generateFiltersInfo';
const NP_PADDINH_IN_CARDS_WITHOUT_TITLE = ['action-button', 'sn-nav-menu'];
const NO_BORDER_IN_CARDS = ['action-button', 'sn-nav-menu', 'filterpane', 'sn-shape'];
const NO_PADDING_IN_CARDS = [
...NO_BORDER_IN_CARDS,
'pivot-table',
'table',
'sn-table',
'sn-pivot-table',
'kpi',
'map',
'filterpane',
'sn-calendar',
'sn-filter-pane',
'sn-layout-container',
'sn-listbox',
'sn-shape',
'sn-tabbed-container',
];
const shouldUseCardPadding = ({ isCardTheme, layout, isError }) => {
const visualization = layout?.visualization;
const getPaddTitle = (visualization) => NO_BORDER_IN_CARDS.indexOf(visualization) === -1;
if (!isCardTheme) {
return false;
const getTitlePadding = (visualization) => {
const paddTitle = getPaddTitle(visualization);
if (paddTitle) {
return '10px 10px 0';
}
if (isError) {
return true;
return '10px 0 0';
};
const getSubtitlePadding = (visualization, showTitle) => {
const paddTitle = getPaddTitle(visualization);
if (showTitle) {
if (paddTitle) {
return '0 10px';
}
return '0';
}
if (NO_PADDING_IN_CARDS.indexOf(visualization) !== -1) {
return false;
}
const showTitle = layout?.showTitles;
if (!showTitle && NP_PADDINH_IN_CARDS_WITHOUT_TITLE.indexOf(visualization) !== -1) {
return false;
}
return true;
return getTitlePadding(visualization);
};
const getPadding = ({ layout, isError, isCardTheme, titleStyles, translator }) => {
const cardPadding = shouldUseCardPadding({ isCardTheme, layout, isError });
if (isCardTheme) {
const showTitle = layout?.showTitles && !!layout?.title;
const showSubtitle = layout?.showTitles && !!layout?.subtitle;
const hasFilters = layout?.filters?.length > 0 && layout?.qHyperCube?.qMeasureInfo?.length > 0;
const visualization = layout?.visualization;
const filtersFootnoteString = generateFiltersString(layout?.filters ?? [], translator);
const showFilters = !layout?.footnote && hasFilters && filtersFootnoteString;
const showFootnote = layout?.showTitles && (!!layout?.footnote || showFilters);
if (showTitle && cardPadding) {
if (showTitle) {
// eslint-disable-next-line no-param-reassign
titleStyles.main.padding = '10px 10px 0';
titleStyles.main.padding = getTitlePadding(visualization);
}
if (showSubtitle && cardPadding) {
if (showSubtitle) {
// eslint-disable-next-line no-param-reassign
titleStyles.subTitle.padding = showTitle ? '0 10px' : '10px 10px 0';
titleStyles.subTitle.padding = getSubtitlePadding(visualization, showTitle);
}
if (showFootnote) {
// eslint-disable-next-line no-param-reassign
titleStyles.footer.borderTop = '1px solid #d9d9d9';
if (NO_BORDER_IN_CARDS.indexOf(visualization) === -1) {
// eslint-disable-next-line no-param-reassign
titleStyles.footer.borderTop = '1px solid #d9d9d9';
}
// eslint-disable-next-line no-param-reassign
titleStyles.footer.padding = '6px 10px';
}
let bodyPadding;
if (cardPadding) {
if (isError || NO_PADDING_IN_CARDS.indexOf(visualization) === -1) {
bodyPadding = `${showTitle || showSubtitle ? '0' : '10px'} 10px ${showFootnote ? '0' : '5px'}`;
}