From 09c84734db32babb65b3f372a3f766a4c611315a Mon Sep 17 00:00:00 2001 From: Dmitry S Date: Mon, 4 Dec 2023 11:41:54 -0500 Subject: [PATCH] (core) Enable the 'none' option in ColorSelect for cell and header text styles Test Plan: Added a test case Reviewers: georgegevoian Reviewed By: georgegevoian Differential Revision: https://phab.getgrist.com/D4120 --- app/client/ui2018/ColorSelect.ts | 2 +- app/client/widgets/CellStyle.ts | 2 ++ package.json | 2 +- test/nbrowser/CellColor.ts | 39 ++++++++++++++++++++++++++++---- yarn.lock | 8 +++---- 5 files changed, 43 insertions(+), 10 deletions(-) diff --git a/app/client/ui2018/ColorSelect.ts b/app/client/ui2018/ColorSelect.ts index 4f9eb6a6..82095dc9 100644 --- a/app/client/ui2018/ColorSelect.ts +++ b/app/client/ui2018/ColorSelect.ts @@ -324,7 +324,7 @@ class PickerComponent extends Disposable { ) ), cssEmptyBox( - cssEmptyBox.cls('-selected', (use) => !use(this._colorCss)), + cssEmptyBox.cls('-selected', (use) => !use(this._colorHex)), dom.on('click', () => this._setValue(undefined)), dom.hide(!this._options.allowsNone), cssNoneIcon('Empty'), diff --git a/app/client/widgets/CellStyle.ts b/app/client/widgets/CellStyle.ts index 6699dd4d..b1f48660 100644 --- a/app/client/widgets/CellStyle.ts +++ b/app/client/widgets/CellStyle.ts @@ -54,6 +54,7 @@ export class CellStyle extends Disposable { textColor: new ColorOption({ color: headerTextColor, defaultColor: theme.tableHeaderFg.toString(), + allowsNone: true, noneText: 'default', }), fillColor: new ColorOption({ @@ -109,6 +110,7 @@ export class CellStyle extends Disposable { textColor: new ColorOption({ color: textColor, defaultColor: this._defaultTextColor, + allowsNone: true, noneText: 'default', }), fillColor: new ColorOption({ diff --git a/package.json b/package.json index a68d2bc9..fb369e8e 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,7 @@ "i18next-scanner": "4.1.0", "jsdom": "16.5.0", "mocha": "10.2.0", - "mocha-webdriver": "0.3.1", + "mocha-webdriver": "0.3.2", "moment-locales-webpack-plugin": "^1.2.0", "nodemon": "^2.0.4", "otplib": "12.0.1", diff --git a/test/nbrowser/CellColor.ts b/test/nbrowser/CellColor.ts index ecae91c4..1e0ea8b5 100644 --- a/test/nbrowser/CellColor.ts +++ b/test/nbrowser/CellColor.ts @@ -458,6 +458,10 @@ describe('CellColor', function() { assert.equal(await cell.getCssValue('background-color'), 'rgba(0, 0, 255, 1)'); }); + const toggleDefaultColor = 'rgba(96, 96, 96, 1)'; + const switchDefaultColor = 'rgba(44, 176, 175, 1)'; + const getPickerCurrentTextColor = () => driver.find('.test-text-color-square').getCssValue('background-color'); + it('should handle correctly default text color', async function() { // Create new checkbox column await driver.find('.mod-add-column').click(); @@ -470,8 +474,7 @@ describe('CellColor', function() { // check color preview is correct assert.equal(await driver.find('.test-text-hex').value(), 'default'); - assert.equal(await driver.find('.test-text-color-square').getCssValue('background-color'), - 'rgba(96, 96, 96, 1)'); + assert.equal(await getPickerCurrentTextColor(), toggleDefaultColor); // close color picker await driver.sendKeys(Key.ENTER); @@ -486,13 +489,41 @@ describe('CellColor', function() { // check color preview is correct assert.equal(await driver.find('.test-text-hex').value(), 'default'); - assert.equal(await driver.find('.test-text-color-square').getCssValue('background-color'), - 'rgba(44, 176, 175, 1)'); + assert.equal(await getPickerCurrentTextColor(), switchDefaultColor); // close picker await driver.sendKeys(Key.ESCAPE); }); + it('should allow reverting to default text color', async function() { + // Continuing on the previous test case, change Switch widget from default to an explicit color. + await gu.openCellColorPicker(); + assert.equal(await driver.find('.test-text-hex').value(), 'default'); + assert.equal(await getPickerCurrentTextColor(), switchDefaultColor); + await gu.setTextColor('rgb(255, 0, 0)'); + assert.equal(await driver.find('.test-text-hex').value(), '#FF0000'); + assert.equal(await getPickerCurrentTextColor(), 'rgba(255, 0, 0, 1)'); + await driver.sendKeys(Key.ENTER); + await gu.waitForServer(); + + // Change widget to Toggle + await driver.find('.test-fbuilder-widget-select').click(); + await driver.findContent('.test-select-row', /CheckBox/).click(); + await gu.waitForServer(); + + // Check the saved color applies. + await gu.openCellColorPicker(); + assert.equal(await driver.find('.test-text-hex').value(), '#FF0000'); + assert.equal(await getPickerCurrentTextColor(), 'rgba(255, 0, 0, 1)'); + + // Revert to default; the new widget has a different default. + await driver.find('.test-text-empty').click(); + assert.equal(await driver.find('.test-text-hex').value(), 'default'); + assert.equal(await getPickerCurrentTextColor(), toggleDefaultColor); + await driver.sendKeys(Key.ENTER); + await gu.waitForServer(); + }); + it('should not save default color', async function() { // This test catch a bug that used to save the default color to server when changing widget format diff --git a/yarn.lock b/yarn.lock index 84797afd..6bd3529f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5734,10 +5734,10 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== -mocha-webdriver@0.3.1: - version "0.3.1" - resolved "https://registry.yarnpkg.com/mocha-webdriver/-/mocha-webdriver-0.3.1.tgz#5ed238e710ee2e4dfe72208cdd1dc4a15d2aa644" - integrity sha512-4apKuGdB72aEqnT2LdspLCOGXpWui5EJ/mVsw9UcI8ps2SkKHAhHZtHf05CKuTmQJJZcDa2mpcP4oXNXXDsZlA== +mocha-webdriver@0.3.2: + version "0.3.2" + resolved "https://registry.yarnpkg.com/mocha-webdriver/-/mocha-webdriver-0.3.2.tgz#cfaf7cab18335993eeaccbd43f2547a236d0cd26" + integrity sha512-hUM9g/Z8RYebRrCHGfmSMfi/EfPcm1ETzJxFA4XfKOu0xp9HumEo38qkiIbb724eZ0kwLy3X97hMjLIOuc5ihQ== dependencies: chai "^4.1.2" chai-as-promised "^7.1.1"