From 51edaa7c9c6a9c204ee85d79abfb75b0854e2b0f Mon Sep 17 00:00:00 2001 From: Brec H Date: Wed, 24 Jul 2019 08:17:01 -0400 Subject: [PATCH] Copied changes from riff-rtc PR #124 --- components/dashboard/components/ChartCard.jsx | 62 +++++++++++++------ .../dashboard/components/ChartTable.jsx | 6 +- .../webrtc_view_bulma/MeetingMediator.jsx | 56 +++++++++++++---- components/webrtc_view_bulma/styled.js | 2 +- 4 files changed, 92 insertions(+), 34 deletions(-) diff --git a/components/dashboard/components/ChartCard.jsx b/components/dashboard/components/ChartCard.jsx index 4b4edbb06dc1..75b4cacedd69 100644 --- a/components/dashboard/components/ChartCard.jsx +++ b/components/dashboard/components/ChartCard.jsx @@ -16,6 +16,8 @@ const CardTitle = styled.div.attrs({ margin-left: 1rem; margin-right: 1rem; color: rgb(138, 106, 148); + display: flex; + justify-content: space-between; button { background: none; @@ -32,27 +34,42 @@ const ChartDiv = styled.div.attrs({ } `; -const widthCard = (maxWidth) => { - logger.debug('setting max width to:', maxWidth + 'vw'); - const Card = styled.div.attrs({ - className: 'card has-text-centered is-centered', - })` - display: flex; - flex-direction: column; - padding: 1rem; - max-width: ${(/*props*/) => maxWidth + 'vw'}; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - `; - return Card; -}; +const Card = styled.div.attrs({ + className: 'card has-text-centered is-centered', +})` + display: flex; + flex-direction: column; + padding: 1rem; + max-width: ${(props) => `${props.maxWidth}vw`}; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + border: none; + + ${(props) => props.isMediatorCard === true && ` + box-shadow: none; + border: 2px solid #8a6a94; + padding: 0; + padding-top: 0.75rem; + border-radius: 5px; + margin-left: auto; + margin-right: auto; + margin-bottom: 2rem; + `} +`; -const ChartInfo = styled.p.attrs({ +const StyledInfo = styled.p.attrs({ className: 'has-text-weight-bold is-size-6', })` padding: 2rem; color: #fff; `; +const StyledInfoSmall = styled.p.attrs({ + className: 'is-size-7', +})` +padding: 2rem 0.5rem 0.5rem 0.5rem; +color: #fff; +`; + const INFO_CLICKED = 'INFO_CLICKED'; const chartCardReducer = (isInfoOpen, action) => { switch (action.type) { @@ -89,11 +106,13 @@ const ChartCard = enhance((props) => { }, 100); }; - const mw = props.maxWidth ? props.maxWidth : 25; - const Card = widthCard(mw + 2); + const maxWidth = (props.maxWidth ? props.maxWidth : 25) + 2; logger.debug('chart div:', props.chartDiv); return ( - + {props.title} { id={`chart-info-${props.chartCardId}`} close={chartInfoClosed} chartInfo={props.chartInfo} + longDescription={props.longDescription} /> )} @@ -142,6 +162,12 @@ class ChartInfoDiv extends React.Component { this.ChartInfoDiv.focus(); } render() { + let chartInfo = {this.props.chartInfo}; + + if (this.props.longDescription) { + chartInfo = {this.props.chartInfo}; + } + return (
- {this.props.chartInfo} + {chartInfo}
); } diff --git a/components/dashboard/components/ChartTable.jsx b/components/dashboard/components/ChartTable.jsx index 343e69079112..3e3129e58dd0 100644 --- a/components/dashboard/components/ChartTable.jsx +++ b/components/dashboard/components/ChartTable.jsx @@ -12,13 +12,11 @@ height:1px; overflow:hidden; `; -const ChartTable = ({cols, rows}) => { +const ChartTable = ({cols, rows, caption}) => { return (rows.length) ? ( - {this.props.caption ? - : - null} + {caption ? : null} {cols.map((col) => ( diff --git a/components/webrtc_view_bulma/MeetingMediator.jsx b/components/webrtc_view_bulma/MeetingMediator.jsx index 98676703d775..ea8e7702d6eb 100644 --- a/components/webrtc_view_bulma/MeetingMediator.jsx +++ b/components/webrtc_view_bulma/MeetingMediator.jsx @@ -28,6 +28,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; +import ChartCard from 'components/dashboard/components/ChartCard'; + import {app, logger} from 'utils/riff'; import ChartTable from 'components/dashboard/components/ChartTable'; @@ -44,6 +46,18 @@ const MMContainer = styled.div.attrs({ overflow: hidden; `; +/** + * Chart configuration properties + */ +const chartConfig = { + cardTitle: 'Meeting Mediator', + info: 'The Meeting Mediator provides real-time feedback about the last five minutes ' + + 'of your conversation. Thick lines and proximity to the central node indicate ' + + 'conversational dominance. Click a node to see the how much a person has spoken. ' + + 'The center node displays the number of exchanges between participants. A higher ' + + 'number represents a more energetic conversation.', +}; + class MeetingMediator extends React.Component { static propTypes = { user: PropTypes.shape({ @@ -104,7 +118,8 @@ class MeetingMediator extends React.Component { this.namesById[turn.participant], [`${Math.round(turn.turns * 100)}%`], ]), - caption: `Turns taken: The group has taken ${data.transitions} turns between participants in the last five minutes.`, + caption: `Turns taken: The group has taken ${data.transitions} turns ` + + 'between participants in the last five minutes.', }); } @@ -127,17 +142,36 @@ class MeetingMediator extends React.Component { } render() { + const chartTable = this.state.tableRows.length ? ( + + ) : null; + + const chartDiv = ; + return ( - - - {this.state.tableRows.length ? ( - - ) : null } - +
+ +
); } } diff --git a/components/webrtc_view_bulma/styled.js b/components/webrtc_view_bulma/styled.js index c92be9bd531a..a2b2ab635233 100644 --- a/components/webrtc_view_bulma/styled.js +++ b/components/webrtc_view_bulma/styled.js @@ -48,7 +48,7 @@ letter-spacing: 0em; export const Menu = styled.aside.attrs({ className: 'menu' })` -max-width: 13rem; +max-width: 14rem; padding-right: 10px; border-right: 1px solid rgba(171,69,171,1); `;
{this.props.caption}{caption}