Skip to content

Commit

Permalink
small change - arrow indicator
Browse files Browse the repository at this point in the history
idoco committed Jan 25, 2017
1 parent c5724f0 commit 4ba24a8
Showing 3 changed files with 35 additions and 2 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@
"scripts": {
"start": "node server.js",
"postinstall": "npm run build",
"dev": "node devServer.js",
"dev": "start http://localhost:3000/demo.html & node devServer.js",
"build": "shx mkdir -p dist && shx cp *.html dist && shx cp -r ./media dist && shx cp -r ./css dist && webpack -p",
"test": "npm run -s lint",
"lint": "eslint src",
26 changes: 26 additions & 0 deletions src/widget/arrow-icon.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { h, Component } from 'preact';

export default class ArrowIcon extends Component {

render({isOpened},{}) {
return (
<div style={{margin: 4}}>
{ isOpened ?
// keyboard arrow down
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg">
<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
<path d="M0-.75h24v24H0z" fill="none"/>
</svg>

:
// keyboard arrow up
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg">
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg> }
</div>
);
}
}
9 changes: 8 additions & 1 deletion src/widget/widget.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { h, Component } from 'preact';
import ChatFrame from './chat-frame';
import ArrowIcon from './arrow-icon';

const wrapperStyle = {
position: 'fixed',
@@ -16,6 +17,8 @@ const titleStyle = {
height: '30px',
lineHeight: '30px',
fontSize: '20px',
display: 'flex',
justifyContent: 'space-between',
paddingLeft: '10px',
fontFamily: 'Lato, sans-serif',
background: 'rgba(82,179,217,0.9)',
@@ -38,7 +41,11 @@ export default class Widget extends Component {

{/*Title*/}
<div style={titleStyle} onClick={this.onClick}>
{!state.isChatOpen ? "Click to chat!" : "Let's chat!"}
<div>
{!state.isChatOpen ? "Click to chat!" : "Let's chat!"}
</div>

<ArrowIcon isOpened={state.isChatOpen}/>
</div>

{/*Chat IFrame*/}

0 comments on commit 4ba24a8

Please sign in to comment.