From a25afca8d4b74a8c8883819e45ed21148a1e5430 Mon Sep 17 00:00:00 2001
From: Viiciouss <anis.benziane@gmail.com>
Date: Thu, 7 Jun 2018 17:51:45 +0200
Subject: [PATCH] design edit + search bar

---
 bin/www                                       |   3 +-
 src/app/book/book.component.css               | 128 ++++++++++++++++++
 src/app/book/book.component.html              |  70 +++++-----
 src/app/main/main.component.html              |   6 +-
 .../components/completer.component.html       |   2 +-
 5 files changed, 174 insertions(+), 35 deletions(-)

diff --git a/bin/www b/bin/www
index 3b45ba2..6429499 100644
--- a/bin/www
+++ b/bin/www
@@ -34,7 +34,8 @@ var credentials = {
     cert: certificate,
     passphrase: 'titi'
 };
-var server = https.createServer(credentials, app);
+// var server = https.createServer(credentials, app);
+var server = http.createServer(app);
 
 // server.setSecure(credentials);
 
diff --git a/src/app/book/book.component.css b/src/app/book/book.component.css
index 2b17786..fb0b676 100644
--- a/src/app/book/book.component.css
+++ b/src/app/book/book.component.css
@@ -5,6 +5,12 @@
 .topButtons {
     margin-top: 2%;
 }
+
+.topButtonsRow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 .app-title {
     font-size: 24px;
 }
@@ -73,3 +79,125 @@
 .dropzone-container {
     height: 100%;
 }
+
+*::after,
+*::before {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box
+}
+html,
+body {
+    font: 100% 'Arimo', sans-serif;
+}
+.filter-wrapper,
+.keyword-wrapper {
+    display: flex;
+    justify-content: center;
+}
+.filter-wrapper {
+    min-height: 100%;
+    flex-flow: column wrap;;
+    position: relative
+}
+.keyword-wrapper {
+    width: 100%;
+    position: relative;
+}
+#keyword {
+    border: 1px solid #ccc;
+    padding: 10px;
+    font: 1.5em 'Arimo', sans-serif;
+    width: 50%;
+    outline: none;
+    transition: border 0.5s ease-in-out
+}
+#keyword:focus {
+    border-color : rgba(81, 203, 238, 1);;
+}
+#keyword-button {
+    position: absolute;
+    right: 26%;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 1.7em;
+    color: #8DB9ED
+}
+#keyword-button:hover {
+    color: #ccc
+}
+.filter-select {
+    width: 50%;
+    list-style: none;
+    font-size: 1.1em;
+    color: rgb(105, 105, 105);
+    border: 1px solid #ccc;
+    border-top: none;
+    /*so things don't jump around*/
+    position: absolute;
+    left: 25%;
+    top: calc(50% + 25px);
+    max-height: calc(50% - 15px);
+    overflow-y: auto;
+    background: #fff
+}
+.filter-select-list img {
+    margin-right: 30px;
+}
+.tags {
+    font-size: 12px;
+    font-style: italic;
+    color: #c6c6c6;
+    margin-right: 10px;
+    position: relative;
+    top: -10px;
+}
+.filter-select-list:hover .tags {
+    color: #fff;
+}
+.filter-select-list {
+    cursor: pointer;
+    padding: 5px 10px;
+}
+.artist-name {
+    display: inline-block;
+    position: absolute;
+}
+.filter-select-list:hover {
+    background:  #C0C0C0;
+    color: #fff
+}
+.list-highlight,
+.list-highlight:hover {
+    background: rgb(55, 55, 55);
+    color: #fff
+}
+@media only screen and (max-width: 768px) {
+    .filter-select,
+    #keyword {
+        width: 80%;
+    }
+    #keyword {
+        font-size: 1.3em
+    }
+    .filter-select {
+        font-size: 0.9em;
+        left: 10%;
+        top: calc(50% + 23px);
+    }
+    #keyword-button {
+        right: 11%
+    }
+}
+@media only screen and (max-width: 480px) {
+    .filter-select,
+    #keyword {
+        width: 95%;
+    }
+    .filter-select {
+        left: 2.5%;
+    }
+    #keyword-button {
+        right: 3.5%
+    }
+}
diff --git a/src/app/book/book.component.html b/src/app/book/book.component.html
index 4744e9d..20a2083 100644
--- a/src/app/book/book.component.html
+++ b/src/app/book/book.component.html
@@ -1,18 +1,3 @@
-<div class="md-form">
-    <i class="fa fa-user prefix grey-text"></i>
-    <input
-            #query
-            (keyup)="filter(query.value)"
-            type="text" class="form-control" placeholder="Cherchez...">
-    <div *ngFor="let folder of filterAllUserFolder">
-        <a (click)="openFolder(folder.path)">{{folder.name}}</a>
-        <p>
-            {{folder?.path}}
-        </p>
-    </div>
-</div>
-
-
 <div class="box-container align-middle" fxLayout="column" [ngStyle.lt-sm]="'min-height: 400;'">
     <dropzone *ngIf="type === 'component'" class="dropzone-container" [config]="config" [disabled]="disabled" fxLayout="row" fxLayoutAlign="start strech" fxFlex="auto" [message]="'Click or drag file here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>
 </div>
@@ -32,28 +17,51 @@
     </div>
 
     <div class="topButtons">
-        <button type="button" class="btn  btn-primary btn-sm" mdbTooltip="Back To : {{mainFolder.parent}}" placement="top" (click)="backToParentFolder()" *ngIf="mainFolder.path !== 'Home'"><i class="fa fa-chevron-left" aria-hidden="true"></i> {{mainFolder.parent}}</button>
+        <div class="row topButtonsRow">
+            <div class="col-md-8 align-middle l-flex--center">
+                <button type="button" class="btn  btn-primary btn-sm" mdbTooltip="Back To : {{mainFolder.parent}}" placement="top" (click)="backToParentFolder()" *ngIf="mainFolder.path !== 'Home'"><i class="fa fa-chevron-left" aria-hidden="true"></i> {{mainFolder.parent}}</button>
 
-        <button type="button" class="btn btn-primary btn-sm" mdbTooltip="Nouveau dossier" placement="top" (click)="createBool()" *ngIf="isClickCreateFolder === false">
-            <i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-folder-o" aria-hidden="true"></i></i>
-        </button>
+                <button type="button" class="btn btn-primary btn-sm" mdbTooltip="Nouveau dossier" placement="top" (click)="createBool()" *ngIf="isClickCreateFolder === false">
+                    <i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-folder-o" aria-hidden="true"></i></i>
+                </button>
 
 
 
-        <div class="md-form input-group" *ngIf="isClickCreateFolder === true">
-            <div class="input-group-btn">
-                <button class="btn btn-primary btn-sm waves-light" mdbTooltip="Créer : {{inputCreateFolder}}" placement="top" type="button" mdbWavesEffect (click)="createFolder()">Créer</button>
-            </div>
-            <input type="search" class="form-control" placeholder="Nom du nouveau dossier..." [(ngModel)]="inputCreateFolder">
-        </div>
+                <div class="md-form input-group" *ngIf="isClickCreateFolder === true">
+                    <div class="input-group-btn">
+                        <button class="btn btn-primary btn-sm waves-light" mdbTooltip="Créer : {{inputCreateFolder}}" placement="top" type="button" mdbWavesEffect (click)="createFolder()">Créer</button>
+                    </div>
+                    <input type="search" class="form-control" placeholder="Nom du nouveau dossier..." [(ngModel)]="inputCreateFolder">
+                </div>
+
 
+                <label class="btn btn-secondary btn-sm" mdbTooltip="Choose a file" placement="top" >
+                    <i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-file-o" aria-hidden="true"></i></i>
+                    <input type="file" style="display: none;" #myPicture name="myPicture" (change)="fileChangeEvent($event)">
+                </label>
+                <button type="button" class="btn btn-default btn-sm" mdbTooltip="Add File : {{fileChooseName}}" placement="top" (click)="upload()" >Ajouter le fichier {{fileChooseName}}</button>
+                <label *ngIf="fileChooseName !== ''"> Vous avez choisi : {{fileChooseName}}</label>
+            </div>
 
-        <label class="btn btn-secondary btn-sm" mdbTooltip="Choose a file" placement="top" >
-            <i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-file-o" aria-hidden="true"></i></i>
-            <input type="file" style="display: none;" #myPicture name="myPicture" (change)="fileChangeEvent($event)">
-        </label>
-        <button type="button" class="btn btn-default btn-sm" mdbTooltip="Add File : {{fileChooseName}}" placement="top" (click)="upload()" >Ajouter le fichier {{fileChooseName}}</button>
-        <label *ngIf="fileChooseName !== ''"> Vous avez choisi : {{fileChooseName}}</label>
+            <div class="col-md-4 align-middle l-flex--center">
+                <!--<form class="md-form active-pink active-pink-2 mb-3">-->
+                    <!--<div class="row">-->
+                        <!--<i class="fa fa-search" aria-hidden="true"></i>-->
+                        <!--<input #query (keyup)="filter(query.value)" type="text" class="form-control form-control-sm ml-3 w-75" placeholder="Search File" aria-label="Search">-->
+                        <!--<div class="list-group" *ngFor="let folder of filterAllUserFolder">-->
+                            <!--<a class="list-group-item list-group-item-action waves-light" (click)="openFolder(folder.path)" mdbWavesEffect>-->
+                                <!--{{folder.name}}-->
+                                <!--<br>-->
+                                <!--{{folder?.path}}-->
+                            <!--</a>-->
+                        <!--</div>-->
+                    <!--</div>-->
+                <!--</form>-->
+                    <mdb-completer [label]="'  Search for a file or a folder'" name="autocomplete" initialValue="'Select color'" [(ngModel)]="searchStr" [datasource]="filterAllUserFolder"
+                                   [minSearchLength]="0">
+                    </mdb-completer>
+            </div>
+        </div>
     </div>
 
 
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index d220acb..e6e7c81 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -10,7 +10,7 @@
     <logo>
       <!-- Logo -->
       <li>
-        <div class="logo-wrapper waves-light">
+        <div class="logo-wrapper flex-center waves-light" style="padding-bottom: 5%">
           <a href="#"><img style="height: 90px; margin-left: 13%;"src="https://openclipart.org/image/2400px/svg_to_png/190248/slogonormal.png" class="img-fluid flex-center"></a>
         </div>
       </li>
@@ -39,7 +39,9 @@
       <!--/.Search Form-->
       <!-- Side navigation links -->
       <li>
-        <button class="btn peach-gradient btn-sm btn-rounded waves-light" mdbWavesEffect (click)="getAllUserAppFolder()"><i class="fa fa-refresh" aria-hidden="true"></i></button>
+        <div class="container-fluid flex-center" style="padding-top: 5%">
+          <button class="btn-primary btn-sm btn-rounded right-aligned waves-light" mdbWavesEffect (click)="getAllUserAppFolder()"><i class="fa fa-refresh" aria-hidden="true"></i></button>
+        </div>
         <!--<a class="btn-floating btn-sm blue-gradient waves-light" mdbWavesEffect (click)="getAllUserAppFolder()"><i class="fa fa-refresh" aria-hidden="true"></i></a>-->
         <ul class="collapsible collapsible-accordion">
 
diff --git a/src/app/typescripts/pro/autocomplete/components/completer.component.html b/src/app/typescripts/pro/autocomplete/components/completer.component.html
index e8d00e8..1a3676d 100644
--- a/src/app/typescripts/pro/autocomplete/components/completer.component.html
+++ b/src/app/typescripts/pro/autocomplete/components/completer.component.html
@@ -1,4 +1,4 @@
-<div class="completer-holder md-form" mdbCompleter>
+<div class="completer-holder md-form" style="margin-top: 0" mdbCompleter>
   
   <input #mdbInput [attr.id]="inputId.length > 0 ? inputId : null" type="search" class="completer-input form-control mdb-autocomplete" mdbInput [ngClass]="inputClass" 
     [(ngModel)]="searchStr" (ngModelChange)="onChange($event)" [attr.name]="inputName" [placeholder]="placeholder"