diff options
-rw-r--r-- | web/src/js/components/ContentView/ContentViews.jsx | 20 | ||||
-rw-r--r-- | web/src/js/components/ContentView/ShowFullContentButton.jsx | 13 | ||||
-rw-r--r-- | web/src/js/ducks/ui/flow.js | 17 |
3 files changed, 35 insertions, 15 deletions
diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx index 9feb0623..cd593023 100644 --- a/web/src/js/components/ContentView/ContentViews.jsx +++ b/web/src/js/components/ContentView/ContentViews.jsx @@ -1,6 +1,6 @@ import React, { PropTypes, Component } from 'react' import { connect } from 'react-redux' -import { setContentViewDescription, setShowFullContent } from '../../ducks/ui/flow' +import { setContentViewDescription, setContent } from '../../ducks/ui/flow' import ContentLoader from './ContentLoader' import { MessageUtils } from '../../flow/utils' import CodeEditor from './CodeEditor' @@ -30,28 +30,25 @@ function Edit({ content, onChange }) { Edit = ContentLoader(Edit) class ViewServer extends Component { - static defaultProps = { - maxLines: 80, - } componentWillMount(){ this.setContentView(this.props) } componentWillReceiveProps(nextProps){ - this.setContentView(nextProps) + if (nextProps.content != this.props.content) { + this.setContentView(nextProps) + } } setContentView(props){ try { this.data = JSON.parse(props.content) }catch(err) { - this.data= {lines: [], description: err.message} + this.data = {lines: [], description: err.message} } props.setContentViewDescription(props.contentView != this.data.description ? this.data.description : '') - - let isFullContentShown = this.data.lines.length < props.maxLines - if (isFullContentShown) props.setShowFullContent(true) + props.setContent(this.data.lines) } render() { const {content, contentView, message, maxLines} = this.props @@ -78,11 +75,12 @@ class ViewServer extends Component { ViewServer = connect( state => ({ - showFullContent: state.ui.flow.showFullContent + showFullContent: state.ui.flow.showFullContent, + maxLines: state.ui.flow.maxContentLines }), { setContentViewDescription, - setShowFullContent + setContent } )(ContentLoader(ViewServer)) diff --git a/web/src/js/components/ContentView/ShowFullContentButton.jsx b/web/src/js/components/ContentView/ShowFullContentButton.jsx index acb094a7..676068e9 100644 --- a/web/src/js/components/ContentView/ShowFullContentButton.jsx +++ b/web/src/js/components/ContentView/ShowFullContentButton.jsx @@ -11,16 +11,23 @@ ShowFullContentButton.propTypes = { showFullContent: PropTypes.bool.isRequired } -function ShowFullContentButton ( {setShowFullContent, showFullContent} ){ +function ShowFullContentButton ( {setShowFullContent, showFullContent, visibleLines, contentLines} ){ return ( - !showFullContent && <Button className="view-all-content-btn btn-xs" onClick={() => setShowFullContent(true)} text="Show full content"/> + !showFullContent && + <div> + <Button className="view-all-content-btn btn-xs" onClick={() => setShowFullContent(true)} text="Show full content"/> + <span className="pull-right"> {visibleLines}/{contentLines} are visible </span> + </div> ) } export default connect( state => ({ - showFullContent: state.ui.flow.showFullContent + showFullContent: state.ui.flow.showFullContent, + visibleLines: state.ui.flow.maxContentLines, + contentLines: state.ui.flow.content.length + }), { setShowFullContent diff --git a/web/src/js/ducks/ui/flow.js b/web/src/js/ducks/ui/flow.js index f3489bee..fb2a846d 100644 --- a/web/src/js/ducks/ui/flow.js +++ b/web/src/js/ducks/ui/flow.js @@ -10,7 +10,8 @@ export const SET_CONTENT_VIEW = 'UI_FLOWVIEW_SET_CONTENT_VIEW', UPDATE_EDIT = 'UI_FLOWVIEW_UPDATE_EDIT', UPLOAD_CONTENT = 'UI_FLOWVIEW_UPLOAD_CONTENT', SET_SHOW_FULL_CONTENT = 'UI_SET_SHOW_FULL_CONTENT', - SET_CONTENT_VIEW_DESCRIPTION = "UI_SET_CONTENT_VIEW_DESCRIPTION" + SET_CONTENT_VIEW_DESCRIPTION = "UI_SET_CONTENT_VIEW_DESCRIPTION", + SET_CONTENT = "UI_SET_CONTENT" const defaultState = { @@ -20,6 +21,8 @@ const defaultState = { modifiedFlow: false, contentView: 'Auto', tab: 'request', + content: [], + maxContentLines: 80, } export default function reducer(state = defaultState, action) { @@ -94,6 +97,14 @@ export default function reducer(state = defaultState, action) { showFullContent: action.contentView == 'Edit' } + case SET_CONTENT: + let isFullContentShown = action.content.length < state.maxContentLines + return { + ...state, + content: action.content, + showFullContent: isFullContentShown + } + case DISPLAY_LARGE: return { ...state, @@ -136,6 +147,10 @@ export function updateEdit(update) { return { type: UPDATE_EDIT, update } } +export function setContent(content){ + return { type: SET_CONTENT, content} +} + export function stopEdit(flow, modifiedFlow) { let diff = getDiff(flow, modifiedFlow) return flowsActions.update(flow, diff) |