Channels list and detail pages done
This commit is contained in:
Alexandre Bourlier
parent
c2399db08a
commit
f6744ec9e0
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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=" "
|
||||
data-fields="avatar, name"
|
||||
widget-avatar="ldp-display-img"
|
||||
bind-resources
|
||||
></ldp-display>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 */
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Reference in New Issue