From db991e2bccc10e8e31fb200cba2a99bf94e83914 Mon Sep 17 00:00:00 2001 From: Jason Date: Tue, 5 Jul 2016 22:49:16 +0800 Subject: [web] set display large --- web/src/js/components/ContentView.jsx | 94 ++++++++++--------------- web/src/js/components/ContentView/MetaViews.jsx | 2 +- web/src/js/components/Prompt.jsx | 8 +-- web/src/js/components/ProxyApp.jsx | 13 ++-- web/src/js/ducks/ui.js | 29 ++++++-- 5 files changed, 70 insertions(+), 76 deletions(-) (limited to 'web/src/js') diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 9d11ecd9..d6ee5497 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -5,83 +5,61 @@ import * as ContentViews from './ContentView/ContentViews' import * as MetaViews from './ContentView/MetaViews' import ContentLoader from './ContentView/ContentLoader' import ViewSelector from './ContentView/ViewSelector' -import { setContentView } from '../ducks/ui' +import { setContentView, setDisplayLarge } from '../ducks/ui' -class ContentView extends Component { +ContentView.propTypes = { + // It may seem a bit weird at the first glance: + // Every view takes the flow and the message as props, e.g. + // + flow: React.PropTypes.object.isRequired, + message: React.PropTypes.object.isRequired, +} - static propTypes = { - // It may seem a bit weird at the first glance: - // Every view takes the flow and the message as props, e.g. - // - flow: React.PropTypes.object.isRequired, - message: React.PropTypes.object.isRequired, - } +ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) - constructor(props, context) { - super(props, context) +function ContentView({ flow, message, contentView, selectView, displayLarge }) { - this.state = { displayLarge: false } + if (message.contentLength === 0) { + return } - displayLarge() { - this.setState({ displayLarge: true }) + if (message.contentLength === null) { + return } - componentWillReceiveProps(nextProps) { - // @todo move to ui ducks - if (nextProps.message !== this.props.message) { - this.setState({ displayLarge: false }) - } + if (!displayLarge && ContentView.isContentTooLarge(message)) { + return this.props.setDisplayLarge(true)}/> } - isContentTooLarge(msg) { - return msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) - } - - render() { - const { flow, message, contentView, selectView } = this.props - const { displayLarge } = this.state - - const View = ContentViews[contentView] + const View = ContentViews[contentView] - if (message.contentLength === 0) { - return - } - - if (message.contentLength === null) { - return - } - - if (!displayLarge && this.isContentTooLarge(message)) { - return - } - - return ( -
- {View.textView ? ( - - - - ) : ( - - )} -
- -   - - - -
+ return ( +
+ {View.textView ? ( + + + + ) : ( + + )} +
+ +   + + +
- ) - } +
+ ) } export default connect( state => ({ contentView: state.ui.contentView, + displayLarge: state.ui.displayLarge, }), { selectView: setContentView, + setDisplayLarge, } )(ContentView) diff --git a/web/src/js/components/ContentView/MetaViews.jsx b/web/src/js/components/ContentView/MetaViews.jsx index 83720a13..2d064b54 100644 --- a/web/src/js/components/ContentView/MetaViews.jsx +++ b/web/src/js/components/ContentView/MetaViews.jsx @@ -1,5 +1,5 @@ import React from 'react' -import {formatSize} from '../../utils.js' +import { formatSize } from '../../utils.js' export function ContentEmpty({ flow, message }) { return ( diff --git a/web/src/js/components/Prompt.jsx b/web/src/js/components/Prompt.jsx index 262b5ff0..1c20b1a9 100755 --- a/web/src/js/components/Prompt.jsx +++ b/web/src/js/components/Prompt.jsx @@ -13,10 +13,6 @@ Prompt.propTypes = { export default function Prompt({ prompt, done, options }) { const opts = [] - function keyTaken(k) { - return _.map(opts, 'key').includes(k) - } - for (let i = 0; i < options.length; i++) { let opt = options[i] if (_.isString(opt)) { @@ -32,6 +28,10 @@ export default function Prompt({ prompt, done, options }) { opts.push(opt) } + function keyTaken(k) { + return _.map(opts, 'key').includes(k) + } + function onKeyDown(event) { event.stopPropagation() event.preventDefault() diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index 62b13932..f0e33330 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -17,21 +17,21 @@ class ProxyAppMain extends Component { } componentWillMount() { - this.props.appInit() + this.props.appInit(this.context.router) window.addEventListener('keydown', this.props.onKeyDown); } componentWillUnmount() { - this.props.appDestruct() + this.props.appDestruct(this.context.router) window.removeEventListener('keydown', this.props.onKeyDown); } componentWillReceiveProps(nextProps) { - if(nextProps.query === this.props.query && nextProps.flowId === this.props.flowId && nextProps.panel === this.props.panel) { + if (nextProps.query === this.props.query && nextProps.selectedFlowId === this.props.selectedFlowId && nextProps.panel === this.props.panel) { return } - if(nextProps.flowId) { - this.context.router.replace({ pathname: `/flows/${nextProps.flowId}/${nextProps.panel}`, query: nextProps.query }) + if (nextProps.selectedFlowId) { + this.context.router.replace({ pathname: `/flows/${nextProps.selectedFlowId}/${nextProps.panel}`, query: nextProps.query }) } else { this.context.router.replace({ pathname: '/flows', query: nextProps.query }) } @@ -58,10 +58,9 @@ class ProxyAppMain extends Component { export default connect( state => ({ showEventLog: state.eventLog.visible, - settings: state.settings.settings, query: state.ui.query, panel: state.ui.panel, - flowId: state.flows.views.main.selected[0] + selectedFlowId: state.flows.views.main.selected[0] }), { appInit, diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js index bc64ffa8..8fb5b735 100644 --- a/web/src/js/ducks/ui.js +++ b/web/src/js/ducks/ui.js @@ -4,15 +4,17 @@ import * as flowsActions from '../ducks/flows' export const SET_ACTIVE_MENU = 'UI_SET_ACTIVE_MENU' export const SET_CONTENT_VIEW = 'UI_SET_CONTENT_VIEW' -export const SET_SELECTED_INPUT = 'SET_SELECTED_INPUT' -export const UPDATE_QUERY = 'UPDATE_QUERY' -export const SELECT_TAB = 'SELECT_TAB' -export const SELECT_TAB_RELATIVE = 'SELECT_TAB_RELATIVE' -export const SET_PROMPT = 'SET_PROMPT' +export const SET_SELECTED_INPUT = 'UI_SET_SELECTED_INPUT' +export const UPDATE_QUERY = 'UI_UPDATE_QUERY' +export const SELECT_TAB = 'UI_SELECT_TAB' +export const SELECT_TAB_RELATIVE = 'UI_SELECT_TAB_RELATIVE' +export const SET_PROMPT = 'UI_SET_PROMPT' +export const SET_DISPLAY_LARGE = 'UI_SET_DISPLAY_LARGE' const defaultState = { activeMenu: 'Start', selectedInput: null, + displayLarge: false, promptOpen: false, contentView: 'ViewAuto', query: {}, @@ -32,6 +34,7 @@ export default function reducer(state = defaultState, action) { if (action.flowId && !action.currentSelection) { return { ...state, + displayLarge: false, activeMenu: 'Flow', } } @@ -39,11 +42,15 @@ export default function reducer(state = defaultState, action) { if (!action.flowId && state.activeMenu === 'Flow') { return { ...state, + displayLarge: false, activeMenu: 'Start', } } - return state + return { + ...state, + displayLarge: false, + } case SET_CONTENT_VIEW: return { @@ -88,6 +95,12 @@ export default function reducer(state = defaultState, action) { promptOpen: action.open, } + case SET_DISPLAY_LARGE: + return { + ...state, + displayLarge: action.displayLarge, + } + default: return state } @@ -124,6 +137,10 @@ export function setPrompt(open) { return { type: SET_PROMPT, open } } +export function setDisplayLarge(displayLarge) { + return { type: SET_DISPLAY_LARGE, displayLarge } +} + export function onKeyDown(key, shiftKey) { return (dispatch, getState) => { switch (key) { -- cgit v1.2.3