diff --git a/src/browser/components/Dashboard.jsx b/src/browser/components/Dashboard.jsx index f5eb7fc8..9daec784 100644 --- a/src/browser/components/Dashboard.jsx +++ b/src/browser/components/Dashboard.jsx @@ -1,11 +1,29 @@ -var React = require('react'); -var _ = require('lodash'); -var Reflux = require('reflux'); -var Widget = require('./Widget.jsx'); -var DashboardStore = require('./../stores/DashboardStore'); +import React, { PropTypes } from 'react'; +import _ from 'lodash'; +import { ListenerMixin } from 'reflux'; +import Widget from './Widget.jsx'; +import DashboardStore from './../stores/DashboardStore'; -var Dashboard = React.createClass({ - mixins: [Reflux.ListenerMixin], + +const Dashboard = React.createClass({ + displayName: 'Dashboard', + + propTypes: { + dashboard: PropTypes.shape({ + title: PropTypes.string, + columns: PropTypes.number.isRequired, + rows: PropTypes.number.isRequired, + widgets: PropTypes.arrayOf(PropTypes.shape({ + type: PropTypes.string.isRequired, + x: PropTypes.number.isRequired, + y: PropTypes.number.isRequired, + columns: PropTypes.number.isRequired, + rows: PropTypes.number.isRequired + })).isRequired + }).isRequired + }, + + mixins:[ListenerMixin], getInitialState() { return { @@ -18,57 +36,56 @@ var Dashboard = React.createClass({ }, onDashboardStoreUpdate(index) { + const { dashboard } = this.props; + this.setState({ - isCurrent: index === this.props.dashboard.index + isCurrent: index === dashboard.index }); }, render() { - 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, + const { dashboard: { columns, rows, widgets, title } } = this.props; + const { isCurrent } = this.state; + + const widgetNodes = widgets.map((widget, index) => { + const props = _.extend({}, _.omit(widget, ['columns', 'rows']), { + key: `widget.${index}`, type: widget.type, - w: (widget.columns / columns * 100) + '%', - h: widgetHeight, - x: (widget.x / columns * 100) + '%', - y: widgetY + w: `${ widget.columns / columns * 100 }%`, + h: `${ widget.rows / rows * 100 }%`, + x: `${ widget.x / columns * 100 }%`, + y: `${ widget.y / rows * 100 }%` }); return React.createElement(Widget, props); }); - var cssClasses = 'dashboard__sheet'; - if (this.state.isCurrent) { + let cssClasses = 'dashboard__sheet'; + let bodyCssClasses = 'dashboard__body'; + if (isCurrent) { cssClasses += ' _is-current'; } - var titleNode = null; - + let titleNode = null; if (title) { - titleNode = ( -
{title}
- ); + bodyCssClasses += ' dashboard__body--with-header'; + titleNode = ( +
+ {title} +
+ ); } return (
{titleNode} - {widgetNodes} +
+ {widgetNodes} +
); } }); -module.exports = Dashboard; + +export default Dashboard; diff --git a/src/styl/__vars.styl b/src/styl/__vars.styl index f8a2acbd..58b17377 100644 --- a/src/styl/__vars.styl +++ b/src/styl/__vars.styl @@ -1,14 +1,16 @@ // 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-margin = 1vmin $main-font = normal normal 400 unquote("2.4vmin/3.6vmin") "Open sans", sans-serif +// DASHBOARD +$dashboard-header-height = 8vmin +$dashboard-header-txt-color = #eee +$dashboard-header-font = normal normal 400 unquote("4vmin/8vmin") "Open sans", sans-serif // WIDGET -$widget-spacing = 2vmin +$widget-spacing = 1.6vmin $widget-bg-color = #fff $widget-shadow = none $widget-border = none diff --git a/src/styl/_main.styl b/src/styl/_main.styl index c4d90a22..2ae490d2 100644 --- a/src/styl/_main.styl +++ b/src/styl/_main.styl @@ -1,61 +1,32 @@ html, body font $main-font - background $main-bg-color color $main-txt-color - + margin 0 height 100% width 100% - overflow hidden *, *:before, *:after box-sizing border-box -#hotboard { - position: absolute; - - top: ($main-margin - $widget-spacing / 2); - right: ($main-margin - $widget-spacing / 2); - bottom: ($main-margin - $widget-spacing / 2); - left: ($main-margin - $widget-spacing / 2); -} - -.histogram { - &__axis { - &__legend { - font-size: 14px; - fill: $chart-axis-txt-color; - } - } -} +.histogram + &__axis + &__legend + font-size 14px + fill $chart-axis-txt-color -h1, h2, h3, h4, h5, h6 { - font-family: "Montserrat", sans-serif; - text-transform: uppercase; - font-weight: 400; -} +h1, h2, h3, h4, h5, h6 + font-family "Montserrat", sans-serif + text-transform uppercase + font-weight 400 -.txt--success { - color $success-color; -} +.txt--success + color $success-color -.prop { - &__key { - color: $prop-key-txt-color; - } - &__value { - color: $prop-value-txt-color; - } -} +.prop + &__key + color $prop-key-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; -} + &__value + color $prop-value-txt-color diff --git a/src/styl/components/_dashboard.styl b/src/styl/components/_dashboard.styl index af4c2dd2..228bc6cc 100644 --- a/src/styl/components/_dashboard.styl +++ b/src/styl/components/_dashboard.styl @@ -2,6 +2,26 @@ height 100% width 100% + &__title + position absolute + top ($widget-spacing / 2) + right ($widget-spacing / 2) + left ($widget-spacing / 2) + height $dashboard-header-height + color $dashboard-header-txt-color + font $dashboard-header-font + padding 0 3vmin + + &__body + position absolute + width 100% + top 0 + bottom 0 + left 0 + + &--with-header + top $dashboard-header-height + $widget-spacing + &__wrapper height 100% width 100% @@ -9,45 +29,27 @@ &__timeline width 100% height 4px - position absolute - top -8px left 0 - padding 0 $widget-spacing / 2 &__progress height 100% width 100% - background-color: #e0c671 - &__sheet - height 100% - width 100% - position absolute - - top 0 - left 0 - + top $main-margin + right $main-margin + bottom $main-margin + left $main-margin opacity 0 - padding 20px - transition(all 800ms) - - //transform: scale(0.8); - z-index 1 &._is-current - left 0 - z-index 2 - opacity 1 - - //transform: scale(1); \ No newline at end of file diff --git a/src/themes/bordeau/_dashboard.styl b/src/themes/bordeau/_dashboard.styl new file mode 100644 index 00000000..2dde457f --- /dev/null +++ b/src/themes/bordeau/_dashboard.styl @@ -0,0 +1,7 @@ +.dashboard__title + text-transform uppercase + background $widget-bg-color + border-radius $widget-header-border-radius + padding 0 2vmin + box-shadow $widget-header-shadow, + $widget-shadow \ No newline at end of file diff --git a/src/themes/bordeau/_list.styl b/src/themes/bordeau/_list.styl index b0481559..f77b8542 100644 --- a/src/themes/bordeau/_list.styl +++ b/src/themes/bordeau/_list.styl @@ -1,12 +1,8 @@ -.list__item { - &__time { - font-style italic; - color hsl(0, 52%, 60%); - } +.list__item + &__time + font-style italic + color hsl(0, 52%, 60%) - &--with-status { - &:before { - box-shadow 0 1px 1px $main-bg-color; - } - } -} \ No newline at end of file + &--with-status + &:before + box-shadow 0 1px 1px $main-bg-color diff --git a/src/themes/bordeau/_vars.styl b/src/themes/bordeau/_vars.styl index 0a9c58eb..134e9913 100644 --- a/src/themes/bordeau/_vars.styl +++ b/src/themes/bordeau/_vars.styl @@ -3,12 +3,16 @@ // GENERIC $main-bg-color = rgb(40, 18, 18) $main-txt-color = hsl(6, 26%, 67%) -$main-margin = 6vmin +$main-margin = 4vmin $main-font = normal normal 400 unquote("2vmin/3vmin") "Open sans", sans-serif +// DASHBOARD +$dashboard-header-height = 6vmin +$dashboard-header-txt-color = hsl(0, 52%, 60%) +$dashboard-header-font = normal normal 300 unquote("2.6vmin/6vmin") "Roboto Slab", sans-serif // WIDGET -$widget-spacing = 2px +$widget-spacing = 0.4vmin $widget-bg-color = rgb(69, 23, 23) $widget-border-radius = 0 diff --git a/src/themes/bordeau/_widget.styl b/src/themes/bordeau/_widget.styl index d605404c..1543a7a7 100644 --- a/src/themes/bordeau/_widget.styl +++ b/src/themes/bordeau/_widget.styl @@ -1,12 +1,8 @@ -.widget { - &__header { - &__count { - font-weight 300; - } +.widget + &__header + &__count + font-weight 300 - &__subject { - color #fff; - font-weight 300; - } - } -} \ No newline at end of file + &__subject + color #fff + font-weight 300 diff --git a/src/themes/bordeau/index.styl b/src/themes/bordeau/index.styl index 4d3313c2..96c5b699 100644 --- a/src/themes/bordeau/index.styl +++ b/src/themes/bordeau/index.styl @@ -1,3 +1,4 @@ -@require '_widget.styl'; -@require '_list.styl'; -@require 'time/_clock.styl'; \ No newline at end of file +@require '_dashboard' +@require '_widget' +@require '_list' +@require 'time/_clock' \ No newline at end of file diff --git a/src/themes/light-grey/_dashboard.styl b/src/themes/light-grey/_dashboard.styl new file mode 100644 index 00000000..ea15c612 --- /dev/null +++ b/src/themes/light-grey/_dashboard.styl @@ -0,0 +1,3 @@ +.dashboard__title + text-align center + text-transform uppercase \ No newline at end of file diff --git a/src/themes/light-grey/_vars.styl b/src/themes/light-grey/_vars.styl index e63edf08..8791af4f 100644 --- a/src/themes/light-grey/_vars.styl +++ b/src/themes/light-grey/_vars.styl @@ -4,6 +4,10 @@ $main-bg-color = #eee $main-txt-color = #555 +// DASHBOARD +$dashboard-header-height = 6vmin +$dashboard-header-txt-color = #333 +$dashboard-header-font = normal normal 300 unquote("4vmin/6vmin") "Lato", sans-serif // WIDGET $widget-spacing = 1.6vmin diff --git a/src/themes/light-grey/index.styl b/src/themes/light-grey/index.styl index 60b0e7a2..0e9d5200 100644 --- a/src/themes/light-grey/index.styl +++ b/src/themes/light-grey/index.styl @@ -1,2 +1,3 @@ -@require '_widget.styl'; -@require 'time/_clock.styl'; \ No newline at end of file +@require '_dashboard' +@require '_widget' +@require 'time/_clock' \ No newline at end of file diff --git a/src/themes/light-yellow/_vars.styl b/src/themes/light-yellow/_vars.styl index 0c9f84af..ff914524 100644 --- a/src/themes/light-yellow/_vars.styl +++ b/src/themes/light-yellow/_vars.styl @@ -3,9 +3,13 @@ // GENERIC $main-bg-color = #f1e2b9 $main-txt-color = #050505 -$main-margin = 8vmin +$main-margin = 5vmin $main-font = normal normal 400 unquote("2.2vmin/3.2vmin") "Lato", sans-serif +// DASHBOARD +$dashboard-header-height = 6vmin +$dashboard-header-txt-color = #050505 +$dashboard-header-font = normal normal 300 unquote("4vmin/6vmin") "Lato", sans-serif // WIDGET $widget-spacing = 2vmin diff --git a/src/themes/light-yellow/index.styl b/src/themes/light-yellow/index.styl index 159fcda9..5840245d 100644 --- a/src/themes/light-yellow/index.styl +++ b/src/themes/light-yellow/index.styl @@ -1,2 +1,2 @@ -@require '_list.styl'; -@require 'time/_clock.styl'; \ No newline at end of file +@require '_list' +@require 'time/_clock' \ No newline at end of file diff --git a/src/themes/night-blue/_dashboard.styl b/src/themes/night-blue/_dashboard.styl new file mode 100644 index 00000000..2dde457f --- /dev/null +++ b/src/themes/night-blue/_dashboard.styl @@ -0,0 +1,7 @@ +.dashboard__title + text-transform uppercase + background $widget-bg-color + border-radius $widget-header-border-radius + padding 0 2vmin + box-shadow $widget-header-shadow, + $widget-shadow \ No newline at end of file diff --git a/src/themes/night-blue/_vars.styl b/src/themes/night-blue/_vars.styl index d12cd759..4a98d21d 100644 --- a/src/themes/night-blue/_vars.styl +++ b/src/themes/night-blue/_vars.styl @@ -5,6 +5,10 @@ $main-bg-color = #1e2430 $main-txt-color = #eedba5 $main-font = normal normal 400 unquote("1.6vmin/3vmin") "Raleway", sans-serif +// DASHBOARD +$dashboard-header-height = 5vmin +$dashboard-header-txt-color = #e0c671 +$dashboard-header-font = normal normal 400 unquote("2.6vmin/5vmin") "Raleway", sans-serif // WIDGET $widget-bg-color = #2b3847 diff --git a/src/themes/night-blue/index.styl b/src/themes/night-blue/index.styl index 78791dec..96c5b699 100644 --- a/src/themes/night-blue/index.styl +++ b/src/themes/night-blue/index.styl @@ -1,3 +1,4 @@ +@require '_dashboard' @require '_widget' @require '_list' @require 'time/_clock' \ No newline at end of file diff --git a/src/themes/snow/_dashboard.styl b/src/themes/snow/_dashboard.styl new file mode 100644 index 00000000..4bc59463 --- /dev/null +++ b/src/themes/snow/_dashboard.styl @@ -0,0 +1,4 @@ +.dashboard__title + background $widget-header-bg-color + border-radius $widget-header-border-radius + padding 0 2vmin diff --git a/src/themes/snow/_vars.styl b/src/themes/snow/_vars.styl index 72f1d05d..7d8bc3b1 100644 --- a/src/themes/snow/_vars.styl +++ b/src/themes/snow/_vars.styl @@ -4,9 +4,13 @@ // GENERIC $main-bg-color = #ebf0f1 $main-txt-color = #333 -$main-margin = 10vmin +$main-margin = 2vmin $main-font = normal normal 400 unquote("1.6vmin/3vmin") "Open Sans", sans-serif +// DASHBOARD +$dashboard-header-height = 6vmin +$dashboard-header-txt-color = #333 +$dashboard-header-font = normal normal 400 unquote("2.6vmin/6vmin") "Montserrat", sans-serif // WIDGET $widget-spacing = 2vmin diff --git a/src/themes/snow/index.styl b/src/themes/snow/index.styl index 7d4562ae..eda6cc08 100644 --- a/src/themes/snow/index.styl +++ b/src/themes/snow/index.styl @@ -1 +1,2 @@ +@import '_dashboard' @import '_clock' diff --git a/src/themes/yellow/_dashboard.styl b/src/themes/yellow/_dashboard.styl new file mode 100644 index 00000000..69469e9f --- /dev/null +++ b/src/themes/yellow/_dashboard.styl @@ -0,0 +1,5 @@ +.dashboard__title + background $widget-bg-color + text-transform uppercase + padding 0 2vmin + border-radius $widget-border-radius \ No newline at end of file diff --git a/src/themes/yellow/_vars.styl b/src/themes/yellow/_vars.styl index 1c0f6353..b19fca82 100644 --- a/src/themes/yellow/_vars.styl +++ b/src/themes/yellow/_vars.styl @@ -3,8 +3,12 @@ // GENERIC $main-bg-color = #e5dabe $main-txt-color = #444 -$main-margin = 4vmin +$main-margin = 2vmin +// DASHBOARD +$dashboard-header-height = 6vmin +$dashboard-header-txt-color = #735e39 +$dashboard-header-font = normal normal 300 unquote("3.4vmin/6vmin") "Montserrat", sans-serif // WIDGET $widget-spacing = 1.6vmin diff --git a/src/themes/yellow/_widget.styl b/src/themes/yellow/_widget.styl index dd376c14..22a4e72d 100644 --- a/src/themes/yellow/_widget.styl +++ b/src/themes/yellow/_widget.styl @@ -1,7 +1,5 @@ -.widget__header { - text-transform uppercase; +.widget__header + text-transform uppercase - &__count { - font-weight 400; - } -} \ No newline at end of file + &__count + font-weight 400 diff --git a/src/themes/yellow/index.styl b/src/themes/yellow/index.styl index 7321c29e..8e939025 100644 --- a/src/themes/yellow/index.styl +++ b/src/themes/yellow/index.styl @@ -1,4 +1,5 @@ -@require '_widget.styl'; -@require 'time/_clock.styl'; -@require 'weather/_weather.styl'; -@require '_list.styl'; \ No newline at end of file +@require '_dashboard' +@require '_widget' +@require 'time/_clock' +@require 'weather/_weather' +@require '_list' \ No newline at end of file