From 5b8d993ca5d6a853d6da03d250ef3c9b8e56c5a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bayram=20=C3=87i=C3=A7ek?= Date: Wed, 15 Jan 2025 17:25:18 +0300 Subject: [PATCH 1/4] Calc: show/hide scroll buttons correctly on RTL docs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit on toolbar and statusbar. - fixed "this._RTL always returns undefined" issue. scroll buttons are now correctly visible/hidden when scrolling horizontally with right/left scroll buttons. Signed-off-by: Bayram Çiçek Change-Id: Ieeb124df61ba0e2dea94ea256ec1daa2f87b220b --- browser/src/control/jsdialog/Util.ScrollableBar.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/browser/src/control/jsdialog/Util.ScrollableBar.ts b/browser/src/control/jsdialog/Util.ScrollableBar.ts index 21e5280a4bedf..18a46c4548a5b 100644 --- a/browser/src/control/jsdialog/Util.ScrollableBar.ts +++ b/browser/src/control/jsdialog/Util.ScrollableBar.ts @@ -48,26 +48,28 @@ function showArrow(arrow: HTMLElement, show: boolean) { function setupResizeHandler(container: Element, scrollable: Element) { const left = container.querySelector('.ui-scroll-left') as HTMLElement; const right = container.querySelector('.ui-scroll-right') as HTMLElement; + var isRTL = document.documentElement.dir === 'rtl'; + const handler = function () { const rootContainer = scrollable.querySelector('div'); if (!rootContainer) return; if (rootContainer.scrollWidth > window.innerWidth) { // we have overflowed content - const direction = this._RTL ? -1 : 1; + const direction = isRTL ? -1 : 1; if (direction * scrollable.scrollLeft > 0) { - if (this._RTL) showArrow(right, true); + if (isRTL) showArrow(right, true); else showArrow(left, true); - } else if (this._RTL) showArrow(right, false); + } else if (isRTL) showArrow(right, false); else showArrow(left, false); if ( direction * scrollable.scrollLeft < rootContainer.scrollWidth - window.innerWidth - 1 ) { - if (this._RTL) showArrow(left, true); + if (isRTL) showArrow(left, true); else showArrow(right, true); - } else if (this._RTL) showArrow(left, false); + } else if (isRTL) showArrow(left, false); else showArrow(right, false); } else { showArrow(left, false); From 5fdd3a98528c7fa0f629212bf6ae00bf6b97d317 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bayram=20=C3=87i=C3=A7ek?= Date: Thu, 16 Jan 2025 16:17:42 +0300 Subject: [PATCH 2/4] Calc: align scroll-right button arrows on RTL docs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - on RTL docs, scroll-right button arrows of statusbar and toolbar were misaligned to the left. This is fixed with 'left: 0px' Signed-off-by: Bayram Çiçek Change-Id: I5c837244352d37342864b7413f0546cae8c60a25 --- browser/css/toolbar.css | 1 + 1 file changed, 1 insertion(+) diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css index 1e39e4ebdb662..8bb57eb0537d8 100644 --- a/browser/css/toolbar.css +++ b/browser/css/toolbar.css @@ -227,6 +227,7 @@ } .ui-scroll-right::after { rotate: 270deg; + left: 0px; } .ui-scroll-left:hover, .ui-scroll-right:hover { From ae3f27a0252e6f5f567f2b1c55aef983664eddaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bayram=20=C3=87i=C3=A7ek?= Date: Tue, 21 Jan 2025 12:48:34 +0300 Subject: [PATCH 3/4] Calc: show/hide scroll buttons correctly with shift + mouse wheel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Scrolling toolbar and statusbar with Shift + mouseWheelUp/Down does not hide/show the scroll right/left buttons correctly. Therefore, right/left buttons overlap with other elements. All issues are fixed. Signed-off-by: Bayram Çiçek Change-Id: I60608a8a1395d87911c520d265fce0c3b25d8da4 --- .../control/jsdialog/Util.ScrollableBar.ts | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/browser/src/control/jsdialog/Util.ScrollableBar.ts b/browser/src/control/jsdialog/Util.ScrollableBar.ts index 18a46c4548a5b..13d9382ebd317 100644 --- a/browser/src/control/jsdialog/Util.ScrollableBar.ts +++ b/browser/src/control/jsdialog/Util.ScrollableBar.ts @@ -48,7 +48,8 @@ function showArrow(arrow: HTMLElement, show: boolean) { function setupResizeHandler(container: Element, scrollable: Element) { const left = container.querySelector('.ui-scroll-left') as HTMLElement; const right = container.querySelector('.ui-scroll-right') as HTMLElement; - var isRTL = document.documentElement.dir === 'rtl'; + var isRTL: boolean = document.documentElement.dir === 'rtl'; + var timer: any; // for shift + mouse wheel up/down const handler = function () { const rootContainer = scrollable.querySelector('div'); @@ -77,8 +78,24 @@ function setupResizeHandler(container: Element, scrollable: Element) { } }.bind(this); + // handler for toolbar and statusbar + // runs if shift + mouse wheel up/down are used + const shiftHandler = function (e: MouseEvent) { + const rootContainer = scrollable.querySelector('div'); + if (!rootContainer || !e.shiftKey) return; + + clearTimeout(timer); + // wait until mouse wheel stops scrolling + timer = setTimeout(function () { + JSDialog.RefreshScrollables(); + }, 350); + }.bind(this); + window.addEventListener('resize', handler); window.addEventListener('scroll', handler); + document + .querySelector('.ui-scrollable-content') + .addEventListener('wheel', shiftHandler); } JSDialog.MakeScrollable = function (parent: Element, scrollable: Element) { From 4607e2761f0431e2b2b04ccef64a69a46aa56033 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bayram=20=C3=87i=C3=A7ek?= Date: Tue, 28 Jan 2025 11:54:44 +0300 Subject: [PATCH 4/4] Calc: change shiftHandler to arrow function MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit to automatically bind 'this'. Signed-off-by: Bayram Çiçek Change-Id: Ie80b750ade42c72285c116c0a0b75d6f9e0fa38c --- browser/src/control/jsdialog/Util.ScrollableBar.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/browser/src/control/jsdialog/Util.ScrollableBar.ts b/browser/src/control/jsdialog/Util.ScrollableBar.ts index 13d9382ebd317..807a035fb4d44 100644 --- a/browser/src/control/jsdialog/Util.ScrollableBar.ts +++ b/browser/src/control/jsdialog/Util.ScrollableBar.ts @@ -80,7 +80,7 @@ function setupResizeHandler(container: Element, scrollable: Element) { // handler for toolbar and statusbar // runs if shift + mouse wheel up/down are used - const shiftHandler = function (e: MouseEvent) { + const shiftHandler = (e: MouseEvent) => { const rootContainer = scrollable.querySelector('div'); if (!rootContainer || !e.shiftKey) return; @@ -89,13 +89,11 @@ function setupResizeHandler(container: Element, scrollable: Element) { timer = setTimeout(function () { JSDialog.RefreshScrollables(); }, 350); - }.bind(this); + }; window.addEventListener('resize', handler); window.addEventListener('scroll', handler); - document - .querySelector('.ui-scrollable-content') - .addEventListener('wheel', shiftHandler); + scrollable.addEventListener('wheel', shiftHandler); } JSDialog.MakeScrollable = function (parent: Element, scrollable: Element) {