Search menu icone and view set up

deploy.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
-export DN="http://app.happy-dev.fr"
+export DN="https://app.happy-dev.fr"
-export SDN="http://hd-ldp.happy-dev.fr"
+export SDN="https://hd-ldp.happy-dev.fr"
 php index.php > index.html
 grunt 
 ssh hd-app@ssh-hd-app.alwaysdata.net "rm -R hd-app; mkdir hd-app; cd hd-app; mkdir -p src/fonts; mkdir -p dist/css;"

index.php

@@ -33,6 +33,7 @@
       <?php require_once('src/html/project.html'); ?>
       <?php require_once('src/html/channels.html'); ?>
       <?php require_once('src/html/channel.html'); ?>
+      <?php require_once('src/html/search.html'); ?>
     </main>
 
     <!-- This is a hack : https://git.happy-dev.fr/happy-dev/xmpp-chat-component/issues/24 -->
@@ -41,7 +42,7 @@
         data-authentication="anonymous"
         data-auto-login="true"
         data-bosh-service-url="https://conversejs.org/http-bind/"
-        data-debug="true"
+        data-debug="false"
         data-jid="nomnom.im"
         data-locales-url="<?php echo $cdn; ?>/node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json",
         data-room-jid="anonymous@conference.nomnom.im">
@@ -65,7 +66,7 @@
 
             insertChatIfNeeded();
           }
-      }, 150);
+      }, 15000);
 
       // Inserts a chat in the current view if needed
       function insertChatIfNeeded() {

src/html/dependencies-dev.php

@@ -7,6 +7,7 @@
     <script type="text/javascript" src="<?php echo $dn; ?>/node_modules/jquery/dist/jquery.min.js"></script>
     <script type="text/javascript" src="<?php echo $dn; ?>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="<?php echo $dn; ?>/dist/lib/webcomponentsjs/webcomponents-loader.js"></script>
+    <script type="text/javascript" src="<?php echo $dn; ?>/src/js/hd-app.js"></script>
 
     <!-- Web components -->
     <link rel="import" href="<?php echo $dn; ?>/dist/lib/ldp-display/ldp-display.html?v=<?php echo $v ?>" />

src/html/dependencies-prod.php

@@ -8,6 +8,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js" integrity="sha256-fUVqCtpScUF69qkFkeuHmcShr2N2UleRQJhRG4etHds=" crossorigin="anonymous"></script>
+    <script type="text/javascript" src="<?php echo $dn; ?>/dist/js/hd-app.js"></script>
 
     <!-- Web components -->
     <link rel="import" href="https://cdn.happy-dev.fr/ldp-display/ldp-display.html?v=<?php echo $v ?>" />

src/html/menu.html

@@ -1,15 +1,12 @@
 <nav class="navbar bg-white fixed-top border-bottom pb-0 d-md-flex" id="navbar">
-  <!--<ldp-router>-->
-  <!--<ldp-route id="menu-title" class=" pb-2" name="dashboard">HAPPY APP</ldp-route>-->
-  <!--</ldp-router>-->
 
   <ldp-router id="navbar-router" class="navbar-nav" default-route="members">
-    <ldp-route id="menu-title" class="col-4 col-md-2 nav-item" name="dashboard">
+    <ldp-route id="menu-title" class="col-3 col-md-2 nav-item" name="dashboard">
       HAPPY DEV
     </ldp-route>
 
-    <div id="menu-items" class="col-8 col-md-10">
+    <div id="menu-items" class="col-7 col-md-10">
-      <ldp-route class="nav-item pl-4 pr-4 pb-2 active align-self-stretch text-center text-md-left" name="members">
+      <ldp-route class="nav-item pb-2 active align-self-stretch text-center text-md-left" name="members">
         <i class="fa fa-users" aria-hidden="true"></i>
         <span class="d-none d-md-inline"> Membres</span>
       </ldp-route>
@@ -17,7 +14,7 @@
         Membre
       </ldp-route>
 
-      <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch text-center text-md-left" name="projects">
+      <ldp-route class="nav-item pb-2 align-self-stretch text-center text-md-left" name="projects">
         <i class="fa fa-tasks" aria-hidden="true"></i>
         <span class="d-none d-md-inline"> Projets</span>
       </ldp-route>
@@ -25,7 +22,7 @@
         Projet
       </ldp-route>
 
-      <ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch text-center text-md-left" name="channels">
+      <ldp-route class="nav-item pb-2 align-self-stretch text-center text-md-left" name="channels">
         <i class="fa fa-comments" aria-hidden="true"></i>
         <span class="d-none d-md-inline"> Channels</span>
       </ldp-route>
@@ -33,5 +30,12 @@
         channel
       </ldp-route>
     </div>
+
+    <div class="col-2 col-md-1"></div>
   </ldp-router>
+
+  <div id="search-bar">
+    <input id="search-input" class="form-control" type="search" placeholder="ctrl + k"/>
+    <i id="search-icon" class="fa fa-search" aria-hidden="true" data-toggle="modal" data-target="#search-view"></i>
+  </div>
 </nav>

src/html/search.html

@@ -0,0 +1,7 @@
+<div class="modal fade" id="search-view" tabindex="-1" role="dialog" aria-labelledby="Search results" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      Search results here
+    </div>
+  </div>
+</div>

src/js/hd-app.js

@@ -0,0 +1,26 @@
+document.addEventListener("DOMContentLoaded", function(event) {
+  // Constants declaration
+  const navBar    = document.querySelector("#navbar");
+  const searchBar = navBar.querySelector("#search-bar");
+
+
+  // Shortcuts
+  document.querySelector("body").addEventListener("keydown", function(e) {
+    // CTRL + K triggers the search feature
+    if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) {
+      navBar.classList.remove("search-mode");
+    }
+  });
+
+
+  // Toggle the search bar via touch / click
+  searchBar.querySelector("#search-icon").addEventListener("click", function(e) {
+    navBar.classList.add("search-mode");
+    searchBar.querySelector("#search-input").focus();
+  });
+});

src/scss/_menu.scss

@@ -13,16 +13,27 @@
       color:        $hd-color;
       font-size:    $menu-font-size;
       text-align:   center;
+      padding:      0px;
     }
 
     #menu-items {
       display:              flex;
       justify-content:      space-between;
+      padding-left:         30px;
+      padding-right:        0px;
+      transition-property:  opacity;
+      transition-duration:  0.3s;
+      opacity:              1;
     }
 
     ldp-route {
       cursor:       pointer;
       font-size:    18px;
+      padding:      0px 15px;
+
+      &:hover {
+        border-bottom:  2px solid $hd-color;
+      }
     }
 
     #menu-title[active],
@@ -30,9 +41,56 @@
       border-bottom:  2px solid $hd-color;
       color:          $hd-color;
     }
+  }
 
-    ldp-route:hover {
+  #search-bar {
-      border-bottom:  2px solid $hd-color;
+    position:           absolute;
+    top:                4px;
+    right:              16px;
+    font-size:          18px;
+    text-align:         right;
+    padding-right:      0px;
+
+    input[type=search] {
+      transform:            scaleX(0);
+      transform-origin:     100%;
+      transition-property:  all;
+      transition-duration:  0.3s;
+      position:             absolute;
+      top:                  0px;
+      right:                0px;
+      display:              block;
+      box-shadow:           none;
+    }
+
+    i {
+      position:         relative;
+      z-index:          9999;
+      padding-top:      7px;
+      color:            $twitter-color;
+      padding:          10px;
+      border-radius:    0 0.25rem 0.25rem 0;
+    }
+  }
+
+  &.search-mode {
+    #navbar-router {
+      #menu-items {
+        opacity:    0;
+      }
+    }
+
+    #search-bar {
+      width: calc(100% - 125px);
+
+      input[type=search] {
+        transform: scaleX(1);
+      }
+
+      i {
+        color:                white;
+        background-color:     $twitter-color;
+      }
     }
   }
 }

src/scss/_search.scss

@@ -0,0 +1,12 @@
+.modal-dialog {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.modal-content {
+  height: auto;
+  min-height: 100%;
+  border-radius: 0;
+}

src/scss/main.scss

@@ -14,3 +14,4 @@
 @import "project";
 @import "channels";
 @import "channel";
+@import "search";