1
0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00

improving frame

This commit is contained in:
Patrik J. Braun 2020-01-09 20:22:42 +01:00
parent ac9b67e544
commit e1a7fda3ea
6 changed files with 18 additions and 28 deletions

View File

@ -22,7 +22,7 @@ export class AuthenticationService {
constructor(private _userService: UserService, constructor(private _userService: UserService,
private _networkService: NetworkService, private _networkService: NetworkService,
private shareService: ShareService) { private shareService: ShareService) {
this.user = new BehaviorSubject(JSON.parse(localStorage.getItem('currentUser'))); this.user = new BehaviorSubject(null);
// picking up session.. // picking up session..
if (this.isAuthenticated() === false && Cookie.get(CookieNames.session) != null) { if (this.isAuthenticated() === false && Cookie.get(CookieNames.session) != null) {
@ -52,11 +52,6 @@ export class AuthenticationService {
window.setTimeout(() => { window.setTimeout(() => {
this.user.subscribe((u) => { this.user.subscribe((u) => {
this.shareService.onNewUser(u); this.shareService.onNewUser(u);
if (u !== null) {
localStorage.setItem('currentUser', JSON.stringify(u));
} else {
localStorage.removeItem('currentUser');
}
}); });
}, 0); }, 0);
} }

View File

@ -70,16 +70,16 @@ app-language {
} }
a.dropdown-item { a.dropdown-item, button.dropdown-item {
padding: 0.3rem 1.0rem 0.3rem 0.8rem; padding: 0.3rem 1.0rem 0.3rem 0.8rem;
} }
a.dropdown-item span { a.dropdown-item span, button.dropdown-item span {
padding-right: 0.8rem; padding-right: 0.8rem;
} }
a.dropdown-item span.badge { a.dropdown-item span.badge, button.dropdown-item span.badge {
padding: 0.25em 0.4em 0.25rem 0; padding: 0.25em 0.4em 0.25rem 0;
margin-left: -0.8rem; margin-left: -0.8rem;
} }

View File

@ -1,4 +1,4 @@
<ng2-slim-loading-bar [color]="'#337ab7'" [height]="'3px'"></ng2-slim-loading-bar> <ng2-slim-loading-bar color="#337ab7" height="3px"></ng2-slim-loading-bar>
<nav class="navbar navbar-dark bg-dark navbar-expand-md"> <nav class="navbar navbar-dark bg-dark navbar-expand-md">
<a class="navbar-brand" [routerLink]="['/gallery','/']" <a class="navbar-brand" [routerLink]="['/gallery','/']"
[queryParams]="queryService.getParams()"> [queryParams]="queryService.getParams()">
@ -6,7 +6,7 @@
<strong>{{title}}</strong> <strong>{{title}}</strong>
</a> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation" (click)="toggleState()"> aria-expanded="false" aria-label="Toggle navigation" (click)="collapsed = !collapsed">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
@ -32,7 +32,7 @@
<li class="nav-item ml-2"> <li class="nav-item ml-2">
<app-language class="navbar-btn" isDark="true"></app-language> <app-language class="navbar-btn" isDark="true"></app-language>
</li> </li>
<div class="btn-group" dropdown placement="bottom" <div class="btn-group" dropdown placement="bottom"
*ngIf="isAdmin() || authenticationRequired"> *ngIf="isAdmin() || authenticationRequired">
<button id="button-alignment" dropdownToggle <button id="button-alignment" dropdownToggle
type="button" class="btn btn-dark dropdown-toggle" type="button" class="btn btn-dark dropdown-toggle"
@ -46,13 +46,13 @@
role="menu" aria-labelledby="button-alignment"> role="menu" aria-labelledby="button-alignment">
<ng-content select="[navbar-menu]"></ng-content> <ng-content select="[navbar-menu]"></ng-content>
<li role="menuitem" *ngIf="isAdmin()"> <li role="menuitem" *ngIf="isAdmin()">
<a class="dropdown-item" href="#" [routerLink]="['/duplicates']"> <a class="dropdown-item" [routerLink]="['/duplicates']">
<span class="oi oi-layers"></span> <span class="oi oi-layers"></span>
<ng-container i18n>duplicates</ng-container> <ng-container i18n>duplicates</ng-container>
</a> </a>
</li> </li>
<li role="menuitem" *ngIf="isAdmin()"> <li role="menuitem" *ngIf="isAdmin()">
<a class="dropdown-item" href="#" [routerLink]="['/admin']"> <a class="dropdown-item" [routerLink]="['/admin']">
<span class="oi oi-wrench"></span> <span class="oi oi-wrench"></span>
<span *ngIf="notificationService.notifications.length>0" <span *ngIf="notificationService.notifications.length>0"
class="badge">{{notificationService.notifications.length}}</span> class="badge">{{notificationService.notifications.length}}</span>
@ -60,10 +60,10 @@
</a> </a>
</li> </li>
<li role="menuitem" *ngIf="authenticationRequired"> <li role="menuitem" *ngIf="authenticationRequired">
<a class="dropdown-item" (click)="logout()"> <button class="dropdown-item btn btn-link" (click)="logout()">
<span class="oi oi-account-logout"></span> <span class="oi oi-account-logout"></span>
<ng-container i18n>Logout</ng-container> <ng-container i18n>Logout</ng-container>
</a> </button>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -17,8 +17,8 @@ import {QueryService} from '../../model/query.service';
export class FrameComponent { export class FrameComponent {
user: BehaviorSubject<UserDTO>; user: BehaviorSubject<UserDTO>;
authenticationRequired = false; public readonly authenticationRequired = Config.Client.authenticationRequired;
public title: string; public readonly title = Config.Client.applicationTitle;
collapsed = true; collapsed = true;
facesEnabled = Config.Client.Faces.enabled; facesEnabled = Config.Client.Faces.enabled;
@ -26,13 +26,8 @@ export class FrameComponent {
public notificationService: NotificationService, public notificationService: NotificationService,
public queryService: QueryService) { public queryService: QueryService) {
this.user = this._authService.user; this.user = this._authService.user;
this.authenticationRequired = Config.Client.authenticationRequired;
this.title = Config.Client.applicationTitle;
} }
toggleState() { // click handler
this.collapsed = !this.collapsed;
}
isAdmin() { isAdmin() {
return this.user.value && this.user.value.role >= UserRoles.Admin; return this.user.value && this.user.value.role >= UserRoles.Admin;

View File

@ -11,17 +11,17 @@
padding-bottom: 1px; padding-bottom: 1px;
} }
a.disabled { button.disabled {
/* Make the disabled links grayish*/ /* Make the disabled links grayish*/
color: gray; color: gray;
/* And disable the pointer events */ /* And disable the pointer events */
pointer-events: none; pointer-events: none;
} }
a.dropdown-item { button.dropdown-item {
padding:0.3rem 1.0rem 0.3rem 0.8rem; padding:0.3rem 1.0rem 0.3rem 0.8rem;
} }
a.dropdown-item span{ button.dropdown-item span{
padding-right: 0.8rem; padding-right: 0.8rem;
} }

View File

@ -1,7 +1,7 @@
<a class="dropdown-item {{enabled? '' : 'disabled'}}" href="#" (click)="openModal(randomModal)"> <button class="dropdown-item {{enabled? '' : 'disabled'}}" (click)="openModal(randomModal)">
<span class="oi oi-random"></span> <span class="oi oi-random"></span>
<ng-container i18n>Random link</ng-container> <ng-container i18n>Random link</ng-container>
</a> </button>
<ng-template #randomModal> <ng-template #randomModal>
<!-- sharing Modal--> <!-- sharing Modal-->