feat(title): add optional title to dashboards

plouc · Apr 1, 2016 · e0eaf28 · e0eaf28
1 parent fc13697
commit e0eaf28
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/src/browser/components/Dashboard.jsx b/src/browser/components/Dashboard.jsx
@@ -24,17 +24,26 @@ var Dashboard = React.createClass({
     },
 
     render() {
-        var columns = this.props.dashboard.columns;
-        var rows    = this.props.dashboard.rows;
+        var columns        = this.props.dashboard.columns;
+        var rows           = this.props.dashboard.rows;
+        var title          = this.props.dashboard.title || '';
+        var titleHeight    = 10;
 
         var widgetNodes = _.map(this.props.dashboard.widgets, (widget, index) => {
+            var widgetHeight = widget.rows / rows * 100 + '%';
+            var widgetY = widget.y / rows * 100 + '%';
+            if (title) {
+              widgetHeight = 'calc(' + widgetHeight + ' - ' + (titleHeight / rows) + 'vmin)';
+              widgetY = 'calc(' + widgetY + ' + ' + (titleHeight / (widget.y === 0 ? 1 : rows)) + 'vmin)';
+            }
+
             var props = _.extend({}, _.omit(widget, ['columns', 'rows']), {
                 key:  index,
                 type: widget.type,
                 w:    (widget.columns / columns * 100) + '%',
-                h:    (widget.rows    / rows    * 100) + '%',
+                h:    widgetHeight,
                 x:    (widget.x       / columns * 100) + '%',
-                y:    (widget.y       / rows    * 100) + '%'
+                y:    widgetY
             });
 
             return React.createElement(Widget, props);
@@ -45,12 +54,21 @@ var Dashboard = React.createClass({
             cssClasses += ' _is-current';
         }
 
+        var titleNode = null;
+
+        if (title) {
+          titleNode = (
+            <div className="dashboard__title">{title}</div>
+          );
+        }
+
         return (
             <div className={cssClasses}>
+                {titleNode}
                 {widgetNodes}
             </div>
         );
     }
 });
 
-module.exports = Dashboard;
+module.exports = Dashboard;
diff --git a/src/styl/__vars.styl b/src/styl/__vars.styl
@@ -1,6 +1,8 @@
 // GENERIC
 $main-bg-color                  = #fff
 $main-txt-color                 = #555
+$main-title-color               = #fafafa
+$main-title-font                = normal normal 400 unquote("4vmin/8vmin") "Open sans", sans-serif
 $main-margin                    = 4vmin
 $main-font                      = normal normal 400 unquote("2.4vmin/3.6vmin") "Open sans", sans-serif
 

diff --git a/src/styl/_main.styl b/src/styl/_main.styl
@@ -47,4 +47,15 @@ h1, h2, h3, h4, h5, h6 {
   &__value {
     color: $prop-value-txt-color;
   }
-}
+}
+
+.dashboard__title {
+  color: $main-title-color;
+  font: $main-title-font;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 1vmin 3vmin;
+  height: 10vmin;
+}