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
Unified 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 .chat-stage-header Idle Members
.sidebar-panel .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 ul(id="chat-idle-members", data-room-id= room._id, hidden).uk-list.uk-list-collapse
.chat-container .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 .chat-content-panel.uk-height-1-1
.live-content
.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 .chat-media
div(uk-grid).uk-flex-center 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") div(class="uk-width-1-1 uk-width-1-2@m uk-width-1-3@l uk-width-1-4@xl")
+renderLiveMember(user) +renderLiveMember(user)
div(id="chat-message-list").chat-messages div(id="chat-message-list").chat-messages.uk-height-1-1
- -
var testMessage = { var testMessage = {
created: new Date(), created: new Date(),
@ -88,23 +90,23 @@ block view-content
each message of messages each message of messages
+renderChatMessage(message) +renderChatMessage(message)
.chat-input-panel .chat-input-panel
form( form(
method="POST", method="POST",
action=`/chat/room/${room._id}/message`, action=`/chat/room/${room._id}/message`,
id="chat-input-form", id="chat-input-form",
data-room-id= room._id, data-room-id= room._id,
onsubmit="return window.dtp.app.sendUserChat(event);", onsubmit="return window.dtp.app.sendUserChat(event);",
hidden= user && user.flags && user.flags.isCloaked, hidden= user && user.flags && user.flags.isCloaked,
enctype="multipart/form-data" enctype="multipart/form-data"
).uk-form ).uk-form
textarea(id="chat-input-text", name="content", rows=2).uk-textarea.uk-resize-none.uk-border-rounded textarea(id="chat-input-text", name="content", rows=2).uk-textarea.uk-resize-none.uk-border-rounded
.uk-margin-small .uk-margin-small
.uk-flex .uk-flex
.uk-width-expand .uk-width-expand
.uk-width-auto .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 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 i.fas.fa-paper-plane
block viewjs block viewjs
script. script.

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

@ -15,9 +15,9 @@ button.dtp-button-dropdown {
/* /*
* The actual "style" of the thing * The actual "style" of the thing
*/ */
background: none; background: @dtp-dropdown-button-bgcolor;
color: @dtp-dropdown-button-color;
border: none; border: none;
outline: none; outline: none;
color: #e8e8e8;
cursor: pointer; 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 { .dtp-chat-stage {
position: fixed; position: fixed;
top: 0; right: 0; bottom: 0; left: 0; top: 0; right: 0; bottom: 0; left: 0;
@ -15,8 +12,8 @@
font-size: 0.9em; font-size: 0.9em;
background-color: #2a2a2a; background-color: @stage-header-bgcolor;
color: #e8e8e8; color: @stage-header-color;
} }
.chat-sidebar { .chat-sidebar {
@ -25,8 +22,8 @@
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
background-color: #1a1a1a; background-color: @chat-sidebar-bgcolor;
color: #e8e8e8; color: @chat-sidebar-color;
border-right: solid 1px @stage-border-color; border-right: solid 1px @stage-border-color;
@ -61,36 +58,57 @@
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
flex-direction: column; flex-direction: column;
height: 100%;
overflow: none;
background-color: #a8a8a8; background-color: @chat-container-bgcolor;
color: #1a1a1a; color: @chat-container-color;
.chat-content-panel { .chat-content-panel {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column;
flex: 1; flex: 1;
.live-content { .live-content {
box-sizing: border-box;
display: flex; display: flex;
flex-direction: column;
flex: 1; flex: 1;
&.with-media {
& .chat-media {
display: block;
}
.chat-messages {
flex-grow: 0;
flex-shrink: 0;
width: 400px;
}
}
.chat-media { .chat-media {
box-sizing: border-box; box-sizing: border-box;
display: none;
flex-grow: 1; flex-grow: 1;
padding: @stage-panel-padding; padding: @stage-panel-padding;
background-color: #4a4a4a;
overflow-y: auto; overflow-y: auto;
background-color: @chat-media-bgcolor;
color: @chat-media-color;
.stage-live-member { .stage-live-member {
padding: 4px 4px 0 4px; padding: 4px 4px 0 4px;
border: solid 1px #8a8a8a; border: solid 1px @stage-live-member-color;
border-radius: 4px; border-radius: 4px;
background-color: #1a1a1a; background-color: @stage-live-member-bgcolor;
color: @stage-live-member-color;
video { video {
display: block; display: block;
@ -103,7 +121,7 @@
} }
.live-meta { .live-meta {
color: #a8a8a8; color: @stage-live-member-color;
.live-username { .live-username {
color: inherit; color: inherit;
@ -115,12 +133,8 @@
.chat-messages { .chat-messages {
box-sizing: border-box; box-sizing: border-box;
flex-grow: 0; flex-grow: 1;
flex-shrink: 0;
width: 400px;
padding: @stage-panel-padding; padding: @stage-panel-padding;
overflow-y: scroll; overflow-y: scroll;
.chat-message { .chat-message {
@ -130,13 +144,13 @@
line-height: 1; line-height: 1;
border-radius: 4px; border-radius: 4px;
background-color: #e8e8e8; background-color: @chat-message-bgcolor;
color: #1a1a1a; color: @chat-message-color;
&.system-message { &.system-message {
font-size: 0.8em; font-size: 0.8em;
background-color: transparent; background-color: @system-message-bgcolor;
color: #4a4a4a; color: @system-message-color;
border-radius: 4px; border-radius: 4px;
.message-content { .message-content {
@ -144,9 +158,9 @@
} }
.message-timestamp { .message-timestamp {
border-top: solid 1px #4a4a4a; border-top: solid 1px @stage-border-color;
font-size: 0.9em; font-size: 0.9em;
color: #808080; color: @chat-message-timestamp-color;
} }
} }
@ -171,7 +185,7 @@
p { p {
line-height: 1.1em; line-height: 1.1em;
margin-bottom: 10px; margin-bottom: 10px;
color: #2a2a2a; color: @chat-message-color;
} }
pre { pre {
@ -195,8 +209,8 @@
flex-shrink: 0; flex-shrink: 0;
padding: @stage-panel-padding; padding: @stage-panel-padding;
background-color: #1a1a1a; background-color: @chat-input-panel-bgcolor;
color: #e8e8e8; 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; color: @global-color;
} }
@dtp-dropdown-button-bgcolor: none;
@dtp-dropdown-button-color: #e8e8e8;
// //
// Component: Navbar // Component: Navbar
// //
@ -115,3 +118,33 @@ a.uk-button.uk-button-default {
.uk-textarea:disabled { .uk-textarea:disabled {
color: @inverse-global-muted-color; 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; @social-link-color: #2a2a2a;
@checkout-button-text-color: #2a2a2a; @checkout-button-text-color: #2a2a2a;
@dtp-dropdown-button-bgcolor: none;
@dtp-dropdown-button-color: #1a1a1a;
@emoji-react-button-active-color: #adc7a0; @emoji-react-button-active-color: #adc7a0;
@scrollbar-border-color: @content-border-color; @scrollbar-border-color: @content-border-color;
@ -33,3 +36,33 @@
// @internal-form-radio-image: "/uikit/images/backgrounds/form-radio.svg"; // @internal-form-radio-image: "/uikit/images/backgrounds/form-radio.svg";
// @internal-form-checkbox-image: "/uikit/images/backgrounds/form-checkbox.svg"; // @internal-form-checkbox-image: "/uikit/images/backgrounds/form-checkbox.svg";
// @internal-form-checkbox-indeterminate-image: "/uikit/images/backgrounds/form-checkbox-indeterminate.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; @brand-color-gab: #00d178;
@site-navbar-height: 64px; @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) { async onChatMessage (message) {
const isAtBottom = this.chat.isAtBottom;
this.log.info('onChatMessage', 'chat message received', { message }); this.log.info('onChatMessage', 'chat message received', { message });
this.chat.messageList.insertAdjacentHTML('beforeend', message.html); this.chat.messageList.insertAdjacentHTML('beforeend', message.html);
this.audio.playSound(ChatApp.SFX_CHAT_MESSAGE); this.audio.playSound(ChatApp.SFX_CHAT_MESSAGE);
this.scrollChatToBottom(isAtBottom);
} }
async onChatControl (message) { async onChatControl (message) {

Write Preview
Loading…
Cancel
Save