From d451b4f7ffa53c566a24a5047902f574a0e05e9b Mon Sep 17 00:00:00 2001 From: Kiran Niranjan Date: Thu, 9 Nov 2023 13:54:33 +0530 Subject: [PATCH] SDA-4365 (Make tooltip dynamic) (#2006) * SDA-4365 - Make tooltip dynamic * SDA-4365 - Remove win32-api as it is no longer required --- package-lock.json | 265 +----------------- package.json | 3 +- src/renderer/components/call-notification.tsx | 52 +++- 3 files changed, 50 insertions(+), 270 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0b80c1c6..07277d30 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "symphony", - "version": "23.11.0", + "version": "24.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "symphony", - "version": "23.11.0", + "version": "24.2.0", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { @@ -25,8 +25,7 @@ "rimraf": "^3.0.2", "save-svg-as-png": "^1.4.17", "shell-path": "^3.0.0", - "systeminformation": "5.21.7", - "win32-api": "^20.1.0" + "systeminformation": "5.21.7" }, "devDependencies": { "@types/cheerio": "^0.22.22", @@ -7841,23 +7840,6 @@ "pend": "~1.2.0" } }, - "node_modules/ffi-napi": { - "version": "4.0.3", - "hasInstallScript": true, - "license": "MIT", - "peer": true, - "dependencies": { - "debug": "^4.1.1", - "get-uv-event-loop-napi-h": "^1.0.5", - "node-addon-api": "^3.0.0", - "node-gyp-build": "^4.2.1", - "ref-napi": "^2.0.1 || ^3.0.2", - "ref-struct-di": "^1.1.0" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/file-type": { "version": "9.0.0", "dev": true, @@ -8384,19 +8366,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/get-symbol-from-current-process-h": { - "version": "1.0.2", - "license": "MIT", - "peer": true - }, - "node_modules/get-uv-event-loop-napi-h": { - "version": "1.0.6", - "license": "MIT", - "peer": true, - "dependencies": { - "get-symbol-from-current-process-h": "^1.0.1" - } - }, "node_modules/get-value": { "version": "2.0.6", "dev": true, @@ -13132,11 +13101,6 @@ "node": ">=10" } }, - "node_modules/node-addon-api": { - "version": "3.2.1", - "license": "MIT", - "peer": true - }, "node_modules/node-api-version": { "version": "0.1.4", "dev": true, @@ -13183,16 +13147,6 @@ "node": "^12.13 || ^14.13 || >=16" } }, - "node_modules/node-gyp-build": { - "version": "4.2.3", - "license": "MIT", - "peer": true, - "bin": { - "node-gyp-build": "bin.js", - "node-gyp-build-optional": "optional.js", - "node-gyp-build-test": "build-test.js" - } - }, "node_modules/node-gyp/node_modules/semver": { "version": "7.5.1", "dev": true, @@ -14995,63 +14949,6 @@ "node": ">= 0.10" } }, - "node_modules/ref-napi": { - "version": "3.0.3", - "hasInstallScript": true, - "license": "MIT", - "peer": true, - "dependencies": { - "debug": "^4.1.1", - "get-symbol-from-current-process-h": "^1.0.2", - "node-addon-api": "^3.0.0", - "node-gyp-build": "^4.2.1" - }, - "engines": { - "node": ">= 10.0" - } - }, - "node_modules/ref-struct-di": { - "version": "1.1.1", - "license": "MIT", - "peer": true, - "dependencies": { - "debug": "^3.1.0" - } - }, - "node_modules/ref-struct-di/node_modules/debug": { - "version": "3.2.7", - "license": "MIT", - "peer": true, - "dependencies": { - "ms": "^2.1.1" - } - }, - "node_modules/ref-struct-di/node_modules/ms": { - "version": "2.1.3", - "license": "MIT", - "peer": true - }, - "node_modules/ref-union-di": { - "version": "1.0.1", - "license": "MIT", - "peer": true, - "dependencies": { - "debug": "^3.1.0" - } - }, - "node_modules/ref-union-di/node_modules/debug": { - "version": "3.2.7", - "license": "MIT", - "peer": true, - "dependencies": { - "ms": "^2.1.1" - } - }, - "node_modules/ref-union-di/node_modules/ms": { - "version": "2.1.3", - "license": "MIT", - "peer": true - }, "node_modules/reflect.ownkeys": { "version": "0.2.0", "dev": true, @@ -18146,59 +18043,6 @@ "string-width": "^1.0.2 || 2 || 3 || 4" } }, - "node_modules/win32-api": { - "version": "20.4.1", - "license": "MIT", - "dependencies": { - "win32-def": "^20.4.1" - }, - "engines": { - "node": ">=14.15.0" - }, - "peerDependencies": { - "ffi-napi": "^4.0.3", - "ref-napi": "^3.0.3", - "ref-struct-di": "^1.1.1", - "ref-union-di": "^1.0.1" - } - }, - "node_modules/win32-def": { - "version": "20.4.1", - "license": "MIT", - "dependencies": { - "@waiting/shared-types": "^20.11.0" - }, - "engines": { - "node": ">=14.15.0" - }, - "peerDependencies": { - "ref-napi": "^3.0.3", - "ref-struct-di": "^1.1.1", - "ref-union-di": "^1.0.1" - } - }, - "node_modules/win32-def/node_modules/@waiting/shared-types": { - "version": "20.13.0", - "license": "MIT", - "engines": { - "node": ">=14.16.0" - }, - "peerDependencies": { - "typescript": ">=4.7.4" - } - }, - "node_modules/win32-def/node_modules/typescript": { - "version": "5.1.3", - "license": "Apache-2.0", - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=14.17" - } - }, "node_modules/winreg": { "version": "1.2.4", "license": "BSD-2-Clause", @@ -23933,18 +23777,6 @@ "pend": "~1.2.0" } }, - "ffi-napi": { - "version": "4.0.3", - "peer": true, - "requires": { - "debug": "^4.1.1", - "get-uv-event-loop-napi-h": "^1.0.5", - "node-addon-api": "^3.0.0", - "node-gyp-build": "^4.2.1", - "ref-napi": "^2.0.1 || ^3.0.2", - "ref-struct-di": "^1.1.0" - } - }, "file-type": { "version": "9.0.0", "dev": true @@ -24303,17 +24135,6 @@ "get-stream": { "version": "6.0.1" }, - "get-symbol-from-current-process-h": { - "version": "1.0.2", - "peer": true - }, - "get-uv-event-loop-napi-h": { - "version": "1.0.6", - "peer": true, - "requires": { - "get-symbol-from-current-process-h": "^1.0.1" - } - }, "get-value": { "version": "2.0.6", "dev": true @@ -27576,10 +27397,6 @@ } } }, - "node-addon-api": { - "version": "3.2.1", - "peer": true - }, "node-api-version": { "version": "0.1.4", "dev": true, @@ -27629,10 +27446,6 @@ } } }, - "node-gyp-build": { - "version": "4.2.3", - "peer": true - }, "node-int64": { "version": "0.4.0", "dev": true @@ -28821,56 +28634,6 @@ "resolve": "^1.1.6" } }, - "ref-napi": { - "version": "3.0.3", - "peer": true, - "requires": { - "debug": "^4.1.1", - "get-symbol-from-current-process-h": "^1.0.2", - "node-addon-api": "^3.0.0", - "node-gyp-build": "^4.2.1" - } - }, - "ref-struct-di": { - "version": "1.1.1", - "peer": true, - "requires": { - "debug": "^3.1.0" - }, - "dependencies": { - "debug": { - "version": "3.2.7", - "peer": true, - "requires": { - "ms": "^2.1.1" - } - }, - "ms": { - "version": "2.1.3", - "peer": true - } - } - }, - "ref-union-di": { - "version": "1.0.1", - "peer": true, - "requires": { - "debug": "^3.1.0" - }, - "dependencies": { - "debug": { - "version": "3.2.7", - "peer": true, - "requires": { - "ms": "^2.1.1" - } - }, - "ms": { - "version": "2.1.3", - "peer": true - } - } - }, "reflect.ownkeys": { "version": "0.2.0", "dev": true @@ -31045,28 +30808,6 @@ "string-width": "^1.0.2 || 2 || 3 || 4" } }, - "win32-api": { - "version": "20.4.1", - "requires": { - "win32-def": "^20.4.1" - } - }, - "win32-def": { - "version": "20.4.1", - "requires": { - "@waiting/shared-types": "^20.11.0" - }, - "dependencies": { - "@waiting/shared-types": { - "version": "20.13.0", - "requires": {} - }, - "typescript": { - "version": "5.1.3", - "peer": true - } - } - }, "winreg": { "version": "1.2.4", "optional": true diff --git a/package.json b/package.json index 4d18b3a1..fd2a805b 100644 --- a/package.json +++ b/package.json @@ -227,8 +227,7 @@ "rimraf": "^3.0.2", "save-svg-as-png": "^1.4.17", "shell-path": "^3.0.0", - "systeminformation": "5.21.7", - "win32-api": "^20.1.0" + "systeminformation": "5.21.7" }, "optionalDependencies": { "@symphony/symphony-c9-shell": "3.26.0-0.98.2.165", diff --git a/src/renderer/components/call-notification.tsx b/src/renderer/components/call-notification.tsx index 992d7d3d..59ab0ba7 100644 --- a/src/renderer/components/call-notification.tsx +++ b/src/renderer/components/call-notification.tsx @@ -33,6 +33,8 @@ interface ICallNotificationState { flash: boolean; isExternal: boolean; theme: Theme; + isPrimaryTextOverflowing: boolean; + isSecondaryTextOverflowing: boolean; } type mouseEventButton = @@ -49,9 +51,13 @@ export default class CallNotification extends React.Component< onReject: (data) => (event: mouseEventButton) => this.reject(event, data), }; private readonly defaultState: ICallNotificationState; + private readonly primaryTooltipRef: React.RefObject; + private readonly secondaryTooltipRef: React.RefObject; constructor(props) { super(props); + this.primaryTooltipRef = React.createRef(); + this.secondaryTooltipRef = React.createRef(); this.defaultState = { title: 'Incoming call', primaryText: 'unknown', @@ -68,6 +74,8 @@ export default class CallNotification extends React.Component< flash: false, isExternal: false, theme: '', + isPrimaryTextOverflowing: false, + isSecondaryTextOverflowing: false, }; this.state = { ...this.defaultState }; this.updateState = this.updateState.bind(this); @@ -108,6 +116,8 @@ export default class CallNotification extends React.Component< theme, flash, icon, + isPrimaryTextOverflowing, + isSecondaryTextOverflowing, } = this.state; let themeClassName; @@ -164,12 +174,15 @@ export default class CallNotification extends React.Component<
{primaryText}
-
- {primaryText} -
+ {isPrimaryTextOverflowing && ( +
+ {primaryText} +
+ )} {this.renderExtBadge(isExternal)} @@ -178,12 +191,15 @@ export default class CallNotification extends React.Component<
{secondaryText}
-
- {secondaryText} -
+ {isSecondaryTextOverflowing && ( +
+ {secondaryText} +
+ )}
) : ( @@ -247,6 +263,29 @@ export default class CallNotification extends React.Component< ipcRenderer.send('call-notification-on-reject', id); }; + private checkTextOverflow = () => { + const primaryTooltipElement = this.primaryTooltipRef.current; + const secondaryTooltipElement = this.secondaryTooltipRef.current; + // Check if the primary text content overflows the element + if ( + primaryTooltipElement && + primaryTooltipElement.scrollWidth > primaryTooltipElement.clientWidth + ) { + this.setState({ isPrimaryTextOverflowing: true }); + } else { + this.setState({ isPrimaryTextOverflowing: false }); + } + // Check if the secondary text content overflows the element + if ( + secondaryTooltipElement && + secondaryTooltipElement.scrollWidth > secondaryTooltipElement.clientWidth + ) { + this.setState({ isSecondaryTextOverflowing: true }); + } else { + this.setState({ isSecondaryTextOverflowing: false }); + } + }; + /** * Sets the component state * @@ -270,6 +309,7 @@ export default class CallNotification extends React.Component< ? data.theme : Themes.LIGHT; this.setState(data as ICallNotificationState); + this.checkTextOverflow(); } /**