From 4e43021b51e4255b5a5ca2e887c83954f53412dc Mon Sep 17 00:00:00 2001
From: WayneChou <126788428+markchou0225@users.noreply.github.com>
Date: Thu, 8 Feb 2024 03:47:34 +0800
Subject: [PATCH] fix(toolbar): add minimized icon for fullscreen (#1744)
Use carbon minimized icon when in full screen mode.
---
packages/core/src/components/axes/toolbar.ts | 24 +++++++++++++++++++
packages/core/src/interfaces/enums.ts | 1 +
.../core/src/services/essentials/dom-utils.ts | 4 ++++
3 files changed, 29 insertions(+)
diff --git a/packages/core/src/components/axes/toolbar.ts b/packages/core/src/components/axes/toolbar.ts
index db334ed624..e863e88791 100644
--- a/packages/core/src/components/axes/toolbar.ts
+++ b/packages/core/src/components/axes/toolbar.ts
@@ -388,6 +388,13 @@ export class Toolbar extends Component {
controlConfig = control
} else {
+ const isFullScreenMode = this.services.domUtils.isFullScreenMode()
+ // toggle fullscreen configs by current display modes
+ if (control.type === ToolbarControlTypes.MAKE_FULLSCREEN && isFullScreenMode) {
+ control.type = ToolbarControlTypes.EXIT_FULLSCREEN
+ } else if (control.type === ToolbarControlTypes.EXIT_FULLSCREEN && !isFullScreenMode) {
+ control.type = ToolbarControlTypes.MAKE_FULLSCREEN
+ }
controlConfig = this.getControlConfigByType(control.type)
}
@@ -525,6 +532,21 @@ export class Toolbar extends Component {
}
}
break
+ case ToolbarControlTypes.EXIT_FULLSCREEN:
+ controlConfig = {
+ id: 'toolbar-exitfullscreen',
+ iconSVG: {
+ content: this.getControlIconByType(controlType),
+ width: '15px',
+ height: '15px'
+ },
+ title: 'Exit fullscreen',
+ shouldBeDisabled: () => false,
+ clickFunction: () => {
+ this.services.domUtils.toggleFullscreen()
+ }
+ }
+ break
case ToolbarControlTypes.SHOW_AS_DATATABLE:
controlConfig = {
id: 'toolbar-showasdatatable',
@@ -589,6 +611,8 @@ export class Toolbar extends Component {
return ``
case ToolbarControlTypes.MAKE_FULLSCREEN:
return ``
+ case ToolbarControlTypes.EXIT_FULLSCREEN:
+ return ``
case ToolbarControlTypes.SHOW_AS_DATATABLE:
return ``
case ToolbarControlTypes.EXPORT_CSV:
diff --git a/packages/core/src/interfaces/enums.ts b/packages/core/src/interfaces/enums.ts
index 8a671f4380..4d1cc4e781 100644
--- a/packages/core/src/interfaces/enums.ts
+++ b/packages/core/src/interfaces/enums.ts
@@ -228,6 +228,7 @@ export enum ToolbarControlTypes {
ZOOM_OUT = 'Zoom out',
RESET_ZOOM = 'Reset zoom',
MAKE_FULLSCREEN = 'Make fullscreen',
+ EXIT_FULLSCREEN = 'Exit fullscreen',
SHOW_AS_DATATABLE = 'Show as data-table',
CUSTOM = 'Custom'
}
diff --git a/packages/core/src/services/essentials/dom-utils.ts b/packages/core/src/services/essentials/dom-utils.ts
index 9feeed481e..a9b1c9a865 100644
--- a/packages/core/src/services/essentials/dom-utils.ts
+++ b/packages/core/src/services/essentials/dom-utils.ts
@@ -361,6 +361,10 @@ export class DOMUtils extends Service {
})
}
+ isFullScreenMode() {
+ return select(this.getHolder()).classed('fullscreen')
+ }
+
toggleFullscreen() {
const holder = this.getHolder()
const holderSelection = select(holder)