diff --git a/app/views/chat/components/member-list-item.pug b/app/views/chat/components/member-list-item.pug index 6f353a6..76c3cdc 100644 --- a/app/views/chat/components/member-list-item.pug +++ b/app/views/chat/components/member-list-item.pug @@ -4,6 +4,7 @@ mixin renderChatMemberListItem (room, member, options) options = Object.assign({ isHost: false, isGuest: false, + audioIndicatorActive: false, }, options); var isRoomOwner = room.owner._id.equals(member._id); @@ -19,6 +20,11 @@ mixin renderChatMemberListItem (room, member, options) a(href=`/member/${member.username}`, uk-tooltip={ title: `Visit ${member.username}`}).uk-link-reset .member-display-name= member.displayName || member.username .member-username @#{member.username} + + .uk-width-auto + div(data-member-id= member._id, class={ 'indicator-active': options.audioIndicatorActive }).member-audio-indicator + i.fas.fa-volume-off + .uk-width-auto.chat-user-menu button(type="button").dtp-button-dropdown i.fas.fa-ellipsis-v diff --git a/app/views/chat/room/view.pug b/app/views/chat/room/view.pug index fea69f6..bb22e64 100644 --- a/app/views/chat/room/view.pug +++ b/app/views/chat/room/view.pug @@ -1,6 +1,9 @@ extends ../../layout/main block vendorcss - link(rel='stylesheet', href=`/highlight.js/styles/qtcreator-light.min.css?v=${pkg.version}`) + if user && (user.ui.theme === 'chat-light') + link(rel='stylesheet', href=`/highlight.js/styles/qtcreator-light.min.css?v=${pkg.version}`) + else + link(rel='stylesheet', href=`/highlight.js/styles/obsidian.min.css?v=${pkg.version}`) block view-content include ../components/message diff --git a/app/views/link/timeline.pug b/app/views/link/timeline.pug index 5afb88e..921cc60 100644 --- a/app/views/link/timeline.pug +++ b/app/views/link/timeline.pug @@ -1,6 +1,9 @@ extends ../layouts/main -block viewcss - link(rel='stylesheet', href=`/highlight.js/styles/obsidian.css?v=${pkg.version}`) +block vendorcss + if user && (user.ui.theme === 'chat-light') + link(rel='stylesheet', href=`/highlight.js/styles/qtcreator-light.min.css?v=${pkg.version}`) + else + link(rel='stylesheet', href=`/highlight.js/styles/obsidian.min.css?v=${pkg.version}`) block content include ../member/components/status diff --git a/client/css/site/stage.less b/client/css/site/stage.less index c9a7229..6ac0435 100644 --- a/client/css/site/stage.less +++ b/client/css/site/stage.less @@ -154,12 +154,13 @@ border-radius: 4px; .message-content { + line-height: 1.1em; margin-bottom: 2px; } .message-timestamp { - border-top: solid 1px @stage-border-color; font-size: 0.9em; + line-height: 1em; color: @chat-message-timestamp-color; } } @@ -209,12 +210,14 @@ flex-shrink: 0; padding: @stage-panel-padding; + border-top: solid 1px @stage-border-color; + background-color: @chat-input-panel-bgcolor; color: @chat-input-panel-color; } } - .member-list-entry { + .member-list-item { background-color: transparent; transition: background-color 0.25s; padding: 5px 2px 2px 0; @@ -222,6 +225,7 @@ & .member-audio-indicator { display: none; + margin-right: 5px; } &.entry-idle { @@ -233,13 +237,16 @@ } &.entry-audio-active { + & .member-audio-indicator { + color: #00ff00; display: block; } } .member-profile-icon { - height: 1em; + width: auto; + height: 2em; margin-right: 5px; } } diff --git a/client/css/site/uikit-theme.dtp-dark.less b/client/css/site/uikit-theme.dtp-dark.less index 2982d3c..cc98512 100644 --- a/client/css/site/uikit-theme.dtp-dark.less +++ b/client/css/site/uikit-theme.dtp-dark.less @@ -130,21 +130,21 @@ a.uk-button.uk-button-default { @stage-live-member-bgcolor: #1a1a1a; @stage-live-member-color: #8a8a8a; -@chat-sidebar-bgcolor: #1a1a1a; +@chat-sidebar-bgcolor: #2d404d; @chat-sidebar-color: #e8e8e8; -@chat-container-bgcolor: #a8a8a8; -@chat-container-color: #1a1a1a; +@chat-container-bgcolor: #1a1a1a; +@chat-container-color: #e8e8e8; @chat-media-bgcolor: #4a4a4a; @chat-media-color: #e8e8e8; -@chat-message-bgcolor: #e8e8e8; -@chat-message-color: #1a1a1a; +@chat-message-bgcolor: #2a2a2a; +@chat-message-color: #e8e8e8; @chat-message-timestamp-color: #808080; -@system-message-bgcolor: transparent; -@system-message-color: #4a4a4a; +@system-message-bgcolor: #3a3a3a; +@system-message-color: #a8a8a8; @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 5b770a8..e3fbb44 100644 --- a/client/css/site/uikit-theme.dtp-light.less +++ b/client/css/site/uikit-theme.dtp-light.less @@ -14,7 +14,7 @@ @checkout-button-text-color: #2a2a2a; @dtp-dropdown-button-bgcolor: none; -@dtp-dropdown-button-color: #1a1a1a; +@dtp-dropdown-button-color: #e8e8e8; @emoji-react-button-active-color: #adc7a0; @@ -41,18 +41,19 @@ // Chat Stage // -@stage-border-color: #8a8a8a; +@stage-border-color: #686868; + +@stage-header-bgcolor: #585858; +@stage-header-color: #e5e6b9; -@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-sidebar-bgcolor: #3f5768; +@chat-sidebar-color: #e8e8e8; -@chat-container-bgcolor: #a8a8a8; -@chat-container-color: #1a1a1a; +@chat-container-bgcolor: #ffffff; +@chat-container-color: #2a2a2a; @chat-media-bgcolor: #4a4a4a; @chat-media-color: #e8e8e8; @@ -61,8 +62,8 @@ @chat-message-color: #1a1a1a; @chat-message-timestamp-color: #a8a8a8; -@system-message-bgcolor: #1a1a1a; -@system-message-color: #a8a8a8; +@system-message-bgcolor: #686868; +@system-message-color: #c8c8c8; -@chat-input-panel-bgcolor: #a8a8a8; +@chat-input-panel-bgcolor: #e8e8e8; @chat-input-panel-color: #1a1a1a; \ No newline at end of file diff --git a/client/js/chat-client.js b/client/js/chat-client.js index 4dbcd3b..228c0a4 100644 --- a/client/js/chat-client.js +++ b/client/js/chat-client.js @@ -291,11 +291,24 @@ export class ChatApp extends DtpApp { systemMessage.classList.add('system-message'); systemMessage.classList.add('no-select'); + const grid = document.createElement('div'); + grid.toggleAttribute('uk-grid', true); + grid.classList.add('uk-grid-small'); + systemMessage.appendChild(grid); + + let column = document.createElement('div'); + column.classList.add('uk-width-expand'); + grid.appendChild(column); + const chatContent = document.createElement('div'); chatContent.classList.add('message-content'); chatContent.classList.add('uk-text-break'); chatContent.innerHTML = message.content; - systemMessage.appendChild(chatContent); + column.appendChild(chatContent); + + column = document.createElement('div'); + column.classList.add('uk-width-expand'); + grid.appendChild(column); const chatTimestamp = document.createElement('div'); chatTimestamp.classList.add('message-timestamp'); @@ -304,7 +317,7 @@ export class ChatApp extends DtpApp { chatTimestamp.setAttribute('data-dtp-timestamp', message.created); chatTimestamp.setAttribute('data-dtp-timestamp-format', 'time'); chatTimestamp.innerHTML = dayjs(message.created).format('h:mm:ss a'); - systemMessage.appendChild(chatTimestamp); + column.appendChild(chatTimestamp); this.chat.messageList.appendChild(systemMessage); this.chat.messages.push(systemMessage);