Merge pull request #18 from Wolox/full-screen

Full screen

README.md

@@ -141,12 +141,15 @@ export default App;
 
 #### Props
 
-- **handleNewUserMessage:** (PropTypes.func.isRequired) Function to handle the user input, will receive the full text message when submitted
-- **title:** (PropTypes.string) Title of the widget
-- **subtitle:** (PropTypes.string) Subtitle of the widget
-- **senderPlaceHolder:** (PropTypes.string) The placeholder of the message input
-- **profileAvatar:** (PropTypes.string) The profile image that will be set on the responses
-- **showCloseButton:** (PropTypes.bool) Show or hide the close button in full screen mode
+|   |type|required|default value|description|
+|---|--- |---     |---          |---        |
+|**handleNewUserMessage**|PropTypes.func|YES| |Function to handle the user input, will receive the full text message when submitted|
+|**title**|PropTypes.string|NO|'Welcome'|Title of the widget|
+|**subtitle**|PropTypes.string|NO|'This is your chat subtitle'|Subtitle of the widget|
+|**senderPlaceHolder**|PropTypes.string|NO|'Type a message...'|The placeholder of the message input|
+|**profileAvatar**|PropTypes.string|NO| |The profile image that will be set on the responses|
+|**showCloseButton**|PropTypes.bool|NO|false|Show or hide the close button in full screen mode|
+|**fullScreenMode**|PropTypes.bool|NO|false|Allow the use of full screen in full desktop mode|
 
 #### Styles
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-widget",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Chat web widget for React apps",
   "main": "lib/index.js",
   "repository": "git@github.com:Wolox/react-chat-widget.git",

src/components/Widget/components/Conversation/components/Header/style.scss

@@ -1,4 +1,5 @@
 @import "variables.scss";
+@import "common.scss";
 
 .header {
   background-color: $turqois-1;
@@ -20,29 +21,40 @@
   display: none;
 }
 
+
+.full-screen {
+
+  .header {
+    @include header-fs;
+  }
+
+  .title {
+    @include title-fs;
+  }
+
+  .close-button {
+    @include close-button-fs;
+  }
+
+  .close {
+    @include close-fs;
+  }
+}
+
 @media screen and (max-width: 800px) {
   .header {
-    border-radius: 0;
-    flex-shrink: 0;
-    position: relative;
+    @include header-fs;
   }
 
   .title {
-    padding: 0 0 15px 0;
+    @include title-fs;
   }
 
   .close-button {
-    background-color: $turqois-1;
-    border: 0;
-    display: block;
-    position: absolute;
-    right: 10px;
-    top: 20px;
-    width: 40px;
+    @include close-button-fs;
   }
 
   .close {
-    width: 20px;
-    height: 20px;
+    @include close-fs;
   }
 }

src/components/Widget/components/Conversation/components/Messages/index.js

@@ -34,6 +34,7 @@ class Messages extends Component {
           this.props.messages.map((message, index) =>
             <div className="message" key={index}>
               {
+                this.props.profileAvatar &&
                 message.get('showAvatar') &&
                 <img src={this.props.profileAvatar} className="avatar" alt="profile" />
               }

src/components/Widget/components/Conversation/components/Messages/styles.scss

@@ -1,4 +1,5 @@
 @import "variables.scss";
+@import "common.scss";
 
 .messages-container {
   background-color: $white;
@@ -8,9 +9,15 @@
   padding-top: 10px;
 }
 
+.full-screen {
+
+  .messages-container {
+    @include messages-container-fs;
+  }
+}
+
 @media screen and (max-width: 800px)  {
   .messages-container {
-    height: 100%;
-    max-height: none;
+    @include messages-container-fs;
   }
 }

src/components/Widget/components/Conversation/style.scss

@@ -1,3 +1,4 @@
+@import "common.scss";
 @import "variables.scss";
 @import "animation.scss";
 
@@ -11,10 +12,15 @@
   @include animation(0, 0.5s, slide-out);
 }
 
+.full-screen {
+
+  .conversation-container {
+    @include conversation-container-fs;
+  }
+}
+
 @media screen and (max-width: 800px) {
   .conversation-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+    @include conversation-container-fs;
   }
 }

src/components/Widget/components/Launcher/style.scss

@@ -1,3 +1,4 @@
+@import "common.scss";
 @import "variables.scss";
 @import "animation.scss";
 
@@ -28,10 +29,7 @@
 
 @media screen and (max-width: 800px){
   .launcher {
-    bottom: 0;
-    margin: 20px;
-    position: fixed;
-    right: 0;
+    @include launcher-fs;
   }
 
   .hide-sm {

src/components/Widget/index.js

@@ -6,6 +6,12 @@ import { toggleChat, addUserMessage } from 'actions';
 import WidgetLayout from './layout';
 
 class Widget extends Component {
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.fullScreenMode) {
+      this.props.dispatch(toggleChat());
+    }
+  }
+
   toggleConversation = () => {
     this.props.dispatch(toggleChat());
   }
@@ -30,25 +36,20 @@ class Widget extends Component {
         senderPlaceHolder={this.props.senderPlaceHolder}
         profileAvatar={this.props.profileAvatar}
         showCloseButton={this.props.showCloseButton}
+        fullScreenMode={this.props.fullScreenMode}
       />
     );
   }
 }
 
 Widget.propTypes = {
-  handleNewUserMessage: PropTypes.func.isRequired,
   title: PropTypes.string,
   subtitle: PropTypes.string,
+  handleNewUserMessage: PropTypes.func.isRequired,
   senderPlaceHolder: PropTypes.string,
   profileAvatar: PropTypes.string,
-  showCloseButton: PropTypes.bool
-};
-
-Widget.defaultProps = {
-  title: 'Welcome',
-  subtitle: 'This is your chat subtitle',
-  senderPlaceHolder: 'Type a message...',
-  showCloseButton: true
+  showCloseButton: PropTypes.bool,
+  fullScreenMode: PropTypes.bool
 };
 
 export default connect()(Widget);

src/components/Widget/layout.js

@@ -7,7 +7,7 @@ import Launcher from './components/Launcher';
 import './style.scss';
 
 const WidgetLayout = props =>
-  <div className="widget-container">
+  <div className={props.fullScreenMode ? 'widget-container full-screen' : 'widget-container'}>
     {
       props.showChat &&
       <Conversation
@@ -22,9 +22,12 @@ const WidgetLayout = props =>
         disabledInput={props.disabledInput}
       />
     }
-    <Launcher
-      toggle={props.onToggleConversation}
-    />
+    {
+      !props.fullScreenMode &&
+      <Launcher
+        toggle={props.onToggleConversation}
+      />
+    }
   </div>;
 
 WidgetLayout.propTypes = {
@@ -36,7 +39,8 @@ WidgetLayout.propTypes = {
   senderPlaceHolder: PropTypes.string,
   profileAvatar: PropTypes.string,
   showCloseButton: PropTypes.bool,
-  disabledInput: PropTypes.bool
+  disabledInput: PropTypes.bool,
+  fullScreenMode: PropTypes.bool
 };
 
 export default connect(store => ({

src/components/Widget/style.scss

@@ -1,4 +1,5 @@
 @import "animation.scss";
+@import "common.scss";
 
 .widget-container {
   bottom: 0;
@@ -10,13 +11,14 @@
   right: 0;
   width: 90vw;
   z-index: 9999;
+
+  &.full-screen {
+    @include widget-container-fs;
+  }
 }
 
-@media screen and (max-width: 800px)  {
+@media screen and (max-width: 800px) {
   .widget-container {
-    height: 100%;
-    margin: 0;
-    max-width: none;
-    width: 100%;
+    @include widget-container-fs;
   }
 }

src/index.js

@@ -14,6 +14,7 @@ const ConnectedWidget = props =>
       senderPlaceHolder={props.senderPlaceHolder}
       profileAvatar={props.profileAvatar}
       showCloseButton={props.showCloseButton}
+      fullScreenMode={props.fullScreenMode}
     />
   </Provider>;
 
@@ -23,7 +24,16 @@ ConnectedWidget.propTypes = {
   handleNewUserMessage: PropTypes.func.isRequired,
   senderPlaceHolder: PropTypes.string,
   profileAvatar: PropTypes.string,
-  showCloseButton: PropTypes.bool
+  showCloseButton: PropTypes.bool,
+  fullScreenMode: PropTypes.bool
+};
+
+ConnectedWidget.defaultProps = {
+  title: 'Welcome',
+  subtitle: 'This is your chat subtitle',
+  senderPlaceHolder: 'Type a message...',
+  showCloseButton: true,
+  fullScreenMode: false
 };
 
 export default ConnectedWidget;

src/sass/common.scss

@@ -5,3 +5,53 @@
   max-width: 215px;
   text-align: left;
 }
+
+@mixin widget-container-fs {
+  height: 100%;
+  margin: 0;
+  max-width: none;
+  width: 100%;
+}
+
+@mixin header-fs {
+  border-radius: 0;
+  flex-shrink: 0;
+  position: relative;
+}
+
+@mixin title-fs {
+  padding: 0 0 15px 0;
+}
+
+@mixin close-button-fs {
+  background-color: $turqois-1;
+  border: 0;
+  display: block;
+  position: absolute;
+  right: 10px;
+  top: 20px;
+  width: 40px;
+}
+
+@mixin close-fs {
+  width: 20px;
+  height: 20px;
+}
+
+@mixin messages-container-fs {
+  height: 100%;
+  max-height: none;
+}
+
+@mixin conversation-container-fs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+@mixin launcher-fs {
+  bottom: 0;
+  margin: 20px;
+  position: fixed;
+  right: 0;
+}