refactoring styles for widget

fix for old mobile devices
idoco · Dec 10, 2018 · f8d4504 · f8d4504
1 parent 5059117
commit f8d4504
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 45 deletions.
diff --git a/src/widget/chat-frame.js b/src/widget/chat-frame.js
@@ -12,9 +12,12 @@ export default class ChatFrame extends Component {
         let encodedConf = encodeURIComponent(JSON.stringify({...conf, ...dynamicConf}));
         return (
             <iframe src={iFrameSrc + '?id=' + intergramId + '&host=' + host + '&conf=' + encodedConf }
-                    width='100%'
-                    height='100%'
-                    frameborder='0' >
+                    frameborder='0'
+                    style={{
+                        flex: '1',
+                        width: '100%',
+                        height: 0,
+                    }}>
             </iframe>
         );
     }

diff --git a/src/widget/chat-title-msg.js b/src/widget/chat-title-msg.js
@@ -2,7 +2,7 @@ import { h, Component } from 'preact';
 
 export default class ChatTitleMsg extends Component {
 
-    render({isOpened, conf},{}) {
+    render({conf}, {}) {
         return (
             <div style={{position: 'relative', cursor: 'pointer'}} onClick={this.props.onClick}>
                 <div 

diff --git a/src/widget/style.js b/src/widget/style.js
@@ -73,3 +73,9 @@ export const mobileTitleStyle = {
     webkitBoxShadow: '1px 1px 4px rgba(101,119,134,.75)',
     boxShadow: '1px 1px 4px rgba(101,119,134,.75)'
 };
+
+export const titleStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0px 30px 0px 0px'
+};
diff --git a/src/widget/widget.js b/src/widget/widget.js
@@ -8,7 +8,8 @@ import {
     desktopWrapperStyle,
     mobileOpenWrapperStyle,
     mobileClosedWrapperStyle,
-    desktopClosedWrapperStyleChat
+    desktopClosedWrapperStyleChat,
+    titleStyle
 } from "./style";
 
 export default class Widget extends Component {
@@ -26,51 +27,39 @@ export default class Widget extends Component {
         const desktopHeight = (window.innerHeight - 100 < conf.desktopHeight) ? window.innerHeight : conf.desktopHeight;
         const wrapperHeight = {height: desktopHeight};
 
-        let wrapperStyle;
-        if (!isChatOpen && (isMobile || conf.alwaysUseFloatingButton)) {
-            wrapperStyle = { ...mobileClosedWrapperStyle}; // closed mobile floating button
-        } else if (!isMobile){
-            wrapperStyle = (conf.closedStyle === 'chat' || isChatOpen || this.wasChatOpened()) ?
-                (isChatOpen) ?
-                    { ...desktopWrapperStyle, ...wrapperWidth, ...wrapperHeight} // desktop mode, button style
-                    :
-                    { ...desktopWrapperStyle}
-                :
-                { ...desktopClosedWrapperStyleChat}; // desktop mode, chat style
-        } else {
-            wrapperStyle = mobileOpenWrapperStyle; // open mobile wrapper should have no border
-        }
-
         return (
-            <div style={wrapperStyle}>
-
-                {/* Open/close button */}
-                { (isMobile || conf.alwaysUseFloatingButton) && !isChatOpen ?
-
-                    <ChatFloatingButton color={conf.mainColor} onClick={this.onClick}/>
-
-                    :
-
-                    (conf.closedStyle === 'chat' || isChatOpen || this.wasChatOpened()) ?
-                        <div style={{background: conf.mainColor, ...desktopTitleStyle}} onClick={this.onClick}>
-                            <div style={{display: 'flex', alignItems: 'center', padding: '0px 30px 0px 0px'}}>
-                                {isChatOpen ? conf.titleOpen : conf.titleClosed}
-                            </div>
-                            <ArrowIcon isOpened={isChatOpen}/>
+            <div>
+                {/*CLOSED STATE*/}
+                <div style={{display: isChatOpen ? 'none' : 'block'}}>
+                    {(isMobile || conf.alwaysUseFloatingButton) ?
+                        <div style={mobileClosedWrapperStyle}>
+                            <ChatFloatingButton color={conf.mainColor} onClick={this.onClick}/>
                         </div>
                         :
-                        <ChatTitleMsg onClick={this.onClick} conf={conf}/>
-                }
-
-                {/*Chat IFrame*/}
-                <div style={{
-                    display: isChatOpen ? 'block' : 'none',
-                    height: 0, // flexbug
-                    flex: 1,
-                }}>
-                    {pristine ? null : <ChatFrame {...this.props} /> }
+                        (conf.closedStyle === 'chat' || this.wasChatOpened()) ?
+                            <div style={desktopWrapperStyle}>
+                                <div style={{background: conf.mainColor, ...desktopTitleStyle}} onClick={this.onClick}>
+                                    <div style={titleStyle}>{conf.titleClosed}</div>
+                                    <ArrowIcon isOpened={false}/>
+                                </div>
+                            </div>
+                            :
+                            <div style={desktopClosedWrapperStyleChat}>
+                                <ChatTitleMsg onClick={this.onClick} conf={conf}/>
+                            </div>
+                    }
                 </div>
 
+                {/*OPENED STATE*/}
+                <div style={{display: isChatOpen ? 'block' : 'none'}}>
+                    <div style={isMobile ? mobileOpenWrapperStyle : {...desktopWrapperStyle, ...wrapperWidth, ...wrapperHeight}}>
+                        <div style={{background: conf.mainColor, ...desktopTitleStyle}} onClick={this.onClick}>
+                            <div style={titleStyle}>{conf.titleOpen}</div>
+                            <ArrowIcon isOpened={true}/>
+                        </div>
+                        {pristine ? null : <ChatFrame {...this.props} />}
+                    </div>
+                </div>
             </div>
         );
     }