Use standalone components for menu

This commit is contained in:
Chocobozzz 2024-03-04 09:34:25 +01:00
parent bfdf82c490
commit 62cc9b1752
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
20 changed files with 89 additions and 46 deletions

View File

@ -1,5 +1,5 @@
import { Component, ViewChild } from '@angular/core'
import { UserNotificationsComponent } from '@app/shared/shared-main'
import { UserNotificationsComponent } from '@app/shared/standalone-notifications/user-notifications.component'
type NotificationSortType = 'createdAt' | 'read'

View File

@ -35,6 +35,7 @@ import {
UserImportExportService
} from './my-account-import-export'
import { UploadProgressComponent } from '@app/shared/standalone-upload'
import { UserNotificationsComponent } from '@app/shared/standalone-notifications/user-notifications.component'
@NgModule({
imports: [
@ -56,7 +57,8 @@ import { UploadProgressComponent } from '@app/shared/standalone-upload'
SharedActorImageModule,
SharedActorImageEditModule,
UploadProgressComponent
UploadProgressComponent,
UserNotificationsComponent
],
declarations: [

View File

@ -72,10 +72,10 @@
</ng-template>
</p-toast>
<ng-container *ngIf="isUserLoggedIn()">
@defer (when isUserLoggedIn()) {
<my-account-setup-warning-modal #accountSetupWarningModal></my-account-setup-warning-modal>
<my-admin-welcome-modal #adminWelcomeModal></my-admin-welcome-modal>
<my-instance-config-warning-modal #instanceConfigWarningModal></my-instance-config-warning-modal>
</ng-container>
}
<my-custom-modal #customModal></my-custom-modal>

View File

@ -13,13 +13,9 @@ import { EmptyComponent } from './empty.component'
import { HeaderComponent, SearchTypeaheadComponent, SuggestionComponent } from './header'
import { HighlightPipe } from './header/highlight.pipe'
import { polyfillICU } from './helpers'
import { LanguageChooserComponent, MenuComponent, NotificationComponent } from './menu'
import { AccountSetupWarningModalComponent } from './modal/account-setup-warning-modal.component'
import { AdminWelcomeModalComponent } from './modal/admin-welcome-modal.component'
import { MenuComponent } from './menu'
import { ConfirmComponent } from './modal/confirm.component'
import { CustomModalComponent } from './modal/custom-modal.component'
import { InstanceConfigWarningModalComponent } from './modal/instance-config-warning-modal.component'
import { QuickSettingsModalComponent } from './modal/quick-settings-modal.component'
import { SharedActorImageModule } from './shared/shared-actor-image/shared-actor-image.module'
import { SharedFormModule } from './shared/shared-forms'
import { SharedGlobalIconModule } from './shared/shared-icons'
@ -27,6 +23,9 @@ import { SharedInstanceModule } from './shared/shared-instance'
import { SharedMainModule } from './shared/shared-main'
import { SharedUserInterfaceSettingsModule } from './shared/shared-user-settings'
import { HotkeysCheatSheetComponent } from './hotkeys'
import { InstanceConfigWarningModalComponent } from './modal/instance-config-warning-modal.component'
import { AdminWelcomeModalComponent } from './modal/admin-welcome-modal.component'
import { AccountSetupWarningModalComponent } from './modal/account-setup-warning-modal.component'
registerLocaleData(localeOc, 'oc')
@ -51,19 +50,12 @@ export function loadConfigFactory (server: ServerService, pluginService: PluginS
AppComponent,
EmptyComponent,
MenuComponent,
LanguageChooserComponent,
QuickSettingsModalComponent,
NotificationComponent,
HeaderComponent,
SearchTypeaheadComponent,
SuggestionComponent,
HighlightPipe,
AccountSetupWarningModalComponent,
CustomModalComponent,
AdminWelcomeModalComponent,
InstanceConfigWarningModalComponent,
ConfirmComponent,
HotkeysCheatSheetComponent
@ -81,6 +73,12 @@ export function loadConfigFactory (server: ServerService, pluginService: PluginS
SharedInstanceModule,
SharedActorImageModule,
MenuComponent,
InstanceConfigWarningModalComponent,
AdminWelcomeModalComponent,
AccountSetupWarningModalComponent,
AppRoutingModule // Put it after all the module because it has the 404 route
],

View File

@ -1,3 +1,2 @@
export * from './language-chooser.component'
export * from './notification.component'
export * from './menu.component'

View File

@ -1,12 +1,16 @@
import { CommonModule } from '@angular/common'
import { Component, ElementRef, Inject, LOCALE_ID, ViewChild } from '@angular/core'
import { getDevLocale, isOnDevLocale } from '@app/helpers'
import { SharedGlobalIconModule } from '@app/shared/shared-icons'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { getCompleteLocale, getShortLocale, I18N_LOCALES, objectKeysTyped, sortBy } from '@peertube/peertube-core-utils'
@Component({
selector: 'my-language-chooser',
templateUrl: './language-chooser.component.html',
styleUrls: [ './language-chooser.component.scss' ]
styleUrls: [ './language-chooser.component.scss' ],
standalone: true,
imports: [ CommonModule, SharedGlobalIconModule ]
})
export class LanguageChooserComponent {
@ViewChild('modal', { static: true }) modal: ElementRef

View File

@ -78,7 +78,9 @@
</div>
</div>
<my-notification (navigate)="onActiveLinkScrollToAnchor($event)"></my-notification>
@defer (when isLoggedIn) {
<my-notification (navigate)="onActiveLinkScrollToAnchor($event)"></my-notification>
}
</div>
<ul class="logged-in-menu">

View File

@ -1,7 +1,7 @@
import * as debug from 'debug'
import { forkJoin, Subscription } from 'rxjs'
import { first, switchMap } from 'rxjs/operators'
import { ViewportScroller } from '@angular/common'
import { CommonModule, ViewportScroller } from '@angular/common'
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
import { Router } from '@angular/router'
import {
@ -18,18 +18,36 @@ import {
UserService
} from '@app/core'
import { scrollToTop } from '@app/helpers'
import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
import { PeertubeModalService } from '@app/shared/shared-main/peertube-modal/peertube-modal.service'
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
import { HTMLServerConfig, ServerConfig, UserRight, UserRightType, VideoConstant } from '@peertube/peertube-models'
import { NotificationComponent } from './notification.component'
import { SharedMainModule } from '@app/shared/shared-main'
import { SharedGlobalIconModule } from '@app/shared/shared-icons'
import { SharedUserInterfaceSettingsModule } from '@app/shared/shared-user-settings'
import { SharedFormModule } from '@app/shared/shared-forms'
import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-actor-image.module'
import { LanguageChooserComponent } from './language-chooser.component'
import { QuickSettingsModalComponent } from './quick-settings-modal.component'
const debugLogger = debug('peertube:menu:MenuComponent')
@Component({
selector: 'my-menu',
templateUrl: './menu.component.html',
styleUrls: [ './menu.component.scss' ]
styleUrls: [ './menu.component.scss' ],
standalone: true,
imports: [
CommonModule,
SharedActorImageModule,
NotificationComponent,
SharedMainModule,
SharedGlobalIconModule,
SharedUserInterfaceSettingsModule,
SharedFormModule,
LanguageChooserComponent,
QuickSettingsModalComponent
]
})
export class MenuComponent implements OnInit, OnDestroy {
@ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent

View File

@ -3,13 +3,17 @@ import { filter } from 'rxjs/operators'
import { Component, EventEmitter, Output, OnDestroy, OnInit, ViewChild } from '@angular/core'
import { NavigationEnd, Router } from '@angular/router'
import { Notifier, PeerTubeSocket, ScreenService } from '@app/core'
import { UserNotificationService } from '@app/shared/shared-main'
import { SharedMainModule, UserNotificationService } from '@app/shared/shared-main'
import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
import { UserNotificationsComponent } from '@app/shared/standalone-notifications/user-notifications.component'
import { SharedGlobalIconModule } from '@app/shared/shared-icons'
@Component({
selector: 'my-notification',
templateUrl: './notification.component.html',
styleUrls: [ './notification.component.scss' ]
styleUrls: [ './notification.component.scss' ],
standalone: true,
imports: [ UserNotificationsComponent, SharedMainModule, SharedGlobalIconModule ]
})
export class NotificationComponent implements OnInit, OnDestroy {
@ViewChild('popover', { static: true }) popover: NgbPopover

View File

@ -5,10 +5,15 @@ import { ActivatedRoute, Router } from '@angular/router'
import { AuthService, AuthStatus, LocalStorageService, User, UserService } from '@app/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
import { SharedUserInterfaceSettingsModule } from '@app/shared/shared-user-settings'
import { SharedGlobalIconModule } from '@app/shared/shared-icons'
import { CommonModule } from '@angular/common'
@Component({
selector: 'my-quick-settings',
templateUrl: './quick-settings-modal.component.html'
templateUrl: './quick-settings-modal.component.html',
standalone: true,
imports: [ CommonModule, SharedGlobalIconModule, SharedUserInterfaceSettingsModule ]
})
export class QuickSettingsModalComponent implements OnInit, OnDestroy {
private static readonly QUERY_MODAL_NAME = 'quick-settings'

View File

@ -1,5 +1,8 @@
import { CommonModule } from '@angular/common'
import { Component, ElementRef, ViewChild } from '@angular/core'
import { Notifier, ServerService, User, UserService } from '@app/core'
import { SharedFormModule } from '@app/shared/shared-forms'
import { SharedGlobalIconModule } from '@app/shared/shared-icons'
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
import { logger } from '@root-helpers/logger'
import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
@ -7,7 +10,9 @@ import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
@Component({
selector: 'my-account-setup-warning-modal',
templateUrl: './account-setup-warning-modal.component.html',
styleUrls: [ './account-setup-warning-modal.component.scss' ]
styleUrls: [ './account-setup-warning-modal.component.scss' ],
standalone: true,
imports: [ CommonModule, SharedGlobalIconModule, SharedFormModule ]
})
export class AccountSetupWarningModalComponent {
@ViewChild('modal', { static: true }) modal: ElementRef

View File

@ -11,22 +11,19 @@
<div class="block-documentation">
<div class="columns">
<a class="link-block" href="https://docs.joinpeertube.org/maintain/tools" target="_blank" rel="noopener noreferrer">
<a i18n class="link-title" href="https://docs.joinpeertube.org/maintain/tools" target="_blank" rel="noopener noreferrer">CLI
documentation</a>
<a i18n class="link-title" href="https://docs.joinpeertube.org/maintain/tools" target="_blank" rel="noopener noreferrer">CLI documentation</a>
<div i18n>Upload or import videos, parse logs, prune storage directories, reset user password...</div>
</a>
<a class="link-block" href="https://docs.joinpeertube.org/admin/following-instances" target="_blank" rel="noopener noreferrer">
<a i18n class="link-title" href="https://docs.joinpeertube.org/admin/following-instances" target="_blank" rel="noopener noreferrer">Administer
documentation</a>
<a i18n class="link-title" href="https://docs.joinpeertube.org/admin/following-instances" target="_blank" rel="noopener noreferrer">Administer documentation</a>
<div i18n>Managing users, following other instances, dealing with spammers...</div>
</a>
<a class="link-block" href="https://docs.joinpeertube.org/use/setup-account" target="_blank" rel="noopener noreferrer">
<a i18n class="link-title" href="https://docs.joinpeertube.org/use/setup-account" target="_blank" rel="noopener noreferrer">Use
documentation</a>
<a i18n class="link-title" href="https://docs.joinpeertube.org/use/setup-account" target="_blank" rel="noopener noreferrer">Use documentation</a>
<div i18n>Setup your account, managing video playlists, discover third-party applications...</div>
</a>
@ -41,10 +38,12 @@
<div i18n class="subtitle">Useful links</div>
<ul>
<li i18n>Official PeerTube website (news, support, contribute...): <a href="https://joinpeertube.org" target="_blank"
rel="noopener noreferrer">https://joinpeertube.org</a></li>
<li i18n>
Official PeerTube website (news, support, contribute...): <a href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">https://joinpeertube.org</a>
</li>
<li i18n>Put your instance on the public PeerTube index: <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a>
<li i18n>
Put your instance on the public PeerTube index: <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a>
</li>
</ul>
</div>

View File

@ -1,5 +1,6 @@
import { Component, ElementRef, ViewChild } from '@angular/core'
import { Notifier, User, UserService } from '@app/core'
import { SharedGlobalIconModule } from '@app/shared/shared-icons'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { logger } from '@root-helpers/logger'
import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
@ -7,7 +8,9 @@ import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
@Component({
selector: 'my-admin-welcome-modal',
templateUrl: './admin-welcome-modal.component.html',
styleUrls: [ './admin-welcome-modal.component.scss' ]
styleUrls: [ './admin-welcome-modal.component.scss' ],
standalone: true,
imports: [ SharedGlobalIconModule ]
})
export class AdminWelcomeModalComponent {
@ViewChild('modal', { static: true }) modal: ElementRef

View File

@ -1,6 +1,8 @@
import { Location } from '@angular/common'
import { CommonModule, Location } from '@angular/common'
import { Component, ElementRef, ViewChild } from '@angular/core'
import { Notifier, User, UserService } from '@app/core'
import { SharedFormModule } from '@app/shared/shared-forms'
import { SharedGlobalIconModule } from '@app/shared/shared-icons'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { About, ServerConfig } from '@peertube/peertube-models'
import { logger } from '@root-helpers/logger'
@ -9,7 +11,9 @@ import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
@Component({
selector: 'my-instance-config-warning-modal',
templateUrl: './instance-config-warning-modal.component.html',
styleUrls: [ './instance-config-warning-modal.component.scss' ]
styleUrls: [ './instance-config-warning-modal.component.scss' ],
standalone: true,
imports: [ CommonModule, SharedGlobalIconModule, SharedFormModule ]
})
export class InstanceConfigWarningModalComponent {
@ViewChild('modal', { static: true }) modal: ElementRef

View File

@ -46,7 +46,7 @@ import {
} from './misc'
import { PluginPlaceholderComponent, PluginSelectorDirective } from './plugins'
import { ActorRedirectGuard } from './router'
import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
import { UserHistoryService, UserNotificationService, UserQuotaComponent } from './users'
import {
EmbedComponent,
RedundancyService,
@ -120,7 +120,6 @@ import { VideoChannelService } from './video-channel'
SimpleSearchInputComponent,
UserQuotaComponent,
UserNotificationsComponent,
SignupLabelComponent,
@ -184,7 +183,6 @@ import { VideoChannelService } from './video-channel'
SimpleSearchInputComponent,
UserQuotaComponent,
UserNotificationsComponent,
SignupLabelComponent,

View File

@ -1,5 +1,4 @@
export * from './user-history.service'
export * from './user-notification.model'
export * from './user-notification.service'
export * from './user-notifications.component'
export * from './user-quota.component'

View File

@ -2,13 +2,16 @@ import { Subject } from 'rxjs'
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
import { ComponentPagination, hasMoreItems, Notifier } from '@app/core'
import { AbuseState } from '@peertube/peertube-models'
import { UserNotification } from './user-notification.model'
import { UserNotificationService } from './user-notification.service'
import { SharedMainModule, UserNotification, UserNotificationService } from '../shared-main'
import { CommonModule } from '@angular/common'
import { SharedGlobalIconModule } from '../shared-icons'
@Component({
selector: 'my-user-notifications',
templateUrl: 'user-notifications.component.html',
styleUrls: [ 'user-notifications.component.scss' ]
styleUrls: [ 'user-notifications.component.scss' ],
standalone: true,
imports: [ CommonModule, SharedMainModule, SharedGlobalIconModule ]
})
export class UserNotificationsComponent implements OnInit {
@Input() ignoreLoadingBar = false