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

yay, chats redesigned finally

Browse Source
main
psychobunny 8 years ago
parent 90d9c771ea
commit 21aea38baf
4 changed files with 113 additions and 30 deletions
Show Stats Download Patch File Download Diff File

77
less/chats.less
Unescape Escape View File

@ -1,3 +1,7 @@
.chats-page {
margin-top: 10px;
}
.chats-list {
padding: 0;
overflow-x: hidden;
@ -9,7 +13,7 @@
clear: both;
list-style-type: none;
padding: 0.5em;
height: 90px;
height: 80px;
.pointer;
border-left: 1px solid;
@ -17,8 +21,6 @@
border-bottom: 1px solid;
border-color: @gray-lighter;
&.typing {
.username:after {
visibility: visible;
@ -26,7 +28,9 @@
}
&.unread {
background: lighten(@brand-primary, 25%);
background: lighten(@brand-primary, 35%);
border-bottom: 0;
}
.teaser-content {
@ -34,10 +38,24 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
opacity: 0.8;
}
.room-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.teaser-content, .room-name {
padding-left: 80px;
}
&.bg-primary {
background: @brand-primary;
border-bottom: 0;
}
.username {
@ -54,6 +72,7 @@
.teaser-timestamp {
font-size: 10px;
margin-top: 10px;
}
a {
@ -84,14 +103,55 @@
.members {
padding-left: 1rem;
z-index: 1;
position: absolute;
bottom: 2px;
left: 53px;
li {
display: inline-block;
width: 16px;
padding: 0;
margin: 0;
&:first-child {
display: none;
}
.avatar {
border: 2px solid white;
width: 28px;
height: 28px;
line-height: 26px;
}
img {
margin-top: -4px;
}
}
}
.main-avatar {
position: absolute;
top: 0px;
left: 0px;
div, img {
height: 80px;
width: 80px;
font-size: 40px;
border-radius: 0;
}
}
.avatar-placeholder {
height: 80px;
width: 80px;
background: @gray-lighter;
position: absolute;
top: 0px;
left: 0px;
}
}
}
@ -152,6 +212,11 @@
border-top: 1px solid @gray-lighter;
}
&[data-break="true"]:first-child {
border-top: 0;
margin-top: -1.5px;
}
.chat-user-image {
.user-icon-style(32px, 1.6rem, 50%);
float: left;
@ -226,6 +291,10 @@
padding: 1rem 0;
text-align: center;
}
.controlsToggle {
margin-right: 10px;
}
}
.expanded-chat {

19
templates/chats.tpl
Unescape Escape View File

@ -1,7 +1,7 @@
<!-- IMPORT partials/breadcrumbs.tpl -->
<div class="row">
<div class="row chats-page">
<div class="col-md-4">
<div class="chat-search hidden-xs">
<input class="form-control" type="text" component="chat/search" placeholder="[[users:enter_username]]" />
@ -19,16 +19,19 @@
<div class="col-md-8 hidden-sm hidden-xs">
<!-- IF roomId -->
<div component="chat/messages" class="expanded-chat" data-roomid="{roomId}">
<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>
<button class="close controlsToggle" component="expanded-chat/controlsToggle"><i class="fa fa-gear"></i></button>
<!-- IF showUserInput -->
<div class="users-tag-container">
<input class="users-tag-input" type="text" class="form-control" placeholder="[[modules:chat.add-users-to-room]]" tabindex="4"/>
</div>
<!-- ENDIF showUserInput -->
<div class="controls hide" component="expanded-chat/controls">
<!-- IF showUserInput -->
<div class="users-tag-container">
<input class="users-tag-input" type="text" class="form-control" placeholder="[[modules:chat.add-users-to-room]]" tabindex="4"/>
</div>
<!-- ENDIF showUserInput -->
<input class="form-control" component="chat/room/name" value="{roomName}" <!-- IF !isOwner -->disabled<!-- ENDIF !isOwner -->/>
<input class="form-control" component="chat/room/name" value="{roomName}" <!-- IF !isOwner -->disabled<!-- ENDIF !isOwner -->/>
<hr />
</div>
<ul class="chat-content">
<!-- IMPORT partials/chats/messages.tpl -->

40
templates/partials/chats/recent_room.tpl
Unescape Escape View File

@ -1,24 +1,28 @@
<li component="chat/recent/room" data-roomid="{rooms.roomId}" class="<!-- IF rooms.unread -->unread<!-- ENDIF rooms.unread -->">
<i class="fa fa-times pull-right leave" component="chat/leave"></i>
<div>
<p><!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName --></p>
<ul class="members">
<!-- BEGIN rooms.users -->
<li>
<a href="{config.relative_path}/user/{rooms.users.userslug}">
<!-- IF rooms.users.picture -->
<img class="user-img avatar avatar-sm avatar-rounded" src="{rooms.users.picture}" title="{rooms.users.username}">
<!-- ELSE -->
<div class="user-img avatar avatar-sm avatar-rounded" title="{rooms.users.username}" style="background-color: {rooms.users.icon:bgColor};">{rooms.users.icon:text}</div>
<!-- ENDIF rooms.users.picture -->
</a>
</li>
<!-- END rooms.users -->
<!-- IF !rooms.lastUser.uid -->
<li>[[modules:chat.no-users-in-room]]</li>
<!-- ENDIF !rooms.lastUser.uid -->
</ul>
<strong class="room-name">
<!-- IF !rooms.lastUser.uid -->
<span>[[modules:chat.no-users-in-room]]</span>
<!-- ELSE -->
<!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName -->
<!-- ENDIF !rooms.lastUser.uid -->
</strong>
<div class="avatar-placeholder"></div>
<!-- BEGIN rooms.users -->
<!-- IF @first -->
<div class="main-avatar">
<!-- IMPORT partials/chats/user.tpl -->
</div>
<!-- ENDIF @first -->
<!-- END rooms.users -->
<ul class="members">
<!-- BEGIN rooms.users -->
<li>
<!-- IMPORT partials/chats/user.tpl -->
</li>
<!-- END rooms.users -->
</ul>
<span class="teaser-content">{rooms.teaser.content}</span>
<span class="teaser-timestamp timeago pull-right" title="{rooms.teaser.timestampISO}"></span>

7
templates/partials/chats/user.tpl
Unescape Escape View File

@ -0,0 +1,7 @@
<a href="{config.relative_path}/user/{rooms.users.userslug}">
<!-- IF rooms.users.picture -->
<img class="user-img avatar avatar-sm avatar-rounded" src="{rooms.users.picture}" title="{rooms.users.username}">
<!-- ELSE -->
<div class="user-img avatar avatar-sm avatar-rounded" title="{rooms.users.username}" style="background-color: {rooms.users.icon:bgColor};">{rooms.users.icon:text}</div>
<!-- ENDIF rooms.users.picture -->
</a>
Write Preview
Loading…
Cancel
Save