Copied changes from riff-rtc PR #124

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 (
- <Card>
+ <Card
+ maxWidth={maxWidth}
+ isMediatorCard={props.isMediatorCard}
+ >
  <CardTitle>
  {props.title}
  <span
@@ -115,6 +134,7 @@ const ChartCard = enhance((props) => {
  id={`chart-info-${props.chartCardId}`}
  close={chartInfoClosed}
  chartInfo={props.chartInfo}
+ longDescription={props.longDescription}
  />
  )}
  <ChartDiv>
@@ -142,6 +162,12 @@ class ChartInfoDiv extends React.Component {
  this.ChartInfoDiv.focus();
  }
  render() {
+ let chartInfo = <StyledInfo>{this.props.chartInfo}</StyledInfo>;
+
+ if (this.props.longDescription) {
+ chartInfo = <StyledInfoSmall>{this.props.chartInfo}</StyledInfoSmall>;
+ }
+
  return (
  <div
  id={this.props.id}
@@ -161,7 +187,7 @@ class ChartInfoDiv extends React.Component {
  <MaterialIcon icon='close'/>
  </button>
  </span>
- <ChartInfo>{this.props.chartInfo}</ChartInfo>
+ {chartInfo}
  </div>
  );
  }

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) ? (
  <SROnly>
  <table>
- {this.props.caption ?
- <caption>{this.props.caption}</caption> :
- null}
+ {caption ? <caption>{caption}</caption> : null}
  <thead>
  <tr>
  {cols.map((col) => (

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 ? (
+ <ChartTable
+ cols={['Participant', 'Amount of Speaking']}
+ rows={this.state.tableRows}
+ caption={this.state.caption}
+ />
+ ) : null;
+
+ const chartDiv = <MMContainer id='meeting-mediator'/>;
+
  return (
- <React.Fragment>
- <MMContainer id='meeting-mediator'/>
- {this.state.tableRows.length ? (
- <ChartTable
- cols={['Participant', 'Amount of Speaking']}
- rows={this.state.tableRows}
- caption={this.state.caption}
- />
- ) : null }
- </React.Fragment>
+ <div style={{marginTop: '10px'}}>
+ <ChartCard
+ title={chartConfig.cardTitle}
+ chartInfo={chartConfig.info}
+ chartDiv={chartDiv}
+ chartTable={chartTable}
+ chartCardId='meeting-mediator-card'
+ longDescription={true}
+
+ /*isMediatorCard is a temporary prop until the dashboard is
+ redesigned. The new meeting mediator card in riff-rtc has a
+ purple border and no box-shadow. Since the ChartCard
+ component is also used in the dashboard, and doesn't require
+ these styles, we must distinguish the meeting mediator chart
+ card (for now).
+ .*/
+ isMediatorCard={true}
+ />
+ </div>
  );
  }
 }

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);
 `;