Merge pull request idoco#19 from aslauris/UI-revamp

UI revamp & extra features
yoavprat · Jul 3, 2017 · 4bcab79 · 4bcab79
2 parents 01a1aea + 7397b15
commit 4bcab79
Show file tree

Hide file tree

Showing 10 changed files with 265 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+**This is a fork of [Intergram](https://github.com/idoco/intergram) by [Ido Cohen](https://github.com/idoco) containing UI revamp and some improvements**
+
 # Intergram - [Demo](https://www.intergram.xyz/)
 
 A **Free** live chat widget that you can easily add to your website. It will let you chat with your website visitors using your Telegram messenger. 

diff --git a/css/chat.css b/css/chat.css
@@ -17,25 +17,43 @@ html, body {
 }
 
 .chat li {
+    padding: 8px;
     padding: 0.5rem;
+    font-size: 14.4px;
     font-size: 0.9rem;
     overflow: hidden;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
     display: flex;
 }
 
 .visitor {
-    justify-content: flex-end;
-    align-items: flex-end;
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+        -ms-flex-pack: end;
+            justify-content: flex-end;
+    -webkit-box-align: end;
+    -webkit-align-items: flex-end;
+        -ms-flex-align: end;
+                -ms-grid-row-align: flex-end;
+            align-items: flex-end;
 }
 
 .visitor .msg {
-    order: 1;
+    -webkit-box-ordinal-group: 2;
+    -webkit-order: 1;
+        -ms-flex-order: 1;
+            order: 1;
     border-bottom-right-radius: 0;
     box-shadow: 1px 2px 0 #D4D4D4;
 }
 
 .admin .msg {
-    order: 1;
+    -webkit-box-ordinal-group: 2;
+    -webkit-order: 1;
+        -ms-flex-order: 1;
+            order: 1;
     border-top-left-radius: 0;
     box-shadow: -1px 2px 0 #D4D4D4;
 }
@@ -51,10 +69,12 @@ html, body {
 }
 
 .msg p {
+    margin: 0 0 3.2px 0;
     margin: 0 0 0.2rem 0;
 }
 
 .msg .time {
+    font-size: 11.2px;
     font-size: 0.7rem;
     color: #ccc;
     margin-top: 3px;

diff --git a/src/chat/chat.js b/src/chat/chat.js
@@ -35,9 +35,9 @@ export default class Chat extends Component {
     render({},state) {
         return (
             <div>
-                <MessageArea messages={state.messages} />
+                <MessageArea messages={state.messages} conf={this.props.conf}/>
 
-                <input class="textarea" type="text" placeholder={this.props.conf.typeHere}
+                <input class="textarea" type="text" placeholder={this.props.conf.placeholderText}
                        ref={(input) => { this.input = input }}
                        onKeyPress={this.handleKeyPress}/>
 

diff --git a/src/chat/message-area.js b/src/chat/message-area.js
@@ -4,36 +4,42 @@ import { h, Component } from 'preact';
 const dayInMillis = 60 * 60 * 24 * 1000;
 
 export default class MessageArea extends Component {
+    scrollToBottom = () => {
+        const intergramChat = document.getElementById('intergramChat');
+        intergramChat.scrollTop = intergramChat.scrollHeight;
+    }
 
     componentDidMount() {
-        window.scrollTo(0, document.body.scrollHeight);
+        this.scrollToBottom();
     }
 
     componentDidUpdate() {
-        window.scrollTo(0, document.body.scrollHeight);
+        this.scrollToBottom();
     }
 
     render(props,{}) {
         const currentTime = new Date();
-
         return (
             <ol class="chat">
                 {props.messages.map(({name, text, from, time}) => {
                     if (from === 'visitor') {
                         name = "You";
                     }
-
                     return (
                         <li class={from}>
                             <div class="msg">
                                 <p>{name ? name + ': ' + text : text}</p>
-                                <div class="time">
-                                    {
-                                        currentTime - new Date(time) < dayInMillis ?
-                                            dateFormat(time, "HH:MM") :
-                                            dateFormat(time, "m/d/yy HH:MM")
-                                    }
-                                </div>
+                                { (props.conf.displayMessageTime) ?
+                                    <div class="time">
+                                        {
+                                            currentTime - new Date(time) < dayInMillis ?
+                                                dateFormat(time, "HH:MM") :
+                                                dateFormat(time, "m/d/yy HH:MM")
+                                        }
+                                    </div> 
+                                    :
+                                    ''
+                                }
                             </div>
                         </li>
                     );

diff --git a/src/widget/arrow-icon.js b/src/widget/arrow-icon.js
@@ -6,16 +6,35 @@ export default class ArrowIcon extends Component {
         return (
             <div>
                 {/* keyboard arrow up */}
-                <svg style={{
-                    marginRight: 4,
-                    verticalAlign: 'middle',
-                    transform: isOpened ? 'rotate(180deg)' : ''
-                }}
-                     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>
+                { (isOpened) ?
+                    <svg style={{
+                            marginRight: 15,
+                            marginTop: 6,
+                            verticalAlign: 'middle',
+                        }}
+                        fill="#FFFFFF" height="15" viewBox="0 0 15 15" width="15"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <line x1="1" y1="15" 
+                            x2="15" y2="1" 
+                            stroke="white" 
+                            stroke-width="1"/>
+                        <line x1="1" y1="1" 
+                            x2="15" y2="15" 
+                            stroke="white" 
+                            stroke-width="1"/>
+                    </svg>
+                    :
+                    <svg style={{
+                        marginRight: 15,
+                        marginTop: 6,
+                        verticalAlign: 'middle',
+                    }}
+                        fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path d="M2.582 13.891c-0.272 0.268-0.709 0.268-0.979 0s-0.271-0.701 0-0.969l7.908-7.83c0.27-0.268 0.707-0.268 0.979 0l7.908 7.83c0.27 0.268 0.27 0.701 0 0.969s-0.709 0.268-0.978 0l-7.42-7.141-7.418 7.141z"></path>
+                    </svg>
+
+                }
             </div>
         );
     }

diff --git a/src/widget/chat-frame.js b/src/widget/chat-frame.js
@@ -11,8 +11,8 @@ export default class ChatFrame extends Component {
         let encodedConf = encodeURIComponent(JSON.stringify(conf));
         return (
             <iframe src={iFrameSrc + '?id=' + intergramId + '&host=' + host + '&conf=' + encodedConf }
-                    width={isMobile ? '100%' : 300}
-                    height={isMobile ? '94%' : 350}
+                    width='100%'
+                    height={isMobile ? '94%' : '100%'}
                     frameborder='0' >
             </iframe>
         );

diff --git a/src/widget/chat-title-msg.js b/src/widget/chat-title-msg.js
@@ -0,0 +1,97 @@
+import { h, Component } from 'preact';
+
+export default class ChatTitleMsg extends Component {
+
+    render({isOpened, conf},{}) {
+        return (
+            <div style={{position: 'relative', cursor: 'pointer'}} onClick={this.props.onClick}>
+                <div 
+                    className="desktop-closed-message"
+                    style={{
+                        background: '#1f8ceb',
+                        letterSpacing: '1px',
+                        color: '#fff',
+                        display: 'block',
+                        position: 'absolute',
+                        fontSize: '14px',
+                        top: 0,
+                        right: '130px',
+                        marginTop: '23px',
+                        borderRadius: '5px',
+                        padding: '15px 20px',
+                        boxShadow: '#8e8d8d -3px 2px 20px',
+                    }}
+                >
+                    {conf.introMessage}
+                    <div
+                        style={{
+                            width: 0,
+                            height: 0, 
+                            position: 'absolute',
+                            top: '12px',
+                            right: '-10px',
+                            borderTop: '10px solid transparent',
+                            borderBottom: '10px solid transparent',
+                            borderLeft: '10px solid #1f8ceb'
+                        }}
+                    ></div>
+                </div>
+                <div 
+                    className="desktop-closed-message-avatar"
+                    style={{
+                        background: '#fff',
+                        display: 'block',
+                        position: 'absolute',
+                        top: '10px',
+                        right: '40px',
+                        height: '60px',
+                        width: '60px',
+                        borderRadius: '999px',
+                        boxShadow: '#8e8d8d -3px 2px 20px',
+                        border: '2px solid #1f8ceb'
+                    }}
+                >
+                    {(conf.closedChatAvatarUrl === '') ?
+                        <svg style={{
+                                width: '100%',
+                                height: 'auto',
+                                borderRadius: '999px'
+                            }}
+                            fill="#000000" height="24" viewBox="0 0 24 24" width="24"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <path d="M20 21.859c0 2.281-1.5 4.141-3.328 4.141h-13.344c-1.828 0-3.328-1.859-3.328-4.141 0-4.109 1.016-8.859 5.109-8.859 1.266 1.234 2.984 2 4.891 2s3.625-0.766 4.891-2c4.094 0 5.109 4.75 5.109 8.859zM16 8c0 3.313-2.688 6-6 6s-6-2.688-6-6 2.688-6 6-6 6 2.688 6 6z"></path>
+                        </svg>
+                        :
+                        <img 
+                            src={conf.closedChatAvatarUrl} 
+                            alt="Avatar"
+                            style={{
+                                width: '100%',
+                                height: 'auto',
+                                borderRadius: '999px'
+                            }}
+                        />
+                    }
+                    <div
+                        style={{
+                            background: '#d0021b',
+                            width: '20px',
+                            height: '20px',
+                            borderRadius: '999px',
+                            position: 'absolute',
+                            right: '-5px',
+                            bottom: '-5px',
+                            textAlign: 'center',
+                            color: '#fff',
+                            fontWeight: 600,
+                            fontSize: '0.8em',
+                            lineHeight: '20px'
+                        }}
+                    >
+                        1
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/src/widget/default-configuration.js b/src/widget/default-configuration.js
@@ -2,12 +2,17 @@
 export const defaultConfiguration = {
     titleClosed: 'Click to chat!',
     titleOpen: 'Let\'s chat!',
+    closedStyle: 'chat', // button or chat
+    closedChatAvatarUrl: '', // only used if closedStyle is set to 'chat'
+    cookieExpiration: 1, // in days. Once opened, closed chat title will be shown as button (when closedStyle is set to 'chat')
     introMessage: 'Hello! How can we help you?',
     autoResponse: 'Looking for the first available admin (It might take a minute)',
     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.',
-    typeHere: 'Type here!',
-
-    mainColor: 'rgba(82,179,217,0.9)',
-    alwaysUseFloatingButton: false
-};
+    placeholderText: 'Send a message...',
+    displayMessageTime: true,
+    mainColor: '#1f8ceb',
+    alwaysUseFloatingButton: false,
+    desktopHeight: 450,
+    desktopWidth: 370
+};
diff --git a/src/widget/style.js b/src/widget/style.js
@@ -1,13 +1,25 @@
 
 export const desktopWrapperStyle = {
     position: 'fixed',
-    bottom: '0px',
-    right: '4px',
+    bottom: '20px',
+    right: '20px',
     zIndex: 2147483647,
-    borderRadius: '5px',
-    width: '300px',
+    borderRadius: '10px',
     background: 'rgb(229, 229, 229)',
-    boxSizing: 'content-box'
+    boxSizing: 'content-box',
+    boxShadow: '0px 0px 30px rgba(0, 0, 0, 0.5)',
+    overflow: 'hidden'
+};
+
+export const desktopClosedWrapperStyleChat = {
+    position: 'fixed',
+    bottom: '0px',
+    right: '0px',
+    zIndex: 2147483647,
+    minWidth: '400px',
+    boxSizing: 'content-box',
+    overflow: 'hidden',
+    minHeight: '120px'
 };
 
 export const mobileClosedWrapperStyle = {
@@ -35,15 +47,16 @@ export const mobileOpenWrapperStyle = {
 };
 
 export const desktopTitleStyle = {
-    height: '30px',
+    height: '40px',
     lineHeight: '30px',
     fontSize: '20px',
     display: 'flex',
     justifyContent: 'space-between',
-    paddingLeft: '10px',
+    padding: '5px 0 5px 20px',
     fontFamily: 'Lato, sans-serif',
     color: '#fff',
-    cursor: 'pointer'
+    cursor: 'pointer',
+    borderBottom: '1px solid #0078e0'
 };
 
 export const mobileTitleStyle = {
@@ -56,4 +69,4 @@ export const mobileTitleStyle = {
     alignItems: 'center',
     webkitBoxShadow: '1px 1px 4px rgba(101,119,134,.75)',
     boxShadow: '1px 1px 4px rgba(101,119,134,.75)'
-};
+};