mirror of
https://github.com/WowUp/WowUp.git
synced 2026-04-23 15:27:03 -04:00
rework the funding links in details dialog
This commit is contained in:
@@ -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 -->
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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";
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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],
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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": "다음에서 보기: "
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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": "Посмотреть на"
|
||||
|
||||
@@ -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": "在該網站上檢視:"
|
||||
|
||||
@@ -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": "在该网站上查看:"
|
||||
|
||||
BIN
wowup-electron/src/assets/images/librepay_logo_small.png
Normal file
BIN
wowup-electron/src/assets/images/librepay_logo_small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Reference in New Issue
Block a user