nicer widget button in mobile

ndbuildvn · Feb 23, 2017 · b3e3fe0 · b3e3fe0
1 parent ab39c80
commit b3e3fe0
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 9 deletions.
diff --git a/src/widget/chat-icon.js b/src/widget/chat-icon.js
@@ -0,0 +1,17 @@
+import { h, Component } from 'preact';
+
+export default class ChatIcon extends Component {
+
+    render({},{}) {
+        return (
+            <div>
+                <svg style={{}}
+                     fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z"/>
+                    <path d="M0 0h24v24H0z" fill="none"/>
+                </svg>
+            </div>
+        );
+    }
+}
diff --git a/src/widget/style.js b/src/widget/style.js
@@ -1,5 +1,5 @@
 
-export const wrapperStyle = {
+export const desktopWrapperStyle = {
     position: 'fixed',
     bottom: '0px',
     right: '4px',
@@ -11,6 +11,17 @@ export const wrapperStyle = {
     boxSizing: 'content-box'
 };
 
+export const mobileClosedWrapperStyle = {
+    position: 'fixed',
+    bottom: 24,
+    right: 24,
+    zIndex: 2147483647,
+    borderRadius: '50%',
+    border: '1px solid rgba(82,179,217,0.9)',
+    background: 'rgb(229, 229, 229)',
+    boxSizing: 'content-box'
+};
+
 export const mobileOpenWrapperStyle = {
     position: 'fixed',
     top: 0,
@@ -25,7 +36,7 @@ export const mobileOpenWrapperStyle = {
     boxSizing: 'content-box'
 };
 
-export const titleStyle = {
+export const desktopTitleStyle = {
     height: '30px',
     lineHeight: '30px',
     fontSize: '20px',
@@ -36,4 +47,17 @@ export const titleStyle = {
     background: 'rgba(82,179,217,0.9)',
     color: '#fff',
     cursor: 'pointer'
+};
+
+export const mobileTitleStyle = {
+    height: 48,
+    width: 48,
+    background: 'rgba(82,179,217,0.9)',
+    cursor: 'pointer',
+    borderRadius: '50%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    webkitBoxShadow: '0 2px 2px 0 #C2C2C2',
+    boxShadow: '0 2px 2px 0 #C2C2C2'
 };
diff --git a/src/widget/widget.js b/src/widget/widget.js
@@ -1,7 +1,11 @@
 import { h, Component } from 'preact';
 import ChatFrame from './chat-frame';
 import ArrowIcon from './arrow-icon';
-import {titleStyle, wrapperStyle, mobileOpenWrapperStyle} from "./style";
+import ChatIcon from './chat-icon';
+import {
+    desktopTitleStyle, desktopWrapperStyle,
+    mobileTitleStyle, mobileOpenWrapperStyle, mobileClosedWrapperStyle
+} from "./style";
 
 export default class Widget extends Component {
 
@@ -13,17 +17,35 @@ export default class Widget extends Component {
 
     render(props, state) {
 
+        let wrapperStyle = desktopWrapperStyle;
+        if (props.isMobile) {
+            if (state.isChatOpen) {
+                wrapperStyle = mobileOpenWrapperStyle;
+            } else {
+                wrapperStyle = mobileClosedWrapperStyle;
+            }
+        }
+
         return (
-            <div style={state.isChatOpen && props.isMobile ? mobileOpenWrapperStyle : wrapperStyle}>
+            <div style={wrapperStyle}>
 
                 {/*Title*/}
-                <div style={titleStyle} onClick={this.onClick}>
-                    <div>
-                        {!state.isChatOpen ? 'Click to chat!' : 'Let\'s chat!'}
+                { props.isMobile && !state.isChatOpen ?
+
+                    <div style={mobileTitleStyle} onClick={this.onClick}>
+                        <ChatIcon/>
                     </div>
 
-                    <ArrowIcon isOpened={state.isChatOpen}/>
-                </div>
+                    :
+
+                    <div style={desktopTitleStyle} onClick={this.onClick}>
+                        <div>
+                            {!state.isChatOpen ? 'Click to chat!' : 'Let\'s chat!'}
+                        </div>
+
+                        <ArrowIcon isOpened={state.isChatOpen}/>
+                    </div>
+                }
 
                 {/*Chat IFrame*/}
                 <div style={{