From 9b0651f75137eb91dbecd630433c1e2ed079ec50 Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Fri, 15 Dec 2017 16:00:39 -0500 Subject: [PATCH 01/15] theme changes for nodebb/nodebb#6177 --- less/chats.less | 4 ++++ templates/partials/chats/message.tpl | 8 +++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/less/chats.less b/less/chats.less index 9212800..9ab9a6e 100644 --- a/less/chats.less +++ b/less/chats.less @@ -236,6 +236,10 @@ .chat-user { display: inline-block; margin-left: 13px; + + a { + color: @gray-dark; + } } .chat-timestamp { diff --git a/templates/partials/chats/message.tpl b/templates/partials/chats/message.tpl index 27fa142..6ab5f0d 100644 --- a/templates/partials/chats/message.tpl +++ b/templates/partials/chats/message.tpl @@ -7,7 +7,13 @@
{messages.fromUser.icon:text}
- {messages.fromUser.username} + {messages.fromUser.username} + + [[user:banned]] + + + [[user:deleted]] +
From cdcc3a9e91188598fdf9f274a20809e55335c0db Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Mon, 18 Dec 2017 14:45:39 -0500 Subject: [PATCH 02/15] theme changes for nodebb/nodebb#6181 --- less/chats.less | 19 +++++++++++++++++++ templates/partials/chats/message.tpl | 3 ++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/less/chats.less b/less/chats.less index 9ab9a6e..a558a64 100644 --- a/less/chats.less +++ b/less/chats.less @@ -208,6 +208,7 @@ font-weight: 300; padding: 0 1.428rem; margin-right: 1.428rem; + transition: opacity .5s ease; &:first-child { padding-top: 1.428rem; @@ -228,6 +229,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; @@ -269,6 +284,10 @@ .controls { display: none; + + [data-action="restore"] { + display: none; + } } &:hover { diff --git a/templates/partials/chats/message.tpl b/templates/partials/chats/message.tpl index 6ab5f0d..15a785b 100644 --- a/templates/partials/chats/message.tpl +++ b/templates/partials/chats/message.tpl @@ -1,4 +1,4 @@ -
  • +
  • @@ -25,6 +25,7 @@
    +
    From 4c2e2f09da16e2b5b86b97b928139ad62f6af7d7 Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Thu, 11 Jan 2018 15:28:06 -0500 Subject: [PATCH 03/15] 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 @@ -
  • - [[modules:chat.no-users-in-room]] - {rooms.roomName}{rooms.usernames} + {rooms.roomName}{rooms.usernames}
    @@ -23,9 +22,4 @@
    • - - - {rooms.teaser.content} - - \ No newline at end of file diff --git a/templates/partials/modals/manage_room.tpl b/templates/partials/modals/manage_room.tpl new file mode 100644 index 0000000..7c2251e --- /dev/null +++ b/templates/partials/modals/manage_room.tpl @@ -0,0 +1,11 @@ +
    + +

    +

    [[modules:chat.add-user-help]]

    + +
    + +
      +
    • [[modules:chat.retrieving-users]]
      • +
    +
    \ No newline at end of file diff --git a/templates/partials/modals/manage_room_users.tpl b/templates/partials/modals/manage_room_users.tpl new file mode 100644 index 0000000..72a1a0d --- /dev/null +++ b/templates/partials/modals/manage_room_users.tpl @@ -0,0 +1,11 @@ + +
  • + + + +
    {../icon:text}
    + + + {../username} +
    • + \ No newline at end of file diff --git a/templates/partials/modals/rename_room.tpl b/templates/partials/modals/rename_room.tpl new file mode 100644 index 0000000..e1e256e --- /dev/null +++ b/templates/partials/modals/rename_room.tpl @@ -0,0 +1,4 @@ + +

    + [[modules:chat.rename-help]] +

    \ No newline at end of file From da3a00ab2e352de1ffd638c5b9b6a813a6c17c82 Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Tue, 16 Jan 2018 14:36:09 -0500 Subject: [PATCH 04/15] hide header and footer on chat page (mobile) --- less/chats.less | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/less/chats.less b/less/chats.less index 7b970ae..bc57860 100644 --- a/less/chats.less +++ b/less/chats.less @@ -15,6 +15,10 @@ padding-top: 0px; padding-bottom: 0px; } + + [widget-area="header"], [widget-area="footer"] { + display: none; + } } /* Styles common to both full chat and chat modal */ @@ -104,8 +108,9 @@ [component="chat/header"] { padding: @panel-heading-padding; - background-color: @panel-default-heading-bg; - border-bottom: 1px solid @gray-dark; + background-color: @gray-dark; + border-bottom: none; + color: @gray-lighter; span { font-weight: 500; @@ -113,12 +118,13 @@ .close { margin-left: 0.5em; + color: @gray-lighter; } .members { a { font-weight: 600; - color: @gray-dark; + color: @gray-lighter; } } From fa95b2aa4bbe142f1fffbe862dc277db50839508 Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Thu, 18 Jan 2018 10:53:07 -0500 Subject: [PATCH 05/15] adjusted persona chat colours to also apply to chat search box --- less/chats.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/less/chats.less b/less/chats.less index bc57860..b2942a3 100644 --- a/less/chats.less +++ b/less/chats.less @@ -41,10 +41,11 @@ border-bottom: 1px solid @gray-dark; input { - background-color: @panel-default-heading-bg; + background-color: @gray-dark; + color: @gray-lighter; border-radius: 0; border: none; - height: ~"calc(3em - 1px)"; + height: ~"calc(3em - 2px)"; } ul { From 35afe1da1aac2b3d4d65199e61c8566518bd6bbe Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Thu, 18 Jan 2018 11:39:42 -0500 Subject: [PATCH 06/15] Added height to chat list Fixed issue where chat list would cause the entire screen to scroll if there were more that than there was vertical space to display them all. These two lines took me two hours, wtf. --- less/chats.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/less/chats.less b/less/chats.less index b2942a3..d95fbd7 100644 --- a/less/chats.less +++ b/less/chats.less @@ -34,6 +34,8 @@ .chats-list { flex: 1; overflow-y: auto; + margin-bottom: 0; + height: ~"calc(100% - 3em)"; } .chat-search { From 29164c74ad0579e295d9c63cdadf8e466ce46942 Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Thu, 18 Jan 2018 13:28:42 -0500 Subject: [PATCH 07/15] RTL fixes for chat and chat modal, #6192 --- less/chats.less | 5 ----- less/rtl.less | 20 ++++++++++++++++++++ templates/chat.tpl | 6 +++--- templates/partials/chats/message-window.tpl | 6 +++--- 4 files changed, 26 insertions(+), 11 deletions(-) diff --git a/less/chats.less b/less/chats.less index d95fbd7..a841fc3 100644 --- a/less/chats.less +++ b/less/chats.less @@ -132,8 +132,6 @@ } .dropdown { - float: right; - .avatar { margin-right: 0.5em; } @@ -141,8 +139,6 @@ } .modal-header .dropdown { - float: right; - .avatar { margin-right: 0.5em; } @@ -168,7 +164,6 @@ [component="chat/message/remaining"] { position: absolute; - float: right; right: 5.25em; z-index: 2; bottom: 0; diff --git a/less/rtl.less b/less/rtl.less index 911df61..77a2624 100644 --- a/less/rtl.less +++ b/less/rtl.less @@ -59,6 +59,26 @@ html[data-dir="rtl"] { } + [component="chat/composer"] { + [component="chat/message/remaining"] { + right: auto; + left: 5.25em; + } + + [data-action="send"] { + transform: scale(-1, 1); + } + } + + [component="chat/nav-wrapper"] { + box-shadow: -0.5em 0 0.5em @gray-lighter; + } + + .chats-full [component="chat/header"] .dropdown .avatar, .chat-modal [component="chat/header"] .dropdown .avatar { + margin-right: 0; + margin-left: 0.5em; + } + .slideout-menu .chat-list li .teaser-content, .slideout-menu .chat-list li .room-name { padding-right: 60px; } diff --git a/templates/chat.tpl b/templates/chat.tpl index e0cb43c..101a9bb 100644 --- a/templates/chat.tpl +++ b/templates/chat.tpl @@ -6,16 +6,16 @@ -
    +
    -
      +
      • [[modules:chat.in-room]]
      • - +
        {../icon:text}
        {../username}         diff --git a/templates/partials/chats/message-window.tpl b/templates/partials/chats/message-window.tpl index ddd459f..b1ce6bd 100644 --- a/templates/partials/chats/message-window.tpl +++ b/templates/partials/chats/message-window.tpl @@ -3,16 +3,16 @@
        -
        +
        -
          +
          • [[modules:chat.in-room]]
          • - +
            {../icon:text}
            {../username}             From e9012e7e83bc80461f8dfe5b1bb5e6546d94da0f Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Thu, 18 Jan 2018 14:04:54 -0500 Subject: [PATCH 08/15] right-aligned recent chats list, nodebb/nodebb#6192 --- less/rtl.less | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/less/rtl.less b/less/rtl.less index 77a2624..073339f 100644 --- a/less/rtl.less +++ b/less/rtl.less @@ -79,6 +79,25 @@ html[data-dir="rtl"] { 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; } From c6b6d6000589080785a95a31fe9c16911dc38cb6 Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Thu, 18 Jan 2018 14:37:29 -0500 Subject: [PATCH 09/15] changed drop shadow to match bs modal, nodebb/nodebb#6192 --- less/chats.less | 2 +- less/rtl.less | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/less/chats.less b/less/chats.less index a841fc3..4c4520c 100644 --- a/less/chats.less +++ b/less/chats.less @@ -29,7 +29,7 @@ [component="chat/nav-wrapper"] { flex: 1; flex-direction: column; - box-shadow: 0.5em 0 0.5em @gray-lighter; + box-shadow: 0 3px 9px rgba(0,0,0,.5); .chats-list { flex: 1; diff --git a/less/rtl.less b/less/rtl.less index 073339f..92c9ed2 100644 --- a/less/rtl.less +++ b/less/rtl.less @@ -70,10 +70,6 @@ html[data-dir="rtl"] { } } - [component="chat/nav-wrapper"] { - box-shadow: -0.5em 0 0.5em @gray-lighter; - } - .chats-full [component="chat/header"] .dropdown .avatar, .chat-modal [component="chat/header"] .dropdown .avatar { margin-right: 0; margin-left: 0.5em; From 7e3b1a10cf33825cb5f9db85c6fe4c220a938f30 Mon Sep 17 00:00:00 2001 From: psychobunny Date: Mon, 29 Jan 2018 16:43:15 -0500 Subject: [PATCH 10/15] hide topic votes on category view when reputation system is disabled --- templates/partials/topics_list.tpl | 2 ++ 1 file changed, 2 insertions(+) diff --git a/templates/partials/topics_list.tpl b/templates/partials/topics_list.tpl index b7bc56c..14c6c03 100644 --- a/templates/partials/topics_list.tpl +++ b/templates/partials/topics_list.tpl @@ -80,8 +80,10 @@
      • [[user:settings]]
      • [[user:edit]]
        • -
      • [[user:account_info]]
        • @@ -71,7 +70,7 @@
      • -
      • {profile_links.name}
        • +
      • {profile_links.name}
    From 193fb300680892ff8dfcc1d41532d4a8f094ae80 Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Fri, 16 Feb 2018 21:17:51 -0500 Subject: [PATCH 14/15] added button to post history, and added component to edit indicator in posts --- templates/partials/topic/post-menu-list.tpl | 8 ++++++++ templates/partials/topic/post.tpl | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/templates/partials/topic/post-menu-list.tpl b/templates/partials/topic/post-menu-list.tpl index fa53244..5e5c41e 100644 --- a/templates/partials/topic/post-menu-list.tpl +++ b/templates/partials/topic/post-menu-list.tpl @@ -29,6 +29,14 @@ + +
  • + + [[topic:view-history]] + +
    • + +
  • diff --git a/templates/partials/topic/post.tpl b/templates/partials/topic/post.tpl index ede4514..29e64ea 100644 --- a/templates/partials/topic/post.tpl +++ b/templates/partials/topic/post.tpl @@ -25,7 +25,7 @@ - + From b4900447ceedc05a385aff50a44a8ece1c576e96 Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Sat, 17 Feb 2018 12:48:43 -0500 Subject: [PATCH 15/15] added missing modal --- templates/partials/modals/post_history.tpl | 24 ++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 templates/partials/modals/post_history.tpl diff --git a/templates/partials/modals/post_history.tpl b/templates/partials/modals/post_history.tpl new file mode 100644 index 0000000..1f4bb70 --- /dev/null +++ b/templates/partials/modals/post_history.tpl @@ -0,0 +1,24 @@ +

    + + [[topic:diffs.description, {numDiffs}]] + + [[topic:diffs.no-revisions-description, {numDiffs}]] + +

    + +
    + + +
    + +
      +
      + \ No newline at end of file