aril 1.1.65 → 1.1.66

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

@@ -1,104 +1,104 @@
-<p-sidebar
-	[(visible)]="visible"
-	position="right"
-	[transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
-	styleClass="layout-notifications-sidebar w-full sm:w-30rem"
-	*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>
-				<span class="font-bold text-lg">{{ t('title') }}</span>
-			</div>
-		</div>
-	</ng-template>
-
-	<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) {
-											<fa-icon
-												[icon]="solidIcons.faCircle"
-												class="unread-dot"
-												[pTooltip]="t('markAsRead')"
-												tooltipPosition="left"
-												(click)="markNotificationAsReadOnDotIcon(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>
-									}
-								</div>
-							</div>
-						}
-					</div>
-				</p-scrollPanel>
-			</div>
-		} @else {
-			<div class="empty-state">
-				<div class="empty-content">
-					<i class="pi pi-bell empty-icon"></i>
-					<h3 class="empty-title">{{ t('noNotifications') }}</h3>
-					<p class="empty-message">{{ t('noNotificationsDescription') }}</p>
-				</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>
+<p-sidebar
+	[(visible)]="visible"
+	position="right"
+	[transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
+	styleClass="layout-notifications-sidebar w-full sm:w-30rem"
+	*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>
+				<span class="font-bold text-lg">{{ t('title') }}</span>
+			</div>
+		</div>
+	</ng-template>
+
+	<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) {
+											<fa-icon
+												[icon]="solidIcons.faCircle"
+												class="unread-dot"
+												[pTooltip]="t('markAsRead')"
+												tooltipPosition="left"
+												(click)="markNotificationAsReadOnDotIcon(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>
+									}
+								</div>
+							</div>
+						}
+					</div>
+				</p-scrollPanel>
+			</div>
+		} @else {
+			<div class="empty-state">
+				<div class="empty-content">
+					<i class="pi pi-bell empty-icon"></i>
+					<h3 class="empty-title">{{ t('noNotifications') }}</h3>
+					<p class="empty-message">{{ t('noNotificationsDescription') }}</p>
+				</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

@@ -1,237 +1,237 @@
-:host ::ng-deep {
-	.layout-notifications-sidebar {
-		.p-sidebar-content {
-			padding: 0;
-			background: var(--surface-ground);
-		}
-
-		.p-sidebar-header {
-			background: var(--primary-color);
-			color: var(--primary-color-text);
-			padding: 1rem 1.5rem;
-
-			span {
-				font-size: 1.1rem;
-				font-weight: 600;
-			}
-		}
-	}
-}
-
-.notifications-content {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	background: var(--surface-0);
-}
-
-.add-section {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	padding: 1rem;
-	border-bottom: 1px solid var(--surface-border);
-	background: var(--surface-0);
-}
-
-.notifications-list {
-	flex: 1;
-	overflow: hidden;
-}
-
-.notifications-items {
-	padding: 0;
-}
-
-.notification-item {
-	background: transparent;
-	border-bottom: 1px solid var(--surface-border);
-	cursor: pointer;
-	transition: background-color 0.2s ease;
-	position: relative;
-
-	&:hover {
-		background: var(--surface-hover);
-	}
-
-	&:last-child {
-		border-bottom: none;
-	}
-
-	&.unread-item {
-		background: var(--surface-50);
-
-		&:hover {
-			background: var(--surface-100);
-		}
-
-		.title-text {
-			font-weight: 500;
-			// color: var(--primary-color);
-		}
-	}
-}
-
-.item-content {
-	padding: 1.125rem 1rem;
-}
-
-.item-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: 0.625rem;
-	gap: 1rem;
-}
-
-.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;
-		}
-
-		&.email-icon {
-			&.unread {
-				background-color: #3b82f6;
-				color: white;
-				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
-
-				fa-icon {
-					color: white;
-				}
-			}
-
-			&.read {
-				background: var(--surface-200);
-				color: var(--text-color-secondary);
-
-				fa-icon {
-					color: var(--text-color-secondary);
-				}
-			}
-		}
-
-		&.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);
-
-			fa-icon {
-				color: white;
-			}
-		}
-	}
-
-	.title-text {
-		font-weight: 500;
-		line-height: 1.5;
-		font-size: 0.975rem;
-		margin: 0;
-	}
-}
-
-.notification-date {
-	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;
-}
-
-.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;
-	}
-
-	.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;
-	}
-}
-
-.empty-state {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex: 1;
-	padding: 2rem;
-
-	.empty-content {
-		text-align: center;
-
-		.empty-icon {
-			font-size: 4rem;
-			color: var(--text-color-secondary);
-			opacity: 0.3;
-			margin-bottom: 1rem;
-		}
-
-		.empty-title {
-			font-size: 1.25rem;
-			font-weight: 600;
-			color: var(--text-color);
-			margin-bottom: 0.5rem;
-		}
-
-		.empty-message {
-			color: var(--text-color-secondary);
-			margin: 0;
-		}
-	}
-}
-
-.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 {
-			width: 100% !important;
-		}
-	}
-}
+:host ::ng-deep {
+	.layout-notifications-sidebar {
+		.p-sidebar-content {
+			padding: 0;
+			background: var(--surface-ground);
+		}
+
+		.p-sidebar-header {
+			background: var(--primary-color);
+			color: var(--primary-color-text);
+			padding: 1rem 1.5rem;
+
+			span {
+				font-size: 1.1rem;
+				font-weight: 600;
+			}
+		}
+	}
+}
+
+.notifications-content {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	background: var(--surface-0);
+}
+
+.add-section {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 1rem;
+	border-bottom: 1px solid var(--surface-border);
+	background: var(--surface-0);
+}
+
+.notifications-list {
+	flex: 1;
+	overflow: hidden;
+}
+
+.notifications-items {
+	padding: 0;
+}
+
+.notification-item {
+	background: transparent;
+	border-bottom: 1px solid var(--surface-border);
+	cursor: pointer;
+	transition: background-color 0.2s ease;
+	position: relative;
+
+	&:hover {
+		background: var(--surface-hover);
+	}
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	&.unread-item {
+		background: var(--surface-50);
+
+		&:hover {
+			background: var(--surface-100);
+		}
+
+		.title-text {
+			font-weight: 500;
+			// color: var(--primary-color);
+		}
+	}
+}
+
+.item-content {
+	padding: 1.125rem 1rem;
+}
+
+.item-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 0.625rem;
+	gap: 1rem;
+}
+
+.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;
+		}
+
+		&.email-icon {
+			&.unread {
+				background-color: #3b82f6;
+				color: white;
+				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+
+				fa-icon {
+					color: white;
+				}
+			}
+
+			&.read {
+				background: var(--surface-200);
+				color: var(--text-color-secondary);
+
+				fa-icon {
+					color: var(--text-color-secondary);
+				}
+			}
+		}
+
+		&.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);
+
+			fa-icon {
+				color: white;
+			}
+		}
+	}
+
+	.title-text {
+		font-weight: 500;
+		line-height: 1.5;
+		font-size: 0.975rem;
+		margin: 0;
+	}
+}
+
+.notification-date {
+	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;
+}
+
+.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;
+	}
+
+	.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;
+	}
+}
+
+.empty-state {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+	padding: 2rem;
+
+	.empty-content {
+		text-align: center;
+
+		.empty-icon {
+			font-size: 4rem;
+			color: var(--text-color-secondary);
+			opacity: 0.3;
+			margin-bottom: 1rem;
+		}
+
+		.empty-title {
+			font-size: 1.25rem;
+			font-weight: 600;
+			color: var(--text-color);
+			margin-bottom: 0.5rem;
+		}
+
+		.empty-message {
+			color: var(--text-color-secondary);
+			margin: 0;
+		}
+	}
+}
+
+.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 {
+			width: 100% !important;
+		}
+	}
+}