aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2023-05-24 17:13:57 +0200
committerChocobozzz <me@florianbigard.com>2023-05-24 17:13:57 +0200
commit431ebbd5e40cdae5326bcd631d9e086cfa4eae1e (patch)
tree9d9373f3b69cfc5b3f7194389ae82087f23c2ac0 /client/src/app/shared
parent54909304287f3c04dcfb39660be8ead57dc95440 (diff)
downloadPeerTube-431ebbd5e40cdae5326bcd631d9e086cfa4eae1e.tar.gz
PeerTube-431ebbd5e40cdae5326bcd631d9e086cfa4eae1e.tar.zst
PeerTube-431ebbd5e40cdae5326bcd631d9e086cfa4eae1e.zip
Migrate deprecated accordion component
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/shared-instance/instance-about-accordion.component.html196
-rw-r--r--client/src/app/shared/shared-instance/instance-about-accordion.component.ts4
2 files changed, 118 insertions, 82 deletions
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 @@
1import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' 1import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
2import { HooksService, Notifier } from '@app/core' 2import { HooksService, Notifier } from '@app/core'
3import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap' 3import { NgbAccordionDirective } from '@ng-bootstrap/ng-bootstrap'
4import { ClientFilterHookName, PluginClientScope } from '@shared/models/plugins' 4import { ClientFilterHookName, PluginClientScope } from '@shared/models/plugins'
5import { About } from '@shared/models/server' 5import { About } from '@shared/models/server'
6import { InstanceService } from './instance.service' 6import { 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})
13export class InstanceAboutAccordionComponent implements OnInit { 13export 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
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-22 12:28:02 +0000