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

Channels list and detail pages done

Browse Source
This commit is contained in:
Alexandre Bourlier 2018-04-26 18:48:53 +02:00
parent c2399db08a
commit f6744ec9e0
10 changed files with 170 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.php
View File

@ -38,6 +38,8 @@
<?php require_once('src/html/member.html'); ?>
<?php require_once('src/html/projects.html'); ?>
<?php require_once('src/html/project.html'); ?>
<?php require_once('src/html/channels.html'); ?>
<?php require_once('src/html/channel.html'); ?>
</main>
</body>
</html>

63
src/html/channel.html Normal file
View File

@ -0,0 +1,63 @@
<script>
class LDPDisplayMember extends LDPWidget {
get template() {
return `
<div name="${this.name}">
<img src="${this.value.avatar}"/>
<span>${this.value.firstname} ${this.value.lastname}</span>
</div>
`;
}
render() {
store.get(this.value).then( (value) => {
this._value = value;
this.innerHTML = this.template;
});
}
}
customElements.define("ldp-display-member", LDPDisplayMember);
</script>
<div id="channel" class="view-with-vertical-menu" style="display: none">
<ldp-router id="channel-page-router" class="vertical-menu border-left" default-route="channel-chat">
<ldp-route name="channel-chat">
<i class="fa fa-comment-o" aria-hidden="true"></i>
</ldp-route>
<ldp-route name="channel-detail">
<i class="fa fa-user" aria-hidden="true"></i>
</ldp-route>
</ldp-router>
<hd-chat-window
id="channel-chat"
data-authentication="anonymous"
data-auto-login="true"
data-bosh-service-url="https://conversejs.org/http-bind/"
data-debug="false"
data-jid="nomnom.im"
data-locales-url="http://hd-app.local/dist/lib/xmpp-chat-component/node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json",
data-room-jid="anonymous@conference.nomnom.im">
</hd-chat-window>
<div id="channel-detail" style="display: none">
<ldp-display
id="channel-info"
data-fields="name, description, admin, owner"
value-admin="Administrateur"
widget-owner="ldp-display-member"
bind-resources
></ldp-display>
<h2 class="section skills">Participants</h2>
<ldp-display
id="chat-members"
id-suffix="members"
set-name="firstname, name-separator, lastname"
value-name-separator="&nbsp;"
data-fields="avatar, name"
widget-avatar="ldp-display-img"
bind-resources
></ldp-display>
</div>
</div>

9
src/html/channels.html Normal file
View File

@ -0,0 +1,9 @@
<div id="channels" style="display: none">
<ldp-display
id="channels-list"
data-src="http://localhost:8000/channels/"
data-fields="name, description"
search-fields="name, description"
next="channel"
></ldp-display>
</div>

6
src/html/groups.html
View File

@ -1,6 +0,0 @@
<div id="groups" style="display: none">
<h1 class="page-title">Groupes</h1>
<!-- <ldp-display data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, membersTest" widget-membersTest="ldp-list" value-membersTest="Benoit"></ldp-display> -->
<ldp-display id="groupsList" data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, members" widget-members="ldp-list"></ldp-display>
<!-- <ldp-display data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, membersTest" widget-membersTest="ldp-list" value-membersTest="["Luke", "Bruno"]"></ldp-display> -->
</div>

7
src/html/menu.html
View File

@ -25,9 +25,12 @@
Projet
</ldp-route>
<ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch text-center text-md-left" name="groups">
<ldp-route class="nav-item pl-4 pr-4 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"> Groupes</span>
<span class="d-none d-md-inline"> Channels</span>
</ldp-route>
<ldp-route class="nav-item d-none" name="channel" id-prefix="http://localhost:8000/channels/">
channel
</ldp-route>
</div>
</ldp-router>

62
src/scss/_channel.scss Normal file
View File

@ -0,0 +1,62 @@
#channel {
#channel-detail {
#channel-info {
display: block;
padding-top: 10px;
div[name="name"] {
font-weight: bold;
}
}
ldp-display-member {
img {
width: 50px;
border-radius: 100px;
}
span {
padding-left: 5px;
}
}
#chat-members {
ldp-display {
display: flex;
align-items: center;
margin-bottom: 10px;
img {
width: 50px;
border-radius: 100px;
}
div[name="name"] {
display: flex;
margin-left: 10px;
}
}
}
}
div[name="admin"],
.section {
@extend %detail-section;
margin-top: 40px;
}
}
@media (min-width: $sm-with) {
#channel {
#channel-detail {
#channel-info {
ldp-display-client {
display: block;
float: right;
width: 300px;
}
}
}
}
}

25
src/scss/_channels.scss Normal file
View File

@ -0,0 +1,25 @@
#channels {
#channels-list {
display: flex;
flex-direction: column;
margin-top: 40px;
ldp-display {
@extend %td;
cursor: pointer;
display: flex;
align-items: center;
height: 65px;
&:hover {
background-color: $hd-color-faded;
color: white;
}
ldp-display-div[name="name"] {
width: 130px;
}
}
}
}

26
src/scss/_groupsList.scss
View File

@ -1,26 +0,0 @@
#groupsList {
display: flex;
flex-direction: column;
}
#groupsList>ldp-display {
display: flex;
flex-direction: row;
}
#groupsList ul {
display: inline-flex;
}
/* TEST */
#groupsList>ldp-display {
border: 1px dashed royalblue;
}
#groupsList ul {
border: 3px solid green;
}
#groupsList .title {
border: 3px solid blueviolet;
}

19
src/scss/_home.scss
View File

@ -1,19 +0,0 @@
#home {
height: 100%;
}
#logoContainer {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#logoContainer>img {
transition: transform .4s;
}
#logoContainer>img:hover {
transform: scale(1.5);
}
/* MEDIA QUERY Pour centrer sur un petit écran */

8
src/scss/main.scss
View File

@ -6,11 +6,11 @@
@import "forms";
// Specific
@import "home";
@import "menu";
@import "dashboard";
@import "members";
@import "member";
@import "groupsList";
@import "project";
@import "projects";
@import "dashboard";
@import "project";
@import "channels";
@import "channel";