fix: SDA-2811 - Fix css issue and make notification show as pop-up-menu (#1161)

src/renderer/components/notification-comp.tsx

@@ -105,7 +105,7 @@ export default class NotificationComp extends React.Component<{}, IState> {
         const containerClass = classNames('container', { 'external-border': isExternal });
 
         return (
-            <div className={containerClass} style={{ height: containerHeight }}>
+            <div className={containerClass} style={{ height: containerHeight }} lang={i18n.getLocale()}>
                 <div
                     className='main-container'
                     role='alert'

src/renderer/notification.ts

@@ -11,6 +11,7 @@ import NotificationHandler from './notification-handler';
 // const MAX_QUEUE_SIZE = 30;
 const CLEAN_UP_INTERVAL = 60 * 1000; // Closes inactive notification
 const animationQueue = new AnimationQueue();
+const CONTAINER_HEIGHT_WITH_INPUT = 104; // Notification container height
 
 interface ICustomBrowserWindow extends Electron.BrowserWindow {
     winName: string;
@@ -117,7 +118,8 @@ class Notification extends NotificationHandler {
 
             for (const window of this.activeNotifications) {
                 const notificationWin = window as ICustomBrowserWindow;
-                if (window && notificationWin.notificationData.tag === data.tag) {
+                const winHeight = windowExists(notificationWin) && notificationWin.getBounds().height;
+                if (window && notificationWin.notificationData.tag === data.tag && winHeight < CONTAINER_HEIGHT_WITH_INPUT) {
                     this.setNotificationContent(notificationWin, data);
                     return;
                 }
@@ -191,6 +193,8 @@ class Notification extends NotificationHandler {
         notificationWindow.setSize(notificationSettings.width, notificationSettings.height, true);
         // Move notification to top
         notificationWindow.moveTop();
+        // Reset alwaysOnTop level to normal
+        notificationWindow.setAlwaysOnTop(true, 'normal');
 
         if (!data.sticky) {
             timeoutId = setTimeout(async () => {
@@ -500,7 +504,8 @@ class Notification extends NotificationHandler {
             return;
         }
         clearTimeout(notificationWindow.displayTimer);
-        notificationWindow.setSize(344, 104, true);
+        notificationWindow.setAlwaysOnTop(true, 'pop-up-menu');
+        notificationWindow.setSize(344, CONTAINER_HEIGHT_WITH_INPUT, true);
     }
 
     /**

src/renderer/styles/notification-comp.less

@@ -84,6 +84,10 @@ body {
   align-items: flex-start;
 }
 
+.header:lang(fr-FR) {
+  min-width: 190px;
+}
+
 .title-container {
   display: flex;
 }
@@ -158,6 +162,14 @@ body {
   background: #A5A8AC;
 }
 
+.action-button:lang(fr-FR) {
+  width: 86px;
+}
+
+.action-button:lang(ja-JP) {
+ width: 60px;
+}
+
 .rte-container {
   width: 100%;
   display: flex;
@@ -246,6 +258,13 @@ input {
   color: var(--text-color);
 }
 
+.rte-thumbsup-button:focus, .rte-send-button:focus {
+  outline: none;
+}
+.rte-send-button:focus:not(:hover):not(:active), .rte-thumbsup-button:focus:not(:hover):not(:active) {
+  outline: #008EFF auto 1px;
+}
+
 .rte-send-button {
   width: 25px;
   height: 25px;
@@ -278,6 +297,10 @@ input {
   color: var(--text-color);
 }
 
+.external-border .title {
+  max-width: 142px;
+}
+
 .company {
   font-family: sans-serif;
   font-size: 11px;
@@ -291,7 +314,7 @@ input {
 
 .message {
   font-family: sans-serif;
-  width: 220px;
+  width: 205px;
   overflow-wrap: break-word;
   font-size: 12px;
   line-height: 16px;
@@ -304,6 +327,10 @@ input {
   color: var(--text-color);
 }
 
+.message:lang(fr-FR) {
+  width: 182px;
+}
+
 .logo-container {
   margin: 10px;
   display: flex;