self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-23 01:27:14 +02:00
Code Issues Releases Activity

refactoring navigation bar #587

Browse Source
This commit is contained in:
Patrik J. Braun 2023-03-02 00:01:07 +01:00
parent 64acc27727
commit c1c50c74c1
3 changed files with 8 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/frontend/app/ui/frame/frame.component.html
View File

@ -7,7 +7,7 @@
<strong class="d-none d-lg-inline-block">{{title}}</strong> <strong class="d-none d-lg-inline-block">{{title}}</strong>
</a> </a>
<div class="collapse navbar-collapse text-center" id="navbarCollapse" [collapse]="collapsed"> <div class="collapse navbar-collapse text-center" id="navbarCollapse" [collapse]="collapsed">
<ul class="navbar-nav mb-0 me-2 text-lg-start d-none d-md-flex"> <ul class="navbar-nav mb-0 me-4 text-lg-start d-none d-md-flex">
<ng-container *ngFor="let link of navbarLinks"> <ng-container *ngFor="let link of navbarLinks">
<li class="nav-item" *ngIf="link.type === NavigationLinkTypes.albums && isAlbumsAvailable()"> <li class="nav-item" *ngIf="link.type === NavigationLinkTypes.albums && isAlbumsAvailable()">
<a class="nav-link" [routerLink]="['/albums']" [class.active]="isLinkActive('/albums')" i18n>Albums</a> <a class="nav-link" [routerLink]="['/albums']" [class.active]="isLinkActive('/albums')" i18n>Albums</a>
@ -33,23 +33,12 @@
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="flex-grow-1"></li> <li class="flex-grow-1"></li>
<ng-content select="[navbar]"></ng-content> <ng-content select="[navbar]"></ng-content>
<li class="nav-item w-100" *ngIf="showSearch">
<app-gallery-search></app-gallery-search>
</li>
<li class="nav-item" *ngIf="showShare">
<app-gallery-share></app-gallery-share>
</li>
<li class="nav-item divider-vertical d-xl-block d-none"
*ngIf="authenticationRequired && user.value && showShare">
</li>
<ng-container *ngIf="authenticationRequired && user.value"> <ng-container *ngIf="authenticationRequired && user.value">
<li class="nav-item me-2 ms-2 navbar-text d-xl-block d-none"> <li class="nav-item me-2 ms-2 navbar-text d-xl-block d-none">
<span style="white-space: nowrap;"> <span style="white-space: nowrap;">
<span class="oi oi-person"></span> {{user.value.name}} <span class="oi oi-person"></span> {{user.value.name}}
</span> </span>
</li> </li>
<li class="nav-item divider-vertical d-xl-block d-none">
</li>
</ng-container> </ng-container>
<li class="nav-item d-xl-block d-none"> <li class="nav-item d-xl-block d-none">
<span> <span>

2
src/frontend/app/ui/frame/frame.component.ts
View File

@ -18,8 +18,6 @@ import {Utils} from '../../../../common/Utils';
encapsulation: ViewEncapsulation.Emulated, encapsulation: ViewEncapsulation.Emulated,
}) })
export class FrameComponent { export class FrameComponent {
@Input() showSearch = false;
@Input() showShare = false;
public readonly user: BehaviorSubject<UserDTO>; public readonly user: BehaviorSubject<UserDTO>;
public readonly authenticationRequired = Config.Users.authenticationRequired; public readonly authenticationRequired = Config.Users.authenticationRequired;
public readonly title = Config.Server.applicationTitle; public readonly title = Config.Server.applicationTitle;

8
src/frontend/app/ui/gallery/gallery.component.html
View File

@ -1,5 +1,5 @@
<app-gallery-lightbox #lightbox></app-gallery-lightbox> <app-gallery-lightbox #lightbox></app-gallery-lightbox>
<app-frame [showSearch]="showSearchBar" [showShare]="showShare"> <app-frame>
<ng-container navbar> <ng-container navbar>
<li class="nav-item navbar-text" *ngIf="countDown"> <li class="nav-item navbar-text" *ngIf="countDown">
@ -12,6 +12,12 @@
:{{("0" + countDown.second).slice(-2)}} :{{("0" + countDown.second).slice(-2)}}
</span> </span>
</li> </li>
<li class="nav-item w-100" *ngIf="showSearchBar">
<app-gallery-search></app-gallery-search>
</li>
<li class="nav-item" *ngIf="showShare">
<app-gallery-share></app-gallery-share>
</li>
</ng-container> </ng-container>
<ng-container navbar-menu> <ng-container navbar-menu>