feature widget description (#483)
Add description to widget title popup and right panelpull/517/head
CamilleLegeron
1 year ago
committed by
GitHub
parent
a019c406ab
commit
c16204f8ad
@ -0,0 +1,75 @@
|
||||
import { theme, vars } from 'app/client/ui2018/cssVars';
|
||||
import {textarea} from 'app/client/ui/inputs';
|
||||
import {cssTextInput} from 'app/client/ui2018/editableLabel';
|
||||
import {IInputOptions, input, Observable, styled} from 'grainjs';
|
||||
|
||||
|
||||
export const cssRenamePopup = styled('div', `
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 280px;
|
||||
padding: 16px;
|
||||
background-color: ${theme.popupBg};
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
`);
|
||||
|
||||
export const cssLabel = styled('label', `
|
||||
color: ${theme.text};
|
||||
font-size: ${vars.xsmallFontSize};
|
||||
font-weight: ${vars.bigControlTextWeight};
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 8px 0;
|
||||
&:not(:first-child) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
`);
|
||||
|
||||
const cssInputWithIcon = styled('div', `
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`);
|
||||
|
||||
export const cssInput = styled((
|
||||
obs: Observable<string>,
|
||||
opts: IInputOptions,
|
||||
...args) => input(obs, opts, cssTextInput.cls(''), ...args), `
|
||||
text-overflow: ellipsis;
|
||||
color: ${theme.inputFg};
|
||||
background-color: transparent;
|
||||
&:disabled {
|
||||
color: ${theme.inputDisabledFg};
|
||||
background-color: ${theme.inputDisabledBg};
|
||||
pointer-events: none;
|
||||
}
|
||||
&::placeholder {
|
||||
color: ${theme.inputPlaceholderFg};
|
||||
}
|
||||
.${cssInputWithIcon.className} > &:disabled {
|
||||
padding-right: 28px;
|
||||
}
|
||||
`);
|
||||
|
||||
export const cssTextArea = styled(textarea, `
|
||||
color: ${theme.inputFg};
|
||||
background-color: ${theme.mainPanelBg};
|
||||
border: 1px solid ${theme.inputBorder};
|
||||
width: 100%;
|
||||
padding: 3px 6px;
|
||||
outline: none;
|
||||
max-width: 100%;
|
||||
min-width: calc(280px - 16px*2);
|
||||
max-height: 500px;
|
||||
min-height: calc(3em * 1.5);
|
||||
resize: none;
|
||||
border-radius: 3px;
|
||||
&::placeholder {
|
||||
color: ${theme.inputPlaceholderFg};
|
||||
}
|
||||
|
||||
&[readonly] {
|
||||
background-color: ${theme.inputDisabledBg};
|
||||
color: ${theme.inputDisabledFg};
|
||||
}
|
||||
`);
|
||||
@ -0,0 +1,96 @@
|
||||
import { assert, driver, Key } from 'mocha-webdriver';
|
||||
import * as gu from 'test/nbrowser/gristUtils';
|
||||
import { setupTestSuite } from 'test/nbrowser/testUtils';
|
||||
|
||||
|
||||
describe('DescriptionWidget', function() {
|
||||
this.timeout(20000);
|
||||
const cleanup = setupTestSuite();
|
||||
|
||||
it('should support basic edition in right panel', async () => {
|
||||
const mainSession = await gu.session().teamSite.login();
|
||||
await mainSession.tempDoc(cleanup, "CardView.grist", { load: true });
|
||||
|
||||
const newWidgetDesc = "This is the widget description\nIt is in two lines";
|
||||
await driver.find('.test-right-opener').click();
|
||||
// Sleep 100ms to let open the right panel and make the description input clickable
|
||||
await driver.sleep(100);
|
||||
const rightPanelDescriptionInput = await driver.find('.test-right-panel .test-right-widget-description');
|
||||
await rightPanelDescriptionInput.click();
|
||||
await rightPanelDescriptionInput.sendKeys(newWidgetDesc);
|
||||
// Click on other input to unselect descriptionInput
|
||||
await driver.find('.test-right-panel .test-right-widget-title').click();
|
||||
await checkDescValueInWidgetTooltip("Table", newWidgetDesc);
|
||||
});
|
||||
|
||||
it('should support basic edition in widget popup', async () => {
|
||||
const mainSession = await gu.session().teamSite.login();
|
||||
await mainSession.tempDoc(cleanup, "CardView.grist", { load: true });
|
||||
|
||||
const widgetName = "Table";
|
||||
const newWidgetDescFirstLine = "First line of the description";
|
||||
const newWidgetDescSecondLine = "Second line of the description";
|
||||
|
||||
await addWidgetDescription(widgetName, newWidgetDescFirstLine, newWidgetDescSecondLine);
|
||||
await checkDescValueInWidgetTooltip(widgetName, `${newWidgetDescFirstLine}\n${newWidgetDescSecondLine}`);
|
||||
});
|
||||
|
||||
it('should show info tooltip only if there is a description', async () => {
|
||||
const mainSession = await gu.session().teamSite.login();
|
||||
await mainSession.tempDoc(cleanup, "CardView.grist", { load: true });
|
||||
|
||||
const newWidgetDesc = "New description for widget Table";
|
||||
|
||||
await addWidgetDescription("Table", newWidgetDesc);
|
||||
|
||||
assert.isFalse(await getWidgetTooltip("Single card").isPresent());
|
||||
assert.isTrue(await getWidgetTooltip("Table").isPresent());
|
||||
|
||||
await checkDescValueInWidgetTooltip("Table", newWidgetDesc);
|
||||
});
|
||||
});
|
||||
|
||||
async function waitForEditPopup() {
|
||||
await gu.waitToPass(async () => {
|
||||
assert.isTrue(await driver.find(".test-widget-title-popup").isDisplayed());
|
||||
});
|
||||
}
|
||||
|
||||
async function waitForTooltip() {
|
||||
await gu.waitToPass(async () => {
|
||||
assert.isTrue(await driver.find(".test-widget-info-tooltip-popup").isDisplayed());
|
||||
});
|
||||
}
|
||||
|
||||
function getWidgetTitle(widgetName: string) {
|
||||
return driver.findContent('.test-widget-title-text', `${widgetName}`);
|
||||
}
|
||||
|
||||
function getWidgetTooltip(widgetName: string) {
|
||||
return getWidgetTitle(widgetName).findClosest(".test-viewsection-title").find(".test-widget-info-tooltip");
|
||||
}
|
||||
|
||||
async function addWidgetDescription(widgetName: string, desc: string, descSecondLine: string = "") {
|
||||
// Click on the title and open the edition popup
|
||||
await getWidgetTitle(widgetName).click();
|
||||
await waitForEditPopup();
|
||||
const widgetEditPopup = await driver.find('.test-widget-title-popup');
|
||||
const widgetDescInput = await widgetEditPopup.find('.test-widget-title-section-description-input');
|
||||
|
||||
// Edit the description of the widget inside the popup
|
||||
await widgetDescInput.click();
|
||||
await widgetDescInput.sendKeys(desc);
|
||||
if (descSecondLine !== "") {
|
||||
await widgetDescInput.sendKeys(Key.ENTER, descSecondLine);
|
||||
}
|
||||
await widgetDescInput.sendKeys(Key.CONTROL, Key.ENTER);
|
||||
await gu.waitForServer();
|
||||
}
|
||||
|
||||
async function checkDescValueInWidgetTooltip(widgetName: string, desc: string) {
|
||||
await getWidgetTooltip(widgetName).click();
|
||||
await waitForTooltip();
|
||||
const descriptionTooltip = await driver
|
||||
.find('.test-widget-info-tooltip-popup');
|
||||
assert.equal(await descriptionTooltip.getText(), desc);
|
||||
}
|
||||
Loading…
Reference in new issue