My account menu -> open entries on hover
This commit is contained in:
Chocobozzz
parent
a1b2f87613
commit
ddb83e49ec
|
|
@ -1,40 +1,5 @@
|
|||
<div class="row">
|
||||
<div class="sub-menu">
|
||||
<a i18n routerLink="/my-account/settings" routerLinkActive="active" class="title-page">My settings</a>
|
||||
|
||||
<div ngbDropdown class="my-library">
|
||||
<span role="button" class="title-page" [ngClass]="{ active: libraryLabel !== '' }" ngbDropdownToggle>
|
||||
<ng-container i18n>My library</ng-container>
|
||||
<ng-container *ngIf="libraryLabel"> - {{ libraryLabel }}</ng-container>
|
||||
</span>
|
||||
|
||||
<div ngbDropdownMenu>
|
||||
<a class="dropdown-item" i18n routerLink="/my-account/video-channels">My channels</a>
|
||||
|
||||
<a class="dropdown-item" i18n routerLink="/my-account/videos">My videos</a>
|
||||
|
||||
<a class="dropdown-item" i18n routerLink="/my-account/subscriptions">My subscriptions</a>
|
||||
|
||||
<a class="dropdown-item" *ngIf="isVideoImportEnabled()" i18n routerLink="/my-account/video-imports">My imports</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ngbDropdown class="misc">
|
||||
<span role="button" class="title-page" [ngClass]="{ active: miscLabel !== '' }" ngbDropdownToggle>
|
||||
<ng-container i18n>Misc</ng-container>
|
||||
<ng-container *ngIf="miscLabel"> - {{ miscLabel }}</ng-container>
|
||||
</span>
|
||||
|
||||
<div ngbDropdownMenu>
|
||||
<a class="dropdown-item" i18n routerLink="/my-account/blocklist/accounts">Muted accounts</a>
|
||||
|
||||
<a class="dropdown-item" i18n routerLink="/my-account/blocklist/servers">Muted instances</a>
|
||||
|
||||
<a class="dropdown-item" i18n routerLink="/my-account/ownership">Ownership changes</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
|
||||
|
||||
<div class="margin-content">
|
||||
<router-outlet></router-outlet>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,3 @@
|
|||
.my-library, .misc {
|
||||
span[role=button] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/deep/ .dropdown-toggle::after {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
|
@ -1,38 +1,72 @@
|
|||
import { Component, OnDestroy, OnInit } from '@angular/core'
|
||||
import { Component } from '@angular/core'
|
||||
import { ServerService } from '@app/core'
|
||||
import { NavigationStart, Router } from '@angular/router'
|
||||
import { filter } from 'rxjs/operators'
|
||||
import { I18n } from '@ngx-translate/i18n-polyfill'
|
||||
import { Subscription } from 'rxjs'
|
||||
import { TopMenuDropdownParam } from '@app/shared/menu/top-menu-dropdown.component'
|
||||
|
||||
@Component({
|
||||
selector: 'my-my-account',
|
||||
templateUrl: './my-account.component.html',
|
||||
styleUrls: [ './my-account.component.scss' ]
|
||||
})
|
||||
export class MyAccountComponent implements OnInit, OnDestroy {
|
||||
|
||||
libraryLabel = ''
|
||||
miscLabel = ''
|
||||
|
||||
private routeSub: Subscription
|
||||
export class MyAccountComponent {
|
||||
menuEntries: TopMenuDropdownParam[] = []
|
||||
|
||||
constructor (
|
||||
private serverService: ServerService,
|
||||
private router: Router,
|
||||
private i18n: I18n
|
||||
) {}
|
||||
) {
|
||||
|
||||
ngOnInit () {
|
||||
this.updateLabels(this.router.url)
|
||||
const libraryEntries: TopMenuDropdownParam = {
|
||||
label: this.i18n('My library'),
|
||||
children: [
|
||||
{
|
||||
label: this.i18n('My channels'),
|
||||
routerLink: '/my-account/videos'
|
||||
},
|
||||
{
|
||||
label: this.i18n('My videos'),
|
||||
routerLink: '/my-account/videos'
|
||||
},
|
||||
{
|
||||
label: this.i18n('My subscriptions'),
|
||||
routerLink: '/my-account/subscriptions'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
this.routeSub = this.router.events
|
||||
.pipe(filter(event => event instanceof NavigationStart))
|
||||
.subscribe((event: NavigationStart) => this.updateLabels(event.url))
|
||||
}
|
||||
if (this.isVideoImportEnabled()) {
|
||||
libraryEntries.children.push({
|
||||
label: 'My imports',
|
||||
routerLink: '/my-account/video-imports'
|
||||
})
|
||||
}
|
||||
|
||||
ngOnDestroy () {
|
||||
if (this.routeSub) this.routeSub.unsubscribe()
|
||||
const miscEntries: TopMenuDropdownParam = {
|
||||
label: this.i18n('Misc'),
|
||||
children: [
|
||||
{
|
||||
label: this.i18n('Muted accounts'),
|
||||
routerLink: '/my-account/blocklist/accounts'
|
||||
},
|
||||
{
|
||||
label: this.i18n('Muted instances'),
|
||||
routerLink: '/my-account/blocklist/servers'
|
||||
},
|
||||
{
|
||||
label: this.i18n('Ownership changes'),
|
||||
routerLink: '/my-account/ownership'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
this.menuEntries = [
|
||||
{
|
||||
label: this.i18n('My settings'),
|
||||
routerLink: '/my-account/settings'
|
||||
},
|
||||
libraryEntries,
|
||||
miscEntries
|
||||
]
|
||||
}
|
||||
|
||||
isVideoImportEnabled () {
|
||||
|
|
@ -41,27 +75,4 @@ export class MyAccountComponent implements OnInit, OnDestroy {
|
|||
return importConfig.http.enabled || importConfig.torrent.enabled
|
||||
}
|
||||
|
||||
private updateLabels (url: string) {
|
||||
const [ path ] = url.split('?')
|
||||
|
||||
if (path.startsWith('/my-account/video-channels')) {
|
||||
this.libraryLabel = this.i18n('Channels')
|
||||
} else if (path.startsWith('/my-account/videos')) {
|
||||
this.libraryLabel = this.i18n('Videos')
|
||||
} else if (path.startsWith('/my-account/subscriptions')) {
|
||||
this.libraryLabel = this.i18n('Subscriptions')
|
||||
} else if (path.startsWith('/my-account/video-imports')) {
|
||||
this.libraryLabel = this.i18n('Video imports')
|
||||
} else {
|
||||
this.libraryLabel = ''
|
||||
}
|
||||
|
||||
if (path.startsWith('/my-account/blocklist/accounts')) {
|
||||
this.miscLabel = this.i18n('Muted accounts')
|
||||
} else if (path.startsWith('/my-account/blocklist/servers')) {
|
||||
this.miscLabel = this.i18n('Muted instances')
|
||||
} else {
|
||||
this.miscLabel = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<div class="sub-menu">
|
||||
<ng-container *ngFor="let menuEntry of menuEntries">
|
||||
|
||||
<a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page">{{ menuEntry.label }}</a>
|
||||
|
||||
<div *ngIf="!menuEntry.routerLink" ngbDropdown class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
|
||||
<span (mouseenter)="openDropdownOnHover(dropdown)" role="button" class="title-page" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownToggle>
|
||||
<ng-container i18n>{{ menuEntry.label }}</ng-container>
|
||||
<ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>
|
||||
</span>
|
||||
|
||||
<div ngbDropdownMenu>
|
||||
<a *ngFor="let menuChild of menuEntry.children" class="dropdown-item" [routerLink]="menuChild.routerLink">{{ menuChild.label }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
.parent-entry {
|
||||
span[role=button] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .dropdown-toggle::after {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import { Component, Input, OnDestroy, OnInit } from '@angular/core'
|
||||
import { filter, take } from 'rxjs/operators'
|
||||
import { NavigationStart, Router } from '@angular/router'
|
||||
import { Subscription } from 'rxjs'
|
||||
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
|
||||
import { drop } from 'lodash-es'
|
||||
|
||||
export type TopMenuDropdownParam = {
|
||||
label: string
|
||||
routerLink?: string
|
||||
|
||||
children?: {
|
||||
label: string
|
||||
routerLink: string
|
||||
}[]
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'my-top-menu-dropdown',
|
||||
templateUrl: './top-menu-dropdown.component.html',
|
||||
styleUrls: [ './top-menu-dropdown.component.scss' ]
|
||||
})
|
||||
export class TopMenuDropdownComponent implements OnInit, OnDestroy {
|
||||
@Input() menuEntries: TopMenuDropdownParam[] = []
|
||||
|
||||
suffixLabels: { [ parentLabel: string ]: string }
|
||||
|
||||
private openedOnHover = false
|
||||
private routeSub: Subscription
|
||||
|
||||
constructor (private router: Router) {}
|
||||
|
||||
ngOnInit () {
|
||||
this.updateChildLabels(window.location.pathname)
|
||||
|
||||
this.routeSub = this.router.events
|
||||
.pipe(filter(event => event instanceof NavigationStart))
|
||||
.subscribe(() => this.updateChildLabels(window.location.pathname))
|
||||
}
|
||||
|
||||
ngOnDestroy () {
|
||||
if (this.routeSub) this.routeSub.unsubscribe()
|
||||
}
|
||||
|
||||
openDropdownOnHover (dropdown: NgbDropdown) {
|
||||
this.openedOnHover = true
|
||||
dropdown.open()
|
||||
|
||||
// Menu was closed
|
||||
dropdown.openChange
|
||||
.pipe(take(1))
|
||||
.subscribe(e => this.openedOnHover = false)
|
||||
}
|
||||
|
||||
closeDropdownIfHovered (dropdown: NgbDropdown) {
|
||||
if (this.openedOnHover === false) return
|
||||
|
||||
dropdown.close()
|
||||
this.openedOnHover = false
|
||||
}
|
||||
|
||||
private updateChildLabels (path: string) {
|
||||
this.suffixLabels = {}
|
||||
|
||||
for (const entry of this.menuEntries) {
|
||||
if (!entry.children) continue
|
||||
|
||||
for (const child of entry.children) {
|
||||
if (path.startsWith(child.routerLink)) {
|
||||
this.suffixLabels[entry.label] = child.label
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -61,6 +61,7 @@ import { OverviewService } from '@app/shared/overview'
|
|||
import { UserBanModalComponent } from '@app/shared/moderation'
|
||||
import { UserModerationDropdownComponent } from '@app/shared/moderation/user-moderation-dropdown.component'
|
||||
import { BlocklistService } from '@app/shared/blocklist'
|
||||
import { TopMenuDropdownComponent } from '@app/shared/menu/top-menu-dropdown.component'
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -102,7 +103,8 @@ import { BlocklistService } from '@app/shared/blocklist'
|
|||
RemoteSubscribeComponent,
|
||||
InstanceFeaturesTableComponent,
|
||||
UserBanModalComponent,
|
||||
UserModerationDropdownComponent
|
||||
UserModerationDropdownComponent,
|
||||
TopMenuDropdownComponent
|
||||
],
|
||||
|
||||
exports: [
|
||||
|
|
@ -141,6 +143,7 @@ import { BlocklistService } from '@app/shared/blocklist'
|
|||
InstanceFeaturesTableComponent,
|
||||
UserBanModalComponent,
|
||||
UserModerationDropdownComponent,
|
||||
TopMenuDropdownComponent,
|
||||
|
||||
NumberFormatterPipe,
|
||||
ObjectLengthPipe,
|
||||
|
|
|
|||
Loading…
Reference in New Issue