Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Prevent raw table names from overflowing

Browse Source 
Summary:
Modifies CSS so that text overflow is handled by displaying an
ellipsis when raw table names exceed the width of their container.

Test Plan: Tested manually.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3524
This commit is contained in:
George Gevoian 2022-07-18 09:24:26 -07:00
parent 3e49fe9a50
commit 5c0a250309
3 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/client/components/DataTables.ts
View File

@ -63,7 +63,7 @@ export class DataTables extends Disposable {
)), )),
), ),
cssMiddle( cssMiddle(
css60(this._tableTitle(tableRec), testId('table-title')), css60(cssTableTitle(this._tableTitle(tableRec), testId('table-title'))),
css40( css40(
cssIdHoverWrapper( cssIdHoverWrapper(
cssUpperCase("Table id: "), cssUpperCase("Table id: "),
@ -120,10 +120,7 @@ export class DataTables extends Disposable {
} else { } else {
return dom('div', // to disable flex grow in the widget return dom('div', // to disable flex grow in the widget
dom.domComputed(fromKo(table.rawViewSection), vs => dom.domComputed(fromKo(table.rawViewSection), vs =>
dom.update( buildTableName(vs, testId('widget-title'))
buildTableName(vs, testId('widget-title')),
dom.on('click', (ev) => { ev.stopPropagation(); ev.preventDefault(); }),
)
) )
); );
} }
@ -242,14 +239,14 @@ const cssMiddle = styled('div', `
margin-top: 6px; margin-top: 6px;
margin-bottom: 4px; margin-bottom: 4px;
.${cssList.className}-card & { .${cssList.className}-card & {
margin: 0px: margin: 0px;
} }
`); `);
const css60 = styled('div', ` const css60 = styled('div', `
min-width: min(240px, 100%); min-width: min(240px, 100%);
display: flex;
flex: 6; flex: 6;
margin-right: 4px;
`); `);
const css40 = styled('div', ` const css40 = styled('div', `
@ -301,6 +298,10 @@ const cssTableId = styled(cssLine, `
font-size: ${css.vars.smallFontSize}; font-size: ${css.vars.smallFontSize};
`); `);
const cssTableTitle = styled('div', `
white-space: nowrap;
`);
const cssUpperCase = styled('span', ` const cssUpperCase = styled('span', `
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.81px; letter-spacing: 0.81px;

3
app/client/ui/WidgetTitle.ts
View File

@ -43,7 +43,8 @@ export function buildRenameWidget(
attach: 'body', attach: 'body',
boundaries: 'viewport', boundaries: 'viewport',
}); });
} },
dom.on('click', (ev) => { ev.stopPropagation(); ev.preventDefault(); }),
), ),
...args ...args
); );

2
test/nbrowser/gristUtils.ts
View File

@ -1289,7 +1289,7 @@ export async function openRawTable(tableId: string) {
export async function renameRawTable(tableId: string, newName: string) { export async function renameRawTable(tableId: string, newName: string) {
await driver.find(`.test-raw-data-table .test-raw-data-table-id-${tableId}`) await driver.find(`.test-raw-data-table .test-raw-data-table-id-${tableId}`)
.findClosest('.test-raw-data-table') .findClosest('.test-raw-data-table')
.find('.test-raw-data-widget-title') .find('.test-widget-title-text')
.click(); .click();
const input = await driver.find(".test-widget-title-table-name-input"); const input = await driver.find(".test-widget-title-table-name-input");
await input.doClear(); await input.doClear();