machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add custom branding to unfurler previews

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/app/components/master-page-preview/master-page-preview.component.html
View File

@ -2,8 +2,15 @@
<div class="preview-wrapper"> <div class="preview-wrapper">
<header> <header>
<span class="header-brand" style="position: relative;"> <span class="header-brand" style="position: relative;">
@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="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> <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> </span>
<div [ngSwitch]="network.val"> <div [ngSwitch]="network.val">

14
frontend/src/app/components/master-page-preview/master-page-preview.component.scss
View File

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

11
frontend/src/app/components/master-page-preview/master-page-preview.component.ts
View File

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