hyperzlib
/
nodebb-theme-persona
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'chats-redesign'

Browse Source
main
psychobunny 10 years ago
parent a731f4ac8f aeee17866c
commit 920340c087
3 changed files with 92 additions and 57 deletions
Show Stats Download Patch File Download Diff File

58
less/chats.less
Unescape Escape View File

@ -3,24 +3,40 @@
max-height: 608px;
overflow-x: hidden;
overflow-y: auto;
border-top: 1px solid @gray-lighter;
li {
position: relative;
clear: both;
list-style-type: none;
padding: 0.5em;
height: 70px;
.pointer;
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 1px solid;
border-color: @gray-lighter;
background: @body-bg;
&.typing {
span:after {
.username:after {
visibility: visible;
}
}
&.unread {
.bg-variant(@state-warning-bg);
background: lighten(@brand-primary, 25%);
}
span {
&.bg-primary {
background: @brand-primary;
}
.username {
font-size: 18px;
&:after {
display: inline-block;
font-family: "FontAwesome";
@ -30,6 +46,13 @@
}
}
.teaser-timestamp {
font-size: 10px;
position: absolute;
top: 8px;
right: 24px;
}
a {
display: block;
.text-ellipsis;
@ -40,11 +63,21 @@
}
.user-img {
width:24px;
height:24px;
width: 50px;
height: 50px;
float: left;
margin-top: 4px;
margin-right: 13px;
margin-left: 0.5em;
border-radius: 50%;
}
.status {
position: absolute;
left: 50px;
font-size: 20px;
top: 10px;
}
}
}
@ -164,3 +197,18 @@
resize: none;
}
}
.expanded-chat {
h1 {
margin: 0px;
padding-bottom: 20px;
}
.chat-content {
padding-top: 10px;
}
.input-group {
position: absolute;
}
}

2
package.json
Unescape Escape View File

@ -1,6 +1,6 @@
{
"name": "nodebb-theme-persona",
"version": "2.1.17",
"version": "2.1.18",
"nbbpm": {
"compatibility": "^0.8.0"
},

89
templates/chats.tpl
Unescape Escape View File

@ -1,27 +1,48 @@
<div class="row">
<div class="col-sm-9">
<div class="col-sm-4">
<ul class="chats-list recent-chats" data-nextstart="{nextStart}">
<!-- BEGIN chats -->
<li data-username="{chats.username}" data-uid="{chats.uid}" class="<!-- IF chats.unread -->unread<!-- ENDIF chats.unread -->">
<img class="user-img" src="{chats.picture}">
<i component="user/status" title="[[global:{chats.status}]]" class="fa fa-circle status {chats.status}"></i>
<span class="username">{chats.username}</span>
<span class="teaser-content">{chats.teaser.content}</span>
<span class="teaser-timestamp timeago" title="{chats.teaser.timestampISO}"></span>
</li>
<!-- END chats -->
<!-- BEGIN contacts -->
<li data-username="{contacts.username}" data-uid="{contacts.uid}">
<i component="user/status" title="[[global:{contacts.status}]]" class="fa fa-circle status {contacts.status}"></i>
<img class="user-img" src="{contacts.picture}">
<span class="username">{contacts.username}</span>
</li>
<!-- END contacts -->
</ul>
</div>
<div class="col-sm-8">
<!-- IF !allowed -->
<div class="alert alert-warning">
[[error:chat-restricted]]
</div>
<!-- ENDIF !allowed -->
<!-- IF meta -->
<div class="panel panel-default expanded-chat" data-uid="{meta.uid}" data-username="{meta.username}">
<div class="panel-heading">
<button type="button" class="close" data-action="pop-out"><span aria-hidden="true"><i class="fa fa-compress"></i></span><span class="sr-only">[[modules:chat.pop-out]]</span></button>
<h2 class="panel-title">[[modules:chat.message-history]]</h2>
</div>
<div class="panel-body">
<span class="since-bar"><a href="#" class="selected" data-since="recent">[[recent:title]]</a> &bull; <a href="#" data-since="week">[[modules:chat.seven_days]]</a> &bull; <a href="#" data-since="month">[[modules:chat.thirty_days]]</a> &bull; <a href="#" data-since="threemonths">[[modules:chat.three_months]]</a></span>
<ul class="chat-content">
<!-- IMPORT partials/chat_messages.tpl -->
</ul>
<div class="input-group">
<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input" rows="1"></textarea>
<span class="input-group-btn">
<button class="btn btn-primary" type="button" data-action="send">[[modules:chat.send]]</button>
</span>
</div>
<div class="expanded-chat" data-uid="{meta.uid}" data-username="{meta.username}">
<button type="button" class="close" data-action="pop-out"><span aria-hidden="true"><i class="fa fa-compress"></i></span><span class="sr-only">[[modules:chat.pop-out]]</span></button>
<h1>{meta.username}</h1>
<span class="since-bar"><a href="#" class="selected" data-since="recent">[[recent:title]]</a> &bull; <a href="#" data-since="week">[[modules:chat.seven_days]]</a> &bull; <a href="#" data-since="month">[[modules:chat.thirty_days]]</a> &bull; <a href="#" data-since="threemonths">[[modules:chat.three_months]]</a></span>
<ul class="chat-content">
<!-- IMPORT partials/chat_messages.tpl -->
</ul>
<div class="input-group">
<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input" rows="1"></textarea>
<span class="input-group-btn">
<button class="btn btn-primary" type="button" data-action="send">[[modules:chat.send]]</button>
</span>
</div>
</div>
<!-- ELSE -->
@ -30,38 +51,4 @@
</div>
<!-- ENDIF meta -->
</div>
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">[[modules:chat.contacts]]</h2>
</div>
<div class="panel-body">
<ul class="chats-list">
<!-- BEGIN contacts -->
<li data-username="{contacts.username}" data-uid="{contacts.uid}">
<i component="user/status" title="[[global:{contacts.status}]]" class="fa fa-circle status {contacts.status}"></i>
<img class="user-img" src="{contacts.picture}">
<span>{contacts.username}</span>
</li>
<!-- END contacts -->
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">[[modules:chat.recent-chats]]</h2>
</div>
<div class="panel-body">
<ul class="chats-list recent-chats" data-nextstart="{nextStart}">
<!-- BEGIN chats -->
<li data-username="{chats.username}" data-uid="{chats.uid}" class="<!-- IF chats.unread -->unread<!-- ENDIF chats.unread -->">
<i component="user/status" title="[[global:{chats.status}]]" class="fa fa-circle status {chats.status}"></i>
<img class="user-img" src="{chats.picture}">
<span>{chats.username}</span>
</li>
<!-- END chats -->
</ul>
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save