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

Chat UI progress

pull/2/head
Rob Colbert 3 years ago
parent
3283c24c32
commit
61c96a2cc2
7 changed files with 212 additions and 195 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. 51
      app/views/chat/index.pug
  2. 13
      app/views/chat/layouts/room.pug
  3. 54
      app/views/chat/room-editor.pug
  4. 12
      app/views/chat/view.pug
  5. 2
      client/less/site/button.less
  6. 121
      client/less/site/chat.less
  7. 14
      client/less/site/main.less

51
app/views/chat/index.pug
View File

@ -1,54 +1,5 @@
extends layouts/room extends layouts/room
block content block content
form(method="POST", action="/chat").uk-form h1 Chat Home
.uk-card.uk-card-default.uk-card-small
.uk-card-header
h1.uk-card-title Create Chat Room
.uk-card-body
.uk-margin
label(for="name").uk-form-label Room name
input(id="name", name="name", type="text", placeholder="Enter room name").uk-input
.uk-margin
label(for="description").uk-form-label Room description
textarea(id="description", name="description", rows="2", placeholder="Enter room description").uk-textarea
.uk-margin
label(for="policy").uk-form-label Room policy
textarea(id="policy", name="policy", rows="2", placeholder="Enter room use policy").uk-textarea
.uk-margin
div(uk-grid)
.uk-width-auto
fieldset
legend Room Visibility
div(uk-grid).uk-grid-small.uk-flex-middle
.uk-width-auto
label
input(id="is-public", name="visibility", type="radio", value="public", checked).uk-radio
| Public
.ui-width-auto
label
input(id="is-private", name="visibility", type="radio", value="private").uk-radio
| Private
.uk-width-auto
fieldset
legend Membership Policy
div(uk-grid).uk-grid-small.uk-flex-middle
.uk-width-auto
label
input(id="membership-open", name="policy", type="radio", value="open", checked).uk-radio
| Open
.uk-width-auto
label
input(id="membership-closed", name="policy", type="radio", value="closed").uk-radio
| Closed
.uk-card-footer
div(uk-grid)
.uk-width-expand
+renderBackButton()
.uk-width-auto
button(type="submit").uk-button.uk-button-primary.uk-border-rounded Create room

13
app/views/chat/layouts/room.pug
View File

@ -1,4 +1,5 @@
extends ../../layouts/main extends ../../layouts/main
block page-footer
block content-container block content-container
mixin renderRoomList (rooms) mixin renderRoomList (rooms)
@ -6,11 +7,9 @@ block content-container
li.uk-active li.uk-active
a(href=`/chat/${room._id}`)= room.name a(href=`/chat/${room._id}`)= room.name
section.site-chat-section
section.uk-section.uk-section-default.uk-section-small div(uk-grid).uk-height-1-1
.uk-container.uk-container-expand div(class="uk-width-1-1 uk-width-1-5@l uk-flex-last uk-flex-first@l")
div(uk-grid)
div(class="uk-width-1-1 uk-width-1-5@l uk-flex-first@l").uk-flex-last
.content-block.uk-border-rounded.uk-margin .content-block.uk-border-rounded.uk-margin
if Array.isArray(ownedChatRooms) && (ownedChatRooms.length > 0) if Array.isArray(ownedChatRooms) && (ownedChatRooms.length > 0)
ul#room-list.uk-nav.uk-nav-default ul#room-list.uk-nav.uk-nav-default
@ -27,8 +26,8 @@ block content-container
else else
div You haven't joined any chat rooms. div You haven't joined any chat rooms.
div(class="uk-width-1-1 uk-width-expand@l") div(class="uk-width-1-1 uk-width-expand@l").uk-height-1-1
#chat-room #chat-room.uk-height-1-1
block content block content
div(class="uk-width-1-1 uk-width-1-5@l") div(class="uk-width-1-1 uk-width-1-5@l")

54
app/views/chat/room-editor.pug
View File

@ -0,0 +1,54 @@
extends layouts/room
block content
form(method="POST", action="/chat").uk-form
.uk-card.uk-card-default.uk-card-small
.uk-card-header
h1.uk-card-title Create Chat Room
.uk-card-body
.uk-margin
label(for="name").uk-form-label Room name
input(id="name", name="name", type="text", placeholder="Enter room name").uk-input
.uk-margin
label(for="description").uk-form-label Room description
textarea(id="description", name="description", rows="2", placeholder="Enter room description").uk-textarea
.uk-margin
label(for="policy").uk-form-label Room policy
textarea(id="policy", name="policy", rows="2", placeholder="Enter room use policy").uk-textarea
.uk-margin
div(uk-grid)
.uk-width-auto
fieldset
legend Room Visibility
div(uk-grid).uk-grid-small.uk-flex-middle
.uk-width-auto
label
input(id="is-public", name="visibility", type="radio", value="public", checked).uk-radio
| Public
.ui-width-auto
label
input(id="is-private", name="visibility", type="radio", value="private").uk-radio
| Private
.uk-width-auto
fieldset
legend Membership Policy
div(uk-grid).uk-grid-small.uk-flex-middle
.uk-width-auto
label
input(id="membership-open", name="policy", type="radio", value="open", checked).uk-radio
| Open
.uk-width-auto
label
input(id="membership-closed", name="policy", type="radio", value="closed").uk-radio
| Closed
.uk-card-footer
div(uk-grid)
.uk-width-expand
+renderBackButton()
.uk-width-auto
button(type="submit").uk-button.uk-button-primary.uk-border-rounded Create room

12
app/views/chat/view.pug
View File

@ -4,8 +4,7 @@ block content
include components/input-form include components/input-form
include components/message include components/message
.uk-card.uk-card-default.uk-card-small #site-chat-container.uk-flex.uk-flex-column.uk-height-1-1
.uk-card-header
div(uk-grid).uk-flex-middle.chat-menubar div(uk-grid).uk-flex-middle.chat-menubar
div(uk-tooltip="Room details").uk-width-expand div(uk-tooltip="Room details").uk-width-expand
h1.uk-card-title.uk-margin-remove= room.name h1.uk-card-title.uk-margin-remove= room.name
@ -27,10 +26,11 @@ block content
type="button", type="button",
data-room-id= room._id, data-room-id= room._id,
onclick="return dtp.app.chat.leaveRoom(event);", onclick="return dtp.app.chat.leaveRoom(event);",
).uk-button.uk-button-small.uk-border-pill.uk-text-bold ).uk-button.dtp-button-default.uk-button-small.uk-border-pill.uk-text-bold
span span
i.fas.fa-user i.fas.fa-sign-out-alt
span.uk-margin-small-left Leave Room span.uk-margin-small-left Leave Room
.uk-width-auto .uk-width-auto
.uk-inline .uk-inline
button(type="button").uk-button.uk-button-link.uk-button-small button(type="button").uk-button.uk-button-link.uk-button-small
@ -42,8 +42,6 @@ block content
li li
a(href=`/chat/${room._id}/pop-out`, target="_blank") Pop-Out Chat a(href=`/chat/${room._id}/pop-out`, target="_blank") Pop-Out Chat
.uk-card-body
#site-chat-container.uk-flex.uk-flex-column
#chat-message-list-wrapper #chat-message-list-wrapper
#chat-reactions #chat-reactions
#chat-message-list #chat-message-list
@ -53,5 +51,5 @@ block content
.chat-message-menu .chat-message-menu
button(type="button", onclick="return dtp.app.chat.resumeChatScroll(event);").chat-scroll-return Resume scrolling button(type="button", onclick="return dtp.app.chat.resumeChatScroll(event);").chat-scroll-return Resume scrolling
.uk-card-footer div
+renderChatInputForm(room) +renderChatInputForm(room)

2
client/less/site/button.less
View File

@ -101,7 +101,7 @@ button.uk-button.dtp-button-default {
background: none; background: none;
outline: none; outline: none;
border: solid 2px rgb(75, 75, 75); border: solid 2px rgb(75, 75, 75);
color: #c8c8c8; color: @button-label-color;
transition: background-color 0.2s; transition: background-color 0.2s;

121
client/less/site/chat.less
View File

@ -1,8 +1,14 @@
.site-chat-section {
height: calc(100% - @navbar-nav-item-height);
}
#site-chat-container { #site-chat-container {
align-self: stretch; align-self: stretch;
overflow: scroll;
.chat-menubar { .chat-menubar {
padding: 4px 16px; padding: 10px @grid-small-gutter-horizontal;
border-bottom: solid 1px @content-border-color;
} }
#chat-input-form { #chat-input-form {
@ -44,14 +50,12 @@
} }
#chat-message-list { #chat-message-list {
position: relative; position: absolute;
display: flex; top: 0; right: 0; bottom: 0; left: 0;
flex-direction: column; width: 100%;
height: 100%;
height: 410px;
resize: vertical;
overflow: auto; overflow: auto;
box-shadow: var(--dtp-chat-shadow); box-shadow: var(--dtp-chat-shadow);
scroll-behavior: auto; scroll-behavior: auto;
@ -62,6 +66,55 @@
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
.chat-message { .chat-message {
color: var(--dtp-chat-color);
background: var(--dtp-chat-background);
border-radius: 8px;
font-size: var(--dtp-chat-font-size);
margin: 5px @grid-small-gutter-horizontal;
&.system-message {
background: rgba(255,255,255, 0.1);
}
.chat-username {
font-weight: bold;
font-size: var(--dtp-chat-font-size);
line-height: 1;
color: var(--dtp-chat-username-color);
}
img.chat-author-image {
width: auto;
height: 2em;
border-radius: 4px;
}
.chat-content {
line-height: 1.2em;
font-size: var(--dtp-chat-font-size);
color: inherit;
overflow-wrap: break-word;
p:last-child {
margin-bottom: 0;
}
}
.chat-timestamp {
color: var(--dtp-chat-timestamp-color);
}
.chat-sticker {
display: inline-block;
margin-top: 4px;
margin-right: 8px;
color: inherit;
video {
width: auto;
height: 100px;
}
}
.chat-user-menu { .chat-user-menu {
@ -172,58 +225,6 @@ body[data-obs-widget="chat"] {
} }
} }
.chat-message {
color: var(--dtp-chat-color);
background: var(--dtp-chat-background);
border-radius: 8px;
font-size: var(--dtp-chat-font-size);
margin-bottom: 5px;
&.system-message {
background: rgba(255,255,255, 0.1);
}
.chat-username {
font-weight: bold;
font-size: var(--dtp-chat-font-size);
line-height: 1;
color: var(--dtp-chat-username-color);
}
img.chat-author-image {
width: auto;
height: 2em;
border-radius: 4px;
}
.chat-content {
line-height: 1.2em;
font-size: var(--dtp-chat-font-size);
color: inherit;
overflow-wrap: break-word;
p:last-child {
margin-bottom: 0;
}
}
.chat-timestamp {
color: var(--dtp-chat-timestamp-color);
}
.chat-sticker {
display: inline-block;
margin-top: 4px;
margin-right: 8px;
color: inherit;
video {
width: auto;
height: 100px;
}
}
}
body[data-obs-widget="chat"] { body[data-obs-widget="chat"] {
.chat-message { .chat-message {

14
client/less/site/main.less
View File

@ -7,6 +7,20 @@ html, body {
body { body {
padding-top: @site-navbar-height; padding-top: @site-navbar-height;
&[data-current-view="chat"] {
position: fixed;
top: @navbar-nav-item-height; right: 0; bottom: 0; left: 0;
display: flex;
flex-direction: column;
justify-content: top;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
&[data-current-view="oauth2-authorize-dialog"], &[data-current-view="oauth2-authorize-dialog"],
&[data-current-view="welcome"] { &[data-current-view="welcome"] {
position: fixed; position: fixed;

Write Preview
Loading…
Cancel
Save