From f4f248b0a54ed296e27c2af5df5f687e772f4466 Mon Sep 17 00:00:00 2001 From: Chris Lord Date: Wed, 29 Jan 2025 10:52:27 +0000 Subject: [PATCH] Replace jQuery show animation with CSS animation in sidebar The sidebar-showing animation was relying on jQuery, which just animates the width/height properties (absolutely killer for performance). Replace this with a CSS animation. Note, the animation isn't identical; previously the document size would animate, but this now just snaps to the destination size. Animating document size changes is unlikely to be viable any time soon, but we may want to consider some kind of 2-part move + resize animation. Signed-off-by: Chris Lord Change-Id: I68eb16e9eff9a3a9601f3f903f9edb25b97a56cd --- browser/css/cool.css | 15 +++++++++++++++ browser/src/control/Control.Sidebar.ts | 7 +++---- cypress_test/integration_tests/common/helper.js | 2 +- .../desktop/calc/scrolling_spec.js | 2 +- .../desktop/calc/sheet_switch_spec.js | 4 ++-- .../desktop/writer/editable_area_spec.js | 6 ++++-- .../multiuser/writer/cursor_spec.js | 6 +++--- 7 files changed, 29 insertions(+), 13 deletions(-) diff --git a/browser/css/cool.css b/browser/css/cool.css index 409169700ac44..013d68a50e863 100644 --- a/browser/css/cool.css +++ b/browser/css/cool.css @@ -329,6 +329,21 @@ body { overflow: hidden; z-index: 990; } + +#sidebar-dock-wrapper.visible { + display: block; + animation: 200ms ease-out appear-from-right; +} + +@keyframes appear-from-right { + from { + transform: translateX(100%); + } + to { + transform: translateX(0); + } +} + #sidebar-panel { padding: 0px; margin: 0px; diff --git a/browser/src/control/Control.Sidebar.ts b/browser/src/control/Control.Sidebar.ts index f1f56905b629a..ab8550cb43f26 100644 --- a/browser/src/control/Control.Sidebar.ts +++ b/browser/src/control/Control.Sidebar.ts @@ -63,11 +63,11 @@ class Sidebar { } isVisible(): boolean { - return $('#sidebar-dock-wrapper').is(':visible'); + return $('#sidebar-dock-wrapper').hasClass('visible'); } closeSidebar() { - $('#sidebar-dock-wrapper').hide(); + $('#sidebar-dock-wrapper').removeClass('visible'); this.map._onResize(); if (!this.map.editorHasFocus()) { @@ -236,8 +236,7 @@ class Sidebar { } this.builder.build(this.container, [sidebarData]); - if (!this.isVisible()) - $('#sidebar-dock-wrapper').show(this.options.animSpeed); + if (!this.isVisible()) $('#sidebar-dock-wrapper').addClass('visible'); this.map.uiManager.setDocTypePref('ShowSidebar', true); } else { diff --git a/cypress_test/integration_tests/common/helper.js b/cypress_test/integration_tests/common/helper.js index c143e65997d7f..bb5c794820cda 100644 --- a/cypress_test/integration_tests/common/helper.js +++ b/cypress_test/integration_tests/common/helper.js @@ -1106,7 +1106,7 @@ function getBlinkingCursorPosition(aliasName) { var cursorSelector = '.cursor-overlay .blinking-cursor'; cy.cGet(cursorSelector).then(function(cursor) { var boundRect = cursor[0].getBoundingClientRect(); - var xPos = boundRect.right; + var xPos = (boundRect.left + boundRect.right) / 2; var yPos = (boundRect.top + boundRect.bottom) / 2; cy.wrap({x: xPos, y: yPos}).as(aliasName); }); diff --git a/cypress_test/integration_tests/desktop/calc/scrolling_spec.js b/cypress_test/integration_tests/desktop/calc/scrolling_spec.js index c071c74dfea2c..ecbb7c7a07f9d 100644 --- a/cypress_test/integration_tests/desktop/calc/scrolling_spec.js +++ b/cypress_test/integration_tests/desktop/calc/scrolling_spec.js @@ -73,7 +73,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Scroll through document', } // Document should scroll - desktopHelper.assertScrollbarPosition('horizontal', 80, 110); + desktopHelper.assertScrollbarPosition('horizontal', 115, 145); }); it('Scroll while selecting with mouse', function () { diff --git a/cypress_test/integration_tests/desktop/calc/sheet_switch_spec.js b/cypress_test/integration_tests/desktop/calc/sheet_switch_spec.js index 549e7bd971c60..661c842a43fe1 100644 --- a/cypress_test/integration_tests/desktop/calc/sheet_switch_spec.js +++ b/cypress_test/integration_tests/desktop/calc/sheet_switch_spec.js @@ -30,12 +30,12 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Sheet switching tests', fu it('Check view position on repeated selection of currently selected sheet', function() { // initially we are on sheet 2 tab cy.cGet(helper.addressInputSelector).should('have.prop', 'value', 'F720'); - desktopHelper.assertScrollbarPosition('vertical', 260, 300); + desktopHelper.assertScrollbarPosition('vertical', 300, 340); // click on sheet 2 tab (yes, current one) cy.cGet('#spreadsheet-tab1').click(); cy.cGet(helper.addressInputSelector).should('have.prop', 'value', 'F720'); - desktopHelper.assertScrollbarPosition('vertical', 220, 285); + desktopHelper.assertScrollbarPosition('vertical', 300, 340); // go to different place in the spreadsheet cy.cGet(helper.addressInputSelector).type('{selectAll}A2{enter}'); diff --git a/cypress_test/integration_tests/desktop/writer/editable_area_spec.js b/cypress_test/integration_tests/desktop/writer/editable_area_spec.js index 9d587786478fa..31fa9fb9de0ef 100644 --- a/cypress_test/integration_tests/desktop/writer/editable_area_spec.js +++ b/cypress_test/integration_tests/desktop/writer/editable_area_spec.js @@ -211,12 +211,14 @@ describe(['taga11yenabled'], 'Editable area - Basic typing and caret moving', fu ceHelper.type('{enter}'); ceHelper.type('green red'); // Need to wait here after typing paragraph in - // order for caret position to stick later - cy.wait(200); + // order for caret position to stick later. + // FIXME: We shouldn't need to wait. + cy.wait(1000); ceHelper.checkPlainContent('green red'); ceHelper.moveCaret('left', '', 4); ceHelper.checkCaretPosition(5); helper.getBlinkingCursorPosition('P2'); + cy.wait(800); // move up to paragraph 3 ceHelper.moveCaret('up'); ceHelper.checkPlainContent(''); diff --git a/cypress_test/integration_tests/multiuser/writer/cursor_spec.js b/cypress_test/integration_tests/multiuser/writer/cursor_spec.js index 1ea0fa231e96a..943a10993ca33 100644 --- a/cypress_test/integration_tests/multiuser/writer/cursor_spec.js +++ b/cypress_test/integration_tests/multiuser/writer/cursor_spec.js @@ -23,11 +23,11 @@ describe(['tagmultiuser'], 'Check cursor and view behavior', function() { cy.cSetActiveFrame('#iframe1'); searchHelper.typeIntoSearchField('P'); // avoid focus loss searchHelper.typeIntoSearchField('Pellentesque porttitor'); - desktopHelper.assertScrollbarPosition('vertical', 375, 385); + desktopHelper.assertScrollbarPosition('vertical', 380, 390); // verify that second view is scrolled to the editor cy.cSetActiveFrame('#iframe2'); - desktopHelper.assertScrollbarPosition('vertical', 375, 385); + desktopHelper.assertScrollbarPosition('vertical', 380, 390); // now move cursor a bit in the first view cy.cSetActiveFrame('#iframe1'); @@ -35,6 +35,6 @@ describe(['tagmultiuser'], 'Check cursor and view behavior', function() { // verify that second view is still at the same position (no jump) cy.cSetActiveFrame('#iframe2'); - desktopHelper.assertScrollbarPosition('vertical', 375, 385); + desktopHelper.assertScrollbarPosition('vertical', 380, 390); }); });