From 4c2e2f09da16e2b5b86b97b928139ad62f6af7d7 Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Thu, 11 Jan 2018 15:28:06 -0500 Subject: [PATCH] Squashed commit of the following: commit 2b66f7cfccfeb7578b1ebdd6955464a29517566b Author: Julian Lam Date: Thu Jan 11 15:22:23 2018 -0500 chat tweaks on persona and fixing taskbar integration for group chats commit c4f6735025a981b4591f3d0b82e2897f72e43d4b Author: Julian Lam Date: Wed Jan 10 15:12:54 2018 -0500 ported revamped vanilla chats page and modal to persona, nodebb/nodebb#6192 --- less/chats.less | 242 +++++++++++++++--- less/modules/taskbar.less | 2 +- lib/persona.js | 24 +- templates/chat.tpl | 54 ++-- templates/chats.tpl | 17 +- templates/partials/chats/message-window.tpl | 59 +++-- templates/partials/chats/recent_room.tpl | 8 +- templates/partials/modals/manage_room.tpl | 11 + .../partials/modals/manage_room_users.tpl | 11 + templates/partials/modals/rename_room.tpl | 4 + 10 files changed, 331 insertions(+), 101 deletions(-) create mode 100644 templates/partials/modals/manage_room.tpl create mode 100644 templates/partials/modals/manage_room_users.tpl create mode 100644 templates/partials/modals/rename_room.tpl diff --git a/less/chats.less b/less/chats.less index a558a64..7b970ae 100644 --- a/less/chats.less +++ b/less/chats.less @@ -1,3 +1,173 @@ +// Make chats page edge-to-edge +.page-user-chats { + padding-top: 50px; + + #content.container { + width: auto; + padding: 0; + } + + .navbar { + margin-bottom: 0; + } + + #panel { + padding-top: 0px; + padding-bottom: 0px; + } +} + +/* Styles common to both full chat and chat modal */ +.chats-full, .chat-modal { + display: flex; + flex-wrap: nowrap; + + [component="chat/nav-wrapper"] { + flex: 1; + flex-direction: column; + box-shadow: 0.5em 0 0.5em @gray-lighter; + + .chats-list { + flex: 1; + overflow-y: auto; + } + + .chat-search { + background-color: @panel-default-heading-bg; + border-bottom: 1px solid @gray-dark; + + input { + background-color: @panel-default-heading-bg; + border-radius: 0; + border: none; + height: ~"calc(3em - 1px)"; + } + + ul { + width: 100%; + } + } + + [component="chat/search/list"] { + padding: 0; + overflow-x: hidden; + overflow-y: auto; + border-top: 1px solid @gray-lighter; + + li { + position: relative; + clear: both; + list-style-type: none; + padding: .5em; + height: 70px; + cursor: pointer; + border-left: 1px solid; + border-right: 1px solid; + border-bottom: 1px solid; + border-color: #eee; + background: #fff; + + i { + position: relative; + left: -30px; + font-size: 20px; + top: -20px; + } + + img, .user-icon { + .user-icon-style(50px, 2.4rem, 50%); + margin-top: 4px; + margin-right: 13px; + margin-left: .5em; + } + } + } + } + + [component="chat/main-wrapper"] { + flex: 3; + + .alert { + margin: 1em; + } + } + + [component="chat/messages"] { + display: flex; + flex-direction: column; + height: 100%; + + .chat-content { + flex: 1; + } + } + + [component="chat/header"] { + padding: @panel-heading-padding; + background-color: @panel-default-heading-bg; + border-bottom: 1px solid @gray-dark; + + span { + font-weight: 500; + } + + .close { + margin-left: 0.5em; + } + + .members { + a { + font-weight: 600; + color: @gray-dark; + } + } + + .dropdown { + float: right; + + .avatar { + margin-right: 0.5em; + } + } + } + + .modal-header .dropdown { + float: right; + + .avatar { + margin-right: 0.5em; + } + } + + [component="chat/composer"] { + display: flex; + position: relative; + + [component="chat/input"] { + flex: 1; + background: none; + box-shadow: none; + border: 0; + border: 1px solid @gray-lighter; + border-radius: 0; + } + + [data-action="send"] { + width: 5em; + height: 100%; + } + + [component="chat/message/remaining"] { + position: absolute; + float: right; + right: 5.25em; + z-index: 2; + bottom: 0; + color: @gray-light; + } + } +} + .chats-page { margin-top: 10px; } @@ -12,7 +182,6 @@ overflow-x: hidden; overflow-y: auto; border-top: 1px solid @gray-lighter; - max-width: 360px; > li { position: relative; @@ -109,6 +278,7 @@ .members { padding-left: 1rem; + margin-bottom: 0.5rem; z-index: 1; position: absolute; bottom: 2px; @@ -165,7 +335,8 @@ z-index: 10000; } -.expanded-chat, .chat-modal { +/* Chat modal specific styles */ +.chat-modal { .modal-header { padding: 0.25em 1em; @@ -193,9 +364,20 @@ } } + .modal-body { + display: flex; + flex-direction: column; + height: 400px; + + .chat-content { + flex: 1; + } + } +} + +.expanded-chat, .chat-modal { .chat-content { .fix-lists; - height: 250px; overflow-y: auto; overflow-x: hidden; resize: none; @@ -267,6 +449,7 @@ .message-body { margin-left: 45px; + overflow-y: hidden; p { margin: 7px 0 0 0; @@ -298,10 +481,6 @@ } } - .chat-input { - height: 42px; - } - .user-typing { color: @gray-light; margin: 1.428rem 0; @@ -317,7 +496,6 @@ textarea { resize: none; - height: 42px; } .since-bar { @@ -346,38 +524,32 @@ } } -[component="chat/search/list"] { +[component="chat/manage-modal"] { + .list-group-item .avatar { + border-radius: 0; + margin-right: 1em; + } - padding: 0; - overflow-x: hidden; - overflow-y: auto; - border-top: 1px solid @gray-lighter; + div+span { + margin: -4px; + } +} - li { - position: relative; - clear: both; - list-style-type: none; - padding: .5em; - height: 70px; - cursor: pointer; - border-left: 1px solid; - border-right: 1px solid; - border-bottom: 1px solid; - border-color: #eee; - background: #fff; +/* Mobile handling of chat page */ +@media (max-width: @screen-sm) { + .page-user-chats { + padding-bottom: 0; - i { - position: relative; - left: -30px; - font-size: 20px; - top: -20px; + [component="chat/nav-wrapper"][data-loaded="1"] { + display: none; } - img, .user-icon { - .user-icon-style(50px, 2.4rem, 50%); - margin-top: 4px; - margin-right: 13px; - margin-left: .5em; + [component="chat/nav-wrapper"][data-loaded="0"] + [component="chat/main-wrapper"] { + display: none; } } + + [data-action="pop-out"] { + display: none; + } } diff --git a/less/modules/taskbar.less b/less/modules/taskbar.less index c1249af..2c1d367 100644 --- a/less/modules/taskbar.less +++ b/less/modules/taskbar.less @@ -92,7 +92,7 @@ .user-icon-style(50px, 2.4rem, 50%) !important; padding: 0; color: white; - background: none; + background: @brand-primary; background-size: cover; i { diff --git a/lib/persona.js b/lib/persona.js index d499883..22b4798 100644 --- a/lib/persona.js +++ b/lib/persona.js @@ -33,7 +33,7 @@ $(document).ready(function() { data.options.className = 'taskbar-' + data.module; if (data.module === 'composer') { - data.options.icon = 'fa-plus'; + data.options.icon = 'fa-commenting-o'; } else if (data.module === 'chat') { if (!data.element.length) { createChatIcon(data); @@ -54,19 +54,21 @@ $(document).ready(function() { }); function createChatIcon(data) { - data.options.icon = 'fa-spinner fa-spin'; - - $.getJSON(config.relative_path + '/api/user/' + utils.slugify(data.options.title), function(user) { + $.getJSON(config.relative_path + '/api/user/' + app.user.userslug + '/chats/' + data.options.roomId, function(chatObj) { var el = $('#taskbar [data-uuid="' + data.uuid + '"] a'); - el.find('i').remove(); el.parent('[data-uuid]').attr('data-roomId', data.options.roomId); - if (user.picture) { - el.css('background-image', 'url(' + user.picture + ')'); - } else { - el .css('background-color', user['icon:bgColor']) - .text(user['icon:text']) - .addClass('user-icon'); + if (chatObj.users.length === 1) { + var user = chatObj.users[0]; + el.find('i').remove(); + + if (user.picture) { + el.css('background-image', 'url(' + user.picture + ')'); + } else { + el .css('background-color', user['icon:bgColor']) + .text(user['icon:text']) + .addClass('user-icon'); + } } }); } diff --git a/templates/chat.tpl b/templates/chat.tpl index 37c7943..e0cb43c 100644 --- a/templates/chat.tpl +++ b/templates/chat.tpl @@ -1,24 +1,42 @@ -