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

19
templates/chats.tpl
Unescape Escape View File

@ -1,7 +1,7 @@
<!-- IMPORT partials/breadcrumbs.tpl --> <!-- IMPORT partials/breadcrumbs.tpl -->
<div class="row"> <div class="row chats-page">
<div class="col-md-4"> <div class="col-md-4">
<div class="chat-search hidden-xs"> <div class="chat-search hidden-xs">
<input class="form-control" type="text" component="chat/search" placeholder="[[users:enter_username]]" /> <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"> <div class="col-md-8 hidden-sm hidden-xs">
<!-- IF roomId --> <!-- IF roomId -->
<div component="chat/messages" class="expanded-chat" data-roomid="{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 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="controls hide" component="expanded-chat/controls">
<div class="users-tag-container"> <!-- IF showUserInput -->
<input class="users-tag-input" type="text" class="form-control" placeholder="[[modules:chat.add-users-to-room]]" tabindex="4"/> <div class="users-tag-container">
</div> <input class="users-tag-input" type="text" class="form-control" placeholder="[[modules:chat.add-users-to-room]]" tabindex="4"/>
<!-- ENDIF showUserInput --> </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"> <ul class="chat-content">
<!-- IMPORT partials/chats/messages.tpl --> <!-- 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 -->"> <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> <i class="fa fa-times pull-right leave" component="chat/leave"></i>
<div> <strong class="room-name">
<p><!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName --></p> <!-- IF !rooms.lastUser.uid -->
<ul class="members"> <span>[[modules:chat.no-users-in-room]]</span>
<!-- BEGIN rooms.users --> <!-- ELSE -->
<li> <!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName -->
<a href="{config.relative_path}/user/{rooms.users.userslug}"> <!-- ENDIF !rooms.lastUser.uid -->
<!-- IF rooms.users.picture --> </strong>
<img class="user-img avatar avatar-sm avatar-rounded" src="{rooms.users.picture}" title="{rooms.users.username}"> <div class="avatar-placeholder"></div>
<!-- ELSE --> <!-- BEGIN rooms.users -->
<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> <!-- IF @first -->
<!-- ENDIF rooms.users.picture --> <div class="main-avatar">
</a> <!-- IMPORT partials/chats/user.tpl -->
</li>
<!-- END rooms.users -->
<!-- IF !rooms.lastUser.uid -->
<li>[[modules:chat.no-users-in-room]]</li>
<!-- ENDIF !rooms.lastUser.uid -->
</ul>
</div> </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-content">{rooms.teaser.content}</span>
<span class="teaser-timestamp timeago pull-right" title="{rooms.teaser.timestampISO}"></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