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

UI style and light/dark theme refinements

develop
Rob Colbert 1 year ago
parent
390b5ee0bb
commit
5419331561
7 changed files with 59 additions and 26 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. 6
      app/views/chat/components/member-list-item.pug
  2. 5
      app/views/chat/room/view.pug
  3. 7
      app/views/link/timeline.pug
  4. 13
      client/css/site/stage.less
  5. 14
      client/css/site/uikit-theme.dtp-dark.less
  6. 23
      client/css/site/uikit-theme.dtp-light.less
  7. 17
      client/js/chat-client.js

6
app/views/chat/components/member-list-item.pug
View File

@ -4,6 +4,7 @@ mixin renderChatMemberListItem (room, member, options)
options = Object.assign({ options = Object.assign({
isHost: false, isHost: false,
isGuest: false, isGuest: false,
audioIndicatorActive: false,
}, options); }, options);
var isRoomOwner = room.owner._id.equals(member._id); 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 a(href=`/member/${member.username}`, uk-tooltip={ title: `Visit ${member.username}`}).uk-link-reset
.member-display-name= member.displayName || member.username .member-display-name= member.displayName || member.username
.member-username @#{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 .uk-width-auto.chat-user-menu
button(type="button").dtp-button-dropdown button(type="button").dtp-button-dropdown
i.fas.fa-ellipsis-v i.fas.fa-ellipsis-v

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

@ -1,6 +1,9 @@
extends ../../layout/main extends ../../layout/main
block vendorcss 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 block view-content
include ../components/message include ../components/message

7
app/views/link/timeline.pug
View File

@ -1,6 +1,9 @@
extends ../layouts/main extends ../layouts/main
block viewcss block vendorcss
link(rel='stylesheet', href=`/highlight.js/styles/obsidian.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 content block content
include ../member/components/status include ../member/components/status

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

@ -154,12 +154,13 @@
border-radius: 4px; border-radius: 4px;
.message-content { .message-content {
line-height: 1.1em;
margin-bottom: 2px; margin-bottom: 2px;
} }
.message-timestamp { .message-timestamp {
border-top: solid 1px @stage-border-color;
font-size: 0.9em; font-size: 0.9em;
line-height: 1em;
color: @chat-message-timestamp-color; color: @chat-message-timestamp-color;
} }
} }
@ -209,12 +210,14 @@
flex-shrink: 0; flex-shrink: 0;
padding: @stage-panel-padding; padding: @stage-panel-padding;
border-top: solid 1px @stage-border-color;
background-color: @chat-input-panel-bgcolor; background-color: @chat-input-panel-bgcolor;
color: @chat-input-panel-color; color: @chat-input-panel-color;
} }
} }
.member-list-entry { .member-list-item {
background-color: transparent; background-color: transparent;
transition: background-color 0.25s; transition: background-color 0.25s;
padding: 5px 2px 2px 0; padding: 5px 2px 2px 0;
@ -222,6 +225,7 @@
& .member-audio-indicator { & .member-audio-indicator {
display: none; display: none;
margin-right: 5px;
} }
&.entry-idle { &.entry-idle {
@ -233,13 +237,16 @@
} }
&.entry-audio-active { &.entry-audio-active {
& .member-audio-indicator { & .member-audio-indicator {
color: #00ff00;
display: block; display: block;
} }
} }
.member-profile-icon { .member-profile-icon {
height: 1em; width: auto;
height: 2em;
margin-right: 5px; margin-right: 5px;
} }
} }

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

@ -130,21 +130,21 @@ a.uk-button.uk-button-default {
@stage-live-member-bgcolor: #1a1a1a; @stage-live-member-bgcolor: #1a1a1a;
@stage-live-member-color: #8a8a8a; @stage-live-member-color: #8a8a8a;
@chat-sidebar-bgcolor: #1a1a1a; @chat-sidebar-bgcolor: #2d404d;
@chat-sidebar-color: #e8e8e8; @chat-sidebar-color: #e8e8e8;
@chat-container-bgcolor: #a8a8a8; @chat-container-bgcolor: #1a1a1a;
@chat-container-color: #1a1a1a; @chat-container-color: #e8e8e8;
@chat-media-bgcolor: #4a4a4a; @chat-media-bgcolor: #4a4a4a;
@chat-media-color: #e8e8e8; @chat-media-color: #e8e8e8;
@chat-message-bgcolor: #e8e8e8; @chat-message-bgcolor: #2a2a2a;
@chat-message-color: #1a1a1a; @chat-message-color: #e8e8e8;
@chat-message-timestamp-color: #808080; @chat-message-timestamp-color: #808080;
@system-message-bgcolor: transparent; @system-message-bgcolor: #3a3a3a;
@system-message-color: #4a4a4a; @system-message-color: #a8a8a8;
@chat-input-panel-bgcolor: #1a1a1a; @chat-input-panel-bgcolor: #1a1a1a;
@chat-input-panel-color: #e8e8e8; @chat-input-panel-color: #e8e8e8;

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

@ -14,7 +14,7 @@
@checkout-button-text-color: #2a2a2a; @checkout-button-text-color: #2a2a2a;
@dtp-dropdown-button-bgcolor: none; @dtp-dropdown-button-bgcolor: none;
@dtp-dropdown-button-color: #1a1a1a; @dtp-dropdown-button-color: #e8e8e8;
@emoji-react-button-active-color: #adc7a0; @emoji-react-button-active-color: #adc7a0;
@ -41,18 +41,19 @@
// Chat Stage // 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-bgcolor: #1a1a1a;
@stage-live-member-color: #8a8a8a; @stage-live-member-color: #8a8a8a;
@chat-sidebar-bgcolor: #a8a8a8; @chat-sidebar-bgcolor: #3f5768;
@chat-sidebar-color: #1a1a1a; @chat-sidebar-color: #e8e8e8;
@chat-container-bgcolor: #a8a8a8; @chat-container-bgcolor: #ffffff;
@chat-container-color: #1a1a1a; @chat-container-color: #2a2a2a;
@chat-media-bgcolor: #4a4a4a; @chat-media-bgcolor: #4a4a4a;
@chat-media-color: #e8e8e8; @chat-media-color: #e8e8e8;
@ -61,8 +62,8 @@
@chat-message-color: #1a1a1a; @chat-message-color: #1a1a1a;
@chat-message-timestamp-color: #a8a8a8; @chat-message-timestamp-color: #a8a8a8;
@system-message-bgcolor: #1a1a1a; @system-message-bgcolor: #686868;
@system-message-color: #a8a8a8; @system-message-color: #c8c8c8;
@chat-input-panel-bgcolor: #a8a8a8; @chat-input-panel-bgcolor: #e8e8e8;
@chat-input-panel-color: #1a1a1a; @chat-input-panel-color: #1a1a1a;

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

@ -291,11 +291,24 @@ export class ChatApp extends DtpApp {
systemMessage.classList.add('system-message'); systemMessage.classList.add('system-message');
systemMessage.classList.add('no-select'); 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'); const chatContent = document.createElement('div');
chatContent.classList.add('message-content'); chatContent.classList.add('message-content');
chatContent.classList.add('uk-text-break'); chatContent.classList.add('uk-text-break');
chatContent.innerHTML = message.content; 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'); const chatTimestamp = document.createElement('div');
chatTimestamp.classList.add('message-timestamp'); 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', message.created);
chatTimestamp.setAttribute('data-dtp-timestamp-format', 'time'); chatTimestamp.setAttribute('data-dtp-timestamp-format', 'time');
chatTimestamp.innerHTML = dayjs(message.created).format('h:mm:ss a'); chatTimestamp.innerHTML = dayjs(message.created).format('h:mm:ss a');
systemMessage.appendChild(chatTimestamp); column.appendChild(chatTimestamp);
this.chat.messageList.appendChild(systemMessage); this.chat.messageList.appendChild(systemMessage);
this.chat.messages.push(systemMessage); this.chat.messages.push(systemMessage);

Write Preview
Loading…
Cancel
Save