feature - members pages done for alpha-1

This commit is contained in:
Alexandre Bourlier 2018-07-08 17:19:26 +02:00
parent 3259183299
commit 49e1418e93
11 changed files with 76 additions and 77 deletions

View File

@ -28,8 +28,7 @@
<main id="mainContainer" class="container-fluid">
<?php require_once('src/html/dashboard.html'); ?>
<?php require_once('src/html/members.html'); ?>
<?php require_once('src/html/member.html'); ?>
<?php require_once('src/html/edit-profile.html'); ?>
<?php require_once('src/html/member.php'); ?>
<?php require_once('src/html/projects.html'); ?>
<?php require_once('src/html/project.html'); ?>
<?php require_once('src/html/project-creation.html'); ?>
@ -43,52 +42,53 @@
</main>
<!-- This is a hack : https://git.happy-dev.fr/happy-dev/xmpp-chat-component/issues/24 -->
<!--sib-chat
<sib-chat
id="chat-singleton"
data-src="https://djangoldp.happy-dev.fr/users/1"
data-authentication="login"
data-auto-login="true"
data-bosh-service-url="http://jabber.happy-dev.fr/http-bind/" // FIXME: make HTTPS
data-debug="false"
data-locales-url="node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json">
</sib-chat-->
</sib-chat>
<script>
// Store url on load
var currentRoute = getCurrentRoute();
var previousRoute = "";
var chatSingleton = document.querySelector("#chat-singleton");
var body = document.querySelector("body");
function getCurrentRoute() {
var pathnameSegments = window.location.pathname.split("/");
return pathnameSegments[1];
return pathnameSegments[pathnameSegments.length - 1];
}
// Listen for changes
//setInterval(function() {
//if (currentRoute != window.location.href) {
//currentRoute = getCurrentRoute();
setInterval(function() {
previousRoute = currentRoute;
currentRoute = getCurrentRoute();
//insertChatIfNeeded();
//}
//}, 250);
if (previousRoute !== currentRoute) {
insertChatIfNeeded();
}
}, 250);
// Inserts a chat in the current view if needed
function insertChatIfNeeded() {
if (["project", "project-chat", "channel", "channel-chat", "member", "member-chat"].indexOf(currentRoute) > -1) {
if (currentRoute.indexOf("chat") == -1) {
currentRoute += "-chat";
}
console.log(currentRoute);
if (["project-chat", "channel-chat", "member-chat"].indexOf(currentRoute) > -1) {
var currentView = document.querySelector("#" + currentRoute);
if (currentView.querySelector("sib-chat") == null) {
currentView.appendChild(chatSingleton);
currentView.style.display = 'block';
}
}
else {
body.appendChild(chatSingleton);
}
}
insertChatIfNeeded();
</script>
</body>
</html>

View File

@ -0,0 +1,2 @@
<div id="member-chat" style="display: none">
</div>

View File

@ -17,7 +17,7 @@
//widget-avatar="ldp-form-img-upload"
</script>
<div id="edit-profile" style="display: none">
<div id="member-edit-profile" style="display: none">
<label for="avatar-input">
<img id="avatar-preview" src="http://cdn.local/hdapp/members/alexandre-bourlier.jpg" style="width: 100%;"/>
</label>
@ -25,7 +25,7 @@
<sib-form
class="edit-form"
data-src="<?php echo $sdn; ?>/members/1/"
bind-resources
></sib-form>
</div>

View File

@ -0,0 +1,13 @@
<div id="member-profile" style="display: none">
<sib-display
id="member-info"
data-fields="avatar, user, before-pseudo, pseudo, bio, cell, number, roles, website, skills"
widget-avatar="sib-display-img"
widget-user="hdapp-userinfo"
widget-cell="hdapp-usercell"
widget-number="sib-display-tel"
widget-roles="sib-display-lookuplist"
widget-skills="sib-display-lookuplist"
bind-resources
></sib-display>
</div>

View File

@ -1,26 +0,0 @@
<div id="member" class="view-with-vertical-menu" style="display: none">
<div class="section info">
<i class="fa fa-pencil" aria-hidden="true"></i>
<i class="name fa fa-pencil" aria-hidden="true"></i>
<sib-display
id="member-info"
data-fields="avatar, user, before-pseudo, pseudo, bio, cell, number, roles, website, skills"
widget-avatar="sib-display-img"
widget-user="hdapp-userinfo"
widget-cell="hdapp-usercell"
widget-number="sib-display-tel"
widget-roles="sib-display-lookuplist"
widget-skills="sib-display-lookuplist"
bind-resources
></sib-display>
</div>
</div>
<script>
document.querySelectorAll("#member-detail .fa-pencil").forEach((el) => {
el.addEventListener("click", (e) => {
document.getElementById('navbar-router').navigate('edit-profile');
});
});
</script>

21
src/html/member.php Normal file
View File

@ -0,0 +1,21 @@
<div id="member" style="display: none">
<div class="section info">
<sib-router id="member-router" default-route="member-profile">
<sib-route name="member-chat">
<button>Chat</button>
</sib-route>
<sib-route name="member-profile">
<button>Voir</button>
</sib-route>
<sib-route name="member-edit-profile">
<button>Éditer</button>
</sib-route>
</sib-router>
<div id="member-views-container">
<?php require_once('member-chat.html'); ?>
<?php require_once('member-profile.html'); ?>
<?php require_once('member-edit-profile.html'); ?>
</div>
</div>
</div>

View File

@ -11,7 +11,6 @@
<span class="d-none d-md-inline">Membres</span>
</sib-route>
<sib-route class="d-none" name="member" id-prefix="<?php echo $sdn; ?>/members/"></sib-route>
<sib-route class="d-none" name="edit-profile" id-prefix="<?php echo $sdn; ?>/members/"></sib-route>
<sib-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>

17
src/scss/_chat.scss Normal file
View File

@ -0,0 +1,17 @@
sib-chat {
position: absolute;
top: $menu-height;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
display: none;
}
#member-chat {
sib-chat {
display: block;
top: $menu-height + 30px;
}
}

View File

@ -32,8 +32,8 @@
#member-detail {
#member-info {
ldp-display-mailto,
ldp-display-tel {
sib-display-mailto,
sib-display-tel {
display: block;
}
@ -63,18 +63,6 @@
.section {
position: relative;
i {
position: absolute;
display: block;
top: 5px;
right: 10px;
cursor: pointer;
&.name {
top: 290px;
}
}
h2 {
@extend %detail-section;
margin-top: 40px;
@ -85,7 +73,7 @@
display: flex;
flex-wrap: wrap;
ldp-display {
sib-display {
display: block;
background-color: $hd-color;
color: white;
@ -100,7 +88,7 @@
@media (min-width: $sm-with) {
#member-detail {
#member-info {
ldp-display-img {
sib-display-img {
display: block;
float: right;
width: 300px;

View File

@ -11,19 +11,3 @@ html, body, #mainContainer {
padding-top: $menu-height;
}
hd-chat-window {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
padding-top: $menu-height;
padding-right: $vertical-menu-width;
display: none;
}
.chat-wrapper {
hd-chat-window {
display: block;
}
}

View File

@ -17,3 +17,4 @@
@import "channels";
@import "channel";
@import "search";
@import "chat";