diff options
author | Chocobozzz <me@florianbigard.com> | 2023-05-24 17:13:57 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2023-05-24 17:13:57 +0200 |
commit | 431ebbd5e40cdae5326bcd631d9e086cfa4eae1e (patch) | |
tree | 9d9373f3b69cfc5b3f7194389ae82087f23c2ac0 | |
parent | 54909304287f3c04dcfb39660be8ead57dc95440 (diff) | |
download | PeerTube-431ebbd5e40cdae5326bcd631d9e086cfa4eae1e.tar.gz PeerTube-431ebbd5e40cdae5326bcd631d9e086cfa4eae1e.tar.zst PeerTube-431ebbd5e40cdae5326bcd631d9e086cfa4eae1e.zip |
Migrate deprecated accordion component
4 files changed, 122 insertions, 86 deletions
diff --git a/client/src/app/+login/login.component.ts b/client/src/app/+login/login.component.ts index 1e224db8c..a414a2121 100644 --- a/client/src/app/+login/login.component.ts +++ b/client/src/app/+login/login.component.ts | |||
@@ -7,7 +7,7 @@ import { LOGIN_PASSWORD_VALIDATOR, LOGIN_USERNAME_VALIDATOR } from '@app/shared/ | |||
7 | import { USER_OTP_TOKEN_VALIDATOR } from '@app/shared/form-validators/user-validators' | 7 | import { USER_OTP_TOKEN_VALIDATOR } from '@app/shared/form-validators/user-validators' |
8 | import { FormReactive, FormReactiveService, InputTextComponent } from '@app/shared/shared-forms' | 8 | import { FormReactive, FormReactiveService, InputTextComponent } from '@app/shared/shared-forms' |
9 | import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance' | 9 | import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance' |
10 | import { NgbAccordion, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap' | 10 | import { NgbAccordionDirective, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap' |
11 | import { getExternalAuthHref } from '@shared/core-utils' | 11 | import { getExternalAuthHref } from '@shared/core-utils' |
12 | import { RegisteredExternalAuthConfig, ServerConfig, ServerErrorCode } from '@shared/models' | 12 | import { RegisteredExternalAuthConfig, ServerConfig, ServerErrorCode } from '@shared/models' |
13 | 13 | ||
@@ -23,7 +23,7 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni | |||
23 | @ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef | 23 | @ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef |
24 | @ViewChild('otpTokenInput') otpTokenInput: InputTextComponent | 24 | @ViewChild('otpTokenInput') otpTokenInput: InputTextComponent |
25 | 25 | ||
26 | accordion: NgbAccordion | 26 | accordion: NgbAccordionDirective |
27 | error: string = null | 27 | error: string = null |
28 | forgotPasswordEmail = '' | 28 | forgotPasswordEmail = '' |
29 | 29 | ||
diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts index 9259d902c..c17a3f380 100644 --- a/client/src/app/+signup/+register/register.component.ts +++ b/client/src/app/+signup/+register/register.component.ts | |||
@@ -5,7 +5,7 @@ import { ActivatedRoute } from '@angular/router' | |||
5 | import { AuthService } from '@app/core' | 5 | import { AuthService } from '@app/core' |
6 | import { HooksService } from '@app/core/plugins/hooks.service' | 6 | import { HooksService } from '@app/core/plugins/hooks.service' |
7 | import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance' | 7 | import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance' |
8 | import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap' | 8 | import { NgbAccordionDirective } from '@ng-bootstrap/ng-bootstrap' |
9 | import { UserRegister } from '@shared/models' | 9 | import { UserRegister } from '@shared/models' |
10 | import { ServerConfig } from '@shared/models/server' | 10 | import { ServerConfig } from '@shared/models/server' |
11 | import { SignupService } from '../shared/signup.service' | 11 | import { SignupService } from '../shared/signup.service' |
@@ -18,7 +18,7 @@ import { SignupService } from '../shared/signup.service' | |||
18 | export class RegisterComponent implements OnInit { | 18 | export class RegisterComponent implements OnInit { |
19 | @ViewChild('lastStep') lastStep: CdkStep | 19 | @ViewChild('lastStep') lastStep: CdkStep |
20 | 20 | ||
21 | accordion: NgbAccordion | 21 | accordion: NgbAccordionDirective |
22 | 22 | ||
23 | signupError: string | 23 | signupError: string |
24 | signupSuccess = false | 24 | signupSuccess = false |
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.html b/client/src/app/shared/shared-instance/instance-about-accordion.component.html index ac8c01856..5c679685b 100644 --- a/client/src/app/shared/shared-instance/instance-about-accordion.component.html +++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.html | |||
@@ -2,91 +2,127 @@ | |||
2 | 2 | ||
3 | <div *ngIf="displayInstanceShortDescription" class="instance-short-description ellipsis-multiline-3">{{ about?.instance.shortDescription }}</div> | 3 | <div *ngIf="displayInstanceShortDescription" class="instance-short-description ellipsis-multiline-3">{{ about?.instance.shortDescription }}</div> |
4 | 4 | ||
5 | <ngb-accordion #accordion="ngbAccordion" [closeOthers]="true"> | 5 | <div ngbAccordion #accordion="ngbAccordion" [closeOthers]="true"> |
6 | <ngb-panel *ngIf="panels.features" id="instance-features"> | 6 | <div ngbAccordionItem *ngIf="panels.features" id="instance-features"> |
7 | <ng-template ngbPanelTitle> | 7 | <div ngbAccordionHeader> |
8 | <my-global-icon iconName="playlists"></my-global-icon> | 8 | <button ngbAccordionButton> |
9 | <my-global-icon iconName="playlists"></my-global-icon> | ||
9 | 10 | ||
10 | <ng-container i18n>Features found on this instance</ng-container> | 11 | <ng-container i18n>Features found on this instance</ng-container> |
11 | </ng-template> | 12 | </button> |
13 | </div> | ||
12 | 14 | ||
13 | <ng-template ngbPanelContent> | 15 | <div ngbAccordionCollapse> |
14 | <my-instance-features-table></my-instance-features-table> | 16 | <div ngbAccordionBody> |
15 | </ng-template> | 17 | <ng-template> |
16 | </ngb-panel> | 18 | <my-instance-features-table></my-instance-features-table> |
19 | </ng-template> | ||
20 | </div> | ||
21 | </div> | ||
22 | </div> | ||
17 | 23 | ||
18 | <ng-container *ngIf="about"> | 24 | <ng-container *ngIf="about"> |
19 | <ngb-panel *ngIf="getAdministratorsPanel()" > | 25 | <div ngbAccordionItem *ngIf="getAdministratorsPanel()" > |
20 | <ng-template ngbPanelTitle> | 26 | <div ngbAccordionHeader> |
21 | <my-global-icon iconName="playlists"></my-global-icon> | 27 | <button ngbAccordionButton> |
22 | 28 | <my-global-icon iconName="playlists"></my-global-icon> | |
23 | <ng-container i18n>Administrators & Sustainability</ng-container> | 29 | |
24 | </ng-template> | 30 | <ng-container i18n>Administrators & Sustainability</ng-container> |
25 | 31 | </button> | |
26 | <ng-template ngbPanelContent> | 32 | </div> |
27 | <div class="block"> | 33 | |
28 | <strong i18n>Who are we?</strong> | 34 | <div ngbAccordionCollapse> |
29 | <div [innerHTML]="aboutHtml.administrator"></div> | 35 | <div ngbAccordionBody> |
36 | <ng-template> | ||
37 | <div class="block"> | ||
38 | <strong i18n>Who are we?</strong> | ||
39 | <div [innerHTML]="aboutHtml.administrator"></div> | ||
40 | </div> | ||
41 | |||
42 | <div class="block"> | ||
43 | <strong i18n>How long do we plan to maintain this instance?</strong> | ||
44 | <div [innerHTML]="about.instance.maintenanceLifetime"></div> | ||
45 | </div> | ||
46 | |||
47 | <div class="block"> | ||
48 | <strong i18n>How will we finance this instance?</strong> | ||
49 | <div [innerHTML]="about.instance.businessModel"></div> | ||
50 | </div> | ||
51 | </ng-template> | ||
30 | </div> | 52 | </div> |
31 | 53 | </div> | |
32 | <div class="block"> | 54 | </div> |
33 | <strong i18n>How long do we plan to maintain this instance?</strong> | 55 | |
34 | <div [innerHTML]="about.instance.maintenanceLifetime"></div> | 56 | <div ngbAccordionItem *ngIf="termsPanel" id="terms"> |
57 | <div ngbAccordionHeader> | ||
58 | <button ngbAccordionButton> | ||
59 | <my-global-icon iconName="playlists"></my-global-icon> | ||
60 | |||
61 | {{ getTermsTitle() }} | ||
62 | </button> | ||
63 | </div> | ||
64 | |||
65 | <div ngbAccordionCollapse> | ||
66 | <div ngbAccordionBody> | ||
67 | <ng-template> | ||
68 | <div class="block" [innerHTML]="aboutHtml.terms"></div> | ||
69 | </ng-template> | ||
35 | </div> | 70 | </div> |
36 | 71 | </div> | |
37 | <div class="block"> | 72 | </div> |
38 | <strong i18n>How will we finance this instance?</strong> | 73 | |
39 | <div [innerHTML]="about.instance.businessModel"></div> | 74 | <div ngbAccordionItem *ngIf="moderationPanel" id="moderation-information"> |
75 | <div ngbAccordionHeader> | ||
76 | <button ngbAccordionButton> | ||
77 | <my-global-icon iconName="playlists"></my-global-icon> | ||
78 | |||
79 | <ng-container i18n>Moderation information</ng-container> | ||
80 | </button> | ||
81 | </div> | ||
82 | |||
83 | <div ngbAccordionCollapse> | ||
84 | <div ngbAccordionBody> | ||
85 | <ng-template> | ||
86 | <div class="block" [innerHTML]="aboutHtml.moderationInformation"></div> | ||
87 | </ng-template> | ||
40 | </div> | 88 | </div> |
41 | </ng-template> | 89 | </div> |
42 | </ngb-panel> | 90 | </div> |
43 | 91 | ||
44 | <ngb-panel *ngIf="termsPanel" id="terms"> | 92 | <div ngbAccordionItem *ngIf="codeOfConductPanel" id="code-of-conduct"> |
45 | <ng-template ngbPanelTitle> | 93 | <div ngbAccordionHeader> |
46 | <my-global-icon iconName="playlists"></my-global-icon> | 94 | <button ngbAccordionButton> |
47 | 95 | <my-global-icon iconName="playlists"></my-global-icon> | |
48 | {{ getTermsTitle() }} | 96 | |
49 | </ng-template> | 97 | <ng-container i18n>Code of conduct</ng-container> |
50 | 98 | </button> | |
51 | <ng-template ngbPanelContent> | 99 | </div> |
52 | <div class="block" [innerHTML]="aboutHtml.terms"></div> | 100 | |
53 | </ng-template> | 101 | <div ngbAccordionCollapse> |
54 | </ngb-panel> | 102 | <div ngbAccordionBody> |
55 | 103 | <ng-template> | |
56 | <ngb-panel *ngIf="moderationPanel" id="moderation-information"> | 104 | <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div> |
57 | <ng-template ngbPanelTitle> | 105 | </ng-template> |
58 | <my-global-icon iconName="playlists"></my-global-icon> | 106 | </div> |
59 | 107 | </div> | |
60 | <ng-container i18n>Moderation information</ng-container> | 108 | </div> |
61 | </ng-template> | 109 | |
62 | 110 | <div ngbAccordionItem *ngFor="let pluginPanel of pluginPanels" [id]="pluginPanel.id"> | |
63 | <ng-template ngbPanelContent> | 111 | <div ngbAccordionHeader> |
64 | <div class="block" [innerHTML]="aboutHtml.moderationInformation"></div> | 112 | <button ngbAccordionButton> |
65 | </ng-template> | 113 | <my-global-icon iconName="playlists"></my-global-icon> |
66 | </ngb-panel> | 114 | |
67 | 115 | <ng-container i18n>{{ pluginPanel.title }}</ng-container> | |
68 | <ngb-panel *ngIf="codeOfConductPanel" id="code-of-conduct"> | 116 | </button> |
69 | <ng-template ngbPanelTitle> | 117 | </div> |
70 | <my-global-icon iconName="playlists"></my-global-icon> | 118 | |
71 | 119 | <div ngbAccordionCollapse> | |
72 | <ng-container i18n>Code of conduct</ng-container> | 120 | <div ngbAccordionBody> |
73 | </ng-template> | 121 | <ng-template> |
74 | 122 | <div class="block" [innerHTML]="pluginPanel.html"></div> | |
75 | <ng-template ngbPanelContent> | 123 | </ng-template> |
76 | <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div> | 124 | </div> |
77 | </ng-template> | 125 | </div> |
78 | </ngb-panel> | 126 | </div> |
79 | |||
80 | <ngb-panel *ngFor="let pluginPanel of pluginPanels" [id]="pluginPanel.id"> | ||
81 | <ng-template ngbPanelTitle> | ||
82 | <my-global-icon iconName="playlists"></my-global-icon> | ||
83 | |||
84 | <ng-container i18n>{{ pluginPanel.title }}</ng-container> | ||
85 | </ng-template> | ||
86 | |||
87 | <ng-template ngbPanelContent> | ||
88 | <div class="block" [innerHTML]="pluginPanel.html"></div> | ||
89 | </ng-template> | ||
90 | </ngb-panel> | ||
91 | </ng-container> | 127 | </ng-container> |
92 | </ngb-accordion> | 128 | </div> |
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts index e13703c03..e299a64a3 100644 --- a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts +++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts | |||
@@ -1,6 +1,6 @@ | |||
1 | import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' | 1 | import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' |
2 | import { HooksService, Notifier } from '@app/core' | 2 | import { HooksService, Notifier } from '@app/core' |
3 | import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap' | 3 | import { NgbAccordionDirective } from '@ng-bootstrap/ng-bootstrap' |
4 | import { ClientFilterHookName, PluginClientScope } from '@shared/models/plugins' | 4 | import { ClientFilterHookName, PluginClientScope } from '@shared/models/plugins' |
5 | import { About } from '@shared/models/server' | 5 | import { About } from '@shared/models/server' |
6 | import { InstanceService } from './instance.service' | 6 | import { InstanceService } from './instance.service' |
@@ -11,7 +11,7 @@ import { InstanceService } from './instance.service' | |||
11 | styleUrls: [ './instance-about-accordion.component.scss' ] | 11 | styleUrls: [ './instance-about-accordion.component.scss' ] |
12 | }) | 12 | }) |
13 | export class InstanceAboutAccordionComponent implements OnInit { | 13 | export class InstanceAboutAccordionComponent implements OnInit { |
14 | @ViewChild('accordion', { static: true }) accordion: NgbAccordion | 14 | @ViewChild('accordion', { static: true }) accordion: NgbAccordionDirective |
15 | 15 | ||
16 | @Output() init: EventEmitter<InstanceAboutAccordionComponent> = new EventEmitter<InstanceAboutAccordionComponent>() | 16 | @Output() init: EventEmitter<InstanceAboutAccordionComponent> = new EventEmitter<InstanceAboutAccordionComponent>() |
17 | 17 | ||