rondomoon/peer-calls
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Changed chat look and feel

Browse Source
This commit is contained in:
Michael H. Arieli 2018-12-02 16:30:13 -08:00
parent b91a1f2f81
commit d016f4742f
9 changed files with 220 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/client/components/App.js
View File

@ -3,7 +3,6 @@ import * as constants from '../constants.js'
import Toolbar from './Toolbar.js'
import Notifications, { NotificationPropTypes } from './Notifications.js'
import Chat, { MessagePropTypes } from './Chat.js'
import Input from './Input.js'
import PropTypes from 'prop-types'
import React from 'react'
import Video, { StreamPropType } from './Video.js'
@ -59,12 +58,13 @@ export default class App extends React.PureComponent {
/>
<Alerts alerts={alerts} dismiss={dismissAlert} />
<Notifications notifications={notifications} />
<div id="chat" ref={node => { this.chatRef = node }}>
<Chat toolbarRef={this.toolbarRef} messages={messages} />
<Input
<div className="chat-container" ref={node => { this.chatRef = node }}>
<Chat
messages={messages}
videos={videos}
notify={notify}
sendMessage={sendMessage}
toolbarRef={this.toolbarRef}
/>
</div>
<div className="videos">

62
src/client/components/Chat.js
View File

@ -1,5 +1,7 @@
import PropTypes from 'prop-types'
import React from 'react'
import socket from '../socket.js'
import Input from './Input.js'
export const MessagePropTypes = PropTypes.shape({
userId: PropTypes.string.isRequired,
@ -10,8 +12,11 @@ export const MessagePropTypes = PropTypes.shape({
export default class Chat extends React.PureComponent {
static propTypes = {
toolbarRef: PropTypes.object.isRequired,
messages: PropTypes.arrayOf(MessagePropTypes).isRequired
messages: PropTypes.arrayOf(MessagePropTypes).isRequired,
videos: PropTypes.object.isRequired,
notify: PropTypes.func.isRequired,
sendMessage: PropTypes.func.isRequired,
toolbarRef: PropTypes.object.isRequired
}
handleCloseChat = e => {
const { toolbarRef } = this.props
@ -27,7 +32,7 @@ export default class Chat extends React.PureComponent {
this.scrollToBottom()
}
render () {
const { messages } = this.props
const { messages, videos, notify, sendMessage } = this.props
return (
<div>
<div className="chat-header">
@ -38,29 +43,36 @@ export default class Chat extends React.PureComponent {
</div>
<div className="chat-title">Chat</div>
</div>
<div className="chat-content" ref={div => { this.chatScroll = div }}>
<div className="chat-history" ref={div => { this.chatScroll = div }}>
{messages.length ? (
messages.map((message, i) => (
<div key={i} className="chat-item">
<div className="chat-item-label" />
<div className="chat-item-icon">
<div className="profile-image-component
profile-image-component-circle">
{message.image ? (
<div className="profile-image-component-image">
<img src={message.image} />
</div>
) : (
<div className="profile-image-component-initials">
{message.userId.substr(0, 2).toUpperCase()}
</div>
)}
<div key={i}>
{message.userId === socket.id ? (
<div className="chat-item chat-item-me">
<div className="message">
<span className="message-user-name">
{message.userId}
</span>
<span className="icon icon-schedule" />
<time className="message-time">{message.timestamp}</time>
<p className="message-text">{message.message}</p>
</div>
<img className="chat-item-img" src={message.image} />
</div>
</div>
<div className="chat-item-content">
{message.message}
</div>
) : (
<div className="chat-item chat-item-other">
<img className="chat-item-img" src={message.image} />
<div className="message">
<span className="message-user-name">
{message.userId}
</span>
<span className="icon icon-schedule" />
<time className="message-time">{message.timestamp}</time>
<p className="message-text">{message.message}</p>
</div>
</div>
)}
</div>
))
) : (
@ -71,6 +83,12 @@ export default class Chat extends React.PureComponent {
)}
</div>
<Input
videos={videos}
notify={notify}
sendMessage={sendMessage}
/>
</div>
)
}

21
src/client/components/Input.js
View File

@ -37,7 +37,11 @@ export default class Input extends React.PureComponent {
sendMessage(message)
const userId = socket.id
const timestamp = new Date()
const timestamp = new Date().toLocaleString('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: false
})
let image = null
// take snapshoot
@ -61,18 +65,19 @@ export default class Input extends React.PureComponent {
render () {
const { message } = this.state
return (
<form className="chat-footer" onSubmit={this.handleSubmit}>
<form className="chat-controls" onSubmit={this.handleSubmit}>
<textarea
className="input"
className="chat-controls-textarea"
onChange={this.handleChange}
onKeyPress={this.handleKeyPress}
placeholder="Enter your message..."
type="text"
placeholder="Type a message"
value={message}
/>
<button type="submit" className="send">
<span className="icon icon-send" />
</button>
<div className="chat-controls-buttons">
<input type="submit" value="Send"
className="chat-controls-buttons-send" />
<div className="chat-controls-buttons-wrapper" />
</div>
</form>
)
}

BIN
src/res/fonts/icons.eot
View File

Binary file not shown.

2
src/res/fonts/icons.svg
View File

@ -12,10 +12,10 @@
<glyph unicode="&#xe04b;" glyph-name="videocam" d="M726 405.333l170 170v-468l-170 170v-150c0-24-20-42-44-42h-512c-24 0-42 18-42 42v428c0 24 18 42 42 42h512c24 0 44-18 44-42v-150z" />
<glyph unicode="&#xe04c;" glyph-name="videocam_off" d="M140 767.333l756-756-54-54-136 136c-6-4-16-8-24-8h-512c-24 0-42 18-42 42v428c0 24 18 42 42 42h32l-116 116zM896 575.333v-456l-478 478h264c24 0 44-18 44-42v-150z" />
<glyph unicode="&#xe0b1;" glyph-name="call_end" d="M512 469.333c-68 0-134-10-196-30v-132c0-16-10-34-24-40-42-20-80-46-114-78-8-8-18-12-30-12s-22 4-30 12l-106 106c-8 8-12 18-12 30s4 22 12 30c130 124 306 200 500 200s370-76 500-200c8-8 12-18 12-30s-4-22-12-30l-106-106c-8-8-18-12-30-12s-22 4-30 12c-34 32-72 58-114 78-14 6-24 20-24 38v132c-62 20-128 32-196 32z" />
<glyph unicode="&#xe163;" glyph-name="send" d="M86-42.667v298l640 86-640 86v298l896-384z" />
<glyph unicode="&#xe5c8;" glyph-name="arrow_forward" d="M512 683.333l342-342-342-342-60 60 238 240h-520v84h520l-238 240z" />
<glyph unicode="&#xe5d0;" glyph-name="fullscreen" d="M598 639.333h212v-212h-84v128h-128v84zM726 127.333v128h84v-212h-212v84h128zM214 427.333v212h212v-84h-128v-128h-84zM298 255.333v-128h128v-84h-212v212h84z" />
<glyph unicode="&#xe5d1;" glyph-name="fullscreen_exit" d="M682 511.333h128v-84h-212v212h84v-128zM598 43.333v212h212v-84h-128v-128h-84zM342 511.333v128h84v-212h-212v84h128zM214 171.333v84h212v-212h-84v128h-128z" />
<glyph unicode="&#xe5d4;" glyph-name="more_vert" d="M512 171.333c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 427.333c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 511.333c-46 0-86 40-86 86s40 86 86 86 86-40 86-86-40-86-86-86z" />
<glyph unicode="&#xe8af;" glyph-name="question_answer" d="M726 341.333c0-24-20-42-44-42h-426l-170-172v598c0 24 18 42 42 42h554c24 0 44-18 44-42v-384zM896 597.333c24 0 42-18 42-42v-640l-170 170h-470c-24 0-42 18-42 42v86h554v384h86z" />
<glyph unicode="&#xe8b5;" glyph-name="schedule" d="M534 555.333v-224l192-114-32-54-224 136v256h64zM512-0.667c188 0 342 154 342 342s-154 342-342 342-342-154-342-342 154-342 342-342zM512 767.333c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
</font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/res/fonts/icons.ttf
View File

Binary file not shown.

BIN
src/res/fonts/icons.woff
View File

Binary file not shown.

341
src/scss/_chat.scss
View File

@ -1,4 +1,4 @@
#chat {
.chat-container {
position: fixed;
top: 0;
bottom: 0;
@ -8,7 +8,8 @@
transform: translateX(100%);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0, 0, 1), box-shadow 0.5s cubic-bezier(0.55, 0, 0, 1);
transition: transform 0.5s cubic-bezier(0.55, 0, 0, 1), box-shadow 0.5s cubic-bezier(0.55, 0, 0, 1);
width: 360px;
width: 320px;
margin: 0 auto;
z-index: 3;
&.show {
@ -18,18 +19,18 @@
box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.19), 0 1px 6px rgba(0, 0, 0, 0.12);
}
@media (max-width: 575.98px) {
@media (max-width: 375.98px) {
&.show {
width: 100% !important;
}
}
}
.chat-header {
background-color: #333;
color: #fff;
height: 52px;
line-height: 52px;
}
.chat-header {
background: #42a7a1;
color: #fff;
height: 52px;
line-height: 52px;
.chat-close {
font-size: 24px;
@ -40,37 +41,38 @@
float: left;
width: 64px;
cursor: pointer;
}
.chat-button {
float: right;
a {
font-size: 24px;
color: #fff;
.chat-button {
float: right;
a {
font-size: 24px;
color: #fff;
}
}
}
.chat-title {
font-size: 18px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
color: #fff;
text-overflow: ellipsis;
text-transform: uppercase;
}
}
.chat-content {
background-color: #f2f2f2;
bottom: 0;
left: 0;
overflow-y: auto;
position: absolute;
right: 0;
top: 52px;
bottom: 52px;
}
.chat-history {
bottom: 0;
left: 0;
overflow-y: auto;
position: absolute;
right: 0;
top: 52px;
bottom: 130px;
padding: 20px 20px 0;
background-color: #fff;
.chat-empty {
color: #999;
color: #f6f6f6;
left: 0;
position: absolute;
right: 0;
@ -91,181 +93,144 @@
}
.chat-item {
background-color: #fff;
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
line-height: 20px;
min-height: 80px;
padding: 15px 15px 15px 80px;
position: relative;
border-top: 1px solid #e9e9e9;
display: flex;
align-items: flex-start;
margin-bottom: 15px;
.chat-item-label {
display: none;
.chat-item-img {
width: 36px;
height: 36px;
border-radius: 50%;
background: #75b1e8;
}
.chat-item-icon {
height: 50px;
left: 15px;
position: absolute;
top: 15px;
width: 50px;
.message {
position: relative;
padding: 10px;
border-radius: 5px;
background: #f6f6f6;
width: calc(100% - 40px);
div {
font-size: 13px;
color: #777;
word-wrap: break-word;
}
.message-user-name {
font-size: 12px;
font-weight: bold;
color: #000;
}
.icon-schedule:before {
color: #999;
font-size: 11px;
margin: 0 2px;
}
.message-time {
font-size: 11px;
color: #999;
}
.message-text {
font-size: 13px;
color: #777;
overflow: hidden;
white-space: pre-wrap;
word-wrap: break-word;
margin: 5px 0;
}
}
.chat-item-content {
color: #363636;
font-size: 13px;
font-weight: 400;
overflow: hidden;
white-space: pre-wrap;
word-wrap: break-word;
&.chat-item-me {
.message {
margin-right: 15px;
> {
a, span a {
color: #363636;
font-weight: 700;
text-decoration: none;
&::after {
left: 100%;
border: solid transparent;
border-left-color: #f6f6f6;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-width: 10px;
top: 10px;
}
}
}
&.is-clickable {
&.chat-item-other {
.message {
margin-left: 15px;
&::before {
right: 100%;
border: solid transparent;
border-right-color: #f6f6f6;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-width: 10px;
top: 10px;
}
}
}
}
}
.chat-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-top: 10px;
background-color: #fff;
border-top: 1px solid #f6f6f6;
padding: 20px;
.chat-controls-textarea {
width: 100%;
border: none;
border-radius: 5px;
resize: none;
outline: none;
max-height: 80px;
height: 50px;
overflow: auto;
color: #777;
word-wrap: break-word;
overflow-wrap: break-word;
}
.chat-controls-buttons {
margin-top: 15px;
display: flex;
justify-content: space-between;
.chat-controls-buttons-wrapper {
display: flex;
}
.chat-controls-buttons-send {
padding: 0 15px;
background: #407cf7;
line-height: 25px;
display: inline-block;
color: #fff;
text-decoration: none;
border-radius: 3px;
border: 0;
cursor: pointer;
&:hover {
background-color: #ebf2fe;
}
}
&.is-labeled {
border-top: none;
margin-top: 40px;
.chat-item-label {
color: #888;
display: block;
font-size: 13px;
font-weight: 700;
left: 0;
line-height: 20px;
padding: 10px;
position: absolute;
top: -40px;
}
}
}
.chat-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 52px;
background: #fff;
box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
border-top: 1px solid #e9e9e9;
.input {
height: 52px;
background: #fff;
border: none;
width: calc(100% - 52px);
position: absolute;
left: 0;
top: 0;
padding: 10px;
resize: none;
overflow: scroll;
font-weight: 300;
&:focus {
outline: none;
}
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
//gotta hide windows scrollbars
&::-webkit-scrollbar {
width: 0 !important
}
}
.send {
position: absolute;
height: 32px;
width: 32px;
border-radius: 50%;
border: 0;
background: #000;
color: #fff;
bottom: 8px;
right: 8px;
padding: 0 6px;
.icon {
font-size: 24px;
}
&:focus {
outline: none;
}
&:hover {
cursor: pointer;
}
}
}
}
.profile-image-component {
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
background-color: #ccc;
color: #fff;
position: relative;
font-size: 0;
line-height: 0;
.profile-image-component-icon, .profile-image-component-initials {
left: 0;
position: absolute;
right: 0;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.profile-image-component-icon {
font-size: 22px;
font-weight: 400;
}
.profile-image-component-initials {
font-size: 16px;
font-weight: 500;
vertical-align: middle;
}
.profile-image-component-image {
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
> img {
height: 100%;
}
}
&.profile-image-component-circle {
border-radius: 50%;
.profile-image-component-image {
border-radius: 50%;
}
}
}

18
src/scss/_fonts.scss
View File

@ -1,10 +1,10 @@
@font-face {
font-family: 'icons';
src: url('../res/fonts/icons.eot?ij9tsv');
src: url('../res/fonts/icons.eot?ij9tsv#iefix') format('embedded-opentype'),
url('../res/fonts/icons.woff?ij9tsv') format('woff'),
url('../res/fonts/icons.ttf?ij9tsv') format('truetype'),
url('../res/fonts/icons.svg?ij9tsv#icons') format('svg');
src: url('../res/fonts/icons.eot?sd4p99');
src: url('../res/fonts/icons.eot?sd4p99#iefix') format('embedded-opentype'),
url('../res/fonts/icons.woff?sd4p99') format('woff'),
url('../res/fonts/icons.ttf?sd4p99') format('truetype'),
url('../res/fonts/icons.svg?sd4p99#icons') format('svg');
font-weight: normal;
font-style: normal;
}
@ -14,7 +14,7 @@
// @media screen and (-webkit-min-device-pixel-ratio:0) {
// @font-face {
// font-family: 'icons';
// src: url('./fonts/icons.svg?ij9tsv#icons') format('svg');
// src: url('./fonts/icons.svg?sd4p99#icons') format('svg');
// }
// }
@ -47,6 +47,9 @@
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-schedule:before {
content: "\e8b5";
}
.icon-arrow_forward:before {
content: "\e5c8";
}
@ -71,9 +74,6 @@
.icon-more_vert:before {
content: "\e5d4";
}
.icon-send:before {
content: "\e163";
}
.icon-videocam:before {
content: "\e04b";
}