Migrate deprecated accordion component
This commit is contained in:
Chocobozzz
parent
5490930428
commit
431ebbd5e4
|
|
@ -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 { FormReactive, FormReactiveService, InputTextComponent } from '@app/shared/shared-forms'
|
||||
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 { 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('otpTokenInput') otpTokenInput: InputTextComponent
|
||||
|
||||
accordion: NgbAccordion
|
||||
accordion: NgbAccordionDirective
|
||||
error: string = null
|
||||
forgotPasswordEmail = ''
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { ActivatedRoute } from '@angular/router'
|
|||
import { AuthService } from '@app/core'
|
||||
import { HooksService } from '@app/core/plugins/hooks.service'
|
||||
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 { ServerConfig } from '@shared/models/server'
|
||||
import { SignupService } from '../shared/signup.service'
|
||||
|
|
@ -18,7 +18,7 @@ import { SignupService } from '../shared/signup.service'
|
|||
export class RegisterComponent implements OnInit {
|
||||
@ViewChild('lastStep') lastStep: CdkStep
|
||||
|
||||
accordion: NgbAccordion
|
||||
accordion: NgbAccordionDirective
|
||||
|
||||
signupError: string
|
||||
signupSuccess = false
|
||||
|
|
|
|||
|
|
@ -2,91 +2,127 @@
|
|||
|
||||
<div *ngIf="displayInstanceShortDescription" class="instance-short-description ellipsis-multiline-3">{{ about?.instance.shortDescription }}</div>
|
||||
|
||||
<ngb-accordion #accordion="ngbAccordion" [closeOthers]="true">
|
||||
<ngb-panel *ngIf="panels.features" id="instance-features">
|
||||
<ng-template ngbPanelTitle>
|
||||
<my-global-icon iconName="playlists"></my-global-icon>
|
||||
<div ngbAccordion #accordion="ngbAccordion" [closeOthers]="true">
|
||||
<div ngbAccordionItem *ngIf="panels.features" id="instance-features">
|
||||
<div ngbAccordionHeader>
|
||||
<button ngbAccordionButton>
|
||||
<my-global-icon iconName="playlists"></my-global-icon>
|
||||
|
||||
<ng-container i18n>Features found on this instance</ng-container>
|
||||
</ng-template>
|
||||
<ng-container i18n>Features found on this instance</ng-container>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ng-template ngbPanelContent>
|
||||
<my-instance-features-table></my-instance-features-table>
|
||||
</ng-template>
|
||||
</ngb-panel>
|
||||
<div ngbAccordionCollapse>
|
||||
<div ngbAccordionBody>
|
||||
<ng-template>
|
||||
<my-instance-features-table></my-instance-features-table>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="about">
|
||||
<ngb-panel *ngIf="getAdministratorsPanel()" >
|
||||
<ng-template ngbPanelTitle>
|
||||
<my-global-icon iconName="playlists"></my-global-icon>
|
||||
<div ngbAccordionItem *ngIf="getAdministratorsPanel()" >
|
||||
<div ngbAccordionHeader>
|
||||
<button ngbAccordionButton>
|
||||
<my-global-icon iconName="playlists"></my-global-icon>
|
||||
|
||||
<ng-container i18n>Administrators & Sustainability</ng-container>
|
||||
</ng-template>
|
||||
<ng-container i18n>Administrators & Sustainability</ng-container>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ng-template ngbPanelContent>
|
||||
<div class="block">
|
||||
<strong i18n>Who are we?</strong>
|
||||
<div [innerHTML]="aboutHtml.administrator"></div>
|
||||
<div ngbAccordionCollapse>
|
||||
<div ngbAccordionBody>
|
||||
<ng-template>
|
||||
<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 class="block">
|
||||
<strong i18n>How long do we plan to maintain this instance?</strong>
|
||||
<div [innerHTML]="about.instance.maintenanceLifetime"></div>
|
||||
<div ngbAccordionItem *ngIf="termsPanel" id="terms">
|
||||
<div ngbAccordionHeader>
|
||||
<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 class="block">
|
||||
<strong i18n>How will we finance this instance?</strong>
|
||||
<div [innerHTML]="about.instance.businessModel"></div>
|
||||
<div ngbAccordionItem *ngIf="moderationPanel" id="moderation-information">
|
||||
<div ngbAccordionHeader>
|
||||
<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>
|
||||
</ng-template>
|
||||
</ngb-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ngb-panel *ngIf="termsPanel" id="terms">
|
||||
<ng-template ngbPanelTitle>
|
||||
<my-global-icon iconName="playlists"></my-global-icon>
|
||||
<div ngbAccordionItem *ngIf="codeOfConductPanel" id="code-of-conduct">
|
||||
<div ngbAccordionHeader>
|
||||
<button ngbAccordionButton>
|
||||
<my-global-icon iconName="playlists"></my-global-icon>
|
||||
|
||||
{{ getTermsTitle() }}
|
||||
</ng-template>
|
||||
<ng-container i18n>Code of conduct</ng-container>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ng-template ngbPanelContent>
|
||||
<div class="block" [innerHTML]="aboutHtml.terms"></div>
|
||||
</ng-template>
|
||||
</ngb-panel>
|
||||
<div ngbAccordionCollapse>
|
||||
<div ngbAccordionBody>
|
||||
<ng-template>
|
||||
<div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ngb-panel *ngIf="moderationPanel" id="moderation-information">
|
||||
<ng-template ngbPanelTitle>
|
||||
<my-global-icon iconName="playlists"></my-global-icon>
|
||||
<div ngbAccordionItem *ngFor="let pluginPanel of pluginPanels" [id]="pluginPanel.id">
|
||||
<div ngbAccordionHeader>
|
||||
<button ngbAccordionButton>
|
||||
<my-global-icon iconName="playlists"></my-global-icon>
|
||||
|
||||
<ng-container i18n>Moderation information</ng-container>
|
||||
</ng-template>
|
||||
<ng-container i18n>{{ pluginPanel.title }}</ng-container>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ng-template ngbPanelContent>
|
||||
<div class="block" [innerHTML]="aboutHtml.moderationInformation"></div>
|
||||
</ng-template>
|
||||
</ngb-panel>
|
||||
|
||||
<ngb-panel *ngIf="codeOfConductPanel" id="code-of-conduct">
|
||||
<ng-template ngbPanelTitle>
|
||||
<my-global-icon iconName="playlists"></my-global-icon>
|
||||
|
||||
<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>
|
||||
<div ngbAccordionCollapse>
|
||||
<div ngbAccordionBody>
|
||||
<ng-template>
|
||||
<div class="block" [innerHTML]="pluginPanel.html"></div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ngb-accordion>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/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 { About } from '@shared/models/server'
|
||||
import { InstanceService } from './instance.service'
|
||||
|
|
@ -11,7 +11,7 @@ import { InstanceService } from './instance.service'
|
|||
styleUrls: [ './instance-about-accordion.component.scss' ]
|
||||
})
|
||||
export class InstanceAboutAccordionComponent implements OnInit {
|
||||
@ViewChild('accordion', { static: true }) accordion: NgbAccordion
|
||||
@ViewChild('accordion', { static: true }) accordion: NgbAccordionDirective
|
||||
|
||||
@Output() init: EventEmitter<InstanceAboutAccordionComponent> = new EventEmitter<InstanceAboutAccordionComponent>()
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue