diff --git a/less/chats.less b/less/chats.less index 9212800..4c4520c 100644 --- a/less/chats.less +++ b/less/chats.less @@ -1,3 +1,177 @@ +// 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; + } + + [widget-area="header"], [widget-area="footer"] { + display: none; + } +} + +/* 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 3px 9px rgba(0,0,0,.5); + + .chats-list { + flex: 1; + overflow-y: auto; + margin-bottom: 0; + height: ~"calc(100% - 3em)"; + } + + .chat-search { + background-color: @panel-default-heading-bg; + border-bottom: 1px solid @gray-dark; + + input { + background-color: @gray-dark; + color: @gray-lighter; + border-radius: 0; + border: none; + height: ~"calc(3em - 2px)"; + } + + 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: @gray-dark; + border-bottom: none; + color: @gray-lighter; + + span { + font-weight: 500; + } + + .close { + margin-left: 0.5em; + color: @gray-lighter; + } + + .members { + a { + font-weight: 600; + color: @gray-lighter; + } + } + + .dropdown { + .avatar { + margin-right: 0.5em; + } + } + } + + .modal-header .dropdown { + .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; + right: 5.25em; + z-index: 2; + bottom: 0; + color: @gray-light; + } + } +} + .chats-page { margin-top: 10px; } @@ -12,7 +186,6 @@ overflow-x: hidden; overflow-y: auto; border-top: 1px solid @gray-lighter; - max-width: 360px; > li { position: relative; @@ -109,6 +282,7 @@ .members { padding-left: 1rem; + margin-bottom: 0.5rem; z-index: 1; position: absolute; bottom: 2px; @@ -165,7 +339,8 @@ z-index: 10000; } -.expanded-chat, .chat-modal { +/* Chat modal specific styles */ +.chat-modal { .modal-header { padding: 0.25em 1em; @@ -193,9 +368,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; @@ -208,6 +394,7 @@ font-weight: 300; padding: 0 1.428rem; margin-right: 1.428rem; + transition: opacity .5s ease; &:first-child { padding-top: 1.428rem; @@ -228,6 +415,20 @@ margin-top: -1.5px; } + &.deleted { + opacity: 0.3; + + .controls { + [data-action] { + display: none; + } + + [data-action="restore"] { + display: inline; + } + } + } + .chat-user-image { .user-icon-style(32px, 1.6rem, 50%); float: left; @@ -236,6 +437,10 @@ .chat-user { display: inline-block; margin-left: 13px; + + a { + color: @gray-dark; + } } .chat-timestamp { @@ -248,6 +453,7 @@ .message-body { margin-left: 45px; + overflow-y: hidden; p { margin: 7px 0 0 0; @@ -265,6 +471,10 @@ .controls { display: none; + + [data-action="restore"] { + display: none; + } } &:hover { @@ -275,10 +485,6 @@ } } - .chat-input { - height: 42px; - } - .user-typing { color: @gray-light; margin: 1.428rem 0; @@ -294,7 +500,6 @@ textarea { resize: none; - height: 42px; } .since-bar { @@ -323,38 +528,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/less/rtl.less b/less/rtl.less index ea97ff9..3bc77d5 100644 --- a/less/rtl.less +++ b/less/rtl.less @@ -59,6 +59,41 @@ html[data-dir="rtl"] { } + [component="chat/composer"] { + [component="chat/message/remaining"] { + right: auto; + left: 5.25em; + } + + [data-action="send"] { + transform: scale(-1, 1); + } + } + + .chats-full [component="chat/header"] .dropdown .avatar, .chat-modal [component="chat/header"] .dropdown .avatar { + margin-right: 0; + margin-left: 0.5em; + } + + .chats-list > li .teaser-content, .chats-list > li .room-name { + padding-left: 0; + padding-right: 80px; + } + + .chats-list > li { + .avatar-placeholder, .main-avatar { + left: auto; + right: 0; + } + + .members { + right: 53px; + left: auto; + padding-left: 0; + padding-right: 1rem; + } + } + .slideout-menu .chat-list li .teaser-content, .slideout-menu .chat-list li .room-name { padding-right: 60px; } diff --git a/lib/persona.js b/lib/persona.js index 8133ef6..71155ee 100644 --- a/lib/persona.js +++ b/lib/persona.js @@ -45,7 +45,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); @@ -66,19 +66,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..101a9bb 100644 --- a/templates/chat.tpl +++ b/templates/chat.tpl @@ -1,24 +1,42 @@ -