From e0e5a6a418d9b9f033ba54de658553ec2baf1222 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=B6kay=20=C5=9Eat=C4=B1r?= Date: Tue, 7 May 2024 19:28:56 +0300 Subject: [PATCH] Cypress updates. Change the cell selection circle color in dark mode. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Gökay Şatır Change-Id: I23826bdf0a09fa7e8b1c25132842f98e37997034 --- browser/css/device-desktop.css | 13 ----- browser/css/selectionMarkers.css | 6 --- browser/src/canvas/CanvasSectionContainer.ts | 47 +++++++++++-------- .../sections/CellSelectionHandleSection.ts | 7 +-- .../integration_tests/common/calc_helper.js | 2 +- .../common/impress_helper.js | 2 +- .../mobile/calc/calc_mobile_helper.js | 6 +-- .../mobile/calc/formulabar_spec.js | 13 +---- .../mobile/calc/hamburger_menu_spec.js | 2 +- .../mobile/calc/insertion_wizard_spec.js | 2 +- 10 files changed, 38 insertions(+), 62 deletions(-) diff --git a/browser/css/device-desktop.css b/browser/css/device-desktop.css index b6227023b..2072c251a 100644 --- a/browser/css/device-desktop.css +++ b/browser/css/device-desktop.css @@ -1,18 +1,5 @@ /* CSS specific for desktop browsers. */ -/* Related to selectionMarkers.css on formulabar*/ -.inputbar_selection_handles *{ - background-size: 20px; - background-position-y: top; - width: 20px; - background-repeat: no-repeat; - margin-left: 1px !important; - transform: translateY(-12px); -} -.inputbar_selection_handles .text-selection-handle-start{ - margin-left: -20px !important; -} - #coolwsd-version span:before, #lokit-version > span:before { content: ' ('; diff --git a/browser/css/selectionMarkers.css b/browser/css/selectionMarkers.css index 3374057ad..3f34991f4 100644 --- a/browser/css/selectionMarkers.css +++ b/browser/css/selectionMarkers.css @@ -18,12 +18,6 @@ height: 44px; background-image: url('images/cursor-handler.svg'); } -.inputbar_selection_handles * { - z-index: 1; -} -#tb_formulabar_item_formula .inputbar_selection_handles{ - /*display: none;*/ -} .html-object-section { display: block; diff --git a/browser/src/canvas/CanvasSectionContainer.ts b/browser/src/canvas/CanvasSectionContainer.ts index b41df0dd2..268465a12 100644 --- a/browser/src/canvas/CanvasSectionContainer.ts +++ b/browser/src/canvas/CanvasSectionContainer.ts @@ -274,6 +274,10 @@ class CanvasSectionObject { this.isVisible = this.containerObject.isDocumentObjectVisible(this); this.onDocumentObjectVisibilityChange(); } + + if (this.containerObject.testing) { + this.containerObject.createUpdateSingleDivElement(this); + } } /// Called when setShowSection is called. This is a callback to be overwritten. @@ -1831,26 +1835,31 @@ class CanvasSectionContainer { createUpdateSingleDivElement (section: CanvasSectionObject) { var bcr: ClientRect = this.canvas.getBoundingClientRect(); var element: HTMLDivElement = document.getElementById('test-div-' + section.name); - if (!element) { - element = document.createElement('div'); - element.id = 'test-div-' + section.name; - document.body.appendChild(element); - } - element.style.position = 'fixed'; - element.style.zIndex = '-1'; - element.style.left = String(bcr.left + Math.round(section.myTopLeft[0] / app.dpiScale)) + 'px'; - element.style.top = String(bcr.top + Math.round(section.myTopLeft[1] / app.dpiScale)) + 'px'; - element.style.width = String(Math.round(section.size[0] / app.dpiScale)) + 'px'; - element.style.height = String(Math.round(section.size[1] / app.dpiScale)) + 'px'; - if (section.name === 'tiles') { - // For tiles section add document coordinates of top and left too. - element.innerText = JSON.stringify({ - top: Math.round(section.documentTopLeft[1]), - left: Math.round(section.documentTopLeft[0]), - width: Math.round(section.size[0]), - height: Math.round(section.size[1]) - }); + + if ((!section.documentObject || section.isVisible) && section.isSectionShown()) { + if (!element) { + element = document.createElement('div'); + element.id = 'test-div-' + section.name; + document.body.appendChild(element); + } + element.style.position = 'fixed'; + element.style.zIndex = '-1'; + element.style.left = String(bcr.left + Math.round(section.myTopLeft[0] / app.dpiScale)) + 'px'; + element.style.top = String(bcr.top + Math.round(section.myTopLeft[1] / app.dpiScale)) + 'px'; + element.style.width = String(Math.round(section.size[0] / app.dpiScale)) + 'px'; + element.style.height = String(Math.round(section.size[1] / app.dpiScale)) + 'px'; + if (section.name === 'tiles') { + // For tiles section add document coordinates of top and left too. + element.innerText = JSON.stringify({ + top: Math.round(section.documentTopLeft[1]), + left: Math.round(section.documentTopLeft[0]), + width: Math.round(section.size[0]), + height: Math.round(section.size[1]) + }); + } } + else if (element) + element.remove(); // Remove test-div if section is not visible. } createUpdateDivElements () { diff --git a/browser/src/canvas/sections/CellSelectionHandleSection.ts b/browser/src/canvas/sections/CellSelectionHandleSection.ts index ffbded6c1..e9156ed71 100644 --- a/browser/src/canvas/sections/CellSelectionHandleSection.ts +++ b/browser/src/canvas/sections/CellSelectionHandleSection.ts @@ -61,15 +61,12 @@ class CellSelectionHandle extends CanvasSectionObject { } public onDraw() { - this.context.strokeStyle = 'black'; + this.context.strokeStyle = app.map.uiManager.getDarkModeState() ? 'white' : 'black'; this.context.lineWidth = 2; this.context.beginPath(); this.context.arc(this.sectionProperties.circleRadius, this.sectionProperties.circleRadius, this.sectionProperties.circleRadius, 0, 2 * Math.PI); - if (this.containerObject.isDraggingSomething() && this.containerObject.targetSection === this.name) - this.context.fill(); - else - this.context.stroke(); + this.context.stroke(); } onMouseMove(point: number[], dragDistance: number[], e: MouseEvent): void { diff --git a/cypress_test/integration_tests/common/calc_helper.js b/cypress_test/integration_tests/common/calc_helper.js index 89cfc3523..e11767a21 100644 --- a/cypress_test/integration_tests/common/calc_helper.js +++ b/cypress_test/integration_tests/common/calc_helper.js @@ -156,7 +156,7 @@ function selectEntireSheet() { }); helper.doIfOnMobile(function() { - cy.cGet('.spreadsheet-cell-resize-marker').should('be.visible'); + cy.cGet('#test-div-cell_selection_handle_start').should('exist'); }); var regex = /^A1:(AMJ|XFD)1048576$/; diff --git a/cypress_test/integration_tests/common/impress_helper.js b/cypress_test/integration_tests/common/impress_helper.js index 18bdf5420..d6b461ac1 100644 --- a/cypress_test/integration_tests/common/impress_helper.js +++ b/cypress_test/integration_tests/common/impress_helper.js @@ -100,7 +100,7 @@ function selectTableInTheCenter() { cy.cGet('body').click(XPos, YPos); }); - return cy.cGet('.text-selection-handle-start').should('be.visible'); + return cy.cGet('.leaflet-cursor-container').should('be.visible'); }); cy.cGet('.leaflet-marker-icon.table-row-resize-marker').should($el => { expect(Cypress.dom.isDetached($el)).to.eq(false); }).should('be.visible'); diff --git a/cypress_test/integration_tests/mobile/calc/calc_mobile_helper.js b/cypress_test/integration_tests/mobile/calc/calc_mobile_helper.js index 553c08865..3a0e87f74 100644 --- a/cypress_test/integration_tests/mobile/calc/calc_mobile_helper.js +++ b/cypress_test/integration_tests/mobile/calc/calc_mobile_helper.js @@ -13,11 +13,9 @@ function selectFirstRow() { .click(XPos, YPos); }); - cy.cGet('.spreadsheet-cell-resize-marker:nth-of-type(1)') - .should('be.visible'); + cy.cGet('#test-div-cell_selection_handle_start').should('exist'); - cy.cGet('.spreadsheet-cell-resize-marker:nth-of-type(2)') - .should('not.be.visible'); + cy.cGet('#test-div-cell_selection_handle_end').should('exist'); var regex = /^A1:(AMJ|XFD)1$/; cy.cGet('input#addressInput-input') diff --git a/cypress_test/integration_tests/mobile/calc/formulabar_spec.js b/cypress_test/integration_tests/mobile/calc/formulabar_spec.js index 505b58572..83030e91c 100644 --- a/cypress_test/integration_tests/mobile/calc/formulabar_spec.js +++ b/cypress_test/integration_tests/mobile/calc/formulabar_spec.js @@ -19,12 +19,9 @@ describe(['tagmobile', 'tagnextcloud'], 'Formula bar tests.', function() { // Select a different cell using address input. helper.typeIntoInputField('input#addressInput-input', 'B2'); - cy.cGet('.spreadsheet-cell-resize-marker[style=\'visibility: visible; transform: translate3d(-8px, -8px, 0px); z-index: -8;\']') - .should('not.exist'); - helper.typeIntoInputField('input#addressInput-input', 'A1'); - cy.cGet('.spreadsheet-cell-resize-marker').should('exist'); + cy.cGet('#test-div-cell_selection_handle_start').should('exist'); }); it('Select a cell range by address', function() { @@ -34,19 +31,13 @@ describe(['tagmobile', 'tagnextcloud'], 'Formula bar tests.', function() { // Select a cell range using address input. helper.typeIntoInputField('input#addressInput-input', 'B2:B3'); - cy.cGet('.spreadsheet-cell-resize-marker[style=\'visibility: visible; transform: translate3d(-8px, -8px, 0px); z-index: -8;\']') - .should('not.exist'); - // Select first cell by clicking on it. calcHelper.clickOnFirstCell(); - cy.cGet('.spreadsheet-cell-resize-marker').should('exist'); - // Select a cell range again using address input. helper.typeIntoInputField('input#addressInput-input', 'B2:B3'); - cy.cGet('.spreadsheet-cell-resize-marker[style=\'visibility: visible; transform: translate3d(-8px, -8px, 0px); z-index: -8;\']') - .should('not.exist'); + cy.cGet('#test-div-cell_selection_handle_start').should('exist'); }); it.skip('Check input field content', function() { diff --git a/cypress_test/integration_tests/mobile/calc/hamburger_menu_spec.js b/cypress_test/integration_tests/mobile/calc/hamburger_menu_spec.js index c215cc11f..505dd7f2e 100644 --- a/cypress_test/integration_tests/mobile/calc/hamburger_menu_spec.js +++ b/cypress_test/integration_tests/mobile/calc/hamburger_menu_spec.js @@ -158,7 +158,7 @@ describe.skip(['tagmobile'], 'Trigger hamburger menu options.', function() { mobileHelper.enableEditingMobile(); mobileHelper.selectHamburgerMenuItem(['Edit', 'Select All']); - cy.cGet('.spreadsheet-cell-resize-marker').should('be.visible'); + cy.cGet('#test-div-cell_selection_handle_start').should('exist'); cy.cGet('#copy-paste-container table td').should('contain.text', 'Text'); }); diff --git a/cypress_test/integration_tests/mobile/calc/insertion_wizard_spec.js b/cypress_test/integration_tests/mobile/calc/insertion_wizard_spec.js index 070e210f4..931ace380 100644 --- a/cypress_test/integration_tests/mobile/calc/insertion_wizard_spec.js +++ b/cypress_test/integration_tests/mobile/calc/insertion_wizard_spec.js @@ -30,7 +30,7 @@ describe(['tagmobile', 'tagnextcloud'], 'Calc insertion wizard.', function() { cy.wait(1000); // Select image - cy.cGet('.spreadsheet-cell-resize-marker:nth-of-type(2)') + cy.cGet('#test-div-cell_selection_handle_end') .then(function(items) { expect(items).to.have.lengthOf(1); var XPos = items[0].getBoundingClientRect().right + 10;