diff --git a/README.md b/README.md
index a24868a10..252a746c0 100644
--- a/README.md
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index 37fb81e0f..cdedc0fe2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "react-chat-widget",
- "version": "2.0.1",
+ "version": "2.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 798be5d2b..fa96ddbe2 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Widget/components/Conversation/components/Header/style.scss b/src/components/Widget/components/Conversation/components/Header/style.scss
index 959cd5834..192a7500f 100644
--- a/src/components/Widget/components/Conversation/components/Header/style.scss
+++ b/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;
}
}
diff --git a/src/components/Widget/components/Conversation/components/Messages/index.js b/src/components/Widget/components/Conversation/components/Messages/index.js
index 5dc5df3e0..d6c618b10 100644
--- a/src/components/Widget/components/Conversation/components/Messages/index.js
+++ b/src/components/Widget/components/Conversation/components/Messages/index.js
@@ -34,6 +34,7 @@ class Messages extends Component {
this.props.messages.map((message, index) =>
{
+ this.props.profileAvatar &&
message.get('showAvatar') &&
}
diff --git a/src/components/Widget/components/Conversation/components/Messages/styles.scss b/src/components/Widget/components/Conversation/components/Messages/styles.scss
index d8ab92642..f96378274 100644
--- a/src/components/Widget/components/Conversation/components/Messages/styles.scss
+++ b/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;
}
}
diff --git a/src/components/Widget/components/Conversation/style.scss b/src/components/Widget/components/Conversation/style.scss
index 3c283dce8..979c76527 100644
--- a/src/components/Widget/components/Conversation/style.scss
+++ b/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;
}
}
diff --git a/src/components/Widget/components/Launcher/style.scss b/src/components/Widget/components/Launcher/style.scss
index 5f9429678..d7f256b6f 100644
--- a/src/components/Widget/components/Launcher/style.scss
+++ b/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 {
diff --git a/src/components/Widget/index.js b/src/components/Widget/index.js
index 56e6cc561..5bb5305d4 100644
--- a/src/components/Widget/index.js
+++ b/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);
diff --git a/src/components/Widget/layout.js b/src/components/Widget/layout.js
index c988de969..1ccb7e90e 100644
--- a/src/components/Widget/layout.js
+++ b/src/components/Widget/layout.js
@@ -7,7 +7,7 @@ import Launcher from './components/Launcher';
import './style.scss';
const WidgetLayout = props =>
-
+
{
props.showChat &&
disabledInput={props.disabledInput}
/>
}
-
+ {
+ !props.fullScreenMode &&
+
+ }
;
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 => ({
diff --git a/src/components/Widget/style.scss b/src/components/Widget/style.scss
index 02a9b4dc8..9f67b99cf 100644
--- a/src/components/Widget/style.scss
+++ b/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;
}
}
diff --git a/src/index.js b/src/index.js
index 85cf6df3a..30a7080f8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -14,6 +14,7 @@ const ConnectedWidget = props =>
senderPlaceHolder={props.senderPlaceHolder}
profileAvatar={props.profileAvatar}
showCloseButton={props.showCloseButton}
+ fullScreenMode={props.fullScreenMode}
/>
;
@@ -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;
diff --git a/src/sass/common.scss b/src/sass/common.scss
index 096084b43..b55124d81 100644
--- a/src/sass/common.scss
+++ b/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;
+}