Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

fix notification TL UI

This commit is contained in:
Nicolas Constant 2020-04-21 20:20:55 -04:00
parent 8b202696b5
commit 607ad8c945
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/components/stream/stream-notifications/stream-notifications.component.html
View File

@ -1,13 +1,17 @@
<div class="notifications">
<div class="notifications__selector">
<a href class="notifications__selector__button" title="display all notifications" (click)="select('all')"
[class.notifications__selector__button--selected]="displayingNotifications">All</a>
<a href class="notifications__selector__button" title="display mentions" (click)="select('mentions')"
[class.notifications__selector__button--selected]="displayingMentions">Mentions</a>
<div class="notifications__selector--wrapper">
<a href class="notifications__selector__button" title="display all notifications" (click)="select('all')"
[class.notifications__selector__button--selected]="displayingNotifications">All</a>
</div>
<div class="notifications__selector--wrapper">
<a href class="notifications__selector__button" title="display mentions" (click)="select('mentions')"
[class.notifications__selector__button--selected]="displayingMentions">Mentions</a>
</div>
</div>
<div class="notifications__elements">
<div [class.notifications__elements__wrapper--selected]="displayingNotifications"
<div [class.notifications__elements__wrapper--selected]="displayingNotifications"
class="notifications__elements__wrapper flexcroll" #notificationstream (scroll)="onScroll()" tabindex="0">
<div class="notification" *ngFor="let notification of notifications">
<app-notification [notification]="notification" (browseAccountEvent)="browseAccount($event)"
@ -16,7 +20,7 @@
</div>
<app-waiting-animation *ngIf="isNotificationsLoading" class="waiting-icon"></app-waiting-animation>
</div>
<div [class.notifications__elements__wrapper--selected]="displayingMentions"
<div [class.notifications__elements__wrapper--selected]="displayingMentions"
class="notifications__elements__wrapper flexcroll" #mentionstream (scroll)="onScroll()" tabindex="0">
<div class="notification" *ngFor="let notification of mentions">
<app-notification [notification]="notification" (browseAccountEvent)="browseAccount($event)"

25
src/app/components/stream/stream-notifications/stream-notifications.component.scss
View File

@ -9,15 +9,32 @@ $selector-height: 30px;
position: relative;
&__selector {
position: relative;
height: $selector-height;
background-color: $notification-column-selector-background;
width: calc(100%);
background-color: $notification-column-selector-background;
&--wrapper {
position: absolute;
width: calc(50%);
display: inline-block;
&:nth-child(odd) {
top: 0;
left: 0;
}
&:nth-child(even) {
top: 0;
right: 0;
}
}
&__button {
text-decoration: none;
display: inline-block;
width: 50%;
display: block;
height: 100%;
height: $selector-height;
text-align: center;
padding-top: 3px;
color: $notification-column-selector-color;
@ -25,8 +42,6 @@ $selector-height: 30px;
&--selected {
color: $notification-column-selector-color-hover;
}
}
}