aril 1.2.36 → 1.2.37

package/theme/layout/app/notifications/notifications-sidebar.component.html

@@ -3,12 +3,22 @@
 	position="right"
 	[transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
 	styleClass="layout-notifications-sidebar w-full sm:w-30rem"
+	(onShow)="onSidebarShow()"
 	*transloco="let t; read: 'notifications'">
 	<ng-template pTemplate="header">
 		<div class="flex align-items-center justify-content-between w-full">
-			<div class="flex align-items-center">
-				<i class="pi pi-bell text-primary text-xl"></i>
+			<div class="flex align-items-center gap-2">
+				<i class="pi pi-bell text-xl"></i>
 				<span class="font-bold text-lg">{{ t('title') }}</span>
+				@if (unreadCount > 0) {
+					<span class="unread-count-chip">{{ unreadCount }}</span>
+				}
+			</div>
+			<div class="flex align-items-center gap-2 header-actions">
+				<span class="only-unread-label">{{ t('onlyUnread') }}</span>
+				<aril-switch [ngModel]="onlyUnread()" (ngModelChange)="onOnlyUnreadChange($event)"></aril-switch>
+				<i class="pi pi-ellipsis-v header-menu-icon" (click)="toggleMenu($event, headerMenu)"></i>
+				<p-menu #headerMenu [popup]="true" [model]="menuItems" appendTo="body"></p-menu>
 			</div>
 		</div>
 	</ng-template>
@@ -16,70 +26,70 @@
 	<div class="notifications-content">
 		@if (notifications().length > 0) {
 			<div class="notifications-list">
-				<p-scrollPanel [style]="{ width: '100%', height: '100%' }">
-					<div class="notifications-items">
-						@for (notification of notifications(); track trackByNotificationId($index, notification)) {
-							<div
-								class="notification-item"
-								[class.unread-item]="!notification.read"
-								(click)="
-									(
-										notification?.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM ||
-										notification?.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB
-									) ?
-										markNotificationAsRead(notification)
-									:	null
-								">
-								<div class="item-content">
-									<div class="item-header">
-										<div class="item-title">
-											@if (notification.type === ActivityTypesEnum.SMS) {
-												<div class="notification-icon sms-icon">
-													<fa-icon [icon]="regularIcons.faMessage" />
-												</div>
-											} @else {
-												@if (!notification.read) {
-													<div class="notification-icon email-icon unread">
-														<fa-icon [icon]="regularIcons.faEnvelope" />
-													</div>
-												} @else {
-													<div class="notification-icon email-icon read">
-														<fa-icon [icon]="regularIcons.faEnvelopeOpen" />
-													</div>
-												}
-											}
-											<p class="title-text ml-2">{{ getNotificationTitle(notification) }}</p>
-										</div>
-										<span class="notification-date">{{ formatNotificationDate(notification.sendingDate) }}</span>
-										@if (!notification.read) {
+				<div class="notifications-items">
+					@for (notification of notifications(); track notification.id) {
+						<div
+							class="notification-item"
+							[class.unread-item]="!notification.read"
+							[class.navigable]="isNavigable(notification)"
+							(click)="openNotification(notification)">
+							<div class="notification-icon" [ngClass]="getNotificationIconClass(notification)">
+								<fa-icon [icon]="getNotificationIcon(notification)" />
+							</div>
+							<div class="item-body">
+								<div class="item-header">
+									<p class="item-title">{{ getNotificationTitle(notification) }}</p>
+									<span class="item-time">{{ formatNotificationDate(notification.sendingDate) }}</span>
+									@if (!notification.read) {
+										<span class="item-actions">
 											<fa-icon
 												[icon]="solidIcons.faCircle"
 												class="unread-dot"
 												[pTooltip]="t('markAsRead')"
 												tooltipPosition="left"
-												(click)="markNotificationAsReadOnDotIcon(notification); $event.stopPropagation()">
+												(click)="markNotificationAsRead(notification); $event.stopPropagation()">
 											</fa-icon>
-										}
-									</div>
-									<div class="item-meta"></div>
-									@if (getNotificationContent(notification)) {
-										<div class="item-content-preview">
-											@if (notification.type === ActivityTypesEnum.EMAIL) {
-												<div [innerHTML]="notification.content | safe: 'html'" class="html-preview line-clamp-3"></div>
-											} @else {
-												<p class="text-content">
-													{{ getNotificationContent(notification) }}
-												</p>
-											}
-										</div>
+											<button
+												type="button"
+												class="mark-read-action"
+												[pTooltip]="t('markAsRead')"
+												tooltipPosition="left"
+												(click)="markNotificationAsRead(notification); $event.stopPropagation()">
+												<i class="pi pi-check"></i>
+											</button>
+										</span>
 									}
 								</div>
+								@if (getNotificationContent(notification)) {
+									@if (notification.type === ActivityTypesEnum.EMAIL) {
+										<div [innerHTML]="notification.content | safe: 'html'" class="item-preview html-preview"></div>
+									} @else {
+										<p class="item-preview">{{ getNotificationContent(notification) }}</p>
+									}
+								}
+								@if (notification.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM) {
+									<span class="nav-chip">{{ t('goToTaskDetail') }} <i class="pi pi-arrow-right"></i></span>
+								} @else if (notification.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB) {
+									<span class="nav-chip">{{ t('goToBulkOperations') }} <i class="pi pi-arrow-right"></i></span>
+								}
 							</div>
-						}
-					</div>
-				</p-scrollPanel>
+						</div>
+					}
+					@if (remainingCount() > 0) {
+						<div class="show-more">
+							<aril-button
+								[label]="t('showMore', { count: remainingCount() })"
+								color="primary"
+								size="sm"
+								[outlined]="true"
+								[loading]="loading"
+								(clickEvent)="showMore()">
+							</aril-button>
+						</div>
+					}
+				</div>
 			</div>
-		} @else {
+		} @else if (!loading) {
 			<div class="empty-state">
 				<div class="empty-content">
 					<i class="pi pi-bell empty-icon"></i>
@@ -88,17 +98,5 @@
 				</div>
 			</div>
 		}
-
-		<div class="flex justify-content-center p-2 border-top-1 surface-border">
-			<aril-button
-				[label]="t('allShow')"
-				icon="EXTERNAL_LINK"
-				color="primary"
-				size="md"
-				(clickEvent)="navigateToAllNotifications()">
-			</aril-button>
-		</div>
 	</div>
-
-	<p-confirmDialog></p-confirmDialog>
 </p-sidebar>

package/theme/layout/app/notifications/notifications-sidebar.component.scss

@@ -14,6 +14,69 @@
 				font-size: 1.1rem;
 				font-weight: 600;
 			}
+
+			.p-sidebar-close {
+				color: var(--primary-color-text);
+
+				&:enabled:hover {
+					background: rgba(255, 255, 255, 0.15);
+					color: var(--primary-color-text);
+				}
+			}
+		}
+
+		.header-actions {
+			.p-inputswitch {
+				transform: scale(0.8);
+
+				.p-inputswitch-slider {
+					background: rgba(255, 255, 255, 0.3);
+				}
+
+				&.p-inputswitch-checked .p-inputswitch-slider {
+					background: var(--green-500);
+				}
+
+				&.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
+					background: var(--green-600);
+				}
+			}
+
+			.only-unread-label {
+				font-size: 0.78rem;
+				font-weight: 500;
+			}
+		}
+	}
+
+	.item-preview.html-preview {
+		* {
+			font-family: inherit !important;
+			font-size: inherit !important;
+			font-weight: inherit !important;
+			font-style: inherit !important;
+			color: inherit !important;
+			line-height: inherit !important;
+			letter-spacing: inherit !important;
+			text-align: left !important;
+			margin: 0 !important;
+			padding: 0 !important;
+			border: none !important;
+			background: transparent !important;
+			display: inline !important;
+		}
+
+		p::after,
+		div::after,
+		li::after {
+			content: ' ';
+		}
+
+		img,
+		table,
+		hr,
+		br {
+			display: none !important;
 		}
 	}
 }
@@ -22,167 +85,230 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	background: var(--surface-0);
+	background: var(--surface-ground);
 }
 
-.add-section {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	padding: 1rem;
-	border-bottom: 1px solid var(--surface-border);
-	background: var(--surface-0);
+.unread-count-chip {
+	background: rgba(255, 255, 255, 0.25);
+	border-radius: 999px;
+	font-size: 0.72rem !important;
+	font-weight: 600 !important;
+	padding: 0.1rem 0.55rem;
+}
+
+.header-menu-icon {
+	cursor: pointer;
+	font-size: 1.1rem;
+	padding: 0.25rem;
+	color: var(--primary-color-text);
+	border-radius: 6px;
+	transition: background-color 0.15s ease;
+
+	&:hover {
+		background: rgba(255, 255, 255, 0.15);
+	}
 }
 
 .notifications-list {
 	flex: 1;
-	overflow: hidden;
+	overflow-y: auto;
 }
 
 .notifications-items {
-	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.625rem;
+	padding: 0.75rem;
 }
 
 .notification-item {
-	background: transparent;
-	border-bottom: 1px solid var(--surface-border);
-	cursor: pointer;
-	transition: background-color 0.2s ease;
-	position: relative;
+	display: flex;
+	gap: 0.75rem;
+	padding: 0.875rem 1rem 0.875rem calc(1rem + 4px);
+	background: var(--surface-card);
+	border: 1px solid var(--surface-border);
+	border-radius: 8px;
+	transition:
+		background-color 0.2s ease,
+		border-color 0.2s ease;
 
 	&:hover {
 		background: var(--surface-hover);
+
+		.unread-dot {
+			display: none;
+		}
+
+		.mark-read-action {
+			display: flex;
+		}
 	}
 
-	&:last-child {
-		border-bottom: none;
+	&.navigable {
+		cursor: pointer;
 	}
 
 	&.unread-item {
-		background: var(--surface-50);
+		border-left-width: 5px;
+		border-left-color: var(--primary-color);
+		padding-left: 1rem;
 
-		&:hover {
-			background: var(--surface-100);
+		.item-title {
+			font-weight: 600;
+			color: var(--text-color);
 		}
+	}
+}
 
-		.title-text {
-			font-weight: 500;
-			// color: var(--primary-color);
-		}
+.notification-icon {
+	width: 2.25rem;
+	height: 2.25rem;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+
+	fa-icon {
+		font-size: 0.9rem;
+	}
+
+	&.todo {
+		background: var(--purple-100);
+		color: var(--purple-600);
+	}
+
+	&.batch {
+		background: var(--orange-100);
+		color: var(--orange-600);
+	}
+
+	&.sms {
+		background: var(--green-100);
+		color: var(--green-600);
+	}
+
+	&.email-unread {
+		background: var(--blue-100);
+		color: var(--blue-600);
+	}
+
+	&.email-read {
+		background: var(--surface-200);
+		color: var(--text-color-secondary);
 	}
 }
 
-.item-content {
-	padding: 1.125rem 1rem;
+.item-body {
+	flex: 1;
+	min-width: 0;
 }
 
 .item-header {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
-	margin-bottom: 0.625rem;
-	gap: 1rem;
+	gap: 0.5rem;
+	margin-bottom: 0.3rem;
+	min-height: 1.5rem;
 }
 
 .item-title {
-	display: flex;
-	align-items: center;
 	flex: 1;
 	min-width: 0;
-	gap: 0.4em;
-
-	.notification-icon {
-		width: 1.75rem;
-		height: 1.75rem;
-		border-radius: 50%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		// margin-top: 0.125rem;
-		flex-shrink: 0;
-		transition: all 0.2s ease;
-
-		fa-icon {
-			font-size: 0.875rem;
-			transition: all 0.2s ease;
-		}
+	margin: 0;
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--text-color-secondary);
+	line-height: 1.4;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
 
-		&.email-icon {
-			&.unread {
-				background-color: #3b82f6;
-				color: white;
-				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+.item-time {
+	font-size: 0.72rem;
+	color: var(--text-color-secondary);
+	white-space: nowrap;
+}
 
-				fa-icon {
-					color: white;
-				}
-			}
+.item-actions {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.5rem;
+	flex-shrink: 0;
+}
 
-			&.read {
-				background: var(--surface-200);
-				color: var(--text-color-secondary);
+.unread-dot {
+	color: var(--primary-color);
+	font-size: 0.5rem;
+	cursor: pointer;
+	opacity: 0.85;
 
-				fa-icon {
-					color: var(--text-color-secondary);
-				}
-			}
-		}
+	&:hover {
+		opacity: 1;
+	}
+}
 
-		&.sms-icon {
-			background: linear-gradient(135deg, var(--green-500), var(--green-600));
-			color: white;
-			box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
+.mark-read-action {
+	display: none;
+	width: 1.5rem;
+	height: 1.5rem;
+	border-radius: 6px;
+	border: 1px solid var(--surface-border);
+	background: var(--surface-card);
+	color: var(--text-color-secondary);
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	padding: 0;
 
-			fa-icon {
-				color: white;
-			}
-		}
+	&:hover {
+		color: var(--primary-color);
+		border-color: var(--primary-color);
 	}
 
-	.title-text {
-		font-weight: 500;
-		line-height: 1.5;
-		font-size: 0.975rem;
-		margin: 0;
+	i {
+		font-size: 0.7rem;
 	}
 }
 
-.notification-date {
+.item-preview {
+	margin: 0;
 	font-size: 0.8rem;
 	color: var(--text-color-secondary);
-	font-weight: 500;
-	white-space: nowrap;
-	background: var(--surface-100);
-	padding: 0.2rem 0.4rem;
-	border-radius: 0.25rem;
+	line-height: 1.5;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	overflow: hidden;
+	word-break: break-word;
+	white-space: normal;
 }
 
-.item-content-preview {
-	margin-top: 0.625rem;
-	color: var(--text-color-secondary);
-	padding-left: 1.5rem;
-	border-left: 2px solid var(--surface-200);
-
-	.text-content {
-		font-size: 0.875rem;
-		line-height: 1.5;
-		margin: 0;
-		font-style: italic;
+.nav-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.3rem;
+	margin-top: 0.4rem;
+	font-size: 0.75rem;
+	font-weight: 600;
+	color: var(--primary-color);
+
+	i {
+		font-size: 0.65rem;
 	}
+}
 
-	.html-preview {
-		font-size: 0.875rem;
-		line-height: 1.5;
-		max-height: 75px;
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 3;
-		line-clamp: 3;
-		overflow: hidden;
-		word-break: break-word;
-		white-space: normal;
-		font-style: italic;
-	}
+.notification-item.navigable:hover .nav-chip {
+	text-decoration: underline;
+}
+
+.show-more {
+	display: flex;
+	justify-content: center;
+	padding: 0.25rem 0 0.5rem;
 }
 
 .empty-state {
@@ -216,18 +342,6 @@
 	}
 }
 
-.unread-dot {
-	color: #3b82f6;
-	font-size: 0.625rem;
-	cursor: pointer;
-	transition: opacity 0.2s ease;
-	opacity: 0.8;
-
-	&:hover {
-		opacity: 1;
-	}
-}
-
 @media (max-width: 768px) {
 	.layout-notifications-sidebar {
 		::ng-deep .p-sidebar {