From 39712b58ab623a9bedaac101ebda9d399d2f28bf Mon Sep 17 00:00:00 2001 From: mcallegari10 Date: Tue, 19 Sep 2017 17:29:13 -0300 Subject: [PATCH 1/6] add responsive styles --- .../Conversation/components/Header/style.scss | 14 ++++++++++---- .../Conversation/components/Messages/styles.scss | 7 +++++++ .../Conversation/components/Sender/style.scss | 6 ++++++ src/components/Widget/style.scss | 8 ++++++++ 4 files changed, 31 insertions(+), 4 deletions(-) diff --git a/src/components/Widget/components/Conversation/components/Header/style.scss b/src/components/Widget/components/Conversation/components/Header/style.scss index 28774a049..78cdd227d 100644 --- a/src/components/Widget/components/Conversation/components/Header/style.scss +++ b/src/components/Widget/components/Conversation/components/Header/style.scss @@ -6,10 +6,16 @@ border-radius: 10px 10px 0 0; color: $white; padding: 15px 0 25px; +} + +.title { + font-size: 24px; + margin: 0; + padding: 15px; +} - .title { - font-size: 24px; - margin: 0; - padding: 15px; +@media screen and (max-width: 1024px) { + .header { + border-radius: 0; } } diff --git a/src/components/Widget/components/Conversation/components/Messages/styles.scss b/src/components/Widget/components/Conversation/components/Messages/styles.scss index 2408c3a48..18932091c 100644 --- a/src/components/Widget/components/Conversation/components/Messages/styles.scss +++ b/src/components/Widget/components/Conversation/components/Messages/styles.scss @@ -7,3 +7,10 @@ overflow-y: scroll; padding-top: 10px; } + +@media screen and (max-width: 1024px) { + .messages-container { + height: 100%; + max-height: 75vh; + } +} diff --git a/src/components/Widget/components/Conversation/components/Sender/style.scss b/src/components/Widget/components/Conversation/components/Sender/style.scss index 7f54e4d52..68949154c 100644 --- a/src/components/Widget/components/Conversation/components/Sender/style.scss +++ b/src/components/Widget/components/Conversation/components/Sender/style.scss @@ -29,3 +29,9 @@ height: 25px; } } + +@media screen and (max-width: 1024px) { + .sender { + border-radius: 0; + } +} diff --git a/src/components/Widget/style.scss b/src/components/Widget/style.scss index d094d2428..61686872a 100644 --- a/src/components/Widget/style.scss +++ b/src/components/Widget/style.scss @@ -11,3 +11,11 @@ width: 90vw; z-index: 9999; } + +@media screen and (max-width: 1024px) { + .widget-container { + margin: 0; + max-width: none; + width: 100%; + } +} From dadb1eee5ab11e01450b88a2a188ce724dc4ee5c Mon Sep 17 00:00:00 2001 From: mcallegari10 Date: Wed, 20 Sep 2017 16:23:10 -0300 Subject: [PATCH 2/6] add responsive full-screen dessign --- .../Conversation/components/Header/index.js | 9 ++++-- .../Conversation/components/Header/style.scss | 28 +++++++++++++++++-- .../components/Messages/styles.scss | 4 +-- .../Conversation/components/Sender/style.scss | 5 ++-- .../Widget/components/Conversation/index.js | 4 ++- .../Widget/components/Conversation/style.scss | 8 ++++++ .../Widget/components/Launcher/index.js | 2 +- .../Widget/components/Launcher/style.scss | 13 +++++++++ src/components/Widget/layout.js | 2 ++ src/components/Widget/style.scss | 3 +- 10 files changed, 66 insertions(+), 12 deletions(-) diff --git a/src/components/Widget/components/Conversation/components/Header/index.js b/src/components/Widget/components/Conversation/components/Header/index.js index 0a161494c..5e6b8bb4b 100644 --- a/src/components/Widget/components/Conversation/components/Header/index.js +++ b/src/components/Widget/components/Conversation/components/Header/index.js @@ -1,17 +1,22 @@ import React from 'react'; import PropTypes from 'prop-types'; +import close from 'assets/clear-button.svg'; import './style.scss'; -const Header = ({ title, subtitle }) => +const Header = ({ title, subtitle, toggleChat }) =>
+

{title}

{subtitle}
; Header.propTypes = { title: PropTypes.string, - subtitle: PropTypes.string + subtitle: PropTypes.string, + toggleChat: PropTypes.func }; export default Header; diff --git a/src/components/Widget/components/Conversation/components/Header/style.scss b/src/components/Widget/components/Conversation/components/Header/style.scss index 78cdd227d..67bc9ffd3 100644 --- a/src/components/Widget/components/Conversation/components/Header/style.scss +++ b/src/components/Widget/components/Conversation/components/Header/style.scss @@ -1,21 +1,43 @@ @import "variables.scss"; .header { - text-align: center; background-color: $turqois-1; border-radius: 10px 10px 0 0; color: $white; + display: flex; + flex-direction: column; + text-align: center; padding: 15px 0 25px; } .title { font-size: 24px; margin: 0; - padding: 15px; + padding: 15px 0; } -@media screen and (max-width: 1024px) { +@media screen and (max-width: 500px) { .header { border-radius: 0; + flex-shrink: 0; + position: relative; + } + + .title { + padding: 0 0 15px 0; + } + + .close-button { + background-color: $turqois-1; + border: 0; + position: absolute; + right: 10px; + top: 20px; + width: 40px; + } + + .close { + width: 20px; + height: 20px; } } diff --git a/src/components/Widget/components/Conversation/components/Messages/styles.scss b/src/components/Widget/components/Conversation/components/Messages/styles.scss index 18932091c..98d75c0c5 100644 --- a/src/components/Widget/components/Conversation/components/Messages/styles.scss +++ b/src/components/Widget/components/Conversation/components/Messages/styles.scss @@ -8,9 +8,9 @@ padding-top: 10px; } -@media screen and (max-width: 1024px) { +@media screen and (max-width: 500px) { .messages-container { height: 100%; - max-height: 75vh; + max-height: none; } } diff --git a/src/components/Widget/components/Conversation/components/Sender/style.scss b/src/components/Widget/components/Conversation/components/Sender/style.scss index 68949154c..1f5d210ef 100644 --- a/src/components/Widget/components/Conversation/components/Sender/style.scss +++ b/src/components/Widget/components/Conversation/components/Sender/style.scss @@ -1,6 +1,7 @@ @import "variables.scss"; .sender { + align-items: center; display: flex; background-color: $grey-2; height: 45px; @@ -11,7 +12,6 @@ .new-message { width: 100%; border: 0; - align-self: center; background-color: $grey-2; height: 30px; padding-left: 15px; @@ -30,8 +30,9 @@ } } -@media screen and (max-width: 1024px) { +@media screen and (max-width: 500px) { .sender { border-radius: 0; + flex-shrink: 0; } } diff --git a/src/components/Widget/components/Conversation/index.js b/src/components/Widget/components/Conversation/index.js index ec6f7c1f9..ce01cb63c 100644 --- a/src/components/Widget/components/Conversation/index.js +++ b/src/components/Widget/components/Conversation/index.js @@ -11,6 +11,7 @@ const Conversation = props =>
- + {showCloseButton && + + }

{title}

{subtitle} ; @@ -16,7 +18,8 @@ const Header = ({ title, subtitle, toggleChat }) => Header.propTypes = { title: PropTypes.string, subtitle: PropTypes.string, - toggleChat: PropTypes.func + toggleChat: PropTypes.func, + showCloseButton: PropTypes.bool }; export default Header; diff --git a/src/components/Widget/components/Conversation/components/Sender/index.js b/src/components/Widget/components/Conversation/components/Sender/index.js index e82ed92ca..62ed7b862 100644 --- a/src/components/Widget/components/Conversation/components/Sender/index.js +++ b/src/components/Widget/components/Conversation/components/Sender/index.js @@ -1,11 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; + import send from 'assets/send_button.svg'; import './style.scss'; -const Sender = ({ sendMessage, placeholder }) => +const Sender = ({ sendMessage, placeholder, disabledInput }) =>
- + @@ -13,7 +14,8 @@ const Sender = ({ sendMessage, placeholder }) => Sender.propTypes = { sendMessage: PropTypes.func, - placeholder: PropTypes.string + placeholder: PropTypes.string, + disabledInput: PropTypes.bool }; export default Sender; diff --git a/src/components/Widget/components/Conversation/index.js b/src/components/Widget/components/Conversation/index.js index ce01cb63c..40ca40a42 100644 --- a/src/components/Widget/components/Conversation/index.js +++ b/src/components/Widget/components/Conversation/index.js @@ -12,6 +12,7 @@ const Conversation = props => title={props.title} subtitle={props.subtitle} toggleChat={props.toggleChat} + showCloseButton={props.showCloseButton} /> ; @@ -28,14 +30,9 @@ Conversation.propTypes = { sendMessage: PropTypes.func, senderPlaceHolder: PropTypes.string, profileAvatar: PropTypes.string, - toggleChat: PropTypes.func -}; - -Conversation.defaultProps = { - headerStyles: {}, - messageStyles: {}, - responsesStyles: {}, - snippetStyles: {} + toggleChat: PropTypes.func, + showCloseButton: PropTypes.bool, + disabledInput: PropTypes.bool }; export default Conversation; diff --git a/src/components/Widget/index.js b/src/components/Widget/index.js index f6b507744..56e6cc561 100644 --- a/src/components/Widget/index.js +++ b/src/components/Widget/index.js @@ -29,23 +29,26 @@ class Widget extends Component { subtitle={this.props.subtitle} senderPlaceHolder={this.props.senderPlaceHolder} profileAvatar={this.props.profileAvatar} + showCloseButton={this.props.showCloseButton} /> ); } } Widget.propTypes = { + handleNewUserMessage: PropTypes.func.isRequired, title: PropTypes.string, subtitle: PropTypes.string, - handleNewUserMessage: PropTypes.func.isRequired, senderPlaceHolder: PropTypes.string, - profileAvatar: PropTypes.string + profileAvatar: PropTypes.string, + showCloseButton: PropTypes.bool }; Widget.defaultProps = { title: 'Welcome', subtitle: 'This is your chat subtitle', - senderPlaceHolder: 'Type a message...' + senderPlaceHolder: 'Type a message...', + showCloseButton: true }; export default connect()(Widget); diff --git a/src/components/Widget/layout.js b/src/components/Widget/layout.js index 9c2b757ce..8fde8ea5e 100644 --- a/src/components/Widget/layout.js +++ b/src/components/Widget/layout.js @@ -17,6 +17,8 @@ const WidgetLayout = props => profileAvatar={props.profileAvatar} toggleChat={props.onToggleConversation} showChat={props.showChat} + showCloseButton={props.showCloseButton} + disabledInput={props.disabledInput} /> } ({ - showChat: store.behavior.get('showChat') + showChat: store.behavior.get('showChat'), + disabledInput: store.behavior.get('disabledInput') }))(WidgetLayout); diff --git a/src/index.js b/src/index.js index 699b359cd..85cf6df3a 100644 --- a/src/index.js +++ b/src/index.js @@ -13,6 +13,7 @@ const ConnectedWidget = props => handleNewUserMessage={props.handleNewUserMessage} senderPlaceHolder={props.senderPlaceHolder} profileAvatar={props.profileAvatar} + showCloseButton={props.showCloseButton} /> ; @@ -21,7 +22,8 @@ ConnectedWidget.propTypes = { subtitle: PropTypes.string, handleNewUserMessage: PropTypes.func.isRequired, senderPlaceHolder: PropTypes.string, - profileAvatar: PropTypes.string + profileAvatar: PropTypes.string, + showCloseButton: PropTypes.bool }; export default ConnectedWidget; diff --git a/src/store/actions/actionTypes.js b/src/store/actions/actionTypes.js index ad0498894..b55739a0f 100644 --- a/src/store/actions/actionTypes.js +++ b/src/store/actions/actionTypes.js @@ -1,4 +1,5 @@ export const TOGGLE_CHAT = 'TOGGLE_CHAT'; +export const TOGGLE_INPUT_DISABLED = 'TOGGLE_INPUT_DISABLED'; export const ADD_NEW_USER_MESSAGE = 'ADD_NEW_USER_MESSAGE'; export const ADD_NEW_RESPONSE_MESSAGE = 'ADD_NEW_RESPONSE_MESSAGE'; export const ADD_NEW_LINK_SNIPPET = 'ADD_NEW_LINK_SNIPPET'; diff --git a/src/store/actions/dispatcher.js b/src/store/actions/dispatcher.js index 8347d25c1..2b1a47281 100644 --- a/src/store/actions/dispatcher.js +++ b/src/store/actions/dispatcher.js @@ -20,3 +20,7 @@ export function renderCustomComponent(component, props) { export function toggleWidget() { store.dispatch(actions.toggleChat()); } + +export function toggleInputDisabled() { + store.dispatch(actions.toggleInputDisabled()); +} diff --git a/src/store/actions/index.js b/src/store/actions/index.js index 38b7b0f88..937b42bdb 100644 --- a/src/store/actions/index.js +++ b/src/store/actions/index.js @@ -6,6 +6,12 @@ export function toggleChat() { }; } +export function toggleInputDisabled() { + return { + type: actions.TOGGLE_INPUT_DISABLED + }; +} + export function addUserMessage(text) { return { type: actions.ADD_NEW_USER_MESSAGE, diff --git a/src/store/reducers/behaviorReducer.js b/src/store/reducers/behaviorReducer.js index 3c7051918..7d1204029 100644 --- a/src/store/reducers/behaviorReducer.js +++ b/src/store/reducers/behaviorReducer.js @@ -1,13 +1,16 @@ import { Map } from 'immutable'; import * as actionTypes from '../actions/actionTypes'; -const initialState = Map({ showChat: false }); +const initialState = Map({ showChat: false, disabledInput: false }); export default function reducer(state = initialState, action) { switch (action.type) { case actionTypes.TOGGLE_CHAT: { return state.update('showChat', showChat => !showChat); } + case actionTypes.TOGGLE_INPUT_DISABLED: { + return state.update('disabledInput', disabledInput => !disabledInput); + } default: return state; } From c755366fc6bd45d1e1af04739c839ba0654f169b Mon Sep 17 00:00:00 2001 From: mcallegari10 Date: Thu, 21 Sep 2017 14:09:25 -0300 Subject: [PATCH 5/6] changes based on pr comments --- README.md | 4 ++-- .../Widget/components/Conversation/components/Header/index.js | 2 +- src/components/Widget/components/Conversation/style.scss | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 753f1ce59..a24868a10 100644 --- a/README.md +++ b/README.md @@ -102,7 +102,7 @@ class App extends Component { export default App; ``` -4- Customize the widget to match your app design! You can add both props to manage the title of the widget, the avatar it will use and of course, you can change, from the CSS, the styles the widget will have. +4- Customize the widget to match your app design! You can add both props to manage the title of the widget and the avatar it will use. Of course, feel free to change the styles the widget will have in the CSS ```js import React, { Component } from 'react'; @@ -146,7 +146,7 @@ export default App; - **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 not the close button in full screen mode +- **showCloseButton:** (PropTypes.bool) Show or hide the close button in full screen mode #### Styles diff --git a/src/components/Widget/components/Conversation/components/Header/index.js b/src/components/Widget/components/Conversation/components/Header/index.js index ad8402c6b..29d364704 100644 --- a/src/components/Widget/components/Conversation/components/Header/index.js +++ b/src/components/Widget/components/Conversation/components/Header/index.js @@ -8,7 +8,7 @@ const Header = ({ title, subtitle, toggleChat, showCloseButton }) =>
{showCloseButton && }

{title}

diff --git a/src/components/Widget/components/Conversation/style.scss b/src/components/Widget/components/Conversation/style.scss index 2c8a1f09d..3c283dce8 100644 --- a/src/components/Widget/components/Conversation/style.scss +++ b/src/components/Widget/components/Conversation/style.scss @@ -17,4 +17,4 @@ flex-direction: column; height: 100%; } -} \ No newline at end of file +} From ffeec24bff8fe0715f66e55a1dcb0e6730b377f8 Mon Sep 17 00:00:00 2001 From: mcallegari10 Date: Thu, 21 Sep 2017 17:24:06 -0300 Subject: [PATCH 6/6] change identation to conditional renders --- .../Conversation/components/Header/index.js | 3 ++- .../Messages/components/Snippet/index.js | 4 ++-- .../Conversation/components/Messages/index.js | 21 ++++++++++++------- .../Widget/components/Launcher/index.js | 7 ++++--- src/components/Widget/layout.js | 3 ++- 5 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src/components/Widget/components/Conversation/components/Header/index.js b/src/components/Widget/components/Conversation/components/Header/index.js index 29d364704..a29aaf24d 100644 --- a/src/components/Widget/components/Conversation/components/Header/index.js +++ b/src/components/Widget/components/Conversation/components/Header/index.js @@ -6,7 +6,8 @@ import './style.scss'; const Header = ({ title, subtitle, toggleChat, showCloseButton }) =>
- {showCloseButton && + { + showCloseButton && diff --git a/src/components/Widget/components/Conversation/components/Messages/components/Snippet/index.js b/src/components/Widget/components/Conversation/components/Messages/components/Snippet/index.js index c2d5a3cf2..4d19aadd4 100644 --- a/src/components/Widget/components/Conversation/components/Messages/components/Snippet/index.js +++ b/src/components/Widget/components/Conversation/components/Messages/components/Snippet/index.js @@ -8,11 +8,11 @@ class Snippet extends PureComponent { return (
- {this.props.message.get('title')} + { this.props.message.get('title') }
diff --git a/src/components/Widget/components/Conversation/components/Messages/index.js b/src/components/Widget/components/Conversation/components/Messages/index.js index e56002de5..5dc5df3e0 100644 --- a/src/components/Widget/components/Conversation/components/Messages/index.js +++ b/src/components/Widget/components/Conversation/components/Messages/index.js @@ -30,14 +30,19 @@ class Messages extends Component { render() { return (
- {this.props.messages.map((message, index) => -
- {message.get('showAvatar') && - profile - } - { this.getComponentToRender(message) } -
- )} + { + this.props.messages.map((message, index) => +
+ { + message.get('showAvatar') && + profile + } + { + this.getComponentToRender(message) + } +
+ ) + }
); } diff --git a/src/components/Widget/components/Launcher/index.js b/src/components/Widget/components/Launcher/index.js index 8c5d8d03e..4ee408c6f 100644 --- a/src/components/Widget/components/Launcher/index.js +++ b/src/components/Widget/components/Launcher/index.js @@ -8,9 +8,10 @@ import './style.scss'; const Launcher = ({ toggle, chatOpened }) => ; diff --git a/src/components/Widget/layout.js b/src/components/Widget/layout.js index 8fde8ea5e..c988de969 100644 --- a/src/components/Widget/layout.js +++ b/src/components/Widget/layout.js @@ -8,7 +8,8 @@ import './style.scss'; const WidgetLayout = props =>
- {props.showChat && + { + props.showChat &&