rework the funding links in details dialog

This commit is contained in:
jliddev
2020-12-22 10:45:14 -06:00
parent 4fd282e4ef
commit fee7d8a548
18 changed files with 149 additions and 26 deletions

View File

@@ -34,26 +34,9 @@
</div>
<div *ngIf="hasFundingLinks()" class="funding-link-container ">
<h3 class="m-0">Support this author</h3>
<div class="row addon-funding align-items-center">
<div *ngFor="let link of getFundingLinks()" [ngSwitch]="link.platform.toUpperCase()">
<a *ngSwitchCase="'PATREON'" appExternalLink [href]="link.url"
[matTooltip]="'PAGES.MY_ADDONS.FUNDING_TOOLTIP.PATREON' | translate">
<img class="funding-icon" src="assets/images/patreon_logo_white.png" />
</a>
<a *ngSwitchCase="'GITHUB'" appExternalLink [href]="link.url"
[matTooltip]="'PAGES.MY_ADDONS.FUNDING_TOOLTIP.GITHUB' | translate">
<img class="funding-icon" src="assets/images/github_logo_small.png" />
</a>
<a *ngSwitchCase="'CUSTOM'" appExternalLink [href]="link.url"
[matTooltip]="'PAGES.MY_ADDONS.FUNDING_TOOLTIP.CUSTOM' | translate">
<img class="funding-icon" src="assets/images/custom_funding_logo_small.png" />
</a>
<a *ngSwitchDefault appExternalLink [href]="link.url"
[matTooltip]="'PAGES.MY_ADDONS.FUNDING_TOOLTIP.GENERIC' | translate:{'platform': capitalizeString(link.platform)}">
<img class="funding-icon" src="assets/images/custom_funding_logo_small.png" />
</a>
</div>
<h3 class="m-0">{{ 'DIALOGS.ADDON_DETAILS.FUNDING_LINK_TITLE' | translate }}</h3>
<div class="row align-items-center">
<app-funding-button *ngFor="let link of getFundingLinks()" [funding]="link"></app-funding-button>
</div>
</div>
<!-- MISSING DEPENDENCIES -->

View File

@@ -0,0 +1,6 @@
<a mat-raised-button color="primary" class="funding-button" appExternalLink
[matTooltip]="'PAGES.MY_ADDONS.FUNDING_TOOLTIP.GENERIC' | translate:{platform:getFundingName()}"
[href]="funding.url">
<img class="funding-icon" [src]="getFundingIcon()" />
<span>{{ getFundingName() }}</span>
</a>

View File

@@ -0,0 +1,19 @@
@import "../../../variables.scss";
:host {
margin-right: 0.5em;
&:last-child {
margin-right: 0;
}
}
.funding-button {
// background-color: $dark-3;
margin-right: 0.5em;
.funding-icon {
height: 20px;
width: 20px;
margin-right: 0.5em;
}
}

View File

@@ -0,0 +1,52 @@
import { HttpClient, HttpClientModule } from "@angular/common/http";
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { NoopAnimationsModule } from "@angular/platform-browser/animations";
import { TranslateCompiler, TranslateLoader, TranslateModule } from "@ngx-translate/core";
import { TranslateMessageFormatCompiler } from "ngx-translate-messageformat-compiler";
import { httpLoaderFactory } from "../../app.module";
import { MatModule } from "../../mat-module";
import { FundingButtonComponent } from "./funding-button.component";
describe("FundingButtonComponent", () => {
let component: FundingButtonComponent;
let fixture: ComponentFixture<FundingButtonComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [FundingButtonComponent],
imports: [
MatModule,
HttpClientModule,
NoopAnimationsModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: httpLoaderFactory,
deps: [HttpClient],
},
compiler: {
provide: TranslateCompiler,
useClass: TranslateMessageFormatCompiler,
},
}),
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(FundingButtonComponent);
component = fixture.componentInstance;
component.funding = {
platform: "TEST",
url: "TEST",
};
fixture.detectChanges();
});
it("should create", () => {
expect(component).toBeTruthy();
});
});

View File

@@ -0,0 +1,49 @@
import { Component, Input, OnInit } from "@angular/core";
import { AddonFundingLink } from "../../entities/addon";
@Component({
selector: "app-funding-button",
templateUrl: "./funding-button.component.html",
styleUrls: ["./funding-button.component.scss"],
})
export class FundingButtonComponent implements OnInit {
@Input("funding") funding: AddonFundingLink;
constructor() {}
ngOnInit(): void {}
getTooltipKey() {
return `PAGES.MY_ADDONS.FUNDING_TOOLTIP.${this.funding.platform.toUpperCase()}`;
}
getFundingIcon() {
switch (this.funding.platform) {
case "LIBERAPAY":
return "assets/images/librepay_logo_small.png";
case "PATREON":
return "assets/images/patreon_logo_white.png";
case "GITHUB":
return "assets/images/github_logo_small.png";
case "CUSTOM":
default:
return "assets/images/custom_funding_logo_small.png";
}
}
getFundingName() {
switch (this.funding.platform) {
case "LIBERAPAY":
return "Liberapay";
case "PATREON":
return "Patreon";
case "GITHUB":
return "GitHub";
case "PAYPAL":
return "PayPal";
case "CUSTOM":
default:
return "Custom";
}
}
}

View File

@@ -1,5 +1,7 @@
import { CommonModule, DatePipe } from "@angular/common";
import { NgModule } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
import { AddonDetailComponent } from "../../components/addon-detail/addon-detail.component";
import { AddonInstallButtonComponent } from "../../components/addon-install-button/addon-install-button.component";
import { AddonProviderBadgeComponent } from "../../components/addon-provider-badge/addon-provider-badge.component";
@@ -10,21 +12,22 @@ import { GetAddonStatusColumnComponent } from "../../components/get-addon-status
import { InstallFromUrlDialogComponent } from "../../components/install-from-url-dialog/install-from-url-dialog.component";
import { MyAddonStatusColumnComponent } from "../../components/my-addon-status-column/my-addon-status-column.component";
import { MyAddonsAddonCellComponent } from "../../components/my-addons-addon-cell/my-addons-addon-cell.component";
import { OptionsAddonSectionComponent } from "../../components/options-addon-section/options-addon-section.component";
import { OptionsAppSectionComponent } from "../../components/options-app-section/options-app-section.component";
import { OptionsDebugSectionComponent } from "../../components/options-debug-section/options-debug-section.component";
import { OptionsWowSectionComponent } from "../../components/options-wow-section/options-wow-section.component";
import { PotentialAddonTableColumnComponent } from "../../components/potential-addon-table-column/potential-addon-table-column.component";
import { ProgressButtonComponent } from "../../components/progress-button/progress-button.component";
import { ProgressSpinnerComponent } from "../../components/progress-spinner/progress-spinner.component";
import { TelemetryDialogComponent } from "../../components/telemetry-dialog/telemetry-dialog.component";
import { WowClientOptionsComponent } from "../../components/wow-client-options/wow-client-options.component";
import { OptionsWowSectionComponent } from "../../components/options-wow-section/options-wow-section.component";
import { OptionsAppSectionComponent } from "../../components/options-app-section/options-app-section.component";
import { OptionsDebugSectionComponent } from "../../components/options-debug-section/options-debug-section.component";
import { OptionsAddonSectionComponent } from "../../components/options-addon-section/options-addon-section.component";
import { FundingButtonComponent } from "../../components/funding-button/funding-button.component";
import { DirectiveModule } from "../../directive.module";
import { MatModule } from "../../mat-module";
import { DownloadCountPipe } from "../../pipes/download-count.pipe";
import { GetAddonListItemFilePropPipe } from "../../pipes/get-addon-list-item-file-prop.pipe";
import { InterfaceFormatPipe } from "../../pipes/interface-format.pipe";
import { RelativeDurationPipe } from "../../pipes/relative-duration-pipe";
import { MatModule } from "../../mat-module";
import { SharedModule } from "../../shared/shared.module";
import { AboutComponent } from "../about/about.component";
import { GetAddonsComponent } from "../get-addons/get-addons.component";
@@ -32,7 +35,6 @@ import { MyAddonsComponent } from "../my-addons/my-addons.component";
import { OptionsComponent } from "../options/options.component";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
import { ReactiveFormsModule } from "@angular/forms";
@NgModule({
declarations: [
@@ -64,6 +66,7 @@ import { ReactiveFormsModule } from "@angular/forms";
OptionsAppSectionComponent,
OptionsDebugSectionComponent,
OptionsAddonSectionComponent,
FundingButtonComponent,
],
imports: [CommonModule, SharedModule, HomeRoutingModule, MatModule, DirectiveModule, ReactiveFormsModule],
providers: [DatePipe, GetAddonListItemFilePropPipe, DownloadCountPipe],

View File

@@ -109,6 +109,7 @@
"CHANGELOG_TAB": "Changelog",
"DEPENDENCY_TEXT": "Dieses Addon besitzt {dependencyCount} {dependencyCount, plural, one{Abhängigkeit} other{Abhängigkeiten}}",
"DESCRIPTION_TAB": "Description",
"FUNDING_LINK_TITLE": "Support this author",
"MISSING_DEPENDENCIES": "Missing dependencies",
"VIEW_IN_BROWSER_BUTTON": "Im Browser anzeigen",
"VIEW_ON_PROVIDER_PREFIX": "Anzeigen auf"

View File

@@ -109,6 +109,7 @@
"CHANGELOG_TAB": "Changelog",
"DEPENDENCY_TEXT": "This addon has {dependencyCount} required {dependencyCount, plural, =1{dependency} other{dependencies}}",
"DESCRIPTION_TAB": "Description",
"FUNDING_LINK_TITLE": "Support this author",
"MISSING_DEPENDENCIES": "Missing dependencies",
"VIEW_IN_BROWSER_BUTTON": "View in browser",
"VIEW_ON_PROVIDER_PREFIX": "View on"

View File

@@ -109,6 +109,7 @@
"CHANGELOG_TAB": "Changelog",
"DEPENDENCY_TEXT": "Este addon tiene {dependencyCount} {dependencyCount, plural, one{dependencia requerida} other{dependencias requeridas}}",
"DESCRIPTION_TAB": "Description",
"FUNDING_LINK_TITLE": "Support this author",
"MISSING_DEPENDENCIES": "Missing dependencies",
"VIEW_IN_BROWSER_BUTTON": "Ver en el navegador",
"VIEW_ON_PROVIDER_PREFIX": "Ver en"

View File

@@ -109,6 +109,7 @@
"CHANGELOG_TAB": "Changelog",
"DEPENDENCY_TEXT": "Cet addon a {dependencyCount} {dependencyCount, plural, one{dépendance requise} other{dépendances requises}}",
"DESCRIPTION_TAB": "Description",
"FUNDING_LINK_TITLE": "Support this author",
"MISSING_DEPENDENCIES": "Missing dependencies",
"VIEW_IN_BROWSER_BUTTON": "Voir dans le navigateur",
"VIEW_ON_PROVIDER_PREFIX": "Voir sur"

View File

@@ -109,6 +109,7 @@
"CHANGELOG_TAB": "Changelog",
"DEPENDENCY_TEXT": "Questo addon ha {dependencyCount, plural, one{una dipendenza} other{{dependencyCount} dipendenze}} {dependencyCount, plural, one{richiesta} other{richieste}}",
"DESCRIPTION_TAB": "Description",
"FUNDING_LINK_TITLE": "Support this author",
"MISSING_DEPENDENCIES": "Missing dependencies",
"VIEW_IN_BROWSER_BUTTON": "Visualizza nel browser",
"VIEW_ON_PROVIDER_PREFIX": "Visualizza su"

View File

@@ -109,6 +109,7 @@
"CHANGELOG_TAB": "Changelog",
"DEPENDENCY_TEXT": "이 애드온은 {dependencyCount}개의 다른 애드온을 참조합니다.",
"DESCRIPTION_TAB": "Description",
"FUNDING_LINK_TITLE": "Support this author",
"MISSING_DEPENDENCIES": "Missing dependencies",
"VIEW_IN_BROWSER_BUTTON": "브라우저에서 열기",
"VIEW_ON_PROVIDER_PREFIX": "다음에서 보기: "

View File

@@ -109,6 +109,7 @@
"CHANGELOG_TAB": "Changelog",
"DEPENDENCY_TEXT": "This addon has {dependencyCount} required {dependencyCount, plural, one{dependency} other{dependencies}}",
"DESCRIPTION_TAB": "Description",
"FUNDING_LINK_TITLE": "Support this author",
"MISSING_DEPENDENCIES": "Missing dependencies",
"VIEW_IN_BROWSER_BUTTON": "Se i nettleser",
"VIEW_ON_PROVIDER_PREFIX": "View on"

View File

@@ -109,6 +109,7 @@
"CHANGELOG_TAB": "Changelog",
"DEPENDENCY_TEXT": "Este Addon tem {dependencyCount} {dependencyCount, plural, one{dependência necessária} other{dependências necessárias}}",
"DESCRIPTION_TAB": "Description",
"FUNDING_LINK_TITLE": "Support this author",
"MISSING_DEPENDENCIES": "Missing dependencies",
"VIEW_IN_BROWSER_BUTTON": "Visualizar no navegador",
"VIEW_ON_PROVIDER_PREFIX": "Ver em"

View File

@@ -109,6 +109,7 @@
"CHANGELOG_TAB": "Changelog",
"DEPENDENCY_TEXT": "Эта модификация имеет {dependencyCount} {dependencyCount, plural, one{необходимую} other{необходимых}} {dependencyCount, plural, one{зависимость} few{зависимости} other{зависимостей}}",
"DESCRIPTION_TAB": "Description",
"FUNDING_LINK_TITLE": "Support this author",
"MISSING_DEPENDENCIES": "Missing dependencies",
"VIEW_IN_BROWSER_BUTTON": "Посмотреть в браузере",
"VIEW_ON_PROVIDER_PREFIX": "Посмотреть на"

View File

@@ -109,6 +109,7 @@
"CHANGELOG_TAB": "Changelog",
"DEPENDENCY_TEXT": "此插件有 {dependencyCount} 個依賴項",
"DESCRIPTION_TAB": "Description",
"FUNDING_LINK_TITLE": "Support this author",
"MISSING_DEPENDENCIES": "Missing dependencies",
"VIEW_IN_BROWSER_BUTTON": "在瀏覽器中檢視",
"VIEW_ON_PROVIDER_PREFIX": "在該網站上檢視:"

View File

@@ -109,6 +109,7 @@
"CHANGELOG_TAB": "Changelog",
"DEPENDENCY_TEXT": "此插件有 {dependencyCount} 个依赖项",
"DESCRIPTION_TAB": "Description",
"FUNDING_LINK_TITLE": "Support this author",
"MISSING_DEPENDENCIES": "Missing dependencies",
"VIEW_IN_BROWSER_BUTTON": "在浏览器中查看",
"VIEW_ON_PROVIDER_PREFIX": "在该网站上查看:"

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB