From 51f83388caabf95bc7ad360239f845b98c0d0395 Mon Sep 17 00:00:00 2001 From: lukasliesis Date: Sun, 15 Nov 2015 18:47:39 +0200 Subject: [PATCH 01/24] don't hide navigation while playground is loaded if screen is 1200px+ in width --- .gitignore | 1 + docs/app/components/layout/main/index.jsx | 1 + docs/app/components/layout/main/style.scss | 32 ++++++++++++++++++++++ 3 files changed, 34 insertions(+) diff --git a/.gitignore b/.gitignore index bb9bc230..e5c73cc5 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ build lib node_modules npm-debug.log +.idea \ No newline at end of file diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.jsx index b0869d8c..80ede316 100644 --- a/docs/app/components/layout/main/index.jsx +++ b/docs/app/components/layout/main/index.jsx @@ -49,6 +49,7 @@ class Main extends React.Component { const examples = document.getElementsByClassName(this.LOAD_EXAMPLE_CLASS); Array.prototype.forEach.call(examples, (exampleNode, idx) => { const exampleCode = components[this.props.params.component].examples[idx]; + this.refs.playground.loadCode(exampleCode); ReactDOM.render( , exampleNode diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss index 42c11ffd..f477d2ba 100644 --- a/docs/app/components/layout/main/style.scss +++ b/docs/app/components/layout/main/style.scss @@ -70,6 +70,38 @@ } } +/* + don't hide navigation when playground is open if screen width > 1200px +*/ +@media screen and (min-width: 1200px) { + .root { + &:not(.with-playground) { + > .playground { + right: - ($playground-width * 1.1); + } + > .documentation { + padding-right: 0; + padding-left: $navigation-width; + } + > .navigation { + transform: translateX(0); + } + } + &.with-playground { + > .playground { + right: 0; + } + > .documentation { + padding-right: $playground-width; + padding-left: $navigation-width; + } + > .navigation { + transform: translateX(0); + } + } + } +} + .load-button { display: inline-block; } From 2bf510f42e606fb4e4325bcc1fb22a2571a204df Mon Sep 17 00:00:00 2001 From: Shant Parseghian Date: Tue, 17 Nov 2015 11:39:26 -0800 Subject: [PATCH 02/24] Add scrollX/Y for components not wrapped in App --- components/ripple/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/ripple/index.jsx b/components/ripple/index.jsx index 06d19c17..0ed7e429 100644 --- a/components/ripple/index.jsx +++ b/components/ripple/index.jsx @@ -42,8 +42,8 @@ class Ripple extends React.Component { _getDescriptor (pageX, pageY) { const { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect(); return { - left: this.props.centered ? width / 2 : pageX - left, - top: this.props.centered ? height / 2 : pageY - top, + left: this.props.centered ? width / 2 : pageX - left + window.scrollX, + top: this.props.centered ? height / 2 : pageY - top + window.scrollY, width: width * this.props.spread }; } From 477b770edda7c28db8438e750d4dbc986aa0418b Mon Sep 17 00:00:00 2001 From: "@soyjavi" Date: Wed, 18 Nov 2015 15:19:58 +0700 Subject: [PATCH 03/24] New property 'maxLength' --- components/autocomplete/style.scss | 2 +- components/input/_config.scss | 2 +- components/input/index.jsx | 13 ++++++++++++- components/input/readme.md | 1 + components/input/style.scss | 25 ++++++++++++++++++++----- spec/components/input.jsx | 9 +++++++-- 6 files changed, 42 insertions(+), 10 deletions(-) diff --git a/components/autocomplete/style.scss b/components/autocomplete/style.scss index 382c6185..853f0947 100644 --- a/components/autocomplete/style.scss +++ b/components/autocomplete/style.scss @@ -17,7 +17,7 @@ } &.errored { .suggestions { - margin-top: - $input-error-height; + margin-top: - $input-underline-height; } } } diff --git a/components/input/_config.scss b/components/input/_config.scss index d89a4911..487e100a 100644 --- a/components/input/_config.scss +++ b/components/input/_config.scss @@ -11,7 +11,7 @@ $input-text-highlight-color: unquote("rgb(#{$color-primary})") !default; $input-text-disabled-color: $input-text-bottom-border-color !default; $input-text-disabled-text-color: $input-text-label-color !default; $input-text-error-color: unquote("rgb(222, 50, 38)") !default; -$input-error-height: 1.8 * $unit; +$input-underline-height: 2 * $unit; $input-icon-font-size: 2.4 * $unit; $input-icon-size: 2 * $input-icon-font-size; $input-icon-offset: 1.6 * $unit; diff --git a/components/input/index.jsx b/components/input/index.jsx index a9158254..aa8cbed0 100644 --- a/components/input/index.jsx +++ b/components/input/index.jsx @@ -11,6 +11,7 @@ class Input extends React.Component { floating: React.PropTypes.bool, icon: React.PropTypes.string, label: React.PropTypes.string, + maxLength: React.PropTypes.number, multiline: React.PropTypes.bool, onBlur: React.PropTypes.func, onChange: React.PropTypes.func, @@ -40,6 +41,16 @@ class Input extends React.Component { } } + renderUnderline () { + const error = this.props.error ? {this.props.error} : null; + let counter = null; + if (this.props.maxLength) { + const length = this.props.value ? this.props.value.length : 0; + if (length > 0) counter = {length} / {this.props.maxLength}; + } + if (error || counter) return {error}{counter}; + } + render () { let className = style.root; let labelClassName = style.label; @@ -56,7 +67,7 @@ class Input extends React.Component { { this.props.icon ? : null } { this.props.label ? : null } - { this.props.error ? {this.props.error} : null } + { this.renderUnderline() } { this.props.tooltip ? : null } ); diff --git a/components/input/readme.md b/components/input/readme.md index cc06f3cd..11afe733 100644 --- a/components/input/readme.md +++ b/components/input/readme.md @@ -38,6 +38,7 @@ class InputTest extends React.Component { | `icon` | `String` | | Name of an icon to use as a label for the input.| | `floating` | `Boolean` | `true` | Indicates if the label is floating in the input field or not.| | `label` | `String` | | The text string to use for the floating label element.| +| `maxLength` | `number` | |Specifies the maximum number of characters allowed in the component.| | `multiline` | `Boolean` | `false` | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.| | `onBlur` | `Function` | | Callback function that is fired when components is blured.| | `onChange` | `Function` | | Callback function that is fired when the components's value changes.| diff --git a/components/input/style.scss b/components/input/style.scss index d2829126..9c58a70a 100644 --- a/components/input/style.scss +++ b/components/input/style.scss @@ -44,7 +44,7 @@ color: $input-text-highlight-color; } } - &:focus, &.filled, &[type='date'], &[type='time']{ + &:focus, &.filled, &[type='date'], &[type='time'] { ~ .label:not(.fixed) { top: $input-focus-label-top; font-size: $input-label-font-size; @@ -90,11 +90,23 @@ } } -.error { - display: block; +.underline { + display: flex; + margin-bottom: - $input-underline-height; font-size: $input-label-font-size; - line-height: $input-error-height; - color: $input-text-error-color; + line-height: $input-underline-height; + color: $input-text-label-color; + .error, .counter { + flex-grow: 1; + } +} + +.error { + text-align: left; +} + +.counter { + text-align: right; } .disabled > .input { @@ -115,6 +127,9 @@ } } } + > .underline { + color: $input-text-error-color; + } } .hidden { diff --git a/spec/components/input.jsx b/spec/components/input.jsx index ebda48e7..affe8808 100644 --- a/spec/components/input.jsx +++ b/spec/components/input.jsx @@ -3,7 +3,7 @@ import Input from '../../components/input'; class InputTest extends React.Component { state = { - normal: '', + normal: 'hello world', fixedLabel: '', withIcon: '' }; @@ -19,7 +19,12 @@ class InputTest extends React.Component {
Inputs

lorem ipsum...

- + From 9dedee63e1ff03c25c767edc642175139e7c8608 Mon Sep 17 00:00:00 2001 From: "@soyjavi" Date: Wed, 18 Nov 2015 15:23:08 +0700 Subject: [PATCH 04/24] Change example with new property 'maxLength' --- .../components/layout/main/modules/examples/input_example_1.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt index 7787fd23..a30ff0a8 100644 --- a/docs/app/components/layout/main/modules/examples/input_example_1.txt +++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt @@ -10,7 +10,7 @@ class InputTest extends React.Component { render () { return (
- + From 21d048525ac7ee274fb00fff956a7cdf2aa673f8 Mon Sep 17 00:00:00 2001 From: "@soyjavi" Date: Wed, 18 Nov 2015 15:27:01 +0700 Subject: [PATCH 05/24] 0.12.8 release --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 443d6060..c67009b7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-toolbox", - "version": "0.12.7", + "version": "0.12.8", "homepage": "www.react-toolbox.com", "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.", "author": "React Toolbox Team (http://github.com/react-toolbox)", From 8aa5fa92b56bcba2d2a6dd1916b1524bd1cd5022 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 18 Nov 2015 09:46:25 +0100 Subject: [PATCH 06/24] Add scss-lint to dev dependencies --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index c67009b7..157e321c 100644 --- a/package.json +++ b/package.json @@ -57,8 +57,8 @@ "babel-loader": "^5.3.2", "babel-plugin-react-transform": "^1.1.1", "core-js": "^1.2.6", - "cross-env": "^1.0.4", "cpx": "^1.2.1", + "cross-env": "^1.0.4", "css-loader": "^0.21.0", "eslint": "^1.7.3", "eslint-plugin-react": "^3.3.1", @@ -86,6 +86,7 @@ "redbox-react": "^1.1.1", "rimraf": "^2.4.3", "sass-loader": "^3.0.0", + "scss-lint": "0.0.0", "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a", "style-loader": "^0.13.0", "toolbox-loader": "0.0.2", From e0a4168c794f196cd6afad41a3e695b2c6c9c91a Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 18 Nov 2015 09:57:46 +0100 Subject: [PATCH 07/24] Fix examples for tab --- components/tabs/readme.md | 38 ++++++++++++++----- .../main/modules/examples/tabs_example_1.txt | 34 ++++++++++++----- spec/components/tabs.jsx | 26 +++---------- 3 files changed, 59 insertions(+), 39 deletions(-) diff --git a/components/tabs/readme.md b/components/tabs/readme.md index 39ba55d4..d6ed7bd4 100644 --- a/components/tabs/readme.md +++ b/components/tabs/readme.md @@ -6,15 +6,35 @@ ```jsx import {Tab, Tabs} from 'react-toolbox'; -const TabsExample = () => ( - - Primary content - Secondary content - Disabled content - - Fifth content - -); +class TabsTest extends React.Component { + state = { + index: 1 + }; + + handleTabChange = (index) => { + this.setState({index}); + }; + + handleActive = () => { + console.log('Special one activated'); + }; + + render () { + return ( +
+
Tabs
+

This tabs can be disabled or hidden

+ + Primary content + Secondary content + Disabled content + + Fifth content + +
+ ); + } +} ``` ## Tabs diff --git a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt index 84373983..fa36ddbf 100644 --- a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt +++ b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt @@ -1,11 +1,27 @@ -const TabsExample = () => ( - - Primary content - Secondary content - Disabled content - - Fifth content - -); +class TabsExample extends React.Component { + state = { + index: 1 + }; + + handleTabChange = (index) => { + this.setState({index}); + }; + + render () { + return ( +
+
Tabs
+

This tabs can be disabled or hidden

+ + Primary content + Secondary content + Disabled content + + Fifth content + +
+ ); + } +} return ; diff --git a/spec/components/tabs.jsx b/spec/components/tabs.jsx index 39318409..73d037f2 100644 --- a/spec/components/tabs.jsx +++ b/spec/components/tabs.jsx @@ -2,7 +2,6 @@ import React from 'react'; import { Tabs, Tab } from '../../components/tabs'; class TabsTest extends React.Component { - state = { index: 1 }; @@ -20,27 +19,12 @@ class TabsTest extends React.Component {
Tabs

This tabs can be disabled or hidden

- - - Primary content - - - - Secondary content - - - - Disabled content - - - - - - Fifth content - + Primary content + Secondary content + Disabled content + + Fifth content
); From f8ff16211a05e8029ca83074021fdf3511ae8943 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 18 Nov 2015 09:58:24 +0100 Subject: [PATCH 08/24] Remove scss lint from package until migrating to sass-lint --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 157e321c..38cae1e2 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "main": "./lib", "scripts": { "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server", - "lint": "eslint ./ --ext .js,.jsx && scss-lint", + "lint": "eslint ./ --ext .js,.jsx", "babel": "babel ./components --out-dir ./lib", "sass": "cpx './components/**/*.scss' ./lib", "build": "cross-env NODE_ENV=production npm run babel && npm run sass", @@ -86,7 +86,6 @@ "redbox-react": "^1.1.1", "rimraf": "^2.4.3", "sass-loader": "^3.0.0", - "scss-lint": "0.0.0", "sinon": "git://github.com/sinonjs/sinon.git#b672042043517b9f84e14ed0fb8265126168778a", "style-loader": "^0.13.0", "toolbox-loader": "0.0.2", From 6c75479328539c55a302c422d22ccfe2da3936a1 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 18 Nov 2015 09:59:56 +0100 Subject: [PATCH 09/24] Remove section titles from tabs in tabs example --- components/tabs/readme.md | 18 +++++++----------- .../main/modules/examples/tabs_example_1.txt | 18 +++++++----------- 2 files changed, 14 insertions(+), 22 deletions(-) diff --git a/components/tabs/readme.md b/components/tabs/readme.md index d6ed7bd4..a93baccb 100644 --- a/components/tabs/readme.md +++ b/components/tabs/readme.md @@ -21,17 +21,13 @@ class TabsTest extends React.Component { render () { return ( -
-
Tabs
-

This tabs can be disabled or hidden

- - Primary content - Secondary content - Disabled content - - Fifth content - -
+ + Primary content + Secondary content + Disabled content + + Fifth content + ); } } diff --git a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt index fa36ddbf..617d2c66 100644 --- a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt +++ b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt @@ -9,17 +9,13 @@ class TabsExample extends React.Component { render () { return ( -
-
Tabs
-

This tabs can be disabled or hidden

- - Primary content - Secondary content - Disabled content - - Fifth content - -
+ + Primary content + Secondary content + Disabled content + + Fifth content + ); } } From 0cc5a6fd0ae462b4fe33c93c3082e6e81b780d31 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 18 Nov 2015 10:05:33 +0100 Subject: [PATCH 10/24] Remove code autoload in playground --- docs/app/components/layout/main/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.jsx index 7191a5d6..cb9fe5c5 100644 --- a/docs/app/components/layout/main/index.jsx +++ b/docs/app/components/layout/main/index.jsx @@ -49,7 +49,6 @@ class Main extends React.Component { const examples = document.getElementsByClassName(this.LOAD_EXAMPLE_CLASS); Array.prototype.forEach.call(examples, (exampleNode, idx) => { const exampleCode = components[this.props.params.component].examples[idx]; - this.refs.playground.loadCode(exampleCode); ReactDOM.render( , exampleNode From 5b7ca281010344c2a2ef340db0ac26e6293af655 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 18 Nov 2015 10:05:59 +0100 Subject: [PATCH 11/24] Pass scss lint --- docs/app/components/layout/main/style.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss index f477d2ba..2ddd5107 100644 --- a/docs/app/components/layout/main/style.scss +++ b/docs/app/components/layout/main/style.scss @@ -70,9 +70,7 @@ } } -/* - don't hide navigation when playground is open if screen width > 1200px -*/ +// don't hide navigation when playground is open if screen width > 1200px @media screen and (min-width: 1200px) { .root { &:not(.with-playground) { From 23fd0f3c41273b0f228696e9405436e920dc9580 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 18 Nov 2015 10:08:01 +0100 Subject: [PATCH 12/24] 0.12.9 release --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 38cae1e2..e726e222 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-toolbox", - "version": "0.12.8", + "version": "0.12.9", "homepage": "www.react-toolbox.com", "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.", "author": "React Toolbox Team (http://github.com/react-toolbox)", From 9f6a41554286bd122712dbdef0813f613c577b5c Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 18 Nov 2015 10:48:02 +0100 Subject: [PATCH 13/24] Disable responsive in docs for now --- docs/app/components/layout/main/style.scss | 30 ---------------------- 1 file changed, 30 deletions(-) diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss index 2ddd5107..42c11ffd 100644 --- a/docs/app/components/layout/main/style.scss +++ b/docs/app/components/layout/main/style.scss @@ -70,36 +70,6 @@ } } -// don't hide navigation when playground is open if screen width > 1200px -@media screen and (min-width: 1200px) { - .root { - &:not(.with-playground) { - > .playground { - right: - ($playground-width * 1.1); - } - > .documentation { - padding-right: 0; - padding-left: $navigation-width; - } - > .navigation { - transform: translateX(0); - } - } - &.with-playground { - > .playground { - right: 0; - } - > .documentation { - padding-right: $playground-width; - padding-left: $navigation-width; - } - > .navigation { - transform: translateX(0); - } - } - } -} - .load-button { display: inline-block; } From a24cad012db98c3dd93f287b2899124422031b14 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 18 Nov 2015 11:59:00 +0100 Subject: [PATCH 14/24] Change actions for authors cards in landing --- docs/app/components/layout/home/index.jsx | 29 ---------- .../components/layout/home/modules/authors.js | 24 -------- .../layout/home/modules/authors.jsx | 56 +++++++++++++++++++ 3 files changed, 56 insertions(+), 53 deletions(-) delete mode 100644 docs/app/components/layout/home/modules/authors.js create mode 100644 docs/app/components/layout/home/modules/authors.jsx diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.jsx index 1167bc34..8720d631 100644 --- a/docs/app/components/layout/home/index.jsx +++ b/docs/app/components/layout/home/index.jsx @@ -6,18 +6,6 @@ import Navigation from '../../navigation'; import style from './style'; import authors from './modules/authors'; -const GithubIcon = () => ( - - - -); - -const TwitterIcon = () => ( - - - -); - const Home = () => (
@@ -59,23 +47,6 @@ const Home = () => (
    { authors.map((author, index) => { - author.actions.map((action) => { - if (action.id === 'github') { - action.style = {color: '#000'}; - action.children = [ - , - Github - ]; - action.id = null; - } else { - action.style = {color: '#55acee'}; - action.children = [ - , - Twitter - ]; - action.id = null; - } - }); return ; }) } diff --git a/docs/app/components/layout/home/modules/authors.js b/docs/app/components/layout/home/modules/authors.js deleted file mode 100644 index fb837973..00000000 --- a/docs/app/components/layout/home/modules/authors.js +++ /dev/null @@ -1,24 +0,0 @@ -export default [ - { - title: 'Javi Velasco', - subtitle: 'javivelasco', - actions: [ - { id: 'github', href: 'http://github.com/javivelasco', target: '_blank' }, - { id: 'twitter', href: 'http://twitter.com/javivelasco', target: '_blank' } - ], - image: '/images/javivelasco.jpg', - text: 'Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro • Any biographer in the room?', - color: '#3f51b5' - }, - { - title: 'Javi Jimenez', - subtitle: 'soyjavi', - actions: [ - { id: 'github', href: 'http://github.com/soyjavi', target: '_blank' }, - { id: 'twitter', href: 'http://twitter.com/soyjavi', target: '_blank' } - ], - image: '/images/soyjavi.jpg', - text: 'Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO', - color: '#3f51b5' - } -]; diff --git a/docs/app/components/layout/home/modules/authors.jsx b/docs/app/components/layout/home/modules/authors.jsx new file mode 100644 index 00000000..a56322ee --- /dev/null +++ b/docs/app/components/layout/home/modules/authors.jsx @@ -0,0 +1,56 @@ +import React from 'react'; + +const GithubIcon = () => ( + + + +); + +const TwitterIcon = () => ( + + + +); + +export default [ + { + title: 'Javi Velasco', + subtitle: 'javivelasco', + actions: [ + { + href: 'http://github.com/javivelasco', + children: [, Github], + target: '_blank' + }, + { + href: 'http://twitter.com/javivelasco', + children: [, Twitter], + style: {color: '#55acee'}, + target: '_blank' + } + ], + image: '/images/javivelasco.jpg', + text: 'Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro • Any biographer in the room?', + color: '#3f51b5' + }, + { + title: 'Javi Jimenez', + subtitle: 'soyjavi', + actions: [ + { + href: 'http://github.com/soyjavi', + children: [, Github], + target: '_blank' + }, + { + href: 'http://twitter.com/soyjavi', + children: [, Twitter], + style: {color: '#55acee'}, + target: '_blank' + } + ], + image: '/images/soyjavi.jpg', + text: 'Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO', + color: '#3f51b5' + } +]; From b8941e172d6a51455711292b4e2a297f599570a5 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 18 Nov 2015 22:33:22 +0100 Subject: [PATCH 15/24] Restyle layout to use transforms in main docs --- docs/app/components/layout/main/style.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/app/components/layout/main/style.scss b/docs/app/components/layout/main/style.scss index 42c11ffd..74e82f3a 100644 --- a/docs/app/components/layout/main/style.scss +++ b/docs/app/components/layout/main/style.scss @@ -19,7 +19,8 @@ right: 0; bottom: 0; left: 0; - transition: all $animation-duration $animation-curve-default; + z-index: $z-index-normal; + transition: padding $animation-duration $animation-curve-default; } .navigation { @@ -29,24 +30,25 @@ left: 0; z-index: $z-index-high; box-shadow: $documentation-left-shadow; - transition: all $animation-duration $animation-curve-default; + transition: transform $animation-duration $animation-curve-default; } .playground { position: fixed; top: $appbar-height; + right: 0; bottom: 0; z-index: $z-index-high; width: $playground-width; background: $color-background; box-shadow: $documentation-right-shadow; - transition: right $animation-duration $animation-curve-default; + transition: transform $animation-duration $animation-curve-default; } .root { &:not(.with-playground) { > .playground { - right: - ($playground-width * 1.1); + transform: translateX(100%); } > .documentation { padding-right: 0; @@ -58,7 +60,7 @@ } &.with-playground { > .playground { - right: 0; + transform: translateY(0); } > .documentation { padding-right: $playground-width; From 64baf5db63f817a4cf4d8e91d5e76067c470d314 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 18 Nov 2015 22:43:20 +0100 Subject: [PATCH 16/24] Change scale3d property to scale in radio button --- components/radio/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/radio/style.scss b/components/radio/style.scss index c6c25976..fcd206e1 100644 --- a/components/radio/style.scss +++ b/components/radio/style.scss @@ -60,7 +60,7 @@ background-color: $radio-inner-color; border-radius: 50%; transition-property: transform; - transform: scale3d(0, 0, 0); + transform: scale(0); } } @@ -68,7 +68,7 @@ @extend .radio; border: .2 * $unit solid $radio-inner-color; &:before { - transform: scale3d(1, 1, 1); + transform: scale(1); } } From b12bf6e7e0e80b033b47e52e19eafc07fc6cc26e Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Wed, 18 Nov 2015 22:53:30 +0100 Subject: [PATCH 17/24] Add hack to allow overflow hidden with border radio in old webkit --- components/_mixins.scss | 5 +++++ components/button/style.scss | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/components/_mixins.scss b/components/_mixins.scss index c4bc7ee6..da0db388 100644 --- a/components/_mixins.scss +++ b/components/_mixins.scss @@ -252,6 +252,11 @@ transition-duration: $duration; } +@mixin rounded-overflow() { + overflow: hidden; + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); +} + // The frames are this way to prevent a flicker in Safari // See https://goo.gl/5luFDk @mixin ripple-loading($name, $width, $height, $opacity: 0.3) { diff --git a/components/button/style.scss b/components/button/style.scss index a8cb4334..d9fc253b 100644 --- a/components/button/style.scss +++ b/components/button/style.scss @@ -41,7 +41,7 @@ pointer-events: none; } [data-react-toolbox="ripple"] { - overflow: hidden; + @include rounded-overflow(); } } From 9905403b97e6ce5d82ef7eea04ca3a078769cf83 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Thu, 19 Nov 2015 00:49:39 +0100 Subject: [PATCH 18/24] Do not include commons in app wrapper --- components/_globals.scss | 1 - components/app/style.scss | 2 - components/commons.scss | 191 ++++++++++++++++-------------- docs/app/components/_globals.scss | 1 + spec/style.scss | 4 + 5 files changed, 106 insertions(+), 93 deletions(-) diff --git a/components/_globals.scss b/components/_globals.scss index c98eda64..3b4147d2 100644 --- a/components/_globals.scss +++ b/components/_globals.scss @@ -17,7 +17,6 @@ $color-accent-contrast: $color-dark-contrast !default; $unit: 1rem; // -- Fonts -$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default; $font-icon-url: "https://fonts.googleapis.com/icon?family=Material+Icons" !default; $preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default; $font-size: 1.6 * $unit !default; diff --git a/components/app/style.scss b/components/app/style.scss index 55c9f8cf..1de44941 100644 --- a/components/app/style.scss +++ b/components/app/style.scss @@ -1,5 +1,3 @@ -@import "../commons"; - .root { position: absolute; top: 0; diff --git a/components/commons.scss b/components/commons.scss index e71c736a..afef0c75 100644 --- a/components/commons.scss +++ b/components/commons.scss @@ -1,6 +1,15 @@ -@import "~normalize.css"; -@import "./base"; -@import url($font-roboto-url); +$import-normalize: true !default; +$import-font: true !default; +$import-flex-attributes: false !default; +$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default; + +@if $import-normalize == true { + @import "~normalize.css"; +} + +@if $import-font == true { + @import url($font-roboto-url); +} html { font-size: 62.5%; @@ -93,97 +102,99 @@ p { @include typo-body-1; } -//-- Flex -[data-flex] { - display: flex; -} +@if $import-flex-attributes == true { + //-- Flex + [data-flex] { + display: flex; + } -body[data-flex] { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 100%; - overflow: hidden; -} + body[data-flex] { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + overflow: hidden; + } -// -- Direction -[data-flex^="horizontal"] { - flex-direction: row; -} + // -- Direction + [data-flex^="horizontal"] { + flex-direction: row; + } -[data-flex^="vertical"] { - flex-direction: column; -} + [data-flex^="vertical"] { + flex-direction: column; + } -// -- Size { -[data-flex*="grow"] { - > *:not([data-column]):not([data-flex-grow]) { - flex-grow: 1; + // -- Size { + [data-flex*="grow"] { + > *:not([data-column]):not([data-flex-grow]) { + flex-grow: 1; + } + } + + [data-flex-grow="min"] { + flex-grow: 0; + } + + [data-flex-grow="max"] { + flex-grow: 2; + } + + // -- Container properties + [data-flex*="wrap"] { + flex-wrap: wrap; + } + + [data-flex*="center"] { + align-content: center; + align-items: center; + justify-content: center; + } + + [data-flex-justify="start"] { + justify-content: flex-start; + } + + [data-flex-justify="center"] { + justify-content: center; + } + + [data-flex-justify="end"] { + justify-content: flex-end; + } + + [data-flex-content="start"] { + align-content: flex-start; + } + + [data-flex-content="center"] { + align-content: center; + } + + [data-flex-content="end"] { + align-content: flex-end; + } + + [data-flex-items="center"] { + align-items: center; + } + + [data-flex-items="start"] { + align-items: flex-start; + } + + [data-flex-items="end"] { + align-items: flex-end; + } + + // -- Children properties + [data-flex-order="first"] { + order: -1; + } + + [data-flex-order="last"] { + order: 999999; } } - -[data-flex-grow="min"] { - flex-grow: 0; -} - -[data-flex-grow="max"] { - flex-grow: 2; -} - -// -- Container properties -[data-flex*="wrap"] { - flex-wrap: wrap; -} - -[data-flex*="center"] { - align-content: center; - align-items: center; - justify-content: center; -} - -[data-flex-justify="start"] { - justify-content: flex-start; -} - -[data-flex-justify="center"] { - justify-content: center; -} - -[data-flex-justify="end"] { - justify-content: flex-end; -} - -[data-flex-content="start"] { - align-content: flex-start; -} - -[data-flex-content="center"] { - align-content: center; -} - -[data-flex-content="end"] { - align-content: flex-end; -} - -[data-flex-items="center"] { - align-items: center; -} - -[data-flex-items="start"] { - align-items: flex-start; -} - -[data-flex-items="end"] { - align-items: flex-end; -} - -// -- Children properties -[data-flex-order="first"] { - order: -1; -} - -[data-flex-order="last"] { - order: 999999; -} diff --git a/docs/app/components/_globals.scss b/docs/app/components/_globals.scss index 41bcea68..a89dee8a 100644 --- a/docs/app/components/_globals.scss +++ b/docs/app/components/_globals.scss @@ -1,4 +1,5 @@ @import "~react-toolbox/base"; +@import "~react-toolbox/commons"; $unit: 1rem; $color-primary-dark: unquote("rgb(#{$color-primary-dark})"); diff --git a/spec/style.scss b/spec/style.scss index 7dda066e..32601471 100644 --- a/spec/style.scss +++ b/spec/style.scss @@ -1,4 +1,8 @@ +$import-normalize: false; +$import-flex-attributes: true; + @import "../components/base"; +@import "../components/commons"; @import "../components/app_bar/config"; @import "../components/button/config"; From e1f60b7f43b621ea90e0f85aa8251ddf7e8f8ded Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Thu, 19 Nov 2015 00:54:02 +0100 Subject: [PATCH 19/24] 0.12.10 release --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e726e222..a33fecea 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-toolbox", - "version": "0.12.9", + "version": "0.12.10", "homepage": "www.react-toolbox.com", "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.", "author": "React Toolbox Team (http://github.com/react-toolbox)", From 1cf41fe8defd8d96d05dda09d2f5d064ca403132 Mon Sep 17 00:00:00 2001 From: Stan Date: Thu, 19 Nov 2015 11:02:10 +0100 Subject: [PATCH 20/24] [autocomplete] Fix #134 --- components/autocomplete/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/autocomplete/index.jsx b/components/autocomplete/index.jsx index e757d327..e707fd6f 100644 --- a/components/autocomplete/index.jsx +++ b/components/autocomplete/index.jsx @@ -59,7 +59,7 @@ class Autocomplete extends React.Component { }; handleQueryChange = (event) => { - this.setState({event: event.target.value}); + this.setState({query: event.target.value}); }; handleQueryFocus = () => { From 2fc419f0cddd75474681c91a6b48fd5e751b3911 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Thu, 19 Nov 2015 17:03:14 +0100 Subject: [PATCH 21/24] Auto import base in commons file --- components/_globals.scss | 1 + components/commons.scss | 3 ++- spec/style.scss | 1 - 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/_globals.scss b/components/_globals.scss index 3b4147d2..c98eda64 100644 --- a/components/_globals.scss +++ b/components/_globals.scss @@ -17,6 +17,7 @@ $color-accent-contrast: $color-dark-contrast !default; $unit: 1rem; // -- Fonts +$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default; $font-icon-url: "https://fonts.googleapis.com/icon?family=Material+Icons" !default; $preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default; $font-size: 1.6 * $unit !default; diff --git a/components/commons.scss b/components/commons.scss index afef0c75..32e4626f 100644 --- a/components/commons.scss +++ b/components/commons.scss @@ -1,7 +1,8 @@ +@import "./base"; + $import-normalize: true !default; $import-font: true !default; $import-flex-attributes: false !default; -$font-roboto-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" !default; @if $import-normalize == true { @import "~normalize.css"; diff --git a/spec/style.scss b/spec/style.scss index 32601471..72a927b2 100644 --- a/spec/style.scss +++ b/spec/style.scss @@ -1,7 +1,6 @@ $import-normalize: false; $import-flex-attributes: true; -@import "../components/base"; @import "../components/commons"; @import "../components/app_bar/config"; @import "../components/button/config"; From 966f457fce86aaf0d6cf8a90abb75e25ba2cc3f7 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Thu, 19 Nov 2015 17:03:53 +0100 Subject: [PATCH 22/24] 0.12.11 release --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a33fecea..2b713684 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-toolbox", - "version": "0.12.10", + "version": "0.12.11", "homepage": "www.react-toolbox.com", "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.", "author": "React Toolbox Team (http://github.com/react-toolbox)", From 1ab45dbe5b40979f4385ed4992e6419944dab0db Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Thu, 19 Nov 2015 20:13:14 +0100 Subject: [PATCH 23/24] Add touch support for ripple --- components/ripple/index.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/ripple/index.jsx b/components/ripple/index.jsx index 6a56ed56..297eedbc 100644 --- a/components/ripple/index.jsx +++ b/components/ripple/index.jsx @@ -25,13 +25,13 @@ class Ripple extends React.Component { width: null }; - handleEnd = () => { - document.removeEventListener('mouseup', this.handleEnd); + handleEnd = (touch = false) => { + document.removeEventListener(touch ? 'touchend' : 'mouseup', this.handleEnd); this.setState({active: false}); }; - start = ({ pageX, pageY }) => { - document.addEventListener('mouseup', this.handleEnd); + start = ({ pageX, pageY }, touch = false) => { + document.addEventListener(touch ? 'touchend' : 'mouseup', this.handleEnd.bind(this, touch)); const {top, left, width} = this._getDescriptor(pageX, pageY); this.setState({active: false, restarting: true, width: 0}, () => { this.refs.ripple.offsetWidth; //eslint-disable-line no-unused-expressions From 7841b430d60c314b9ad26fd8797f4200f3658b7c Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Thu, 19 Nov 2015 20:13:47 +0100 Subject: [PATCH 24/24] Add touch ripple for buttons --- components/button/index.jsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/components/button/index.jsx b/components/button/index.jsx index 2e314a3d..31fde0e6 100644 --- a/components/button/index.jsx +++ b/components/button/index.jsx @@ -43,6 +43,12 @@ class Button extends React.Component { if (this.props.onMouseDown) this.props.onMouseDown(event); }; + handleTouchStart = (event) => { + events.pauseEvent(event); + if (this.refs.ripple) this.refs.ripple.start(event.touches[0], true); + if (this.props.onTouchStart) this.props.onTouchStart(event); + }; + render () { const {accent, flat, floating, href, icon, label, loading, mini, primary, raised, ripple, toggle, tooltip, ...others} = this.props; @@ -59,7 +65,8 @@ class Button extends React.Component { href, className, disabled: this.props.disabled || this.props.loading, - onMouseDown: this.handleMouseDown + onMouseDown: this.handleMouseDown, + onTouchStart: this.handleTouchStart }; return React.createElement(element, props,