Work on menu and channel list layout and styles in renderer

This commit is contained in:
chylex 2016-10-27 15:44:25 +02:00
parent a459943351
commit 178c230d2c
2 changed files with 45 additions and 12 deletions

View File

@ -5,9 +5,26 @@ var DISCORD = (function(){
return {
setup: function(){
templateChannelServer = new TEMPLATE("<div data-channel='{id}'><strong class='name'>{name}</strong> <span class='msgcount'>({msgcount})</span><br><span class='server'>{server.name} ({server.type})</span></div>");
templateChannelPrivate = new TEMPLATE("<div data-channel='{id}'><strong class='name'>{name}</strong> <span class='msgcount'>({msgcount})</span><br><span class='server'>({server.type})</span></div>");
templateMessage = new TEMPLATE("<div><h2><strong class='username'>{user.name}</strong><span class='time'>{timestamp}</span></h2><div class='message'>{contents}</div></div>");
templateChannelServer = new TEMPLATE([
"<div data-channel='{id}'>",
"<div class='info'><strong class='name'>#{name}</strong><span class='msgcount'>{msgcount}</span></div>",
"<span class='server'>{server.name} ({server.type})</span>",
"</div>"
].join(""));
templateChannelPrivate = new TEMPLATE([
"<div data-channel='{id}'>",
"<div class='info'><strong class='name'>{name}</strong><span class='msgcount'>{msgcount}</span></div>",
"<span class='server'>({server.type})</span>",
"</div>"
].join(""));
templateMessage = new TEMPLATE([
"<div>",
"<h2><strong class='username'>{user.name}</strong><span class='time'>{timestamp}</span></h2>",
"<div class='message'>{contents}</div>",
"</div>"
].join(""));
},
getChannelHTML: function(channel){
@ -16,6 +33,7 @@ var DISCORD = (function(){
switch(value){
case "SERVER": return "server";
case "GROUP": return "group";
case "DM": return "user";
}
}
});

View File

@ -13,9 +13,9 @@ body {
}
#menu {
width: 16vw;
min-width: 225px;
max-width: 350px;
width: 15vw;
min-width: 215px;
max-width: 300px;
height: 100vh;
display: flex;
flex-direction: column;
@ -41,20 +41,35 @@ body {
#channels > div {
cursor: pointer;
color: #eee;
padding: 8px;
text-align: center;
padding: 10px 12px;
font-size: 15px;
}
#channels > div:hover, #channels > div.active {
background-color: #282B30;
}
#channels br {
margin-bottom: 3px;
#channels .info {
display: flex;
height: 16px;
margin-bottom: 4px;
}
#channels .server {
font-size: 14px;
#channels .name {
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#channels .msgcount {
flex-shrink: 1;
background-color: rgba(255, 255, 255, 0.08);
border-radius: 4px;
margin-left: 4px;
margin-top: 1px;
padding: 2px 5px;
font-size: 11px;
}
#messages {