creating navbar design

backend/model/interfaces/ISearchManager.ts

@@ -4,4 +4,5 @@ export interface ISearchManager {
     autocomplete(text: string, cb: (error: any, result: Array<AutoCompleteItem>) => void): void;
     search(text: string, searchType: SearchTypes, cb: (error: any, result: SearchResultDTO) => void): void;
     instantSearch(text: string, cb: (error: any, result: SearchResultDTO) => void): void;
+  isSupported(): boolean;
 }

backend/model/interfaces/ISharingManager.ts

@@ -3,4 +3,5 @@ export interface ISharingManager {
   findOne(filter: any): Promise<SharingDTO>;
   createSharing(sharing: SharingDTO): Promise<SharingDTO>;
   updateSharing(sharing: SharingDTO): Promise<SharingDTO>;
+  isSupported(): boolean;
 }

backend/model/memory/SearchManager.ts

@@ -4,6 +4,9 @@ import {SearchResultDTO} from "../../../common/entities/SearchResult";
 
 export class SearchManager implements ISearchManager {
 
+  isSupported(): boolean {
+    return false;
+  }
 
   autocomplete(text: string, cb: (error: any, result: Array<AutoCompleteItem>) => void) {
     throw new Error("not implemented");

backend/model/memory/SharingManager.ts

@@ -3,6 +3,10 @@ import {SharingDTO} from "../../../common/entities/SharingDTO";
 
 export class SharingManager implements ISharingManager {
 
+  isSupported(): boolean {
+    return false;
+  }
+
   findOne(filter: any): Promise<SharingDTO> {
     throw new Error("not implemented");
   }

backend/model/mysql/SearchManager.ts

@@ -8,6 +8,9 @@ import {PositionMetaData} from "../../../common/entities/PhotoDTO";
 
 export class SearchManager implements ISearchManager {
 
+  isSupported(): boolean {
+    return true;
+  }
 
   autocomplete(text: string, cb: (error: any, result: Array<AutoCompleteItem>) => void) {
 

backend/model/mysql/SharingManager.ts

@@ -6,6 +6,10 @@ import {Config} from "../../../common/config/private/Config";
 
 export class SharingManager implements ISharingManager {
 
+  isSupported(): boolean {
+    return true;
+  }
+
   private async removeExpiredLink() {
     const connection = await MySQLConnection.getConnection();
     return connection

backend/model/mysql/enitites/UserEntity.ts

@@ -20,7 +20,7 @@ export class UserEntity implements UserDTO {
   @Column("int")
   role: UserRoles;
 
-  @Column("string")
+  @Column("string", {nullable: true})
   permissions: string[];
 
 }

backend/server.ts

@@ -143,6 +143,19 @@ export class Server {
         Config.Server.thumbnail.processingLibrary = ThumbnailProcessingLib.Jimp;
       }
     }
+
+    if (Config.Client.Search.searchEnabled == true &&
+      ObjectManagerRepository.getInstance().SearchManager.isSupported() == false) {
+
+      Logger.warn(LOG_TAG, "Search is not supported with these settings, switching off..");
+      Config.Client.Search.searchEnabled = false;
+    }
+    if (Config.Client.Sharing.enabled == true &&
+      ObjectManagerRepository.getInstance().SharingManager.isSupported() == false) {
+
+      Logger.warn(LOG_TAG, "Sharing is not supported with these settings, switching off..");
+      Config.Client.Sharing.enabled = false;
+    }
   }
 
 

frontend/app/app.component.ts

@@ -22,7 +22,7 @@ export class AppComponent implements OnInit {
           this._router.navigate(["gallery", ""]);
         }
       } else {
-        if (this._router.isActive('login', true)) {
+        if (!this._router.isActive('login', true)) {
           console.log("routing");
           this._router.navigate(["login"]);
         }

frontend/app/frame/frame.component.css

@@ -7,3 +7,34 @@ ng2-slim-loading-bar {
   display: block;
 }
 
+.container {
+  width: 100%;
+}
+
+.admin-link {
+  padding-bottom: 0;
+  padding-left: 0;
+  font-size: 20px;
+}
+
+.divider-vertical:first-child {
+  display: none;
+}
+
+.navbar .divider-vertical {
+  height: 30px;
+  margin: 10px 1px 10px 10px;
+  border-right: 1px solid #ffffff;
+  border-left: 1px solid #f2f2f2;
+}
+
+.navbar-inverse .divider-vertical {
+  border-right-color: #5d5d5d;
+  border-left-color: #3d3d3d;
+}
+
+@media (max-width: 767px) {
+  .navbar-collapse .nav > .divider-vertical {
+    display: none;
+  }
+}

frontend/app/frame/frame.component.html

@@ -1,32 +1,45 @@
 <nav class="navbar navbar-inverse navbar-static-top">
   <div class="container">
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
+      <button type="button" class="navbar-toggle collapsed"
-              aria-expanded="false" aria-controls="navbar">
+              data-toggle="collapse" data-target="#navbar"
+              aria-expanded="false" aria-controls="navbar"
+              (click)="toggleState()">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a class="navbar-brand" href="#"><img src="assets/icon_inv.png" style="max-height: 26px; display: inline;"/>
+      <a class="navbar-brand" [routerLink]="['/gallery','/']"><img src="assets/icon_inv.png"
+                                                                   style="max-height: 26px; display: inline;"/>
         {{title}}</a>
     </div>
-    <div id="navbar" class="collapse navbar-collapse">
+    <div id="navbar" class="collapse navbar-collapse" [ngClass]="{ 'in': isIn }">
       <ul class="nav navbar-nav">
-        <li class="active"><a [routerLink]="['/gallery','/']">Gallery</a></li>
-        <li><a [routerLink]="['/admin']">Admin</a></li>
-      </ul>
-
-      <ul class="nav navbar-nav navbar-right" *ngIf="authenticationRequired">
-        <li>
-          <p class="navbar-text" *ngIf="user.value">{{user.value.name}}</p>
-        </li>
-        <li>
-          <a style="cursor: pointer" (click)="logout()">Logout</a>
-        </li>
       </ul>
 
+      <ul class="nav navbar-nav navbar-right">
         <ng-content select="[navbar]"></ng-content>
+        <li class="divider-vertical">
+        </li>
+        <li>
+          <p class="navbar-text" *ngIf="user.value">
+            <span class="glyphicon glyphicon-user" aria-hidden="true"></span> {{user.value.name}}</p>
+        </li>
+        <li *ngIf="isAdmin()">
+          <a style="cursor: pointer"
+             class="admin-link"
+             [routerLink]="['/admin']"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
+          </a>
+        </li>
+        <li *ngIf="authenticationRequired">
+          <button class="btn btn-default navbar-btn"
+                  style="cursor: pointer"
+                  (click)="logout()">Logout <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
+          </button>
+        </li>
+      </ul>
+
 
     </div><!--/.nav-collapse -->
   </div>

frontend/app/frame/frame.component.ts

@@ -1,7 +1,7 @@
 import {Component, ViewEncapsulation} from "@angular/core";
 import {RouterLink} from "@angular/router";
 import {AuthenticationService} from "../model/network/authentication.service";
-import {UserDTO} from "../../../common/entities/UserDTO";
+import {UserDTO, UserRoles} from "../../../common/entities/UserDTO";
 import {Config} from "../../../common/config/public/Config";
 import {BehaviorSubject} from "rxjs/BehaviorSubject";
 
@@ -17,6 +17,7 @@ export class FrameComponent {
   user: BehaviorSubject<UserDTO>;
   authenticationRequired: boolean = false;
   public title: string;
+  isIn: boolean = false;
 
   constructor(private _authService: AuthenticationService) {
     this.user = this._authService.user;
@@ -24,10 +25,17 @@ export class FrameComponent {
     this.title = Config.Client.applicationTitle;
   }
 
+  toggleState() { // click handler
+    this.isIn = !this.isIn;
+  }
+
+  isAdmin() {
+    return this.user.value && this.user.value.role >= UserRoles.Admin;
+  }
+
 
   logout() {
     this._authService.logout();
   }
-
 }
 

frontend/app/gallery/gallery.component.html

@@ -1,10 +1,15 @@
 <gallery-lightbox #lightbox (onLastElement)="onLightboxLastElement()"></gallery-lightbox>
 <app-frame>
 
-  <div navbar>
+  <ng-container navbar>
-    <gallery-share *ngIf="showShare"></gallery-share>
+    <li *ngIf="showSearchBar">
-    <gallery-search #search *ngIf="showSearchBar"></gallery-search>
+      <gallery-search #search></gallery-search>
-  </div>
+    </li>
+    <li *ngIf="showShare">
+      <gallery-share></gallery-share>
+    </li>
+    -
+  </ng-container>
 
   <div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.value.directory">
     <gallery-navbar [directory]="_galleryService.content.value.directory"></gallery-navbar>

frontend/app/gallery/search/search.gallery.component.css

@@ -28,3 +28,7 @@
     border-bottom-left-radius: 0;
     border-bottom-width: 0;
 }
+
+form {
+  padding-right: 50px;
+}

frontend/app/gallery/search/search.gallery.component.html

@@ -1,4 +1,3 @@
-<div class="col-sm-3 col-md-4 pull-right">
 <form class="navbar-form" role="search" #SearchForm="ngForm">
   <div class="input-group">
     <input type="text" class="form-control" placeholder="Search" (keyup)="onSearchChange($event)"
@@ -28,4 +27,4 @@
     </div>
   </div>
 </form>
-</div>
+

frontend/app/gallery/share/share.gallery.component.css

@@ -2,3 +2,7 @@
   z-index: 9999;
 }
 
+button {
+  padding-left: 0;
+  padding-right: 0;
+}

frontend/app/gallery/share/share.gallery.component.html

@@ -1,10 +1,9 @@
-<div class="col-sm-2 col-md-2 pull-right">
 <button id="shareButton" class="btn btn-default navbar-btn btn-link" type="button"
         data-toggle="modal" data-target="#shareModal" [disabled]="!enabled" (click)="get()">
   <span class="glyphicon glyphicon-share-alt"></span>
   Share
 </button>
-</div>
+
 <!-- sharing Modal-->
 <div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModalLabel"
      data-backdrop="false"

frontend/app/model/network/user.service.ts

@@ -14,7 +14,6 @@ export class UserService {
   }
 
   public logout(): Promise<string> {
-    console.log("call logout");
     return this._networkService.postJson("/user/logout");
   }
 

frontend/index.html

@@ -13,12 +13,5 @@
 <body style="overflow-y: scroll">
 <pi-gallery2-app>Loading...</pi-gallery2-app>
 
-<script
-  src="https://code.jquery.com/jquery-2.2.3.min.js"
-  integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
-  crossorigin="anonymous"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
-        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
-        crossorigin="anonymous"></script>
 </body>
 </html>

frontend/styles.css

@@ -9,3 +9,7 @@ body {
 * {
   border-radius: 0 !important;
 }
+
+.navbar-right {
+  margin-right: 0;
+}