From abdcf9e828656fd13e308160c9a1d208fa0f2a70 Mon Sep 17 00:00:00 2001 From: mcallegari10 Date: Thu, 21 Sep 2017 17:31:44 -0300 Subject: [PATCH 1/3] 2.1.0 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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", From 3afb4da52da87faa3b9e35496d163554bf022096 Mon Sep 17 00:00:00 2001 From: mcallegari10 Date: Fri, 22 Sep 2017 16:21:50 -0300 Subject: [PATCH 2/3] add possibility for full screen when not in responsive --- .../Conversation/components/Header/style.scss | 38 +++++++++----- .../Conversation/components/Messages/index.js | 1 + .../components/Messages/styles.scss | 11 +++- .../Widget/components/Conversation/style.scss | 12 +++-- .../Widget/components/Launcher/style.scss | 6 +-- src/components/Widget/index.js | 19 +++---- src/components/Widget/layout.js | 14 ++++-- src/components/Widget/style.scss | 12 +++-- src/index.js | 12 ++++- src/sass/common.scss | 50 +++++++++++++++++++ 10 files changed, 133 insertions(+), 42 deletions(-) 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') && profile } 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; +} From c3dd1bea12ab48d0e10269346f9dcfbca38a8412 Mon Sep 17 00:00:00 2001 From: mcallegari10 Date: Fri, 22 Sep 2017 17:08:34 -0300 Subject: [PATCH 3/3] add the new prop and change props to table in the readme --- README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) 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