diff --git a/app/views/chat/room/view.pug b/app/views/chat/room/view.pug index dafba37..fea69f6 100644 --- a/app/views/chat/room/view.pug +++ b/app/views/chat/room/view.pug @@ -54,30 +54,32 @@ block view-content .chat-stage-header Idle Members .sidebar-panel - .uk-text-italic.uk-text-muted There are no idle members. + .uk-text-italic There are no idle members. ul(id="chat-idle-members", data-room-id= room._id, hidden).uk-list.uk-list-collapse .chat-container - .chat-stage-header - div(uk-grid).uk-grid-small - .uk-width-expand - .uk-text-truncate= room.name - if room.owner._id.equals(user._id) - .uk-width-auto - a(href=`/chat/room/${room._id}/settings`, uk-tooltip={ title: 'Configure room settings' }).uk-link-reset - i.fas.fa-cog - .uk-width-auto - a(href="/", uk-tooltip={ title: 'Leave room' }).uk-link-reset - i.fas.fa-person-through-window - .chat-content-panel - .live-content + .chat-content-panel.uk-height-1-1 + + .live-content.uk-height-1-1 + .chat-stage-header + div(uk-grid).uk-grid-small + .uk-width-expand + .uk-text-truncate= room.name + if room.owner._id.equals(user._id) + .uk-width-auto + a(href=`/chat/room/${room._id}/settings`, uk-tooltip={ title: 'Configure room settings' }).uk-link-reset + i.fas.fa-cog + .uk-width-auto + a(href="/", uk-tooltip={ title: 'Leave room' }).uk-link-reset + i.fas.fa-person-through-window + .chat-media div(uk-grid).uk-flex-center div(class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@l uk-width-1-4@xl") +renderLiveMember(user) - div(id="chat-message-list").chat-messages + div(id="chat-message-list").chat-messages.uk-height-1-1 - var testMessage = { created: new Date(), @@ -88,23 +90,23 @@ block view-content each message of messages +renderChatMessage(message) - .chat-input-panel - form( - method="POST", - action=`/chat/room/${room._id}/message`, - id="chat-input-form", - data-room-id= room._id, - onsubmit="return window.dtp.app.sendUserChat(event);", - hidden= user && user.flags && user.flags.isCloaked, - enctype="multipart/form-data" - ).uk-form - textarea(id="chat-input-text", name="content", rows=2).uk-textarea.uk-resize-none.uk-border-rounded - .uk-margin-small - .uk-flex - .uk-width-expand - .uk-width-auto - button(id="chat-send-btn", type="submit", uk-tooltip={ title: 'Send message' }).uk-button.uk-button-primary.uk-button-small.uk-border-rounded.uk-light - i.fas.fa-paper-plane + .chat-input-panel + form( + method="POST", + action=`/chat/room/${room._id}/message`, + id="chat-input-form", + data-room-id= room._id, + onsubmit="return window.dtp.app.sendUserChat(event);", + hidden= user && user.flags && user.flags.isCloaked, + enctype="multipart/form-data" + ).uk-form + textarea(id="chat-input-text", name="content", rows=2).uk-textarea.uk-resize-none.uk-border-rounded + .uk-margin-small + .uk-flex + .uk-width-expand + .uk-width-auto + button(id="chat-send-btn", type="submit", uk-tooltip={ title: 'Send message' }).uk-button.uk-button-primary.uk-button-small.uk-border-rounded.uk-light + i.fas.fa-paper-plane block viewjs script. diff --git a/client/css/site/button.less b/client/css/site/button.less index 13fad7a..0f31565 100644 --- a/client/css/site/button.less +++ b/client/css/site/button.less @@ -15,9 +15,9 @@ button.dtp-button-dropdown { /* * The actual "style" of the thing */ - background: none; + background: @dtp-dropdown-button-bgcolor; + color: @dtp-dropdown-button-color; border: none; outline: none; - color: #e8e8e8; cursor: pointer; } \ No newline at end of file diff --git a/client/css/site/stage.less b/client/css/site/stage.less index 358ecd7..c9a7229 100644 --- a/client/css/site/stage.less +++ b/client/css/site/stage.less @@ -1,6 +1,3 @@ -@stage-panel-padding: 5px; -@stage-border-color: #4a4a4a; - .dtp-chat-stage { position: fixed; top: 0; right: 0; bottom: 0; left: 0; @@ -15,8 +12,8 @@ font-size: 0.9em; - background-color: #2a2a2a; - color: #e8e8e8; + background-color: @stage-header-bgcolor; + color: @stage-header-color; } .chat-sidebar { @@ -25,8 +22,8 @@ flex-shrink: 0; flex-grow: 0; - background-color: #1a1a1a; - color: #e8e8e8; + background-color: @chat-sidebar-bgcolor; + color: @chat-sidebar-color; border-right: solid 1px @stage-border-color; @@ -61,36 +58,57 @@ display: flex; flex-grow: 1; flex-direction: column; + height: 100%; + overflow: none; - background-color: #a8a8a8; - color: #1a1a1a; + background-color: @chat-container-bgcolor; + color: @chat-container-color; .chat-content-panel { box-sizing: border-box; display: flex; + flex-direction: column; flex: 1; .live-content { + box-sizing: border-box; display: flex; + flex-direction: column; flex: 1; + &.with-media { + + & .chat-media { + display: block; + } + + .chat-messages { + flex-grow: 0; + flex-shrink: 0; + width: 400px; + } + } + .chat-media { box-sizing: border-box; + display: none; flex-grow: 1; padding: @stage-panel-padding; - - background-color: #4a4a4a; overflow-y: auto; + background-color: @chat-media-bgcolor; + color: @chat-media-color; + .stage-live-member { padding: 4px 4px 0 4px; - border: solid 1px #8a8a8a; + border: solid 1px @stage-live-member-color; border-radius: 4px; - background-color: #1a1a1a; + background-color: @stage-live-member-bgcolor; + color: @stage-live-member-color; video { display: block; @@ -103,7 +121,7 @@ } .live-meta { - color: #a8a8a8; + color: @stage-live-member-color; .live-username { color: inherit; @@ -115,12 +133,8 @@ .chat-messages { box-sizing: border-box; - flex-grow: 0; - flex-shrink: 0; - - width: 400px; + flex-grow: 1; padding: @stage-panel-padding; - overflow-y: scroll; .chat-message { @@ -130,13 +144,13 @@ line-height: 1; border-radius: 4px; - background-color: #e8e8e8; - color: #1a1a1a; + background-color: @chat-message-bgcolor; + color: @chat-message-color; &.system-message { font-size: 0.8em; - background-color: transparent; - color: #4a4a4a; + background-color: @system-message-bgcolor; + color: @system-message-color; border-radius: 4px; .message-content { @@ -144,9 +158,9 @@ } .message-timestamp { - border-top: solid 1px #4a4a4a; + border-top: solid 1px @stage-border-color; font-size: 0.9em; - color: #808080; + color: @chat-message-timestamp-color; } } @@ -171,7 +185,7 @@ p { line-height: 1.1em; margin-bottom: 10px; - color: #2a2a2a; + color: @chat-message-color; } pre { @@ -195,8 +209,8 @@ flex-shrink: 0; padding: @stage-panel-padding; - background-color: #1a1a1a; - color: #e8e8e8; + background-color: @chat-input-panel-bgcolor; + color: @chat-input-panel-color; } } diff --git a/client/css/site/uikit-theme.dtp-dark.less b/client/css/site/uikit-theme.dtp-dark.less index d58894e..2982d3c 100644 --- a/client/css/site/uikit-theme.dtp-dark.less +++ b/client/css/site/uikit-theme.dtp-dark.less @@ -70,6 +70,9 @@ a.uk-button.uk-button-default { color: @global-color; } +@dtp-dropdown-button-bgcolor: none; +@dtp-dropdown-button-color: #e8e8e8; + // // Component: Navbar // @@ -114,4 +117,34 @@ a.uk-button.uk-button-default { .uk-select:disabled, .uk-textarea:disabled { color: @inverse-global-muted-color; -} \ No newline at end of file +} + +// +// Chat Stage +// + +@stage-border-color: #4a4a4a; + +@stage-header-bgcolor: #2a2a2a; +@stage-header-color: #e8e8e8; +@stage-live-member-bgcolor: #1a1a1a; +@stage-live-member-color: #8a8a8a; + +@chat-sidebar-bgcolor: #1a1a1a; +@chat-sidebar-color: #e8e8e8; + +@chat-container-bgcolor: #a8a8a8; +@chat-container-color: #1a1a1a; + +@chat-media-bgcolor: #4a4a4a; +@chat-media-color: #e8e8e8; + +@chat-message-bgcolor: #e8e8e8; +@chat-message-color: #1a1a1a; +@chat-message-timestamp-color: #808080; + +@system-message-bgcolor: transparent; +@system-message-color: #4a4a4a; + +@chat-input-panel-bgcolor: #1a1a1a; +@chat-input-panel-color: #e8e8e8; \ No newline at end of file diff --git a/client/css/site/uikit-theme.dtp-light.less b/client/css/site/uikit-theme.dtp-light.less index 95fb141..5b770a8 100644 --- a/client/css/site/uikit-theme.dtp-light.less +++ b/client/css/site/uikit-theme.dtp-light.less @@ -13,6 +13,9 @@ @social-link-color: #2a2a2a; @checkout-button-text-color: #2a2a2a; +@dtp-dropdown-button-bgcolor: none; +@dtp-dropdown-button-color: #1a1a1a; + @emoji-react-button-active-color: #adc7a0; @scrollbar-border-color: @content-border-color; @@ -32,4 +35,34 @@ // @internal-form-datalist-image: "/uikit/images/backgrounds/form-datalist.svg"; // @internal-form-radio-image: "/uikit/images/backgrounds/form-radio.svg"; // @internal-form-checkbox-image: "/uikit/images/backgrounds/form-checkbox.svg"; -// @internal-form-checkbox-indeterminate-image: "/uikit/images/backgrounds/form-checkbox-indeterminate.svg"; \ No newline at end of file +// @internal-form-checkbox-indeterminate-image: "/uikit/images/backgrounds/form-checkbox-indeterminate.svg"; + +// +// Chat Stage +// + +@stage-border-color: #8a8a8a; + +@stage-header-bgcolor: #2a2a2a; +@stage-header-color: #e8e8e8; +@stage-live-member-bgcolor: #1a1a1a; +@stage-live-member-color: #8a8a8a; + +@chat-sidebar-bgcolor: #a8a8a8; +@chat-sidebar-color: #1a1a1a; + +@chat-container-bgcolor: #a8a8a8; +@chat-container-color: #1a1a1a; + +@chat-media-bgcolor: #4a4a4a; +@chat-media-color: #e8e8e8; + +@chat-message-bgcolor: #e8e8e8; +@chat-message-color: #1a1a1a; +@chat-message-timestamp-color: #a8a8a8; + +@system-message-bgcolor: #1a1a1a; +@system-message-color: #a8a8a8; + +@chat-input-panel-bgcolor: #a8a8a8; +@chat-input-panel-color: #1a1a1a; \ No newline at end of file diff --git a/client/css/site/variables.less b/client/css/site/variables.less index 62ad349..128d783 100644 --- a/client/css/site/variables.less +++ b/client/css/site/variables.less @@ -1,2 +1,5 @@ @brand-color-gab: #00d178; -@site-navbar-height: 64px; \ No newline at end of file + +@site-navbar-height: 64px; + +@stage-panel-padding: 5px; \ No newline at end of file diff --git a/client/js/chat-client.js b/client/js/chat-client.js index 4e9a045..4dbcd3b 100644 --- a/client/js/chat-client.js +++ b/client/js/chat-client.js @@ -233,9 +233,11 @@ export class ChatApp extends DtpApp { } async onChatMessage (message) { + const isAtBottom = this.chat.isAtBottom; this.log.info('onChatMessage', 'chat message received', { message }); this.chat.messageList.insertAdjacentHTML('beforeend', message.html); this.audio.playSound(ChatApp.SFX_CHAT_MESSAGE); + this.scrollChatToBottom(isAtBottom); } async onChatControl (message) {