From 61c96a2cc2ad096974e5795c9c95632f5122c2de Mon Sep 17 00:00:00 2001 From: rob Date: Sun, 31 Jul 2022 14:16:09 -0400 Subject: [PATCH] Chat UI progress --- app/views/chat/index.pug | 53 +------------- app/views/chat/layouts/room.pug | 67 +++++++++--------- app/views/chat/room-editor.pug | 54 ++++++++++++++ app/views/chat/view.pug | 96 +++++++++++++------------ client/less/site/button.less | 2 +- client/less/site/chat.less | 121 ++++++++++++++++---------------- client/less/site/main.less | 14 ++++ 7 files changed, 212 insertions(+), 195 deletions(-) create mode 100644 app/views/chat/room-editor.pug diff --git a/app/views/chat/index.pug b/app/views/chat/index.pug index 92d63a6..82f7e82 100644 --- a/app/views/chat/index.pug +++ b/app/views/chat/index.pug @@ -1,54 +1,5 @@ extends layouts/room block content - form(method="POST", action="/chat").uk-form - .uk-card.uk-card-default.uk-card-small - .uk-card-header - h1.uk-card-title Create Chat Room - .uk-card-body - .uk-margin - label(for="name").uk-form-label Room name - input(id="name", name="name", type="text", placeholder="Enter room name").uk-input - - .uk-margin - label(for="description").uk-form-label Room description - textarea(id="description", name="description", rows="2", placeholder="Enter room description").uk-textarea - - .uk-margin - label(for="policy").uk-form-label Room policy - textarea(id="policy", name="policy", rows="2", placeholder="Enter room use policy").uk-textarea - - .uk-margin - div(uk-grid) - .uk-width-auto - fieldset - legend Room Visibility - div(uk-grid).uk-grid-small.uk-flex-middle - .uk-width-auto - label - input(id="is-public", name="visibility", type="radio", value="public", checked).uk-radio - | Public - .ui-width-auto - label - input(id="is-private", name="visibility", type="radio", value="private").uk-radio - | Private - - .uk-width-auto - fieldset - legend Membership Policy - div(uk-grid).uk-grid-small.uk-flex-middle - .uk-width-auto - label - input(id="membership-open", name="policy", type="radio", value="open", checked).uk-radio - | Open - .uk-width-auto - label - input(id="membership-closed", name="policy", type="radio", value="closed").uk-radio - | Closed - - .uk-card-footer - div(uk-grid) - .uk-width-expand - +renderBackButton() - .uk-width-auto - button(type="submit").uk-button.uk-button-primary.uk-border-rounded Create room \ No newline at end of file + h1 Chat Home + \ No newline at end of file diff --git a/app/views/chat/layouts/room.pug b/app/views/chat/layouts/room.pug index 23eacc6..1cb9945 100644 --- a/app/views/chat/layouts/room.pug +++ b/app/views/chat/layouts/room.pug @@ -1,4 +1,5 @@ extends ../../layouts/main +block page-footer block content-container mixin renderRoomList (rooms) @@ -6,44 +7,42 @@ block content-container li.uk-active a(href=`/chat/${room._id}`)= room.name + section.site-chat-section + div(uk-grid).uk-height-1-1 + div(class="uk-width-1-1 uk-width-1-5@l uk-flex-last uk-flex-first@l") + .content-block.uk-border-rounded.uk-margin + if Array.isArray(ownedChatRooms) && (ownedChatRooms.length > 0) + ul#room-list.uk-nav.uk-nav-default + li.uk-nav-header Your Rooms + +renderRoomList(ownedChatRooms) + else + div You don't own any chat rooms. - section.uk-section.uk-section-default.uk-section-small - .uk-container.uk-container-expand - div(uk-grid) - div(class="uk-width-1-1 uk-width-1-5@l uk-flex-first@l").uk-flex-last - .content-block.uk-border-rounded.uk-margin - if Array.isArray(ownedChatRooms) && (ownedChatRooms.length > 0) - ul#room-list.uk-nav.uk-nav-default - li.uk-nav-header Your Rooms - +renderRoomList(ownedChatRooms) - else - div You don't own any chat rooms. - - .content-block.uk-border-rounded - if Array.isArray(joinedChatRooms) && (joinedChatRooms.length > 0) - ul#room-list.uk-nav.uk-nav-default - li.uk-nav-header Joined Rooms - +renderRoomList(ownedChatRooms) - else - div You haven't joined any chat rooms. + .content-block.uk-border-rounded + if Array.isArray(joinedChatRooms) && (joinedChatRooms.length > 0) + ul#room-list.uk-nav.uk-nav-default + li.uk-nav-header Joined Rooms + +renderRoomList(ownedChatRooms) + else + div You haven't joined any chat rooms. - div(class="uk-width-1-1 uk-width-expand@l") - #chat-room - block content + div(class="uk-width-1-1 uk-width-expand@l").uk-height-1-1 + #chat-room.uk-height-1-1 + block content - div(class="uk-width-1-1 uk-width-1-5@l") - .content-block.uk-border-rounded - if chatRoom - if Array.isArray(chatRoom.members) && (chatRoom.members.length > 0) - ul#room-member-list.uk-nav.uk-nav-default - li.uk-nav-header Room Members - each member in chatRoom.members - li - a(href="")= member.displayName || member.username - else - div The room has no members + div(class="uk-width-1-1 uk-width-1-5@l") + .content-block.uk-border-rounded + if chatRoom + if Array.isArray(chatRoom.members) && (chatRoom.members.length > 0) + ul#room-member-list.uk-nav.uk-nav-default + li.uk-nav-header Room Members + each member in chatRoom.members + li + a(href="")= member.displayName || member.username else - div Not in a room + div The room has no members + else + div Not in a room block viewjs script. diff --git a/app/views/chat/room-editor.pug b/app/views/chat/room-editor.pug new file mode 100644 index 0000000..92d63a6 --- /dev/null +++ b/app/views/chat/room-editor.pug @@ -0,0 +1,54 @@ +extends layouts/room +block content + + form(method="POST", action="/chat").uk-form + .uk-card.uk-card-default.uk-card-small + .uk-card-header + h1.uk-card-title Create Chat Room + .uk-card-body + .uk-margin + label(for="name").uk-form-label Room name + input(id="name", name="name", type="text", placeholder="Enter room name").uk-input + + .uk-margin + label(for="description").uk-form-label Room description + textarea(id="description", name="description", rows="2", placeholder="Enter room description").uk-textarea + + .uk-margin + label(for="policy").uk-form-label Room policy + textarea(id="policy", name="policy", rows="2", placeholder="Enter room use policy").uk-textarea + + .uk-margin + div(uk-grid) + .uk-width-auto + fieldset + legend Room Visibility + div(uk-grid).uk-grid-small.uk-flex-middle + .uk-width-auto + label + input(id="is-public", name="visibility", type="radio", value="public", checked).uk-radio + | Public + .ui-width-auto + label + input(id="is-private", name="visibility", type="radio", value="private").uk-radio + | Private + + .uk-width-auto + fieldset + legend Membership Policy + div(uk-grid).uk-grid-small.uk-flex-middle + .uk-width-auto + label + input(id="membership-open", name="policy", type="radio", value="open", checked).uk-radio + | Open + .uk-width-auto + label + input(id="membership-closed", name="policy", type="radio", value="closed").uk-radio + | Closed + + .uk-card-footer + div(uk-grid) + .uk-width-expand + +renderBackButton() + .uk-width-auto + button(type="submit").uk-button.uk-button-primary.uk-border-rounded Create room \ No newline at end of file diff --git a/app/views/chat/view.pug b/app/views/chat/view.pug index 9268f33..73bbfa1 100644 --- a/app/views/chat/view.pug +++ b/app/views/chat/view.pug @@ -4,54 +4,52 @@ block content include components/input-form include components/message - .uk-card.uk-card-default.uk-card-small - .uk-card-header - div(uk-grid).uk-flex-middle.chat-menubar - div(uk-tooltip="Room details").uk-width-expand - h1.uk-card-title.uk-margin-remove= room.name - div= room.description - - div(uk-tooltip="Active Members").uk-width-auto.no-select + #site-chat-container.uk-flex.uk-flex-column.uk-height-1-1 + div(uk-grid).uk-flex-middle.chat-menubar + div(uk-tooltip="Room details").uk-width-expand + h1.uk-card-title.uk-margin-remove= room.name + div= room.description + + div(uk-tooltip="Active Members").uk-width-auto.no-select + span + i.fas.fa-user + span(data-room-id= room._id).uk-margin-small-left.active-member-count= numeral(room.members.length).format('0,0') + + div(uk-tooltip="Total Members", class="uk-hidden@m").uk-width-auto.no-select + span + i.fas.fa-user + span.uk-margin-small-left= formatCount(room.members.length) + + + .uk-width-auto + button( + type="button", + data-room-id= room._id, + onclick="return dtp.app.chat.leaveRoom(event);", + ).uk-button.dtp-button-default.uk-button-small.uk-border-pill.uk-text-bold span - i.fas.fa-user - span(data-room-id= room._id).uk-margin-small-left.active-member-count= numeral(room.members.length).format('0,0') - - div(uk-tooltip="Total Members", class="uk-hidden@m").uk-width-auto.no-select - span - i.fas.fa-user - span.uk-margin-small-left= formatCount(room.members.length) - - - .uk-width-auto - button( - type="button", - data-room-id= room._id, - onclick="return dtp.app.chat.leaveRoom(event);", - ).uk-button.uk-button-small.uk-border-pill.uk-text-bold - span - i.fas.fa-user - span.uk-margin-small-left Leave Room - .uk-width-auto - .uk-inline - button(type="button").uk-button.uk-button-link.uk-button-small - i.fas.fa-ellipsis-h - div(uk-dropdown={ pos: 'bottom-right', mode: 'click' }) - ul.uk-nav.uk-dropdown-nav - li.uk-nav-heading= room.name - li.uk-nav-divider - li - a(href=`/chat/${room._id}/pop-out`, target="_blank") Pop-Out Chat - - .uk-card-body - #site-chat-container.uk-flex.uk-flex-column - #chat-message-list-wrapper - #chat-reactions - #chat-message-list - each message in chatMessages || [ ] - +renderChatMessage(message) - - .chat-message-menu - button(type="button", onclick="return dtp.app.chat.resumeChatScroll(event);").chat-scroll-return Resume scrolling - - .uk-card-footer + i.fas.fa-sign-out-alt + span.uk-margin-small-left Leave Room + + .uk-width-auto + .uk-inline + button(type="button").uk-button.uk-button-link.uk-button-small + i.fas.fa-ellipsis-h + div(uk-dropdown={ pos: 'bottom-right', mode: 'click' }) + ul.uk-nav.uk-dropdown-nav + li.uk-nav-heading= room.name + li.uk-nav-divider + li + a(href=`/chat/${room._id}/pop-out`, target="_blank") Pop-Out Chat + + #chat-message-list-wrapper + #chat-reactions + #chat-message-list + each message in chatMessages || [ ] + +renderChatMessage(message) + + .chat-message-menu + button(type="button", onclick="return dtp.app.chat.resumeChatScroll(event);").chat-scroll-return Resume scrolling + + div +renderChatInputForm(room) \ No newline at end of file diff --git a/client/less/site/button.less b/client/less/site/button.less index 99c6eac..803bc65 100644 --- a/client/less/site/button.less +++ b/client/less/site/button.less @@ -101,7 +101,7 @@ button.uk-button.dtp-button-default { background: none; outline: none; border: solid 2px rgb(75, 75, 75); - color: #c8c8c8; + color: @button-label-color; transition: background-color 0.2s; diff --git a/client/less/site/chat.less b/client/less/site/chat.less index 0771e68..1928942 100644 --- a/client/less/site/chat.less +++ b/client/less/site/chat.less @@ -1,8 +1,14 @@ +.site-chat-section { + height: calc(100% - @navbar-nav-item-height); +} + #site-chat-container { align-self: stretch; + overflow: scroll; .chat-menubar { - padding: 4px 16px; + padding: 10px @grid-small-gutter-horizontal; + border-bottom: solid 1px @content-border-color; } #chat-input-form { @@ -44,14 +50,12 @@ } #chat-message-list { - position: relative; - display: flex; - flex-direction: column; - - height: 410px; - resize: vertical; - + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + width: 100%; + height: 100%; overflow: auto; + box-shadow: var(--dtp-chat-shadow); scroll-behavior: auto; @@ -62,6 +66,55 @@ scrollbar-width: none; /* Firefox */ .chat-message { + color: var(--dtp-chat-color); + background: var(--dtp-chat-background); + border-radius: 8px; + font-size: var(--dtp-chat-font-size); + margin: 5px @grid-small-gutter-horizontal; + + &.system-message { + background: rgba(255,255,255, 0.1); + } + + .chat-username { + font-weight: bold; + font-size: var(--dtp-chat-font-size); + line-height: 1; + color: var(--dtp-chat-username-color); + } + + img.chat-author-image { + width: auto; + height: 2em; + border-radius: 4px; + } + + .chat-content { + line-height: 1.2em; + font-size: var(--dtp-chat-font-size); + color: inherit; + overflow-wrap: break-word; + + p:last-child { + margin-bottom: 0; + } + } + + .chat-timestamp { + color: var(--dtp-chat-timestamp-color); + } + + .chat-sticker { + display: inline-block; + margin-top: 4px; + margin-right: 8px; + color: inherit; + + video { + width: auto; + height: 100px; + } + } .chat-user-menu { @@ -172,58 +225,6 @@ body[data-obs-widget="chat"] { } } -.chat-message { - color: var(--dtp-chat-color); - background: var(--dtp-chat-background); - border-radius: 8px; - font-size: var(--dtp-chat-font-size); - margin-bottom: 5px; - - &.system-message { - background: rgba(255,255,255, 0.1); - } - - .chat-username { - font-weight: bold; - font-size: var(--dtp-chat-font-size); - line-height: 1; - color: var(--dtp-chat-username-color); - } - - img.chat-author-image { - width: auto; - height: 2em; - border-radius: 4px; - } - - .chat-content { - line-height: 1.2em; - font-size: var(--dtp-chat-font-size); - color: inherit; - overflow-wrap: break-word; - - p:last-child { - margin-bottom: 0; - } - } - - .chat-timestamp { - color: var(--dtp-chat-timestamp-color); - } - - .chat-sticker { - display: inline-block; - margin-top: 4px; - margin-right: 8px; - color: inherit; - - video { - width: auto; - height: 100px; - } - } -} - body[data-obs-widget="chat"] { .chat-message { diff --git a/client/less/site/main.less b/client/less/site/main.less index 2942785..f2a7ad4 100644 --- a/client/less/site/main.less +++ b/client/less/site/main.less @@ -7,6 +7,20 @@ html, body { body { padding-top: @site-navbar-height; + &[data-current-view="chat"] { + position: fixed; + top: @navbar-nav-item-height; right: 0; bottom: 0; left: 0; + + display: flex; + flex-direction: column; + justify-content: top; + + padding: 0; + margin: 0; + width: 100%; + height: 100%; + } + &[data-current-view="oauth2-authorize-dialog"], &[data-current-view="welcome"] { position: fixed;