inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-4529] Refactor Notification History Component (#6620)

Browse Source 
* [AAE-4529] Refactor Notification History Component

* Improve code

* Add maxNotifications

* More changes

* Add documentation

* Rebase branch

* Fix build

* Update notification-history.component.md

* Fix e2e tests

Co-authored-by: Eugenio Romano <eromano@users.noreply.github.com>
This commit is contained in:
davidcanonieto
2021-02-08 16:12:53 +01:00
committed by GitHub
parent 7c1efe48c4
commit 94ec7d06a7
15 changed files with 374 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
lib/core/notifications/components/notification-history.component.scss
View File

@@ -1,23 +1,76 @@
.adf {
@mixin adf-notification-history-theme($theme) {
$background: map-get($theme, background);
$accent: map-get($theme, accent);
&-notification-history-menu_button.mat-button {
margin-right: 0;
border-radius: 90%;
padding: 0;
min-width: 40px;
height: 40px;
.adf {
&-notification-history-menu_button.mat-button {
margin-right: 0;
border-radius: 90%;
padding: 0;
min-width: 40px;
height: 40px;
}
&-notification-history-list .mat-subheader {
justify-content: space-between;
}
&-notification-history-menu {
&-item {
cursor: pointer;
}
&-item:focus {
outline: none;
background: mat-color($background, 'hover');
}
&-item:hover {
background-color: mat-color($background, 'hover');
}
&-message, &-no-message {
font-size: 13px !important;
}
&-date {
font-size: 12px !important;
}
&-initiator {
margin: 4px;
}
}
&-notification-initiator-pic {
min-width: 40px;
background: mat-color($accent);
display: inline-block;
height: 40px;
border-radius: 100px;
text-align: center;
font-weight: bolder;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle;
line-height: 40px;
color: mat-color($mat-grey, 50);
}
&-notification-history-load-more {
display: flex;
justify-content: center;
padding: 10px;
}
}
}
@media only screen and (min-device-width: 480px) {
.mat-menu-panel.adf-notification-history-menu {
max-height: 450px;
min-width: 450px;
overflow: auto;
padding: 0;
min-width: 320px;
max-height: 500px;
.mat-menu-content {
padding: 0;
}
}
}
.mat-menu-panel.adf-notification-history-menu .mat-menu-content {
padding: 0;
}