Added option to always use mobile floating button by setting `alwaysU…

…seFloatingButton` to true
dramaland · Mar 4, 2017 · 191cb3d · 191cb3d
1 parent 47c789a
commit 191cb3d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 30 deletions.
diff --git a/src/widget/chat-icon.js → src/widget/chat-floating-button.js b/src/widget/chat-icon.js → src/widget/chat-floating-button.js
@@ -1,16 +1,21 @@
 import { h, Component } from 'preact';
+import {mobileTitleStyle} from "./style";
 
-export default class ChatIcon extends Component {
+export default class ChatFloatingButton extends Component {
 
-    render({},{}) {
+    render({color, onClick},{}) {
         return (
-            <div>
+            <div
+                style={{background: color, ...mobileTitleStyle}}
+                onClick={onClick}>
+
                 <svg style={{paddingTop: 4}}
                      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/default-configuration.js b/src/widget/default-configuration.js
@@ -7,5 +7,6 @@ export const defaultConfiguration = {
     autoNoResponse: 'It seems that no one is available to answer right now. Please tell us how we can ' +
     'contact you, and we will get back to you as soon as we can.',
 
-    mainColor: 'rgba(82,179,217,0.9)'
+    mainColor: 'rgba(82,179,217,0.9)',
+    alwaysUseFloatingButton: false
 };
diff --git a/src/widget/widget.js b/src/widget/widget.js
@@ -1,10 +1,10 @@
 import { h, Component } from 'preact';
 import ChatFrame from './chat-frame';
+import ChatFloatingButton from './chat-floating-button';
 import ArrowIcon from './arrow-icon';
-import ChatIcon from './chat-icon';
 import {
     desktopTitleStyle, desktopWrapperStyle,
-    mobileTitleStyle, mobileOpenWrapperStyle, mobileClosedWrapperStyle
+    mobileOpenWrapperStyle, mobileClosedWrapperStyle
 } from "./style";
 
 export default class Widget extends Component {
@@ -15,52 +15,45 @@ export default class Widget extends Component {
         this.state.pristine = true;
     }
 
-    render(props, state) {
+    render({conf, isMobile}, {isChatOpen, pristine}) {
 
-        const {conf, isMobile} = props;
+        const alwaysUseFloatingButton = true;
         const border = {border: '1px solid ' + conf.mainColor};
-        const background = {background: conf.mainColor};
 
-        //todo: cleanup and separate to two different components (Desktop and mobile)
-        let wrapperStyle = {...border, ...desktopWrapperStyle};
-        let titleStyle = desktopTitleStyle;
-        if (isMobile) {
-            if (state.isChatOpen) {
-                wrapperStyle = mobileOpenWrapperStyle;
-            } else {
-                titleStyle = mobileTitleStyle;
-                wrapperStyle = {...border, ...mobileClosedWrapperStyle};
-            }
+        let wrapperStyle;
+        if (!isChatOpen && (isMobile || alwaysUseFloatingButton)) {
+            wrapperStyle = {...border, ...mobileClosedWrapperStyle}; // closed mobile floating button
+        } else if (!isMobile){
+            wrapperStyle = {...border, ...desktopWrapperStyle}; // desktop mode
+        } else {
+            wrapperStyle = mobileOpenWrapperStyle; // open mobile wrapper should have no border
         }
-        titleStyle = {...background, ...titleStyle};
 
         return (
             <div style={wrapperStyle}>
 
-                {/*Title*/}
-                { isMobile && !state.isChatOpen ?
+                {/* Open/close button */}
+                { (isMobile || alwaysUseFloatingButton) && !isChatOpen ?
 
-                    <div style={titleStyle} onClick={this.onClick}>
-                        <ChatIcon/>
-                    </div>
+                    <ChatFloatingButton color={conf.mainColor} onClick={this.onClick}/>
 
                     :
 
-                    <div style={titleStyle} onClick={this.onClick}>
+                    <div style={{background: conf.mainColor, ...desktopTitleStyle}} onClick={this.onClick}>
                         <div>
-                            {state.isChatOpen ? conf.titleOpen : conf.titleClosed}
+                            {isChatOpen ? conf.titleOpen : conf.titleClosed}
                         </div>
 
-                        <ArrowIcon isOpened={state.isChatOpen}/>
+                        <ArrowIcon isOpened={isChatOpen}/>
                     </div>
                 }
 
                 {/*Chat IFrame*/}
                 <div style={{
-                    display: state.isChatOpen ? 'block' : 'none',
+                    display: isChatOpen ? 'block' : 'none',
                     height: isMobile ? '100%' : ''
                 }}>
-                    {state.pristine ? null : <ChatFrame {...props} /> }
+                    {pristine ? null : <ChatFrame {...this.props} /> }
                 </div>
 
             </div>