diff --git a/src/renderer/components/notification-comp.tsx b/src/renderer/components/notification-comp.tsx index 4fc36357..1b9e50f8 100644 --- a/src/renderer/components/notification-comp.tsx +++ b/src/renderer/components/notification-comp.tsx @@ -29,8 +29,8 @@ type mouseEventButton = React.MouseEvent | React.MouseEvent; // Notification container height -const CONTAINER_HEIGHT = 64; -const CONTAINER_HEIGHT_WITH_INPUT = 104; +const CONTAINER_HEIGHT = 100; +const CONTAINER_HEIGHT_WITH_INPUT = 132; export default class NotificationComp extends React.Component<{}, IState> { diff --git a/src/renderer/notification-handler.ts b/src/renderer/notification-handler.ts index d7f3dff6..f10c5474 100644 --- a/src/renderer/notification-handler.ts +++ b/src/renderer/notification-handler.ts @@ -27,6 +27,8 @@ interface ICorner { } type startCorner = 'upper-right' | 'upper-left' | 'lower-right' | 'lower-left'; +const NEXT_INSERT_POSITION = 108; +const NEXT_INSERT_POSITION_WITH_INPUT = 140; export default class NotificationHandler { public settings: ISettings; @@ -121,7 +123,7 @@ export default class NotificationHandler { activeNotifications.forEach((notification) => { if (notification && windowExists(notification)) { const [, height] = notification.getSize(); - nextNotificationY += height > this.settings.height ? 112 : 72; + nextNotificationY += height > this.settings.height ? NEXT_INSERT_POSITION_WITH_INPUT : NEXT_INSERT_POSITION; } }); if (activeNotifications.length < this.settings.maxVisibleNotifications) { @@ -134,7 +136,7 @@ export default class NotificationHandler { default: case 'lower-right': case 'lower-left': - this.nextInsertPos.y = this.settings.corner.y - (nextNotificationY + 72); + this.nextInsertPos.y = this.settings.corner.y - (nextNotificationY + NEXT_INSERT_POSITION); break; } } diff --git a/src/renderer/notification.ts b/src/renderer/notification.ts index eb2edfc7..9153c896 100644 --- a/src/renderer/notification.ts +++ b/src/renderer/notification.ts @@ -11,7 +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 +const CONTAINER_HEIGHT_WITH_INPUT = 132; // Notification container height interface ICustomBrowserWindow extends Electron.BrowserWindow { winName: string; @@ -26,7 +26,7 @@ const notificationSettings = { startCorner: 'upper-right' as startCorner, display: '', width: 344, - height: 64, + height: 100, totalHeight: 0, totalWidth: 0, corner: { @@ -45,7 +45,7 @@ const notificationSettings = { animationStepMs: 5, logging: true, spacing: 8, - differentialHeight: 40, + differentialHeight: 32, }; class Notification extends NotificationHandler { @@ -516,7 +516,7 @@ class Notification extends NotificationHandler { private getNotificationOpts(): Electron.BrowserWindowConstructorOptions { return { width: 344, - height: 64, + height: 100, alwaysOnTop: true, skipTaskbar: true, resizable: isWindowsOS, diff --git a/src/renderer/styles/notification-comp.less b/src/renderer/styles/notification-comp.less index b156b41c..22eebbd1 100644 --- a/src/renderer/styles/notification-comp.less +++ b/src/renderer/styles/notification-comp.less @@ -37,7 +37,7 @@ body { .container { width: 344px; - height: 64px; + height: 100px; display: flex; justify-content: center; background-color: #ffffff; @@ -58,7 +58,7 @@ body { } .main-container { - height: 64px; + height: 100px; display: flex; justify-content: center; background-color: #ffffff; @@ -320,8 +320,8 @@ input { font-size: 12px; line-height: 16px; overflow: hidden; - white-space: nowrap; - -webkit-line-clamp: 1; + -webkit-line-clamp: 3; + display: -webkit-box; -webkit-box-orient: vertical; cursor: default; text-overflow: ellipsis;