Add custom branding to unfurler previews

This commit is contained in:
Mononaut 2024-04-28 15:30:57 +00:00
parent 34329d04f0
commit 6b2cc23cd3
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
3 changed files with 32 additions and 4 deletions

View File

@ -2,8 +2,15 @@
<div class="preview-wrapper">
<header>
<span class="header-brand" style="position: relative;">
<app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" width="500" height="126" class="mempool-logo" style="width: 200px; height: 50px"></app-svg-images>
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 200px; height: 50px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
@if (enterpriseInfo?.img) {
<img [src]="enterpriseInfo.img" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
}
@if (enterpriseInfo?.header_img) {
<img *ngIf="enterpriseInfo.header_img" [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
} @else {
<app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" width="500" height="126" class="mempool-logo" style="width: 200px; height: 50px"></app-svg-images>
<app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 200px; height: 50px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
}
</span>
<div [ngSwitch]="network.val">

View File

@ -18,7 +18,7 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
background: var(--active-bg);
background: var(--stat-box-bg);
text-align: start;
font-size: 1.8em;
}
@ -77,3 +77,15 @@
flex-shrink: 1;
}
}
.subdomain_logo {
height: 35px;
overflow: clip;
max-width: 140px;
margin: auto;
align-self: center;
margin-right: 1em;
.rounded {
border-radius: 5px;
}
}

View File

@ -1,7 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { StateService } from '../../services/state.service';
import { Observable, merge, of } from 'rxjs';
import { Observable, Subscription, merge, of } from 'rxjs';
import { LanguageService } from '../../services/language.service';
import { EnterpriseService } from '../../services/enterprise.service';
@Component({
selector: 'app-master-page-preview',
@ -13,15 +14,23 @@ export class MasterPagePreviewComponent implements OnInit {
lightning$: Observable<boolean>;
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
urlLanguage: string;
subdomain = '';
enterpriseInfo: any;
enterpriseInfo$: Subscription;
constructor(
public stateService: StateService,
private languageService: LanguageService,
private enterpriseService: EnterpriseService,
) { }
ngOnInit() {
this.network$ = merge(of(''), this.stateService.networkChanged$);
this.lightning$ = this.stateService.lightningChanged$;
this.urlLanguage = this.languageService.getLanguageForUrl();
this.subdomain = this.enterpriseService.getSubdomain();
this.enterpriseInfo$ = this.enterpriseService.info$.subscribe(info => {
this.enterpriseInfo = info;
});
}
}