Refactor profile-header into event-header

This commit is contained in:
SondreB 2023-01-01 21:09:46 +01:00
parent 0275e14859
commit 9760c68eb2
No known key found for this signature in database
GPG Key ID: D6CC44C75005FDBF
12 changed files with 57 additions and 63 deletions

View File

@ -53,7 +53,7 @@ import { NoteDialog } from './shared/create-note-dialog/create-note-dialog';
import { PickerModule } from '@ctrl/ngx-emoji-mart';
import { CirclesComponent } from './circles/circles.component';
import { PeopleComponent } from './people/people.component';
import { ProfileHeaderComponent } from './shared/profile-header/profile-header.component';
import { EventHeaderComponent } from './shared/event-header/event-header.component';
import { ProfileActionsComponent } from './shared/profile-actions/profile-actions.component';
import { CircleDialog } from './shared/create-circle-dialog/create-circle-dialog';
import { FollowDialog } from './shared/create-follow-dialog/create-follow-dialog';
@ -89,7 +89,7 @@ import { ImportFollowDialog } from './circles/import-follow-dialog/import-follow
CircleDialog,
CirclesComponent,
PeopleComponent,
ProfileHeaderComponent,
EventHeaderComponent,
ProfileActionsComponent,
FeedPrivateComponent,
FeedPublicComponent,

View File

@ -58,9 +58,9 @@
<div class="events clickable" (click)="navigation.openEvent($event, event)" *ngFor="let event of events; trackBy: trackByFn">
<app-profile-actions [event]="event"></app-profile-actions>
<app-profile-header [pubkey]="event.pubkey"
<app-event-header [pubkey]="event.pubkey"
><span class="event-date" matTooltipPosition="below">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon
></app-profile-header>
></app-event-header>
<div class="content clickable">
<app-content [event]="event"></app-content>
<!-- {{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span> -->

View File

@ -33,9 +33,9 @@
<div class="events" *ngFor="let event of events; trackBy: trackByFn">
<app-profile-actions [event]="event"></app-profile-actions>
<app-profile-header [pubkey]="event.pubkey"
<app-event-header [pubkey]="event.pubkey"
><span class="event-date" [matTooltip]="event.id!" matTooltipPosition="below">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon
></app-profile-header>
></app-event-header>
<div class="content">
{{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span>
<div *ngIf="details">

View File

@ -4,9 +4,9 @@
<div class="root-event events" *ngIf="thread.root$ | async as event">
<span>
<app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
<app-profile-header [pubkey]="event.pubkey"
<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-profile-header>
></app-event-header>
<app-content [event]="event"></app-content>
<!-- <div class="content">{{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span></div> -->
</span>
@ -17,9 +17,9 @@
<div class="events" *ngFor="let event of events; trackBy: trackByFn">
<span>
<app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
<app-profile-header [pubkey]="event.pubkey"
<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-profile-header>
></app-event-header>
<app-content [event]="event"></app-content>
<!-- <div class="content">{{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span></div> -->
</span>
@ -31,9 +31,9 @@
<!-- <div class="parent-events events" *ngFor="let event of filteredThread(); trackBy: trackByFn">
<span *ngIf="event.kind != 7">
<app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
<app-profile-header [pubkey]="event.pubkey"
<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-profile-header>
></app-event-header>
<div class="content">{{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span></div>
</span>
@ -41,9 +41,9 @@
<div class="current-event events noclick" *ngIf="thread.event$ | async as event">
<app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
<app-profile-header [pubkey]="event.pubkey"
<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-profile-header>
></app-event-header>
<app-content [event]="event"></app-content>
<!-- <div class="content">
{{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span><br />
@ -85,9 +85,9 @@
<div class="events" *ngFor="let event of events; trackBy: trackByFn">
<span>
<app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
<app-profile-header [pubkey]="event.pubkey"
<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-profile-header>
></app-event-header>
<app-content [event]="event"></app-content>
<!-- <div class="content">{{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span></div> -->
</span>

View File

@ -4,10 +4,10 @@
<div *ngIf="notes.length === 0">Notes are all your saved posts. These can be your own, or they can be copies of public posts made by others.<br /></div>
<div class="events" *ngFor="let note of notes">
<app-profile-actions [event]="note"></app-profile-actions>
<app-profile-header [pubkey]="note.pubkey"
<app-event-header [pubkey]="note.pubkey"
>Posted: <span class="event-date">{{ note.created_at | ago }}</span
>, Saved: <span class="event-date">{{ note.saved | ago }}</span>
</app-profile-header>
</app-event-header>
<app-content [event]="note"></app-content>
<!-- <div class="content">
{{ note.content }}<span *ngIf="note.contentCut">... (message was truncated)</span>

View File

@ -40,7 +40,7 @@
<div class="events clickable" (click)="navigation.openProfile($event, profile)" *ngFor="let profile of profiles; trackBy: trackByFn">
<app-profile-actions [profile]="profile"></app-profile-actions>
<app-profile-header [profile]="profile"><span class="clickable" *ngIf="profile.created">Started following {{ profile.created | ago }}</span> <app-directory-icon [pubkey]="profile.pubkey"></app-directory-icon></app-profile-header>
<app-event-header [profile]="profile"><span class="clickable" *ngIf="profile.created">Started following {{ profile.created | ago }}</span> <app-directory-icon [pubkey]="profile.pubkey"></app-directory-icon></app-event-header>
<div class="content clickable">
{{ profile.about }}
</div>

View File

@ -6,11 +6,12 @@
</div>
<div class="profile-page-header-middle">
<span *ngIf="profile">
<h2 class="profile-name marginless" [matTooltip]="npub" matTooltipPosition="above">{{ profile.display_name }}
</h2>
<h2 class="profile-name marginless" [matTooltip]="npub" matTooltipPosition="above">{{ profile.display_name }}</h2>
<br />
<span>
<span class="dimmed">{{ profileName }}<span *ngIf="profile.nip05"> / {{ profile.nip05 }}</span></span><br />
<span class="dimmed"
>{{ profileName }}<span *ngIf="profile.nip05"> / {{ profile.nip05 }}</span></span
><br />
<!-- <span class="dimmed wrap">{{ npub }}</span> -->
<p class="wrap" *ngIf="profile.about">{{ profile.about }}</p>
<!-- <p>{{ profile.lud06 }}</p> -->
@ -47,8 +48,8 @@
</span> -->
</div>
<mat-tab-group>
<mat-tab label="Profile">
<!-- <mat-tab-group>
<mat-tab label="Profile"> -->
<div class="page">
<mat-card>
<mat-card-header>
@ -58,34 +59,47 @@
</mat-card-header>
<mat-card-content>
<p>
<mat-form-field appearance="fill" class="input-full-width">
<mat-form-field appearance="outline" class="input-full-width">
<mat-icon matPrefix>alternate_email</mat-icon>
<mat-label>Name</mat-label>
<input matInput type="text" [(ngModel)]="profileName" autocomplete="off" />
<input matInput type="text" [(ngModel)]="profileName" />
</mat-form-field>
</p>
<p>
<mat-form-field appearance="fill" class="input-full-width">
<mat-form-field appearance="outline" class="input-full-width">
<mat-icon matPrefix>help_outline</mat-icon>
<mat-label>About</mat-label>
<textarea matInput type="text" [(ngModel)]="about" autocomplete="off" rows="3"></textarea>
</mat-form-field>
</p>
<p>
<mat-form-field appearance="fill" class="input-full-width">
<mat-form-field appearance="outline" class="input-full-width">
<mat-icon matPrefix>image</mat-icon>
<mat-label>Image</mat-label>
<input matInput type="text" [(ngModel)]="imagePath" autocomplete="off" />
<input matInput type="text" [(ngModel)]="imagePath" />
</mat-form-field>
</p>
<p>
<mat-form-field appearance="outline" class="input-full-width">
<mat-icon matPrefix>how_to_reg</mat-icon>
<mat-label>E-mail/Domain Identifier (NIP05)</mat-label>
<input matInput type="text" [(ngModel)]="imagePath" />
</mat-form-field>
</p>
<p>
<mat-form-field appearance="outline" class="input-full-width">
<mat-icon matPrefix>currency_bitcoin</mat-icon>
<mat-label>Bitcoin Payment Link (LUD06)</mat-label>
<input matInput type="text" placeholder="LNURL..." />
</mat-form-field>
</p>
</mat-card-content>
<mat-card-footer align="end">
<button mat-raised-button color="primary" (click)="updateMetadata()">Save</button>
</mat-card-footer>
</mat-card>
</div>
</mat-tab>
<!-- </mat-tab>
<mat-tab label="Public key">
<div class="page">
@ -117,5 +131,4 @@
</mat-card>
</div>
</mat-tab>
</mat-tab-group>
</mat-tab-group> -->

View File

@ -21,7 +21,7 @@ export class ProfileComponent {
npub!: string;
profile?: NostrProfileDocument;
about?: string;
imagePath = 'https://notes.blockcore.net/assets/profile.png';
imagePath = '';
profileName = '';
loading!: boolean;

View File

@ -5,11 +5,11 @@ import { Utilities } from 'src/app/services/utilities.service';
import { Circle, NostrProfile, NostrProfileDocument } from '../../services/interfaces';
@Component({
selector: 'app-profile-header',
templateUrl: './profile-header.component.html',
styleUrls: ['./profile-header.component.css'],
selector: 'app-event-header',
templateUrl: './event-header.component.html',
styleUrls: ['./event-header.component.css'],
})
export class ProfileHeaderComponent {
export class EventHeaderComponent {
@Input() pubkey: string = '';
@Input() profile?: NostrProfileDocument;

View File

@ -9,12 +9,10 @@
<h2 class="profile-name marginless" [matTooltip]="npub" matTooltipPosition="above">{{ profile.display_name }}</h2>
<br />
<span>
<span class="dimmed">{{ profileName }}<span *ngIf="profile.nip05"> / {{ profile.nip05 }}</span></span
<span class="dimmed"
>{{ profileName }}<span *ngIf="profile.nip05"> / {{ profile.nip05 }}</span></span
><br />
<!-- <span class="dimmed wrap">{{ npub }}</span> -->
<p class="wrap" *ngIf="profile.about">{{ profile.about }}</p>
<!-- <p>{{ profile.lud06 }}</p> -->
<!-- Tip: <a class="ln-link" [href]="sanitize('lightning:' + profile.lud06)" target="_blank">⚡️</a> -->
<p *ngIf="profile.website">{{ profile.website }}</p>
</span>
</span>
@ -23,28 +21,11 @@
<div class="profile-button-container" *ngIf="profile.lud06">
<a mat-mini-fab color="primary" [href]="sanitize('lightning:' + profile.lud06)">⚡️</a>
</div>
<!--
DO WE WANT A FOLLOW SHORTCUT OR ENOUGH WITH "..." MENU?
<div class="profile-button-container">
<button mat-mini-fab>
<mat-icon>add_circle</mat-icon>
</button>
</div> -->
<div class="profile-button-container">
<app-profile-actions [fab]="true" [profile]="profile"></app-profile-actions>
</div>
</div>
</div>
<!-- <span *ngIf="profile">
<h2 class="marginless">{{ profile.display_name }}</h2>
<span>
{{ profileName }} / {{ profile.nip05 }}<br />
<span class="dimmed wrap">{{ npub }}</span>
<p *ngIf="profile.about">{{ profile.about }}</p>
<p *ngIf="profile.website">{{ profile.website }}</p>
</span>
</span> -->
</div>
<div class="page" *ngIf="profile && !profile?.follow">
@ -83,9 +64,9 @@
<div class="events clickable" (click)="navigation.openEvent($event, event)" *ngFor="let event of events; trackBy: trackByFn">
<app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
<app-profile-header [pubkey]="event.pubkey"
<app-event-header [pubkey]="event.pubkey"
><span class="event-date clickable">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon
></app-profile-header>
></app-event-header>
<app-content [event]="event"></app-content>
<!-- <div class="content clickable">{{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span></div> -->
</div>
@ -134,9 +115,9 @@
<div class="events clickable" (click)="navigation.openEvent($event, event)" *ngFor="let event of events; trackBy: trackByFn">
<app-profile-actions [event]="event" [pubkey]="event.pubkey"></app-profile-actions>
<app-profile-header [pubkey]="event.pubkey"
<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-profile-header>
></app-event-header>
<app-content [event]="event"></app-content>
<!-- <div class="content clickable">Reply: {{ event.content }}<span *ngIf="event.contentCut">... (message was truncated)</span></div> -->
</div>