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>;
// 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> {

View File

@ -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;
}
}

View File

@ -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,

View File

@ -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;