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

fix(ColumnDesc): tooltip show multiline description + remove useless variable + remove outline style

Browse Source
This commit is contained in:
Camille 2023-02-15 16:41:58 +01:00
parent 1641c31c06
commit 0fa908d41a
3 changed files with 9 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/client/ui/FieldConfig.ts
View File

@ -8,7 +8,7 @@ import {cssBlockedCursor, cssLabel, cssRow} from 'app/client/ui/RightPanelStyles
import { withInfoTooltip } from 'app/client/ui/tooltips'; import { withInfoTooltip } from 'app/client/ui/tooltips';
import {buildFormulaTriggers} from 'app/client/ui/TriggerFormulas'; import {buildFormulaTriggers} from 'app/client/ui/TriggerFormulas';
import {textButton} from 'app/client/ui2018/buttons'; import {textButton} from 'app/client/ui2018/buttons';
import { testId, theme, vars } from 'app/client/ui2018/cssVars'; import { testId, theme } from 'app/client/ui2018/cssVars';
import {textInput} from 'app/client/ui2018/editableLabel'; import {textInput} from 'app/client/ui2018/editableLabel';
import {cssIconButton, icon} from 'app/client/ui2018/icons'; import {cssIconButton, icon} from 'app/client/ui2018/icons';
import {IconName} from 'app/client/ui2018/IconList'; import {IconName} from 'app/client/ui2018/IconList';
@ -94,7 +94,6 @@ export function buildDescriptionConfig(
origColumn: ColumnRec, origColumn: ColumnRec,
cursor: ko.Computed<CursorPos>, cursor: ko.Computed<CursorPos>,
) { ) {
const editedDescription = Observable.create(owner, '');
// We will listen to cursor position and force a blur event on // We will listen to cursor position and force a blur event on
// the text input, which will trigger save before the column observable // the text input, which will trigger save before the column observable
@ -115,9 +114,7 @@ export function buildDescriptionConfig(
{ onInput: false }, { onInput: false },
{ rows: '3' }, { rows: '3' },
dom.on('blur', async (e, elem) => { dom.on('blur', async (e, elem) => {
editedDescription.set(elem.value);
await origColumn.description.saveOnly(elem.value); await origColumn.description.saveOnly(elem.value);
editedDescription.set('');
}), }),
testId('column-description'), testId('column-description'),
) )
@ -538,6 +535,9 @@ const cssTextArea = styled(textarea, `
background-color: ${theme.mainPanelBg}; background-color: ${theme.mainPanelBg};
border: 1px solid ${theme.inputBorder}; border: 1px solid ${theme.inputBorder};
width: 100%; width: 100%;
outline: none;
border-radius: 3px;
padding: 3px 7px;
&::placeholder { &::placeholder {
color: ${theme.inputPlaceholderFg}; color: ${theme.inputPlaceholderFg};
@ -545,15 +545,6 @@ const cssTextArea = styled(textarea, `
&[readonly] { &[readonly] {
background-color: ${theme.inputDisabledBg}; background-color: ${theme.inputDisabledBg};
padding: 3px 7px; color: ${theme.inputDisabledFg};
border-radius: 3px;
resize: vertical;
border: 1px solid ${theme.inputBorder};
color: ${theme.inputFg};
background-color: ${theme.inputBg};
flex: 1 1 0;
font-size: ${vars.mediumFontSize};
font-family: ${vars.fontFamily};
outline: none;
} }
`); `);

1
app/client/ui/tooltips.ts
View File

@ -332,6 +332,7 @@ export function withInfoTooltip(
), ),
cssInfoTooltipPopupBody( cssInfoTooltipPopupBody(
content, content,
{ style: 'white-space: pre-wrap;' },
testId('column-info-tooltip-popup-body'), testId('column-info-tooltip-popup-body'),
), ),
dom.cls(menuCssClass), dom.cls(menuCssClass),

6
test/nbrowser/DescriptionColumn.ts
View File

@ -6,7 +6,7 @@ import { setupTestSuite } from 'test/nbrowser/testUtils';
async function addColumnDescription(api: UserAPIImpl, docId: string, columnName: string) { async function addColumnDescription(api: UserAPIImpl, docId: string, columnName: string) {
await api.applyUserActions(docId, [ await api.applyUserActions(docId, [
[ 'ModifyColumn', 'Table1', columnName, { [ 'ModifyColumn', 'Table1', columnName, {
description: 'This is the column description' description: 'This is the column description\nIt is in two lines'
} ], } ],
]); ]);
} }
@ -32,7 +32,7 @@ describe('DescriptionColumn', function() {
await gu.getCell({ rowNum: 1, col: 'B' }).click(); await gu.getCell({ rowNum: 1, col: 'B' }).click();
await driver.find('.test-right-tab-field').click(); await driver.find('.test-right-tab-field').click();
assert.equal(await getDescriptionInput().value(), 'This is the column description'); assert.equal(await getDescriptionInput().value(), 'This is the column description\nIt is in two lines');
await gu.getCell({ rowNum: 1, col: 'A' }).click(); await gu.getCell({ rowNum: 1, col: 'A' }).click();
assert.equal(await getDescriptionInput().value(), ''); assert.equal(await getDescriptionInput().value(), '');
@ -80,7 +80,7 @@ describe('DescriptionColumn', function() {
// Check the content of the tooltip // Check the content of the tooltip
const descriptionTooltip = await driver const descriptionTooltip = await driver
.find('.test-column-info-tooltip-popup .test-column-info-tooltip-popup-body'); .find('.test-column-info-tooltip-popup .test-column-info-tooltip-popup-body');
assert.equal(await descriptionTooltip.getText(), 'This is the column description'); assert.equal(await descriptionTooltip.getText(), 'This is the column description\nIt is in two lines');
// Close the tooltip // Close the tooltip
await toggle.click(); await toggle.click();