diff options
author | Tayane Fernandes <tayane.rmf@gmail.com> | 2017-03-10 13:20:13 -0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-03-10 13:20:13 -0300 |
commit | 51a7eeb2142a4c3d71a67cb0693644ceec2e3637 (patch) | |
tree | 37fb9d4374a3a3873d0b092fce6e89299e097a1c /web-ui/src/common | |
parent | 1e62467a7adfafe91025cf6c8955d54770e705aa (diff) | |
parent | 99d03c1f4b2d4e10561fc4d0bef14ccd12ad0f9d (diff) |
Merge pull request #1004 from pixelated/validate-email
[#923] Add material-ui framework
Diffstat (limited to 'web-ui/src/common')
-rw-r--r-- | web-ui/src/common/app.js | 13 | ||||
-rw-r--r-- | web-ui/src/common/input_field/input_field.js | 12 | ||||
-rw-r--r-- | web-ui/src/common/input_field/input_field.scss | 34 | ||||
-rw-r--r-- | web-ui/src/common/input_field/input_field.spec.js | 4 | ||||
-rw-r--r-- | web-ui/src/common/materialPixTheme.js | 31 |
5 files changed, 53 insertions, 41 deletions
diff --git a/web-ui/src/common/app.js b/web-ui/src/common/app.js index 03a69fc9..b8302000 100644 --- a/web-ui/src/common/app.js +++ b/web-ui/src/common/app.js @@ -19,11 +19,18 @@ import React from 'react'; import { I18nextProvider } from 'react-i18next'; import internationalization from 'src/common/i18n'; +import injectTapEventPlugin from 'react-tap-event-plugin'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import materialPixTheme from 'src/common/materialPixTheme'; + +injectTapEventPlugin(); const App = ({ i18n = internationalization, child }) => ( - <I18nextProvider i18n={i18n}> - {child} - </I18nextProvider> + <MuiThemeProvider muiTheme={materialPixTheme}> + <I18nextProvider i18n={i18n}> + {child} + </I18nextProvider> + </MuiThemeProvider> ); App.propTypes = { diff --git a/web-ui/src/common/input_field/input_field.js b/web-ui/src/common/input_field/input_field.js index 332d5911..438241e1 100644 --- a/web-ui/src/common/input_field/input_field.js +++ b/web-ui/src/common/input_field/input_field.js @@ -16,16 +16,20 @@ */ import React from 'react'; +import TextField from 'material-ui/TextField'; import './input_field.scss'; const InputField = ({ label, name, type = 'text', ...other }) => ( <div className='input-field-group'> - <input - type={type} name={name} className='input-field' - required {...other} + <TextField + hintText={label} + floatingLabelText={label} + name={name} + type={type} + fullWidth + {...other} /> - <label className='input-field-label' htmlFor={name}>{label}</label> </div> ); diff --git a/web-ui/src/common/input_field/input_field.scss b/web-ui/src/common/input_field/input_field.scss index dd8e8927..d550a281 100644 --- a/web-ui/src/common/input_field/input_field.scss +++ b/web-ui/src/common/input_field/input_field.scss @@ -23,37 +23,8 @@ width: 100%; } -.input-field-label { - font-size: 0.9em; - margin-bottom: 10px; - display: inline-block; - color:#999; - position:absolute; - pointer-events:none; - left: 6px; - top:10px; - transition:0.2s ease all; -} - -.input-field { - display: block; - border: none; - border-bottom: solid 1px $dark_blue; - width: 100%; - height: auto; - padding: 0.3em 0px; - - &:focus { - outline:none; - border-width: 2px; - } -} - -.input-field:focus ~ .input-field-label, .input-field:valid ~ .input-field-label { - top:-12px; - left: 0; - font-size:0.7em; - color: $dark_blue; +input:-webkit-autofill { + -webkit-box-shadow: 0 0 0px 1000px white inset; } @media only screen and (min-width : 500px) { @@ -67,7 +38,6 @@ .input-field-group { width: 300px; align-self: flex-start; - margin-top: 3em; font-size: 1em; } } diff --git a/web-ui/src/common/input_field/input_field.spec.js b/web-ui/src/common/input_field/input_field.spec.js index 0c044ce1..ae55653d 100644 --- a/web-ui/src/common/input_field/input_field.spec.js +++ b/web-ui/src/common/input_field/input_field.spec.js @@ -11,10 +11,10 @@ describe('InputField', () => { }); it('renders an input of type text for email', () => { - expect(inputField.find('input[type="text"]').props().name).toEqual('email'); + expect(inputField.find('TextField').props().name).toEqual('email'); }); it('renders a label for the email', () => { - expect(inputField.find('label').text()).toEqual('Email'); + expect(inputField.find('TextField').props().floatingLabelText).toEqual('Email'); }); }); diff --git a/web-ui/src/common/materialPixTheme.js b/web-ui/src/common/materialPixTheme.js new file mode 100644 index 00000000..34be7870 --- /dev/null +++ b/web-ui/src/common/materialPixTheme.js @@ -0,0 +1,31 @@ +/* + * Copyright (c) 2017 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see <http://www.gnu.org/licenses/>. + */ +import getMuiTheme from 'material-ui/styles/getMuiTheme'; + +const mediumLightGrey = '#999999'; +const darkBlue = '#178ca6'; + +const materialPixTheme = getMuiTheme({ + fontFamily: 'Open Sans, sans-serif', + palette: { + disabledColor: mediumLightGrey, + primary1Color: darkBlue, + borderColor: darkBlue + } +}); + +export default materialPixTheme; |