wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-09-13 13:10:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

Ádding Select, Options to Coral Ui and steps with formField

Browse Source
This commit is contained in:
Belen Curcio
2017-02-02 11:31:43 -03:00
parent ad8d92a8ea
commit 65aa5e7e92
15 changed files with 230 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-admin/src/components/ui/Header.js
+38 -36
View File
@@ -11,42 +11,44 @@ export default ({handleLogout, restricted = false}) => (
<Logo /> <Logo />
{ {
!restricted ? !restricted ?
<Navigation className={styles.nav}> <div>
<IndexLink className={styles.navLink} to="/admin" <Navigation className={styles.nav}>
activeClassName={styles.active}> <IndexLink className={styles.navLink} to="/admin"
{lang.t('configure.moderate')} activeClassName={styles.active}>
</IndexLink> {lang.t('configure.moderate')}
<Link className={styles.navLink} to="/admin/community" </IndexLink>
activeClassName={styles.active}> <Link className={styles.navLink} to="/admin/community"
{lang.t('configure.community')} activeClassName={styles.active}>
</Link> {lang.t('configure.community')}
<Link className={styles.navLink} to="/admin/configure" </Link>
activeClassName={styles.active}> <Link className={styles.navLink} to="/admin/configure"
{lang.t('configure.configure')} activeClassName={styles.active}>
</Link> {lang.t('configure.configure')}
<Link className={styles.navLink} to="/admin/streams" </Link>
activeClassName={styles.active}> <Link className={styles.navLink} to="/admin/streams"
{lang.t('configure.streams')} activeClassName={styles.active}>
</Link> {lang.t('configure.streams')}
</Navigation> </Link>
: </Navigation>
null <div className={styles.rightPanel}>
} <ul>
<div className={styles.rightPanel}> <li className={styles.settings}>
<ul> <div>
<li className={styles.settings}> <IconButton name="settings" id="menu-settings"/>
<div> <Menu target="menu-settings" align="right">
<IconButton name="settings" id="menu-settings"/> <MenuItem onClick={handleLogout}>Sign Out</MenuItem>
<Menu target="menu-settings" align="right"> </Menu>
<MenuItem onClick={handleLogout}>Sign Out</MenuItem> </div>
</Menu> </li>
</div> <li>
</li> {`v${process.env.VERSION}`}
<li> </li>
{`v${process.env.VERSION}`} </ul>
</li> </div>
</ul> </div>
</div> :
null
}
</Header> </Header>
); );
client/coral-admin/src/containers/Install/InstallContainer.js
+1 -1
View File
@@ -18,7 +18,7 @@ const InstallContainer = props => {
<Layout restricted={true}> <Layout restricted={true}>
<div className={styles.Install}> <div className={styles.Install}>
<h2>Welcome to the Coral Project</h2> <h2>Welcome to the Coral Project</h2>
{ install.step !== 0 ? <WizardNav goToStep={goToStep} items={wizardNavitems} currentStep={install.step}/> : null } { install.step !== 0 ? <WizardNav goToStep={goToStep} items={wizardNavitems} currentStep={install.step} icon='check'/> : null }
<Wizard currentStep={install.step} nextStep={nextStep} previousStep={previousStep} goToStep={goToStep}> <Wizard currentStep={install.step} nextStep={nextStep} previousStep={previousStep} goToStep={goToStep}>
<InitialStep/> <InitialStep/>
<AddOrganizationName/> <AddOrganizationName/>
client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js
+11 -6
View File
@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import styles from './style.css'; import styles from './style.css';
import {Button} from 'coral-ui'; import {FormField, Button} from 'coral-ui';
const InitialStep = props => { const InitialStep = props => {
const {nextStep} = props; const {nextStep} = props;
@@ -10,11 +10,16 @@ const InitialStep = props => {
Please tell us the name of your organization. This will appear in emails when Please tell us the name of your organization. This will appear in emails when
inviting new team members inviting new team members
</p> </p>
<form> <div className={styles.form}>
<label htmlFor='organizationName'>Organization name:</label> <form onSubmit={() => {}}>
<input type='text' name='organizationName' id='organizationName'/> <FormField
<Button cStyle='black' onClick={nextStep} full>Save</Button> className={styles.FormField}
</form> id="organizationName"
type="text"
label='Organization name' required/>
<Button cStyle='black' full>Save</Button>
</form>
</div>
</div> </div>
); );
}; };
client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js
+30 -20
View File
@@ -1,30 +1,40 @@
import React from 'react'; import React from 'react';
import styles from './style.css'; import styles from './style.css';
import {Button} from 'coral-ui'; import {FormField, Button} from 'coral-ui';
const InitialStep = props => { const InitialStep = props => {
const {nextStep} = props; const {nextStep} = props;
return ( return (
<div className={styles.step}> <div className={styles.step}>
<form> <div className={styles.form}>
<div className='formField'> <form>
<label htmlFor='email'>Email address</label> <FormField
<input type='email' name='email' id='email'/> className={styles.formField}
</div> id="email"
<div className='formField'> type="email"
<label htmlFor='username'>Username</label> label='Email address' required/>
<input type='text' name='username' id='username'/>
</div> <FormField
<div className='formField'> className={styles.formField}
<label htmlFor='password'>Password</label> id="username"
<input type='password' name='password' id='password'/> type="text"
</div> label='Username' required/>
<div className='formField'>
<label htmlFor='confirmPassword'>Confirm Password</label> <FormField
<input type='password' name='confirmPassword' id='confirmPassword'/> className={styles.formField}
</div> id="password"
<Button cStyle='black' onClick={nextStep} full>Save</Button> type="password"
</form> label='Password' required/>
<FormField
className={styles.formField}
id="confirmPassword"
type="password"
label='Confirm Password' required/>
<Button cStyle='black' onClick={nextStep} full>Save</Button>
</form>
</div>
</div> </div>
); );
}; };
client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
+1 -1
View File
@@ -11,7 +11,7 @@ const InitialStep = props => {
Once you complete the following three steps, you will have a free Once you complete the following three steps, you will have a free
installation and provision of Mongo and Redis. installation and provision of Mongo and Redis.
</p> </p>
<Button cStyle='green' onClick={nextStep}>Get Started</Button> <Button cStyle='green' onClick={nextStep} raised>Get Started</Button>
</div> </div>
); );
}; };
client/coral-admin/src/containers/Install/components/Steps/InviteTeamMembers.js
+27 -18
View File
@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import styles from './style.css'; import styles from './style.css';
import {Button} from 'coral-ui'; import {Button, Select, Option, FormField} from 'coral-ui';
const InviteTeamMembers = props => { const InviteTeamMembers = props => {
const {nextStep} = props; const {nextStep} = props;
@@ -11,23 +11,32 @@ const InviteTeamMembers = props => {
Once registered, new team members will receive an email to Create Once registered, new team members will receive an email to Create
their password. their password.
</p> </p>
<form> <div className={styles.form}>
<div className='formField'> <form>
<label htmlFor='email'>Email address</label>
<input type='email' name='email' id='email'/> <FormField
</div> className={styles.formField}
<div className='formField'> id="email"
<label htmlFor='username'>Username</label> type="email"
<input type='text' name='username' id='username'/> label='Email address' required/>
</div>
<div className='formField'> <FormField
<select> className={styles.formField}
<option>Admin</option> id="username"
<option>Moderator</option> type="text"
</select> label='Username' required/>
</div>
<Button cStyle='black' onClick={nextStep} full>Invite team member</Button> <div className={styles.formField}>
</form> <label htmlFor='role'>Assing a role</label>
<Select id='role' label='Select Role'>
<Option>Admin</Option>
<Option>Moderator</Option>
</Select>
</div>
<Button cStyle='black' onClick={nextStep} icon='arrow_forward' full>Invite team member</Button>
</form>
</div>
</div> </div>
); );
}; };
client/coral-admin/src/containers/Install/components/Steps/style.css
+36 -16
View File
@@ -1,34 +1,54 @@
.step { .step {
padding: 20px 0;
h3 {
max-width: 450px;
margin: 0 auto;
text-align: left;
font-size: 1.4em;
font-weight: bold;
}
p { p {
max-width: 450px; max-width: 450px;
margin: 10px auto 30px; margin: 0 auto 30px;
font-size: 1.1em;
text-align: left;
} }
> button { > button {
min-width: 140px; min-width: 145px;
} }
form { .form {
max-width: 300px; max-width: 300px;
margin: 30px auto; margin: 30px auto;
label { form > button {
text-align: left; margin: 30px 0;
display: block;
} }
input { .formField {
border: solid 1px rgba(0, 0, 0, 0.23); label {
padding: 10px 2px; text-align: left;
border-radius: 3px; display: block;
width: 100%; margin: 10px 0;
box-sizing: border-box; font-weight: 400;
margin: 10px 0; font-size: 1.08em;
transition: border-color 0.2 ease; }
&:focus { > input {
border-color: black; border: solid 1px rgba(0, 0, 0, 0.23);
padding: 10px;
border-radius: 3px;
width: 100%;
box-sizing: border-box;
transition: border-color 0.2s ease;
font-size: 1em;
&:focus {
border-color: black;
}
} }
} }
} }
client/coral-admin/src/containers/Install/style.css
+1 -1
View File
@@ -2,7 +2,7 @@
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
padding: 40px 0; padding: 50px 0;
h2 { h2 {
font-size: 2em; font-size: 2em;
client/coral-ui/components/Option.css
+3
View File
@@ -0,0 +1,3 @@
.Option {
}
client/coral-ui/components/Option.js
+14
View File
@@ -0,0 +1,14 @@
import React from 'react';
import {Option as OptionMDL} from 'react-mdl-selectfield';
import styles from './Option.css';
const Option = props => {
const {children, ...attrs} = props;
return (
<OptionMDL className={styles.Option} {...attrs}>
{children}
</OptionMDL>
);
};
export default Option;
client/coral-ui/components/Select.css
+33
View File
@@ -0,0 +1,33 @@
.Select {
position: relative;
width: 100%;
height: 40px;
background: #2c2c2c;
padding: 10px 15px;
box-sizing: border-box;
color: white;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
> div {
padding: 0;
}
i {
position: absolute;
top: 7px;
right: 7px;
}
input {
padding: 0;
font-size: 13px;
letter-spacing: 0.7px;
font-weight: 400;
}
&:hover {
cursor: pointer;
}
}
client/coral-ui/components/Select.js
+14
View File
@@ -0,0 +1,14 @@
import React from 'react';
import {SelectField} from 'react-mdl-selectfield';
import styles from './Select.css';
const Select = props => {
const {children, ...attrs} = props;
return (
<SelectField className={styles.Select} {...attrs}>
{children}
</SelectField>
);
};
export default Select;
client/coral-ui/components/WizardNav.css
+14 -1
View File
@@ -13,7 +13,7 @@
position: relative; position: relative;
padding-left: 40px; padding-left: 40px;
border-radius: 1px; border-radius: 1px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
@@ -27,6 +27,10 @@
border-color: transparent transparent transparent #00796B; border-color: transparent transparent transparent #00796B;
} }
} }
i {
opacity: 1;
}
} }
&.active { &.active {
@@ -41,6 +45,15 @@
} }
} }
i {
transition: opacity 0.2s ease;
opacity: 0;
vertical-align: middle;
font-size: 16px;
margin-top: -5px;
margin-left: 8px;
}
span { span {
padding: 10px 20px; padding: 10px 20px;
margin-right: 10px; margin-right: 10px;
client/coral-ui/components/WizardNav.js
+5 -2
View File
@@ -1,8 +1,9 @@
import React, {PropTypes} from 'react'; import React, {PropTypes} from 'react';
import styles from './WizardNav.css'; import styles from './WizardNav.css';
import Icon from './Icon';
const WizardNav = props => { const WizardNav = props => {
const {goToStep, currentStep, items} = props; const {goToStep, currentStep, items, icon} = props;
return ( return (
<nav className={styles.WizardNav}> <nav className={styles.WizardNav}>
<ul> <ul>
@@ -12,7 +13,9 @@ const WizardNav = props => {
key={i} key={i}
className={`${currentStep === item.step ? styles.active : ''} ${item.step < currentStep ? styles.done : ''}`} className={`${currentStep === item.step ? styles.active : ''} ${item.step < currentStep ? styles.done : ''}`}
onClick={() => goToStep(item.step)}> onClick={() => goToStep(item.step)}>
{item.text}<span/> {item.text}
{icon && <Icon name={icon} />}
<span/>
</li> </li>
)) ))
} }
client/coral-ui/index.js
+2
View File
@@ -18,3 +18,5 @@ export {default as Success} from './components/Success';
export {default as Pager} from './components/Pager'; export {default as Pager} from './components/Pager';
export {default as Wizard} from './components/Wizard'; export {default as Wizard} from './components/Wizard';
export {default as WizardNav} from './components/WizardNav'; export {default as WizardNav} from './components/WizardNav';
export {default as Select} from './components/Select';
export {default as Option} from './components/Option';