From bc3cb7c8ea7e3beb3d119f249e54a7716a5b7fb4 Mon Sep 17 00:00:00 2001 From: Geoffrey Date: Wed, 11 Feb 2015 20:33:09 -0600 Subject: [PATCH 01/17] Changed ink-bar to fit css-in-js mold --- src/js/ink-bar.jsx | 20 ++++++++++++++++---- src/less/components/components.less | 1 - src/less/components/ink-bar.less | 9 --------- 3 files changed, 16 insertions(+), 14 deletions(-) delete mode 100644 src/less/components/ink-bar.less diff --git a/src/js/ink-bar.jsx b/src/js/ink-bar.jsx index ca15e4973095e8..ef0e8dd4300f1f 100644 --- a/src/js/ink-bar.jsx +++ b/src/js/ink-bar.jsx @@ -1,4 +1,7 @@ var React = require('react'); +var Transitions = require('./styles/mixins/transitions.js'); +var StylePropable = require('./mixins/style-propable.js'); + var InkBar = React.createClass({ @@ -6,15 +9,24 @@ var InkBar = React.createClass({ position: React.PropTypes.string }, + mixins: [StylePropable], + render: function() { - var styles = { + var styles = this.mergePropStyles({ left: this.props.left, - width: this.props.width - } + width: this.props.width, + bottom: '0', + display: 'block', + 'background-color': 'yellow', + height: '2px', + 'margin-top': '-2px', + position: 'relative', + transition: Transitions.easeOut('1s', 'left') + }); return ( -
+
 
); diff --git a/src/less/components/components.less b/src/less/components/components.less index c3bb8da8b1df91..40a5ac9e94d958 100644 --- a/src/less/components/components.less +++ b/src/less/components/components.less @@ -13,7 +13,6 @@ @import "floating-action-button.less"; @import "font-icon.less"; @import "icon-button.less"; -@import "ink-bar.less"; @import "input.less"; @import "left-nav.less"; @import "menu.less"; diff --git a/src/less/components/ink-bar.less b/src/less/components/ink-bar.less deleted file mode 100644 index 9801e7a502dbf6..00000000000000 --- a/src/less/components/ink-bar.less +++ /dev/null @@ -1,9 +0,0 @@ -.mui-ink-bar { - bottom: 0; - display: block; - background-color: yellow; - height: 2px; - margin-top: -2px; - position: relative; - .ease-out(1s, left); -} From 3bdc74db99accfbb116bb474bc88c32db1c18081 Mon Sep 17 00:00:00 2001 From: Geoffrey Date: Wed, 11 Feb 2015 20:44:31 -0600 Subject: [PATCH 02/17] Made change to ccs-in-js styles for tabTemplate --- src/js/tabs/tabTemplate.jsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/js/tabs/tabTemplate.jsx b/src/js/tabs/tabTemplate.jsx index 03a3832d6985f2..bef9f4fa3f4b30 100644 --- a/src/js/tabs/tabTemplate.jsx +++ b/src/js/tabs/tabTemplate.jsx @@ -1,11 +1,21 @@ var React = require('react'); +var StylePropable = require('../mixins/style-propable.js'); var TabTemplate = React.createClass({ + mixins: [StylePropable], + render: function(){ + var styles = this.mergePropStyles({ + 'display': 'block', + 'width': '100%', + 'position': 'relative', + 'text-align': 'initial' + }); + return ( -
+
{this.props.children}
); From f3b54d6b122bb73e43868f35d3a07af61a38e478 Mon Sep 17 00:00:00 2001 From: Geoffrey Date: Wed, 11 Feb 2015 21:27:59 -0600 Subject: [PATCH 03/17] Completed tabs to css-in-jx --- src/js/ink-bar.jsx | 18 ++++++------- src/js/tabs/tab.jsx | 28 +++++++++++++------- src/js/tabs/tabs.jsx | 17 ++++++++++-- src/less/components/components.less | 1 - src/less/components/tabs.less | 41 ----------------------------- 5 files changed, 42 insertions(+), 63 deletions(-) delete mode 100644 src/less/components/tabs.less diff --git a/src/js/ink-bar.jsx b/src/js/ink-bar.jsx index ef0e8dd4300f1f..8df1768e36fc13 100644 --- a/src/js/ink-bar.jsx +++ b/src/js/ink-bar.jsx @@ -14,15 +14,15 @@ var InkBar = React.createClass({ render: function() { var styles = this.mergePropStyles({ - left: this.props.left, - width: this.props.width, - bottom: '0', - display: 'block', - 'background-color': 'yellow', - height: '2px', - 'margin-top': '-2px', - position: 'relative', - transition: Transitions.easeOut('1s', 'left') + 'left': this.props.left, + 'width': this.props.width, + 'bottom': '0', + 'display': 'block', + 'backgroundColor': 'yellow', + 'height': '2px', + 'marginTop': '-2px', + 'position': 'relative', + 'transition': Transitions.easeOut('1s', 'left') }); return ( diff --git a/src/js/tabs/tab.jsx b/src/js/tabs/tab.jsx index 52da93756a6ceb..664174b0e6e1d4 100644 --- a/src/js/tabs/tab.jsx +++ b/src/js/tabs/tab.jsx @@ -1,11 +1,11 @@ var React = require('react'); -var Classable = require('../mixins/classable'); var TabTemplate = require('./tabTemplate'); - +var StylePropable = require('../mixins/style-propable.js'); +var Theme = require('../styles/theme.js'); var Tab = React.createClass({ - mixins: [Classable], + mixins: [StylePropable], propTypes: { handleTouchTap: React.PropTypes.func, @@ -18,16 +18,24 @@ var Tab = React.createClass({ }, render: function(){ - var styles = { - width: this.props.width - }; - - var classes = this.getClasses('mui-tab-item', { - 'mui-tab-is-active': this.props.selected + var styles = this.mergePropStyles({ + 'display': 'inline-block', + 'height': '100%', + 'cursor': 'pointer', + 'textAlign': 'center', + 'lineHeight': '48px', + 'color': '#fff', + 'opacity': '.6', + 'fontSize': '14sp', + 'fontWeight': '500', + 'font': Theme.fontFamily, + 'width': this.props.width }); + if (this.props.selected) styles.opacity = '1'; + return ( -
+
{this.props.label}
) diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx index c620e55d6eb472..c48e583b601bee 100644 --- a/src/js/tabs/tabs.jsx +++ b/src/js/tabs/tabs.jsx @@ -2,9 +2,13 @@ var React = require('react/addons'); var Tab = require('./tab'); var TabTemplate = require('./tabTemplate'); var InkBar = require('../ink-bar'); +var Transitions = require('../styles/mixins/transitions.js'); +var StylePropable = require('../mixins/style-propable.js'); var Tabs = React.createClass({ + mixins: [StylePropable], + propTypes: { onActive: React.PropTypes.func }, @@ -47,6 +51,15 @@ var Tabs = React.createClass({ }, render: function(){ + var tabItemContainerStyle = this.mergePropStyles({ + margin: '0', + padding: '0', + width: '100%', + height: '48px', + 'backgroundColor': '#00bcd4', + 'whiteSpace': 'nowrap', + display: 'block' + }, this.props.tabItemContainerStyle); var _this = this; var width = this.state.fixed ? this.state.width/this.props.children.length : @@ -70,8 +83,8 @@ var Tabs = React.createClass({ }); return ( -
-
+
+
{tabs}
diff --git a/src/less/components/components.less b/src/less/components/components.less index 40a5ac9e94d958..797ae10da3ec76 100644 --- a/src/less/components/components.less +++ b/src/less/components/components.less @@ -25,7 +25,6 @@ @import "snackbar.less"; @import "subheader.less"; @import "table.less"; -@import "tabs.less"; @import "text-field.less"; @import "toggle.less"; @import "toolbar.less"; diff --git a/src/less/components/tabs.less b/src/less/components/tabs.less deleted file mode 100644 index 21d512be2d3d34..00000000000000 --- a/src/less/components/tabs.less +++ /dev/null @@ -1,41 +0,0 @@ -.mui-tabs-container { - position: relative; - - .mui-tab-item-container { - margin: 0; - padding: 0; - width: 100%; - height: 48px; - background-color: #00bcd4; - white-space: nowrap; - display: block; - - - .mui-tab-item { - display: inline-block; - height: 100%; - cursor: pointer; - text-align: center; - line-height: 48px; - color: #fff; - opacity: .6; - font-size: 14sp; - font-weight: 500; - font: @headingFontFamily; - - - &.mui-tab-is-active { - color: #fff; - opacity: 1; - font: @headingFontFamily; - } - - .mui-tab-template { - display: block; - width: 100%; - position: relative; - text-align: initial; - } - } - } -} \ No newline at end of file From 19b4374122b71bb7978bcb8c5f72befcfe895985 Mon Sep 17 00:00:00 2001 From: Geoffrey Date: Wed, 11 Feb 2015 22:49:50 -0600 Subject: [PATCH 04/17] Allow a user to specify color/background colors in props --- src/js/ink-bar.jsx | 10 +++------- src/js/tabs/tab.jsx | 5 ++--- src/js/tabs/tabs.jsx | 12 +++++------- 3 files changed, 10 insertions(+), 17 deletions(-) diff --git a/src/js/ink-bar.jsx b/src/js/ink-bar.jsx index 8df1768e36fc13..de18be47bb84e8 100644 --- a/src/js/ink-bar.jsx +++ b/src/js/ink-bar.jsx @@ -1,29 +1,25 @@ var React = require('react'); var Transitions = require('./styles/mixins/transitions.js'); -var StylePropable = require('./mixins/style-propable.js'); - var InkBar = React.createClass({ propTypes: { position: React.PropTypes.string }, - - mixins: [StylePropable], render: function() { - var styles = this.mergePropStyles({ + var styles = { 'left': this.props.left, 'width': this.props.width, 'bottom': '0', 'display': 'block', - 'backgroundColor': 'yellow', + 'backgroundColor': this.props.inkBarColor || 'yellow', 'height': '2px', 'marginTop': '-2px', 'position': 'relative', 'transition': Transitions.easeOut('1s', 'left') - }); + }; return (
diff --git a/src/js/tabs/tab.jsx b/src/js/tabs/tab.jsx index 664174b0e6e1d4..a8cbbfa5944400 100644 --- a/src/js/tabs/tab.jsx +++ b/src/js/tabs/tab.jsx @@ -18,19 +18,18 @@ var Tab = React.createClass({ }, render: function(){ - var styles = this.mergePropStyles({ + var styles = { 'display': 'inline-block', 'height': '100%', 'cursor': 'pointer', 'textAlign': 'center', 'lineHeight': '48px', - 'color': '#fff', 'opacity': '.6', 'fontSize': '14sp', 'fontWeight': '500', 'font': Theme.fontFamily, 'width': this.props.width - }); + }; if (this.props.selected) styles.opacity = '1'; diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx index c48e583b601bee..2057c3e8479341 100644 --- a/src/js/tabs/tabs.jsx +++ b/src/js/tabs/tabs.jsx @@ -3,12 +3,9 @@ var Tab = require('./tab'); var TabTemplate = require('./tabTemplate'); var InkBar = require('../ink-bar'); var Transitions = require('../styles/mixins/transitions.js'); -var StylePropable = require('../mixins/style-propable.js'); var Tabs = React.createClass({ - mixins: [StylePropable], - propTypes: { onActive: React.PropTypes.func }, @@ -51,15 +48,16 @@ var Tabs = React.createClass({ }, render: function(){ - var tabItemContainerStyle = this.mergePropStyles({ + var tabItemContainerStyle = { margin: '0', padding: '0', width: '100%', + 'color': this.props.tabFontColor || '#fff', height: '48px', - 'backgroundColor': '#00bcd4', + 'backgroundColor': this.props.tabContainerColor || '#00bcd4', 'whiteSpace': 'nowrap', display: 'block' - }, this.props.tabItemContainerStyle); + }; var _this = this; var width = this.state.fixed ? this.state.width/this.props.children.length : @@ -87,7 +85,7 @@ var Tabs = React.createClass({
{tabs}
- + {currentTemplate} From cfe3a76f56d436207a7a41b17169758a4bafd09d Mon Sep 17 00:00:00 2001 From: Geoffrey Date: Tue, 17 Feb 2015 21:55:58 -0600 Subject: [PATCH 05/17] Changed mergePropStyles for certain components --- src/js/tabs/tab.jsx | 4 ++-- src/js/tabs/tabTemplate.jsx | 6 ++---- src/js/tabs/tabs.jsx | 5 ++++- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/js/tabs/tab.jsx b/src/js/tabs/tab.jsx index a8cbbfa5944400..55b793e41efeb9 100644 --- a/src/js/tabs/tab.jsx +++ b/src/js/tabs/tab.jsx @@ -18,7 +18,7 @@ var Tab = React.createClass({ }, render: function(){ - var styles = { + var styles = this.mergePropStyles({ 'display': 'inline-block', 'height': '100%', 'cursor': 'pointer', @@ -29,7 +29,7 @@ var Tab = React.createClass({ 'fontWeight': '500', 'font': Theme.fontFamily, 'width': this.props.width - }; + }); if (this.props.selected) styles.opacity = '1'; diff --git a/src/js/tabs/tabTemplate.jsx b/src/js/tabs/tabTemplate.jsx index bef9f4fa3f4b30..f599e52d16fc87 100644 --- a/src/js/tabs/tabTemplate.jsx +++ b/src/js/tabs/tabTemplate.jsx @@ -3,16 +3,14 @@ var StylePropable = require('../mixins/style-propable.js'); var TabTemplate = React.createClass({ - mixins: [StylePropable], - render: function(){ - var styles = this.mergePropStyles({ + var styles = { 'display': 'block', 'width': '100%', 'position': 'relative', 'text-align': 'initial' - }); + }; return (
diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx index 2057c3e8479341..3c5e12d77d5082 100644 --- a/src/js/tabs/tabs.jsx +++ b/src/js/tabs/tabs.jsx @@ -48,6 +48,9 @@ var Tabs = React.createClass({ }, render: function(){ + var styles = this.mergePropStyles({ + position: 'relative' + }); var tabItemContainerStyle = { margin: '0', padding: '0', @@ -81,7 +84,7 @@ var Tabs = React.createClass({ }); return ( -
+
{tabs}
From 11b9b9fe10912e598ef8817a1dd6ad7e2fdce7c7 Mon Sep 17 00:00:00 2001 From: Geoffrey Date: Tue, 17 Feb 2015 21:59:34 -0600 Subject: [PATCH 06/17] Removed extraneous input --- src/less/components/components.less | 1 - 1 file changed, 1 deletion(-) diff --git a/src/less/components/components.less b/src/less/components/components.less index aa22e2bcda3a30..24fd340113a4a9 100644 --- a/src/less/components/components.less +++ b/src/less/components/components.less @@ -9,7 +9,6 @@ @import "flat-button.less"; @import "floating-action-button.less"; @import "icon-button.less"; -@import "input.less"; @import "left-nav.less"; @import "menu.less"; @import "menu-item.less"; From a7176dcaa9dd0d5733e104c48046664c78280ea1 Mon Sep 17 00:00:00 2001 From: Geoffrey Date: Wed, 18 Feb 2015 08:55:57 -0600 Subject: [PATCH 07/17] Changed to mergeStyles --- src/js/tabs/tab.jsx | 2 +- src/js/tabs/tabs.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/tabs/tab.jsx b/src/js/tabs/tab.jsx index 55b793e41efeb9..3ddd7ace7f47f0 100644 --- a/src/js/tabs/tab.jsx +++ b/src/js/tabs/tab.jsx @@ -18,7 +18,7 @@ var Tab = React.createClass({ }, render: function(){ - var styles = this.mergePropStyles({ + var styles = this.mergeStyles({ 'display': 'inline-block', 'height': '100%', 'cursor': 'pointer', diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx index 3c5e12d77d5082..410f3462fd37fa 100644 --- a/src/js/tabs/tabs.jsx +++ b/src/js/tabs/tabs.jsx @@ -48,7 +48,7 @@ var Tabs = React.createClass({ }, render: function(){ - var styles = this.mergePropStyles({ + var styles = this.mergeStyles({ position: 'relative' }); var tabItemContainerStyle = { From c3d5d62ac75130fdb14725e8cab1826361acf775 Mon Sep 17 00:00:00 2001 From: Geoffrey Date: Thu, 19 Feb 2015 07:36:40 -0600 Subject: [PATCH 08/17] Change tabs for fixes/adds percent width/removes tabwidth correction --- src/js/tabs/tabs.jsx | 58 +++++++++++++++----------------------------- 1 file changed, 20 insertions(+), 38 deletions(-) diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx index 410f3462fd37fa..ba71048c99ba33 100644 --- a/src/js/tabs/tabs.jsx +++ b/src/js/tabs/tabs.jsx @@ -3,41 +3,29 @@ var Tab = require('./tab'); var TabTemplate = require('./tabTemplate'); var InkBar = require('../ink-bar'); var Transitions = require('../styles/mixins/transitions.js'); +var StylePropable = require('../mixins/style-propable.js'); +var Colors = require('../styles/colors.js') + var Tabs = React.createClass({ + mixins: [StylePropable], + propTypes: { - onActive: React.PropTypes.func + onActive: React.PropTypes.func, + tabWidth: React.PropTypes.number }, getInitialState: function(){ return { - selectedIndex: 0 + selectedIndex: 0, + fixed: true, + width: this.props.tabWidth || (100/this.props.children.length) + '%' }; }, - getEvenWidth: function(){ - return ( - parseInt(window - .getComputedStyle(this.getDOMNode()) - .getPropertyValue('width'), 10) - ); - }, - - componentDidMount: function(){ - if(this.props.tabWidth) { - if(!(this.props.children.length * this.props.tabWidth > this.getEvenWidth())){ - this.setState({ - width: this.props.tabWidth, - fixed: false - }); - return; - } - } - this.setState({ - width: this.getEvenWidth(), - fixed: true - }); + getLeft: function(){ + ((100/this.props.children.length) * this.state.selectedIndex) + '%' }, handleTouchTap: function(tabIndex, tab){ @@ -48,24 +36,18 @@ var Tabs = React.createClass({ }, render: function(){ - var styles = this.mergeStyles({ - position: 'relative' - }); - var tabItemContainerStyle = { + var tabItemContainerStyle = this.mergePropStyles({ margin: '0', padding: '0', width: '100%', - 'color': this.props.tabFontColor || '#fff', height: '48px', - 'backgroundColor': this.props.tabContainerColor || '#00bcd4', - 'whiteSpace': 'nowrap', + backgroundColor: Colors.cyan500, + whiteSpace: 'nowrap', display: 'block' - }; + }, this.props.tabItemContainerStyle); var _this = this; - var width = this.state.fixed ? - this.state.width/this.props.children.length : - this.props.tabWidth; - var left = width * this.state.selectedIndex || 0; + var width = this.state.width; + var left = typeof(width) === 'number' ? width * this.state.selectedIndex : this.getLeft(); var currentTemplate; var tabs = React.Children.map(this.props.children, function(tab, index){ if(tab.type.displayName === "Tab"){ @@ -84,11 +66,11 @@ var Tabs = React.createClass({ }); return ( -
+
{tabs}
- + {currentTemplate} From 0ef6de100d7d0241c707859cf6edb8a5cc41dffd Mon Sep 17 00:00:00 2001 From: Geoffrey Date: Thu, 19 Feb 2015 07:38:47 -0600 Subject: [PATCH 09/17] Change color to use variable --- src/js/tabs/tab.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/js/tabs/tab.jsx b/src/js/tabs/tab.jsx index 3ddd7ace7f47f0..462a0fff0412b5 100644 --- a/src/js/tabs/tab.jsx +++ b/src/js/tabs/tab.jsx @@ -2,7 +2,7 @@ var React = require('react'); var TabTemplate = require('./tabTemplate'); var StylePropable = require('../mixins/style-propable.js'); var Theme = require('../styles/theme.js'); - +var Colors = require('../styles/colors.js') var Tab = React.createClass({ mixins: [StylePropable], @@ -24,6 +24,7 @@ var Tab = React.createClass({ 'cursor': 'pointer', 'textAlign': 'center', 'lineHeight': '48px', + 'color': Colors.white, 'opacity': '.6', 'fontSize': '14sp', 'fontWeight': '500', From 865aa235de824b6f4255308acb041fb95dd3e223 Mon Sep 17 00:00:00 2001 From: Geoffrey Date: Thu, 19 Feb 2015 07:40:22 -0600 Subject: [PATCH 10/17] Removed extraneous sytlepropable --- src/js/tabs/tabTemplate.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/js/tabs/tabTemplate.jsx b/src/js/tabs/tabTemplate.jsx index f599e52d16fc87..16bb7ec8ba41ba 100644 --- a/src/js/tabs/tabTemplate.jsx +++ b/src/js/tabs/tabTemplate.jsx @@ -1,5 +1,4 @@ var React = require('react'); -var StylePropable = require('../mixins/style-propable.js'); var TabTemplate = React.createClass({ From 35d6d8e6eee493cf34f73fb71ba28a43d0a60d3d Mon Sep 17 00:00:00 2001 From: Geoffrey Date: Thu, 19 Feb 2015 07:48:40 -0600 Subject: [PATCH 11/17] Changed mergePropStyles to mergeStyle --- src/js/ink-bar.jsx | 27 ++++++++++++++++----------- src/js/tabs/tabs.jsx | 2 +- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/js/ink-bar.jsx b/src/js/ink-bar.jsx index de18be47bb84e8..f906576b453830 100644 --- a/src/js/ink-bar.jsx +++ b/src/js/ink-bar.jsx @@ -1,25 +1,30 @@ var React = require('react'); var Transitions = require('./styles/mixins/transitions.js'); +var StylePropable = require('./mixins/style-propable.js'); +var Colors = require('../styles/colors.js') + var InkBar = React.createClass({ propTypes: { position: React.PropTypes.string }, + + mixins: [StylePropable], render: function() { - var styles = { - 'left': this.props.left, - 'width': this.props.width, - 'bottom': '0', - 'display': 'block', - 'backgroundColor': this.props.inkBarColor || 'yellow', - 'height': '2px', - 'marginTop': '-2px', - 'position': 'relative', - 'transition': Transitions.easeOut('1s', 'left') - }; + var styles = this.mergeStyles({ + left: this.props.left, + width: this.props.width, + bottom: '0', + display: 'block', + backgroundColor: Colors.yellowA200, + height: '2px', + marginTop: '-2px', + position: 'relative', + transition: Transitions.easeOut('1s', 'left') + }); return (
diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx index ba71048c99ba33..264425db9430fa 100644 --- a/src/js/tabs/tabs.jsx +++ b/src/js/tabs/tabs.jsx @@ -36,7 +36,7 @@ var Tabs = React.createClass({ }, render: function(){ - var tabItemContainerStyle = this.mergePropStyles({ + var tabItemContainerStyle = this.mergeStyles({ margin: '0', padding: '0', width: '100%', From 06b7f924007fea4377c08d9e9532ba09532af0d7 Mon Sep 17 00:00:00 2001 From: Geoffrey Date: Thu, 19 Feb 2015 07:51:09 -0600 Subject: [PATCH 12/17] Fixed relative path name to colors.js --- src/js/ink-bar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/ink-bar.jsx b/src/js/ink-bar.jsx index f906576b453830..43b3bae8f9d02d 100644 --- a/src/js/ink-bar.jsx +++ b/src/js/ink-bar.jsx @@ -1,7 +1,7 @@ var React = require('react'); var Transitions = require('./styles/mixins/transitions.js'); var StylePropable = require('./mixins/style-propable.js'); -var Colors = require('../styles/colors.js') +var Colors = require('./styles/colors.js') var InkBar = React.createClass({ From 1bde8eb1ed80b0bced50a64836748d09961c6167 Mon Sep 17 00:00:00 2001 From: Geoffrey Date: Thu, 19 Feb 2015 07:55:10 -0600 Subject: [PATCH 13/17] Adds return value to getLeft --- src/js/tabs/tabs.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx index 264425db9430fa..3fa5dc5abfd883 100644 --- a/src/js/tabs/tabs.jsx +++ b/src/js/tabs/tabs.jsx @@ -25,7 +25,7 @@ var Tabs = React.createClass({ }, getLeft: function(){ - ((100/this.props.children.length) * this.state.selectedIndex) + '%' + return ((100/this.props.children.length) * this.state.selectedIndex) + '%' }, handleTouchTap: function(tabIndex, tab){ From 4e7fcc7013d4ec94ec28ed59eaccec6621e5eab5 Mon Sep 17 00:00:00 2001 From: Geoffrey Abdallah Date: Tue, 24 Feb 2015 21:18:46 -0600 Subject: [PATCH 14/17] mergeandprefix added to ink-bar --- src/js/ink-bar.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/ink-bar.jsx b/src/js/ink-bar.jsx index 43b3bae8f9d02d..878f0541baa95f 100644 --- a/src/js/ink-bar.jsx +++ b/src/js/ink-bar.jsx @@ -14,7 +14,7 @@ var InkBar = React.createClass({ render: function() { - var styles = this.mergeStyles({ + var styles = this.mergeAndPrefix({ left: this.props.left, width: this.props.width, bottom: '0', @@ -35,4 +35,4 @@ var InkBar = React.createClass({ }); -module.exports = InkBar; \ No newline at end of file +module.exports = InkBar; From f8dde6fe37f5b1f19944501bfa3c17e3a74dd303 Mon Sep 17 00:00:00 2001 From: Geoffrey Abdallah Date: Tue, 24 Feb 2015 21:19:22 -0600 Subject: [PATCH 15/17] Merge and prefix added to tabs --- src/js/tabs/tabs.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx index 3fa5dc5abfd883..3eb3c08df4b882 100644 --- a/src/js/tabs/tabs.jsx +++ b/src/js/tabs/tabs.jsx @@ -36,7 +36,7 @@ var Tabs = React.createClass({ }, render: function(){ - var tabItemContainerStyle = this.mergeStyles({ + var tabItemContainerStyle = this.mergeAndPrefix({ margin: '0', padding: '0', width: '100%', @@ -80,4 +80,4 @@ var Tabs = React.createClass({ }); -module.exports = Tabs; \ No newline at end of file +module.exports = Tabs; From 1d57a89467d3ab1613bbfc0b6bdbe9222e0c82f1 Mon Sep 17 00:00:00 2001 From: Geoffrey Abdallah Date: Tue, 24 Feb 2015 21:19:52 -0600 Subject: [PATCH 16/17] Added merge and prefix to tab --- src/js/tabs/tab.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/tabs/tab.jsx b/src/js/tabs/tab.jsx index 462a0fff0412b5..b26441797f4848 100644 --- a/src/js/tabs/tab.jsx +++ b/src/js/tabs/tab.jsx @@ -18,7 +18,7 @@ var Tab = React.createClass({ }, render: function(){ - var styles = this.mergeStyles({ + var styles = this.mergeAndPrefix({ 'display': 'inline-block', 'height': '100%', 'cursor': 'pointer', @@ -43,4 +43,4 @@ var Tab = React.createClass({ }); -module.exports = Tab; \ No newline at end of file +module.exports = Tab; From 9a7c622774c2aeb440ee868ce2a38d0d5da6b35c Mon Sep 17 00:00:00 2001 From: Geoffrey Abdallah Date: Tue, 24 Feb 2015 21:29:17 -0600 Subject: [PATCH 17/17] Reverted mergeandprefix when unnecessary --- src/js/tabs/tabs.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/tabs/tabs.jsx b/src/js/tabs/tabs.jsx index 3eb3c08df4b882..e17637a9233691 100644 --- a/src/js/tabs/tabs.jsx +++ b/src/js/tabs/tabs.jsx @@ -36,7 +36,7 @@ var Tabs = React.createClass({ }, render: function(){ - var tabItemContainerStyle = this.mergeAndPrefix({ + var tabItemContainerStyle = this.mergeStyles({ margin: '0', padding: '0', width: '100%',