Style the event view

This commit is contained in:
SondreB 2023-02-11 10:21:36 +01:00
parent 92a719234f
commit 874c117520
No known key found for this signature in database
GPG Key ID: D6CC44C75005FDBF
5 changed files with 31 additions and 26 deletions

View File

@ -23,3 +23,16 @@
.button-card {
margin-bottom: 0.4em;
}
.parent-event {
}
.has-root {
margin-left: 1em;
padding-left: 1em;
border-left: 2px solid rgba(255, 255, 255, 0.15) !important;
}
.options-container {
margin-bottom: 1em;
}

View File

@ -1,6 +1,7 @@
<!-- <mat-progress-bar *ngIf="!events || events.length == 0" mode="indeterminate"></mat-progress-bar> -->
<div class="feed-page">
<div class="feed-page" *ngIf="ui.event$ | async as event">
<div class="options-container">
<mat-accordion class="options">
<mat-expansion-panel>
<mat-expansion-panel-header>
@ -12,8 +13,7 @@
</p>
</mat-expansion-panel>
</mat-accordion>
<br />
</div>
<!-- <div class="events above-event clickable" (click)="navigation.openEvent($event, event)" *ngIf="thread.above$ | async as event">
<div class="events-header">
@ -29,19 +29,20 @@
<app-event-thread [event]="event"></app-event-thread>
</div> -->
<div class="current-event events noclick" *ngIf="ui.event$ | async as event">
<mat-card *ngIf="event.rootEventId" class="button-card">
<button mat-flat-button (click)="open(event.rootEventId)"><mat-icon>keyboard_double_arrow_up</mat-icon> {{event.rootEventId}}</button>
</mat-card>
<mat-card *ngIf="event.rootEventId" class="button-card">
<button mat-flat-button (click)="open(event.rootEventId)"><mat-icon>keyboard_double_arrow_up</mat-icon>View Thread</button>
</mat-card>
<div class="parent-event" *ngIf="ui.parentEvent$ | async as parentEvent">
<app-event [event]="parentEvent"></app-event>
</div>
<div class="current-event events2 noclick" [ngClass]="{'has-root': event.rootEventId, 'no-lines': !optionsService.values.showLines, 'lines': optionsService.values.showLines }">
<mat-card *ngIf="event.parentEventId" class="button-card">
<button mat-flat-button (click)="open(event.parentEventId)"><mat-icon>keyboard_arrow_up</mat-icon> {{event.parentEventId}}</button>
<button mat-flat-button (click)="open(event.parentEventId)"><mat-icon>keyboard_arrow_up</mat-icon>View Parent</button>
</mat-card>
<span *ngIf="ui.parentEvent$ | async as event">
<app-event [event]="event"></app-event>
</span>
<div class="events-header">
<app-event-header [pubkey]="event.pubkey"><app-date [date]="event.created_at"></app-date> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon></app-event-header>
<app-event-actions [event]="event" [pubkey]="event.pubkey"></app-event-actions>
@ -49,16 +50,7 @@
<app-content class="thread-content" [ngClass]="{ 'no-lines': !optionsService.values.showLines, 'lines': optionsService.values.showLines }" [event]="event"></app-content>
<!-- <app-event-reactions class="thread-reactions" [threadEntry]="thread.getTreeEntry(thread.threadId)"></app-event-reactions> -->
<app-event-buttons [event]="event"></app-event-buttons>
<!-- <br />
e: {{event.id}}
<br />
p: {{event.pubkey}}
<br />
t: {{event.tags | json}}<br /> -->
<app-event-thread [event]="event"></app-event-thread>
<!-- <app-event-thread [threadEntry]="thread.getTreeEntry(thread.threadId)"></app-event-thread> -->
</div>
</div>
<mat-divider></mat-divider>

View File

@ -582,6 +582,10 @@ export class UIService {
event.replyEventId = eTags[1][1];
}
if (event.rootEventId == event.parentEventId) {
event.rootEventId = undefined;
}
return event;
}

View File

@ -1,6 +1,5 @@
.thread-event {
margin-left: 1em;
/* border-left: 2px solid rgba(255, 255, 255, 0.15); */
padding-top: 0em;
padding-left: 1em;
}
@ -8,6 +7,5 @@
.thread-content {
margin-left: 1em;
padding-left: 1em;
/* border-left: 2px solid rgba(255, 255, 255, 0.15) !important; */
display: block;
}

View File

@ -1,5 +1,4 @@
<div class="thread-event" *ngIf="event" [ngClass]="{ 'no-lines': !optionsService.values.showLines, lines: optionsService.values.showLines }">
<!-- <span *ngIf="thread.getEvent(entry.id) as event"> -->
<div class="thread-event2" *ngIf="event" [ngClass]="{ 'no-lines2': !optionsService.values.showLines, 'lines2': optionsService.values.showLines }">
<span>
<div class="events-header">
<app-event-header [pubkey]="event.pubkey"><span class="event-date">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon></app-event-header>
@ -8,6 +7,5 @@
<app-content class="thread-content" [ngClass]="{ 'no-lines': !optionsService.values.showLines, lines: optionsService.values.showLines }" [displayRepliesTo]="false" [event]="event"></app-content>
<!-- <app-event-reactions [threadEntry]="thread.getTreeEntry(entry.id)"></app-event-reactions> -->
<app-event-buttons [event]="event"></app-event-buttons>
<!-- <app-event-thread [threadEntry]="thread.getTreeEntry(entry.id)"></app-event-thread> -->
</span>
</div>