From 6ced9552218614baa0418d34d3daa511fa11685f Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Fri, 7 Apr 2017 18:27:35 +0200 Subject: [PATCH] issue #49 scale signal table with names --- src/components/widget-plot-table.js | 70 +++++++++++++++-------------- src/styles/widgets.css | 30 ++++++++----- 2 files changed, 56 insertions(+), 44 deletions(-) diff --git a/src/components/widget-plot-table.js b/src/components/widget-plot-table.js index 13a6119..3f67bc6 100644 --- a/src/components/widget-plot-table.js +++ b/src/components/widget-plot-table.js @@ -175,43 +175,45 @@ class WidgetPlotTable extends Component {

{this.props.widget.name}

-
- { checkBoxes.length > 0 ? ( - - { checkBoxes } - - ) : ( No signal found, select a different signal type. ) - } -
+
+
+ { checkBoxes.length > 0 ? ( + + { checkBoxes } + + ) : ( No signal found, select a different signal type. ) + } +
-
-
this.chartWrapper = domNode }> - {this.state.sequence && - { if (d != null) { return new Date(d.x); } }} - xAxisTickCount={ tickCount } - hoverAnimation={false} - circleRadius={0} - domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }} - /> - } -
-
- { - this.state.preselectedSignals.reduce( (accum, signal, i) => { - if (this.state.signals.includes(signal.index)) { - accum.push(
   {signal.name}
) - } - return accum; - }, []) - } +
+
this.chartWrapper = domNode }> + {this.state.sequence && + { if (d != null) { return new Date(d.x); } }} + xAxisTickCount={ tickCount } + hoverAnimation={false} + circleRadius={0} + domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }} + /> + } +
+
+ { + this.state.preselectedSignals.reduce( (accum, signal, i) => { + if (this.state.signals.includes(signal.index)) { + accum.push(
   {signal.name}
) + } + return accum; + }, []) + } +
); diff --git a/src/styles/widgets.css b/src/styles/widgets.css index 14e554d..c4958f0 100644 --- a/src/styles/widgets.css +++ b/src/styles/widgets.css @@ -144,14 +144,25 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input } .plot-table-widget .content { - display: -webkit-flex; - display: flex; -webkit-flex: 1 0 auto; flex: 1 0 auto; + display: -webkit-flex; + display: flex; + flex-direction: column; +} + +.table-plot-row { + -webkit-flex: 1 0 auto; + flex: 1 0 auto; + display: -webkit-flex; + display: flex; } .plot-table-widget .widget-table { - width: 100px; + /*width: 100px;*/ + -webkit-flex: 1 0 auto; + flex: 1 0 auto; + max-width: 50%; display: flex; flex-direction: column; justify-content: center; @@ -165,6 +176,7 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input height: 100%; width: 100%; padding: 6px 12px; + overflow-x: hidden; } .plot-table-widget .btn { @@ -186,6 +198,7 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input .plot-table-widget .signal-legend { font-size: 0.8em; font-weight: 700; + overflow-x: hidden; } .plot-table-widget .legend-color { @@ -195,16 +208,13 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input } .plot-table-widget .widget-plot { - display: -webkit-flex; - display: flex; - flex-direction: column; - -webkit-flex: 1 0 auto; - flex: 1 0 auto; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; } .plot-table-widget .chart-wrapper { - -webkit-flex: 1 0 auto; - flex: 1 0 auto; + height: 100%; + width: 100%; } /* End PlotTable Widget */