fix(toolbar): add minimized icon for fullscreen (#1744)

Use carbon minimized icon when in full screen mode.
carbon-design-system · Feb 7, 2024 · 4e43021 · 4e43021
1 parent 81b9567
commit 4e43021
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git 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 `<path d="M22.4478,21A10.855,10.855,0,0,0,25,14,10.99,10.99,0,0,0,6,6.4658V2H4v8h8V8H7.332a8.9768,8.9768,0,1,1-2.1,8H3.1912A11.0118,11.0118,0,0,0,14,25a10.855,10.855,0,0,0,7-2.5522L28.5859,30,30,28.5859Z"/>`
 			case ToolbarControlTypes.MAKE_FULLSCREEN:
 				return `<polygon points="21 2 21 4 26.59 4 17 13.58 18.41 15 28 5.41 28 11 30 11 30 2 21 2"/><polygon points="15 18.42 13.59 17 4 26.59 4 21 2 21 2 30 11 30 11 28 5.41 28 15 18.42"/>`
+			case ToolbarControlTypes.EXIT_FULLSCREEN:
+				return `<polygon points="4 18 4 20 10.586 20 2 28.582 3.414 30 12 21.414 12 28 14 28 14 18 4 18"/><polygon points="30 3.416 28.592 2 20 10.586 20 4 18 4 18 14 28 14 28 12 21.414 12 30 3.416"/>`
 			case ToolbarControlTypes.SHOW_AS_DATATABLE:
 				return `<rect x="4" y="6" width="18" height="2"/><rect x="4" y="12" width="18" height="2"/><rect x="4" y="18" width="18" height="2"/><rect x="4" y="24" width="18" height="2"/><rect x="26" y="6" width="2" height="2"/><rect x="26" y="12" width="2" height="2"/><rect x="26" y="18" width="2" height="2"/><rect x="26" y="24" width="2" height="2"/>`
 			case ToolbarControlTypes.EXPORT_CSV:

diff --git 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
@@ -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)