From 99d03c1f4b2d4e10561fc4d0bef14ccd12ad0f9d Mon Sep 17 00:00:00 2001 From: Tayane Fernandes Date: Tue, 7 Mar 2017 14:22:49 -0300 Subject: [#923] Add material-ui framework Added material-ui framework (http://www.material-ui.com/#/) to facilitate the creation of UI components. I also adapted some colors to be compatible with our style guide. --- web-ui/src/common/app.js | 13 +++++++-- web-ui/src/common/input_field/input_field.js | 12 +++++--- web-ui/src/common/input_field/input_field.scss | 34 ++--------------------- web-ui/src/common/input_field/input_field.spec.js | 4 +-- web-ui/src/common/materialPixTheme.js | 31 +++++++++++++++++++++ 5 files changed, 53 insertions(+), 41 deletions(-) create mode 100644 web-ui/src/common/materialPixTheme.js (limited to 'web-ui/src/common') 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 }) => ( - - {child} - + + + {child} + + ); 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 }) => (
- -
); 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 . + */ +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; -- cgit v1.2.3