OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Migrate deprecated accordion component

pull/5817/head
Chocobozzz 2023-05-24 17:13:57 +02:00
parent 5490930428
commit 431ebbd5e4
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
4 changed files with 112 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/+login/login.component.ts
View File

@ -7,7 +7,7 @@ import { LOGIN_PASSWORD_VALIDATOR, LOGIN_USERNAME_VALIDATOR } from '@app/shared/
import { USER_OTP_TOKEN_VALIDATOR } from '@app/shared/form-validators/user-validators' import { USER_OTP_TOKEN_VALIDATOR } from '@app/shared/form-validators/user-validators'
import { FormReactive, FormReactiveService, InputTextComponent } from '@app/shared/shared-forms' import { FormReactive, FormReactiveService, InputTextComponent } from '@app/shared/shared-forms'
import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance' import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
import { NgbAccordion, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap' import { NgbAccordionDirective, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
import { getExternalAuthHref } from '@shared/core-utils' import { getExternalAuthHref } from '@shared/core-utils'
import { RegisteredExternalAuthConfig, ServerConfig, ServerErrorCode } from '@shared/models' import { RegisteredExternalAuthConfig, ServerConfig, ServerErrorCode } from '@shared/models'
@ -23,7 +23,7 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
@ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef @ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef
@ViewChild('otpTokenInput') otpTokenInput: InputTextComponent @ViewChild('otpTokenInput') otpTokenInput: InputTextComponent
accordion: NgbAccordion accordion: NgbAccordionDirective
error: string = null error: string = null
forgotPasswordEmail = '' forgotPasswordEmail = ''

4
client/src/app/+signup/+register/register.component.ts
View File

@ -5,7 +5,7 @@ import { ActivatedRoute } from '@angular/router'
import { AuthService } from '@app/core' import { AuthService } from '@app/core'
import { HooksService } from '@app/core/plugins/hooks.service' import { HooksService } from '@app/core/plugins/hooks.service'
import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance' import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap' import { NgbAccordionDirective } from '@ng-bootstrap/ng-bootstrap'
import { UserRegister } from '@shared/models' import { UserRegister } from '@shared/models'
import { ServerConfig } from '@shared/models/server' import { ServerConfig } from '@shared/models/server'
import { SignupService } from '../shared/signup.service' import { SignupService } from '../shared/signup.service'
@ -18,7 +18,7 @@ import { SignupService } from '../shared/signup.service'
export class RegisterComponent implements OnInit { export class RegisterComponent implements OnInit {
@ViewChild('lastStep') lastStep: CdkStep @ViewChild('lastStep') lastStep: CdkStep
accordion: NgbAccordion accordion: NgbAccordionDirective
signupError: string signupError: string
signupSuccess = false signupSuccess = false

176
client/src/app/shared/shared-instance/instance-about-accordion.component.html
View File

@ -2,91 +2,127 @@
<div *ngIf="displayInstanceShortDescription" class="instance-short-description ellipsis-multiline-3">{{ about?.instance.shortDescription }}</div> <div *ngIf="displayInstanceShortDescription" class="instance-short-description ellipsis-multiline-3">{{ about?.instance.shortDescription }}</div>
<ngb-accordion #accordion="ngbAccordion" [closeOthers]="true"> <div ngbAccordion #accordion="ngbAccordion" [closeOthers]="true">
<ngb-panel *ngIf="panels.features" id="instance-features"> <div ngbAccordionItem *ngIf="panels.features" id="instance-features">
<ng-template ngbPanelTitle> <div ngbAccordionHeader>
<my-global-icon iconName="playlists"></my-global-icon> <button ngbAccordionButton>
<my-global-icon iconName="playlists"></my-global-icon>
<ng-container i18n>Features found on this instance</ng-container> <ng-container i18n>Features found on this instance</ng-container>
</ng-template> </button>
</div>
<ng-template ngbPanelContent> <div ngbAccordionCollapse>
<my-instance-features-table></my-instance-features-table> <div ngbAccordionBody>
</ng-template> <ng-template>
</ngb-panel> <my-instance-features-table></my-instance-features-table>
</ng-template>
</div>
</div>
</div>
<ng-container *ngIf="about"> <ng-container *ngIf="about">
<ngb-panel *ngIf="getAdministratorsPanel()" > <div ngbAccordionItem *ngIf="getAdministratorsPanel()" >
<ng-template ngbPanelTitle> <div ngbAccordionHeader>
<my-global-icon iconName="playlists"></my-global-icon> <button ngbAccordionButton>
<my-global-icon iconName="playlists"></my-global-icon>
<ng-container i18n>Administrators & Sustainability</ng-container> <ng-container i18n>Administrators & Sustainability</ng-container>
</ng-template> </button>
</div>
<ng-template ngbPanelContent> <div ngbAccordionCollapse>
<div class="block"> <div ngbAccordionBody>
<strong i18n>Who are we?</strong> <ng-template>
<div [innerHTML]="aboutHtml.administrator"></div> <div class="block">
<strong i18n>Who are we?</strong>
<div [innerHTML]="aboutHtml.administrator"></div>
</div>
<div class="block">
<strong i18n>How long do we plan to maintain this instance?</strong>
<div [innerHTML]="about.instance.maintenanceLifetime"></div>
</div>
<div class="block">
<strong i18n>How will we finance this instance?</strong>
<div [innerHTML]="about.instance.businessModel"></div>
</div>
</ng-template>
</div> </div>
</div>
</div>
<div class="block"> <div ngbAccordionItem *ngIf="termsPanel" id="terms">
<strong i18n>How long do we plan to maintain this instance?</strong> <div ngbAccordionHeader>
<div [innerHTML]="about.instance.maintenanceLifetime"></div> <button ngbAccordionButton>
<my-global-icon iconName="playlists"></my-global-icon>
{{ getTermsTitle() }}
</button>
</div>
<div ngbAccordionCollapse>
<div ngbAccordionBody>
<ng-template>
<div class="block" [innerHTML]="aboutHtml.terms"></div>
</ng-template>
</div> </div>
</div>
</div>
<div class="block"> <div ngbAccordionItem *ngIf="moderationPanel" id="moderation-information">
<strong i18n>How will we finance this instance?</strong> <div ngbAccordionHeader>
<div [innerHTML]="about.instance.businessModel"></div> <button ngbAccordionButton>
<my-global-icon iconName="playlists"></my-global-icon>
<ng-container i18n>Moderation information</ng-container>
</button>
</div>
<div ngbAccordionCollapse>
<div ngbAccordionBody>
<ng-template>
<div class="block" [innerHTML]="aboutHtml.moderationInformation"></div>
</ng-template>
</div> </div>
</ng-template> </div>
</ngb-panel> </div>
<ngb-panel *ngIf="termsPanel" id="terms"> <div ngbAccordionItem *ngIf="codeOfConductPanel" id="code-of-conduct">
<ng-template ngbPanelTitle> <div ngbAccordionHeader>
<my-global-icon iconName="playlists"></my-global-icon> <button ngbAccordionButton>
<my-global-icon iconName="playlists"></my-global-icon>
{{ getTermsTitle() }} <ng-container i18n>Code of conduct</ng-container>
</ng-template> </button>
</div>
<ng-template ngbPanelContent> <div ngbAccordionCollapse>
<div class="block" [innerHTML]="aboutHtml.terms"></div> <div ngbAccordionBody>
</ng-template> <ng-template>
</ngb-panel> <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div>
</ng-template>
</div>
</div>
</div>
<ngb-panel *ngIf="moderationPanel" id="moderation-information"> <div ngbAccordionItem *ngFor="let pluginPanel of pluginPanels" [id]="pluginPanel.id">
<ng-template ngbPanelTitle> <div ngbAccordionHeader>
<my-global-icon iconName="playlists"></my-global-icon> <button ngbAccordionButton>
<my-global-icon iconName="playlists"></my-global-icon>
<ng-container i18n>Moderation information</ng-container> <ng-container i18n>{{ pluginPanel.title }}</ng-container>
</ng-template> </button>
</div>
<ng-template ngbPanelContent> <div ngbAccordionCollapse>
<div class="block" [innerHTML]="aboutHtml.moderationInformation"></div> <div ngbAccordionBody>
</ng-template> <ng-template>
</ngb-panel> <div class="block" [innerHTML]="pluginPanel.html"></div>
</ng-template>
<ngb-panel *ngIf="codeOfConductPanel" id="code-of-conduct"> </div>
<ng-template ngbPanelTitle> </div>
<my-global-icon iconName="playlists"></my-global-icon> </div>
<ng-container i18n>Code of conduct</ng-container>
</ng-template>
<ng-template ngbPanelContent>
<div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div>
</ng-template>
</ngb-panel>
<ngb-panel *ngFor="let pluginPanel of pluginPanels" [id]="pluginPanel.id">
<ng-template ngbPanelTitle>
<my-global-icon iconName="playlists"></my-global-icon>
<ng-container i18n>{{ pluginPanel.title }}</ng-container>
</ng-template>
<ng-template ngbPanelContent>
<div class="block" [innerHTML]="pluginPanel.html"></div>
</ng-template>
</ngb-panel>
</ng-container> </ng-container>
</ngb-accordion> </div>

4
client/src/app/shared/shared-instance/instance-about-accordion.component.ts
View File

@ -1,6 +1,6 @@
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
import { HooksService, Notifier } from '@app/core' import { HooksService, Notifier } from '@app/core'
import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap' import { NgbAccordionDirective } from '@ng-bootstrap/ng-bootstrap'
import { ClientFilterHookName, PluginClientScope } from '@shared/models/plugins' import { ClientFilterHookName, PluginClientScope } from '@shared/models/plugins'
import { About } from '@shared/models/server' import { About } from '@shared/models/server'
import { InstanceService } from './instance.service' import { InstanceService } from './instance.service'
@ -11,7 +11,7 @@ import { InstanceService } from './instance.service'
styleUrls: [ './instance-about-accordion.component.scss' ] styleUrls: [ './instance-about-accordion.component.scss' ]
}) })
export class InstanceAboutAccordionComponent implements OnInit { export class InstanceAboutAccordionComponent implements OnInit {
@ViewChild('accordion', { static: true }) accordion: NgbAccordion @ViewChild('accordion', { static: true }) accordion: NgbAccordionDirective
@Output() init: EventEmitter<InstanceAboutAccordionComponent> = new EventEmitter<InstanceAboutAccordionComponent>() @Output() init: EventEmitter<InstanceAboutAccordionComponent> = new EventEmitter<InstanceAboutAccordionComponent>()