fix: SDA-2857 - Increase the notification height to make more space for message content (#1175)

Co-authored-by: Johan Kwarnmark <55975938+johankwarnmarksymphony@users.noreply.github.com>
This commit is contained in:
Kiran Niranjan 2021-01-21 19:53:29 +05:30 committed by GitHub
parent 1baf0834c8
commit f853e82a1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 12 deletions

View File

@ -29,8 +29,8 @@ type mouseEventButton = React.MouseEvent<HTMLDivElement> | React.MouseEvent<HTML
type keyboardEvent = React.KeyboardEvent<HTMLInputElement>; type keyboardEvent = React.KeyboardEvent<HTMLInputElement>;
// Notification container height // Notification container height
const CONTAINER_HEIGHT = 64; const CONTAINER_HEIGHT = 100;
const CONTAINER_HEIGHT_WITH_INPUT = 104; const CONTAINER_HEIGHT_WITH_INPUT = 132;
export default class NotificationComp extends React.Component<{}, IState> { export default class NotificationComp extends React.Component<{}, IState> {

View File

@ -27,6 +27,8 @@ interface ICorner {
} }
type startCorner = 'upper-right' | 'upper-left' | 'lower-right' | 'lower-left'; 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 { export default class NotificationHandler {
public settings: ISettings; public settings: ISettings;
@ -121,7 +123,7 @@ export default class NotificationHandler {
activeNotifications.forEach((notification) => { activeNotifications.forEach((notification) => {
if (notification && windowExists(notification)) { if (notification && windowExists(notification)) {
const [, height] = notification.getSize(); 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) { if (activeNotifications.length < this.settings.maxVisibleNotifications) {
@ -134,7 +136,7 @@ export default class NotificationHandler {
default: default:
case 'lower-right': case 'lower-right':
case 'lower-left': case 'lower-left':
this.nextInsertPos.y = this.settings.corner.y - (nextNotificationY + 72); this.nextInsertPos.y = this.settings.corner.y - (nextNotificationY + NEXT_INSERT_POSITION);
break; break;
} }
} }

View File

@ -11,7 +11,7 @@ import NotificationHandler from './notification-handler';
// const MAX_QUEUE_SIZE = 30; // const MAX_QUEUE_SIZE = 30;
const CLEAN_UP_INTERVAL = 60 * 1000; // Closes inactive notification const CLEAN_UP_INTERVAL = 60 * 1000; // Closes inactive notification
const animationQueue = new AnimationQueue(); 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 { interface ICustomBrowserWindow extends Electron.BrowserWindow {
winName: string; winName: string;
@ -26,7 +26,7 @@ const notificationSettings = {
startCorner: 'upper-right' as startCorner, startCorner: 'upper-right' as startCorner,
display: '', display: '',
width: 344, width: 344,
height: 64, height: 100,
totalHeight: 0, totalHeight: 0,
totalWidth: 0, totalWidth: 0,
corner: { corner: {
@ -45,7 +45,7 @@ const notificationSettings = {
animationStepMs: 5, animationStepMs: 5,
logging: true, logging: true,
spacing: 8, spacing: 8,
differentialHeight: 40, differentialHeight: 32,
}; };
class Notification extends NotificationHandler { class Notification extends NotificationHandler {
@ -516,7 +516,7 @@ class Notification extends NotificationHandler {
private getNotificationOpts(): Electron.BrowserWindowConstructorOptions { private getNotificationOpts(): Electron.BrowserWindowConstructorOptions {
return { return {
width: 344, width: 344,
height: 64, height: 100,
alwaysOnTop: true, alwaysOnTop: true,
skipTaskbar: true, skipTaskbar: true,
resizable: isWindowsOS, resizable: isWindowsOS,

View File

@ -37,7 +37,7 @@ body {
.container { .container {
width: 344px; width: 344px;
height: 64px; height: 100px;
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: #ffffff; background-color: #ffffff;
@ -58,7 +58,7 @@ body {
} }
.main-container { .main-container {
height: 64px; height: 100px;
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: #ffffff; background-color: #ffffff;
@ -320,8 +320,8 @@ input {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
overflow: hidden; overflow: hidden;
white-space: nowrap; -webkit-line-clamp: 3;
-webkit-line-clamp: 1; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
cursor: default; cursor: default;
text-overflow: ellipsis; text-overflow: ellipsis;