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

Fix bug: Added simple emoji list

Browse Source
This commit is contained in:
Michael H. Arieli 2018-12-02 17:13:09 -08:00
parent d016f4742f
commit 235067c72e
8 changed files with 93 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,6 +29,11 @@ export default class Input extends React.PureComponent {
this.submit()
}
}
handleSmileClick = e => {
this.setState({
message: this.textArea.value + e.currentTarget.innerHTML
})
}
submit = () => {
const { videos, notify, sendMessage } = this.props
const { message } = this.state
@ -72,11 +77,31 @@ export default class Input extends React.PureComponent {
onKeyPress={this.handleKeyPress}
placeholder="Type a message"
value={message}
ref={node => { this.textArea = node }}
/>
<div className="chat-controls-buttons">
<input type="submit" value="Send"
className="chat-controls-buttons-send" />
<div className="chat-controls-buttons-wrapper" />
<div className="chat-controls-buttons-wrapper">
<div className="emoji">
<div className="chat-controls-buttons-smiles">
<span className="icon icon-sentiment_satisfied" />
<div className="chat-controls-buttons-smiles-menu">
<div className="chat-controls-buttons-smile"
onClick={this.handleSmileClick}>😑</div>
<div className="chat-controls-buttons-smile"
onClick={this.handleSmileClick}>😕</div>
<div className="chat-controls-buttons-smile"
onClick={this.handleSmileClick}>😊</div>
<div className="chat-controls-buttons-smile"
onClick={this.handleSmileClick}>😎</div>
<div className="chat-controls-buttons-smile"
onClick={this.handleSmileClick}>💪</div>
</div>
</div>
</div>
</div>
</div>
</form>
)

8
src/client/components/__tests__/Input-test.js
View File

@ -63,6 +63,14 @@ describe('components/Input', () => {
})
})
describe('handleSmileClick', () => {
it('adds smile to message', () => {
const div = node.querySelector('.chat-controls-buttons-smile')
TestUtils.Simulate.click(div)
expect(input.value).toBe('test message😑')
})
})
})
})

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

Binary file not shown.

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

@ -16,6 +16,9 @@
<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="&#xe813;" glyph-name="sentiment_satisfied" d="M512 171.333c64 0 118 34 148 84h70c-34-88-118-148-218-148s-184 60-218 148h70c30-50 84-84 148-84zM512-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 426zM298 447.333c0 36 28 64 64 64s64-28 64-64-28-64-64-64-64 28-64 64zM598 447.333c0 36 28 64 64 64s64-28 64-64-28-64-64-64-64 28-64 64z" />
<glyph unicode="&#xe87c;" glyph-name="face" d="M512-0.667c188 0 342 154 342 342 0 34-6 66-14 96-30-8-62-10-96-10-144 0-270 70-348 180-42-102-124-186-224-230-2-12-2-24-2-36 0-188 154-342 342-342zM512 767.333c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426zM640 351.333c30 0 54-22 54-52s-24-54-54-54-54 24-54 54 24 52 54 52zM384 351.333c30 0 54-22 54-52s-24-54-54-54-54 24-54 54 24 52 54 52z" />
<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="&#xe8b4;" glyph-name="room" d="M512 363.333c58 0 106 48 106 106s-48 106-106 106-106-48-106-106 48-106 106-106zM512 767.333c166 0 298-132 298-298 0-224-298-554-298-554s-298 330-298 554c0 166 132 298 298 298z" />
<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: 3.1 KiB

After

Width:  |  Height:  |  Size: 4.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.

46
src/scss/_chat.scss
View File

@ -123,7 +123,7 @@
color: #000;
}
.icon-schedule:before {
.icon:before {
color: #999;
font-size: 11px;
margin: 0 2px;
@ -213,10 +213,6 @@
display: flex;
justify-content: space-between;
.chat-controls-buttons-wrapper {
display: flex;
}
.chat-controls-buttons-send {
padding: 0 15px;
background: #407cf7;
@ -232,5 +228,45 @@
outline: none;
}
}
.chat-controls-buttons-wrapper {
display: flex;
}
}
}
.emoji {
display: flex;
.chat-controls-buttons-smiles {
cursor: pointer;
display: flex;
align-items: center;
position: relative;
.icon {
color: #777;
z-index: 1;
}
.chat-controls-buttons-smiles-menu {
background-color: #fff;
display: none;
position: absolute;
width: 140px;
height: 50px;
line-height: 50px;
.chat-controls-buttons-smile {
margin-left: 5px;
}
}
&:hover {
.chat-controls-buttons-smiles-menu {
display: flex;
right: 10px;
}
}
}
}

21
src/scss/_fonts.scss
View File

@ -1,10 +1,10 @@
@font-face {
font-family: 'icons';
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');
src: url('../res/fonts/icons.eot?tcgv6b');
src: url('../res/fonts/icons.eot?tcgv6b#iefix') format('embedded-opentype'),
url('../res/fonts/icons.woff?tcgv6b') format('woff'),
url('../res/fonts/icons.ttf?tcgv6b') format('truetype'),
url('../res/fonts/icons.svg?tcgv6b#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?sd4p99#icons') format('svg');
// src: url('./fonts/icons.svg?tcgv6b#icons') format('svg');
// }
// }
@ -56,6 +56,9 @@
.icon-call_end:before {
content: "\e0b1";
}
.icon-face:before {
content: "\e87c";
}
.icon-question_answer:before {
content: "\e8af";
}
@ -65,6 +68,9 @@
.icon-fullscreen_exit:before {
content: "\e5d1";
}
.icon-room:before {
content: "\e8b4";
}
.icon-mic:before {
content: "\e029";
}
@ -74,6 +80,9 @@
.icon-more_vert:before {
content: "\e5d4";
}
.icon-sentiment_satisfied:before {
content: "\e813";
}
.icon-videocam:before {
content: "\e04b";
}