digital-telepresence
/
dtp-base
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

light & dark mode work (LESS)

develop
Rob Colbert 1 year ago
parent
6cadd9c3a6
commit
a2685ae53f
7 changed files with 152 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 66
      app/views/chat/room/view.pug
  2. 4
      client/css/site/button.less
  3. 70
      client/css/site/stage.less
  4. 33
      client/css/site/uikit-theme.dtp-dark.less
  5. 33
      client/css/site/uikit-theme.dtp-light.less
  6. 3
      client/css/site/variables.less
  7. 2
      client/js/chat-client.js

66
app/views/chat/room/view.pug
View File

@ -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.

4
client/css/site/button.less
View File

@ -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;
}

70
client/css/site/stage.less
View File

@ -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;
}
}

33
client/css/site/uikit-theme.dtp-dark.less
View File

@ -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
//
@ -115,3 +118,33 @@ a.uk-button.uk-button-default {
.uk-textarea:disabled {
color: @inverse-global-muted-color;
}
//
// 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;

33
client/css/site/uikit-theme.dtp-light.less
View File

@ -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;
@ -33,3 +36,33 @@
// @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";
//
// 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;

3
client/css/site/variables.less
View File

@ -1,2 +1,5 @@
@brand-color-gab: #00d178;
@site-navbar-height: 64px;
@stage-panel-padding: 5px;

2
client/js/chat-client.js
View File

@ -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) {

Write Preview
Loading…
Cancel
Save