autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Search menu icone and view set up

Browse Source
This commit is contained in:
Alexandre Bourlier 2018-05-13 05:06:10 +02:00
parent e6e7f29ee3
commit 1837282ca8
10 changed files with 127 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
deploy.sh
View File

@ -1,6 +1,6 @@
#!/bin/bash
export DN="http://app.happy-dev.fr"
export SDN="http://hd-ldp.happy-dev.fr"
export DN="https://app.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;"

5
index.php
View File

@ -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() {

1
src/html/dependencies-dev.php
View File

@ -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 ?>" />

1
src/html/dependencies-prod.php
View File

@ -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 ?>" />

20
src/html/menu.html
View File

@ -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">
<ldp-route class="nav-item pl-4 pr-4 pb-2 active align-self-stretch text-center text-md-left" name="members">
<div id="menu-items" class="col-7 col-md-10">
<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>

7
src/html/search.html Normal file
View File

@ -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>

26
src/js/hd-app.js Normal file
View File

@ -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();
});
});

62
src/scss/_menu.scss
View File

@ -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 {
border-bottom: 2px solid $hd-color;
#search-bar {
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;
}
}
}
}

12
src/scss/_search.scss Normal file
View File

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

1
src/scss/main.scss
View File

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