Skip to content

Z
zimbra-admin-api-js
Commit e88b7c48 authored by enahum's avatar enahum
Browse files
Options

Merge pull request #14 from ZBoxApp/actions 

Add actions for mailbox, accounts & domains
parents 1b61a1a8 8de2c9d0
Hide whitespace changes
Inline Side-by-side
Showing with 1242 additions and 79 deletions
src/components/accounts.jsx → src/components/accounts/accounts.jsx
View file @ e88b7c48
......@@ -4,7 +4,7 @@
import $ from 'jquery';
import React from 'react';
import * as GlobalActions from '../action_creators/global_actions.jsx';
import * as GlobalActions from '../../action_creators/global_actions.jsx';
export default class Accounts extends React.Component {
componentDidMount() {
......
src/components/accounts/create_account.jsx 0 → 100644
View file @ e88b7c48
import React from 'react';
import Panel from '../panel.jsx';
import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx.jsx';
export default class CreateAccount extends React.Component {
constructor(props) {
super(props);
this.state = {
notification: false,
notificationMsg: ''
};
}
render() {
let form = (
<form className='simple_form form-horizontal mailbox-form'>
<div className='form-group string required'>
<label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr>
{'Nombre'}
</label>
<div className='col-sm-8'>
<input
type='text'
required='required'
className='form-control'
ref='companyName'
placeholder='Razón social de la empresa'
/>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr>
{'ID Cliente'}
</label>
<div className='col-sm-8'>
<input
type='text'
className='form-control select required'
required='required'
ref='idclient'
placeholder='Ingresa el RUT de la empresa (xxxxxxxx-y)'
>
</input>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Reseller'}
</label>
<div className='col-sm-8'>
<label className='radio-inline pretty-input'>
<div className='pretty-checkbox'>
<input
type='checkbox'
className='pretty'
ref='reseller'
/>
<span></span>
</div>
</label>
</div>
</div>
<div className='form-group'>
<div className='col-sm-8 col-sm-offset-3'>
<input
type='submit'
name='commit'
defaulValue='Guardar'
className='btn btn-info'
/>
<Button btnAttrs={{href: './cancel', className: 'btn btn-default'}}>
{'Cancelar'}
</Button>
</div>
</div>
</form>
);
const actions = [
{
label: 'Cancelar',
props: {
className: 'btn btn-default btn-xs',
href: '/mailboxes'
}
}
];
return (
<div className='content animate-panel'>
{this.state.notification && (
<MessageBar
message={this.state.notificacionMsg}
type='error'
position='relative'
canClose={false}
/>
)}
<div className='col-lg-12'>
<Panel
title={'Agregar Cuenta'}
btnsHeader={actions}
classHeader={'forum-box'}
>
{form}
</Panel>
</div>
</div>
);
}
}
src/components/accounts/edit_account.jsx 0 → 100644
View file @ e88b7c48
import React from 'react';
import Panel from '../panel.jsx';
import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx';
export default class EditAccount extends React.Component {
constructor(props) {
super(props);
this.state = {
notification: false,
notificacionMsg: ''
};
}
render() {
let form = (
<form className='simple_form form-horizontal mailbox-form'>
<div className='form-group string required'>
<label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr>
{'Nombre'}
</label>
<div className='col-sm-8'>
<input
type='text'
required='required'
className='form-control'
ref='companyName'
placeholder='Razón social de la empresa'
/>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr>
{'ID Cliente'}
</label>
<div className='col-sm-8'>
<input
type='text'
className='form-control select required'
required='required'
ref='idclient'
placeholder='Ingresa el RUT de la empresa (xxxxxxxx-y)'
>
</input>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Reseller'}
</label>
<div className='col-sm-8'>
<label className='radio-inline pretty-input'>
<div className='pretty-checkbox'>
<input
type='checkbox'
className='pretty'
ref='reseller'
/>
<span></span>
</div>
</label>
</div>
</div>
<div className='form-group'>
<div className='col-sm-8 col-sm-offset-3'>
<input
type='submit'
name='commit'
defaulValue='Guardar'
className='btn btn-info'
/>
<Button btnAttrs={{href: './cancel', className: 'btn btn-default'}}>
{'Cancelar'}
</Button>
</div>
</div>
</form>
);
const actions = [
{
label: 'Cancelar',
props: {
className: 'btn btn-default btn-xs',
href: '/mailboxes'
}
}
];
return (
<div className='content animate-panel'>
{this.state.notification && (
<MessageBar
message={this.state.notificacionMsg}
type='error'
position='relative'
canClose={false}
/>
)}
<div className='col-lg-12'>
<Panel
title={'Editar Cuenta'}
btnsHeader={actions}
classHeader={'forum-box'}
>
{form}
</Panel>
</div>
</div>
);
}
}
src/components/link.jsx → src/components/anchor.jsx
View file @ e88b7c48
import React from 'react';
import If from './if.jsx';
export default class Link extends React.Component {
export default class Anchor extends React.Component {
render() {
return (
<li {...this.props.attrs}>
......@@ -9,18 +8,13 @@ export default class Link extends React.Component {
<span className='nav-label'>
{this.props.label}
</span>
<If condition={this.props.isBadge}>
<span className={this.props.badgeClass}>
{this.props.badgeName}
</span>
</If>
</a>
</li>
);
}
}
Link.propTypes = {
Anchor.propTypes = {
badgeName: React.PropTypes.string,
isBadge: React.PropTypes.bool,
badgeClass: React.PropTypes.string,
......@@ -29,7 +23,7 @@ Link.propTypes = {
attrs: React.PropTypes.object
};
Link.defaultProps = {
Anchor.defaultProps = {
badgeName: '',
isBadge: false,
badgeClass: '',
......
src/components/domain/create_domain.jsx 0 → 100644
View file @ e88b7c48
import React from 'react';
import Panel from '../panel.jsx';
import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx.jsx';
export default class CreateDomain extends React.Component {
constructor(props) {
super(props);
this.state = {
notification: false,
notificationMsg: ''
};
}
render() {
let form = (
<form className='simple_form form-horizontal mailbox-form'>
<div className='form-group string required'>
<label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr>
{'Nombre'}
</label>
<div className='col-sm-8'>
<input
type='text'
required='required'
className='form-control'
ref='domainName'
placeholder='example.com'
/>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr>
{'Cuenta'}
</label>
<div className='col-sm-8'>
<select
className='form-control select required'
required='required'
ref='account'
>
</select>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr>
{'Equipo Chat'}
</label>
<div className='col-sm-8'>
<input
type='text'
className='form-control'
ref='chatTeam'
placeholder='Nombre (solo letras o números, no guiones bajos)'
/>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Renovación Anual'}
</label>
<div className='col-sm-8'>
<label className='radio-inline pretty-input'>
<div className='pretty-checkbox'>
<input
type='checkbox'
className='pretty'
ref='annualRenovation'
/>
<span></span>
</div>
</label>
</div>
</div>
<div className='form-group row'>
<div className='col-md-8 col-md-offset-3'>
<div className='box-content'>
<div className='col-md-4 form-group required'>
<label
htmlFor='domain_mbx_basic_limit'
clasName='label-top control-label'
>
<abbr title='Requerido'>{'*'}</abbr><br/>
{'Básica'}
</label>
<br/>
<div className='row'>
<div className='col-sm-8'>
<input
type='text'
className='form-control'
defaulValue='0'
ref='plan_basica'
/>
</div>
</div>
</div>
<div className='col-md-4 form-group required'>
<label
htmlFor='domain_mbx_basic_limit'
clasName='label-top control-label'
>
<abbr title='Requerido'>{'*'}</abbr><br/>
{'Profesional'}
</label>
<br/>
<div className='row'>
<div className='col-sm-8'>
<input
type='text'
className='form-control'
defaulValue='0'
ref='plan_professional'
/>
</div>
</div>
</div>
<div className='col-md-4 form-group required'>
<label
htmlFor='domain_mbx_basic_limit'
clasName='label-top control-label'
>
<abbr title='Requerido'>{'*'}</abbr><br/>
{'Premium'}
</label>
<br/>
<div className='row'>
<div className='col-sm-8'>
<input
type='text'
className='form-control'
defaulValue='0'
ref='plan_premium'
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Límite de casillas'}
</label>
<div className='col-sm-8'>
<input
type='text'
className='form-control'
ref='mailboxLimit'
defaulValue='0'
disabled='disabled'
/>
</div>
</div>
<div className='form-group'>
<div className='col-sm-8 col-sm-offset-3'>
<input
type='submit'
name='commit'
defaulValue='Guardar'
className='btn btn-info'
/>
<Button btnAttrs={{href: './cancel', className: 'btn btn-default'}}>
{'Cancelar'}
</Button>
</div>
</div>
</form>
);
const actions = [
{
label: 'Cancelar',
props: {
className: 'btn btn-default btn-xs',
href: '/mailboxes'
}
}
];
return (
<div className='content animate-panel'>
{this.state.notification && (
<MessageBar
message={this.state.notificacionMsg}
type='error'
position='relative'
canClose={false}
/>
)}
<div className='col-lg-12'>
<Panel
title={'Agregar Dominio'}
btnsHeader={actions}
classHeader={'forum-box'}
>
{form}
</Panel>
</div>
</div>
);
}
}
src/components/domain/edit_domain.jsx 0 → 100644
View file @ e88b7c48
import React from 'react';
import Panel from '../panel.jsx';
import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx.jsx';
export default class EditDomain extends React.Component {
constructor(props) {
super(props);
this.state = {
notification: false,
notificationMsg: ''
};
}
render() {
let form = (
<form className='simple_form form-horizontal mailbox-form'>
<div className='form-group string required'>
<label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr>
{'Nombre'}
</label>
<div className='col-sm-8'>
<input
type='text'
required='required'
className='form-control'
ref='domainName'
value='dominio.com'
disabled='disabled'
/>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Última Renovación'}
</label>
<div className='col-sm-8'>
<div className='input-group date datetimepicker'>
<input
type='text'
className='form-control'
ref='lastRenovation'
/>
<span className='input-group-btn'>
<button
className='btn btn-default'
type='button'
>
<span className='fa fa-calendar'></span>
</button>
</span>
</div>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr>
{'Cuenta'}
</label>
<div className='col-sm-8'>
<select
className='form-control select required'
required='required'
ref='account'
>
</select>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr>
{'Equipo Chat'}
</label>
<div className='col-sm-8'>
<input
type='text'
className='form-control'
ref='chatTeam'
placeholder='Nombre (solo letras o números, no guiones bajos)'
/>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Renovación Anual'}
</label>
<div className='col-sm-8'>
<label className='radio-inline pretty-input'>
<div className='pretty-checkbox'>
<input
type='checkbox'
className='pretty'
ref='autoRenovation'
/>
<span></span>
</div>
</label>
</div>
</div>
<div className='form-group'>
<div className='col-sm-8 col-sm-offset-3'>
<input
type='submit'
name='commit'
value='Guardar'
className='btn btn-info'
/>
<Button btnAttrs={{href: './cancel', className: 'btn btn-default'}}>
{'Cancelar'}
</Button>
</div>
</div>
</form>
);
const actions = [
{
label: 'Cancelar',
props: {
className: 'btn btn-default btn-xs',
href: '/mailboxes'
}
}
];
return (
<div className='content animate-panel'>
{this.state.notification && (
<MessageBar
message={this.state.notificacionMsg}
type='error'
position='relative'
canClose={false}
/>
)}
<div className='col-lg-12'>
<Panel
title={'Editar Dominio'}
btnsHeader={actions}
classHeader={'forum-box'}
>
{form}
</Panel>
</div>
</div>
);
}
}
src/components/mailbox/create_mailbox.jsx 0 → 100644
View file @ e88b7c48
import React from 'react';
import Panel from '../panel.jsx';
import Button from '../button.jsx';
export default class CreateMailBox extends React.Component {
constructor(props) {
super(props);
this.state = {
notification: false,
notificationMsg: ''
};
}
componentDidMount() {
$('#selectDomains').select2({
placeholder: 'Por favor, introduzca 3 caracteres.',
allowClear: true
});
}
render() {
let form = (
<form className='simple_form form-horizontal mailbox-form'>
<div className='form-group string required'>
<label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr>
{'Dirección'}
</label>
<div className='col-sm-8'>
<div className='row'>
<div className='col-xs-6'>
<input
type='text'
required='required'
className='form-control'
ref='address'
/>
</div>
<div className='col-xs-6'>
<div className='input-group'>
<span className='input-group-addon'>{'@'}</span>
<select
className='form-control'
id='selectDomains'
ref='domain'
>
</select>
</div>
</div>
</div>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Nombre'}
</label>
<div className='col-sm-8'>
<input
type='text'
className='form-control'
ref='name'
/>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Apellido'}
</label>
<div className='col-sm-8'>
<input
type='text'
className='form-control'
ref='lastname'
/>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Descripción'}
</label>
<div className='col-sm-8'>
<input
type='text'
className='form-control'
ref='description'
/>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Chat'}
</label>
<div className='col-sm-8'>
<label className='radio-inline pretty-input'>
<div className='pretty-checkbox'>
<input
type='checkbox'
className='pretty'
ref='hasChat'
/>
<span></span>
</div>
</label>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Administrador delegado'}
</label>
<div className='col-sm-8'>
<label className='radio-inline pretty-input'>
<div className='pretty-checkbox'>
<input
type='checkbox'
className='pretty'
ref='isAdministrator'
/>
<span></span>
</div>
</label>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
<abbr title='Requerido'>{'*'}</abbr>
{'Tipo de casilla'}
</label>
<div className='col-sm-8'>
<label className='radio radio-info radio-inline pretty-input'>
<div className='pretty-radio'>
<input
type='radio'
className='pretty'
name='mailbox'
ref='mailbox_basic'
/>
<span></span>
</div>
{'Básica'}
</label>
<label className='radio radio-info radio-inline pretty-input'>
<div className='pretty-radio'>
<input
type='radio'
className='pretty'
name='mailbox'
ref='mailbox_professional'
/>
<span></span>
</div>
{'Profesional'}
</label>
<label className='radio radio-info radio-inline pretty-input'>
<div className='pretty-radio'>
<input
type='radio'
className='pretty'
name='mailbox'
ref='mailbox_premium'
/>
<span></span>
</div>
{'Premium'}
</label>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
<abbr title='Requerido'>{'*'}</abbr>
{'Contraseña'}
</label>
<div className='col-sm-8'>
<input
type='password'
className='form-control'
ref='passwd'
/>
</div>
</div>
<div className='form-group'>
<div className='col-sm-8 col-sm-offset-3'>
<input
type='submit'
name='commit'
value='Guardar'
className='btn btn-primary'
/>
<Button btnAttrs={{href: './cancel', className: 'btn btn-default'}}>
{'Cancelar'}
</Button>
</div>
</div>
</form>
);
const actions = [
{
label: 'Cancelar',
props: {
className: 'btn btn-default btn-xs',
href: '/mailboxes'
}
}
];
return (
<div className='content animate-panel'>
<Panel
title={'Agregar Casilla'}
btnsHeader={actions}
classHeader={'forum-box'}
>
{form}
</Panel>
</div>
);
}
}
src/components/mailbox/edit_mailbox.jsx 0 → 100644
View file @ e88b7c48
//import $ from 'jquery';
//import select2 from 'select2';
import React from 'react';
import Panel from '../panel.jsx';
import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx';
export default class EditMailBox extends React.Component {
constructor(props) {
super(props);
this.state = {
notification: false,
notificationMsg: ''
};
}
render() {
let form = (
<form className='simple_form form-horizontal mailbox-form'>
<div className='form-group string required'>
<label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr>
{'Dirección'}
</label>
<div className='col-sm-8'>
<div className='row'>
<div className='col-xs-6'>
<input
type='text'
required='required'
className='form-control'
/>
</div>
<div className='col-xs-6'>
<div className='input-group'>
<span className='input-group-addon'>{'@'}</span>
<select
className='form-control'
id='selectDomains'
>
</select>
</div>
</div>
</div>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Nombre'}
</label>
<div className='col-sm-8'>
<input
type='text'
className='form-control'
/>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Apellido'}
</label>
<div className='col-sm-8'>
<input
type='text'
className='form-control'
/>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Descripción'}
</label>
<div className='col-sm-8'>
<input
type='text'
className='form-control'
/>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Chat'}
</label>
<div className='col-sm-8'>
<label className='radio-inline pretty-input'>
<div className='pretty-checkbox'>
<input
type='checkbox'
className='pretty'
/>
<span></span>
</div>
</label>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
{'Administrador delegado'}
</label>
<div className='col-sm-8'>
<label className='radio-inline pretty-input'>
<div className='pretty-checkbox'>
<input
type='checkbox'
className='pretty'
/>
<span></span>
</div>
</label>
</div>
</div>
<div className='form-group string'>
<label className='string required col-sm-3 control-label'>
<abbr title='Requerido'>{'*'}</abbr>
{'Tipo de casilla'}
</label>
<div className='col-sm-8'>
<label className='radio radio-info radio-inline pretty-input'>
<div className='pretty-radio'>
<input
type='radio'
className='pretty'
name='mailbox'
/>
<span></span>
</div>
{'Básica'}
</label>
<label className='radio radio-info radio-inline pretty-input'>
<div className='pretty-radio'>
<input
type='radio'
className='pretty'
name='mailbox'
/>
<span></span>
</div>
{'Profesional'}
</label>
<label className='radio radio-info radio-inline pretty-input'>
<div className='pretty-radio'>
<input
type='radio'
className='pretty'
name='mailbox'
/>
<span></span>
</div>
{'Premium'}
</label>
</div>
</div>
<div className='form-group'>
<div className='col-sm-8 col-sm-offset-3'>
<input
type='submit'
name='commit'
value='Guardar'
className='btn btn-primary'
/>
<Button btnAttrs={{href: './cancel', className: 'btn btn-default'}}>
{'Cancelar'}
</Button>
</div>
</div>
</form>
);
const actions = [
{
label: 'Cancelar',
props: {
className: 'btn btn-default btn-xs',
href: '/mailboxes'
}
},
{
label: 'Eliminar',
props: {
className: 'btn btn-danger btn-xs',
href: '/delete'
}
}
];
return (
<div className='content animate-panel'>
{this.state.notification && (
<MessageBar
message={this.state.notificacionMsg}
type='error'
position='relative'
canClose={false}
/>
)}
<div className='col-lg-12'>
<Panel
title={'Editar Casilla'}
btnsHeader={actions}
classHeader={'forum-box'}
>
{form}
</Panel>
</div>
</div>
);
}
}
src/components/pagination.jsx
View file @ e88b7c48
import React from 'react';
import Link from './link.jsx';
import Anchor from './anchor.jsx';
export default class Pagination extends React.Component {
render() {
......@@ -11,7 +11,7 @@ export default class Pagination extends React.Component {
<ul className={this.props.ulClasses}>
{this.props.linksArray.map((link, i) => {
return (
<Link
<Anchor
key={i}
url={link.url}
label={link.label}
......
src/components/panel.jsx
View file @ e88b7c48
......@@ -27,7 +27,7 @@ export default class Panel extends React.Component {
}
return (
<div className='hpanel'>
<div className={'hpanel ' + this.props.classHeader}>
{panelHeader}
{this.props.error}
<div className='panel-body'>
......@@ -42,6 +42,7 @@ Panel.propTypes = {
hasHeader: React.PropTypes.bool,
btnsHeader: React.PropTypes.array,
title: React.PropTypes.string,
classHeader: React.PropTypes.string,
error: React.PropTypes.element,
children: React.PropTypes.any
};
......@@ -50,5 +51,6 @@ Panel.defaultProps = {
hasHeader: true,
btnsHeader: [],
title: '',
error: null
error: null,
classHeader: ''
};
src/components/panelTabs.jsx
View file @ e88b7c48
......@@ -2,8 +2,7 @@ import React from 'react';
import Button from './button.jsx';
import PanelForm from './panelForm.jsx';
import Pagination from './pagination.jsx';
import Alert from './alert.jsx';
import Link from './link.jsx';
import Anchor from './anchor.jsx';
export default class Panel extends React.Component {
constructor(props) {
......@@ -11,57 +10,7 @@ export default class Panel extends React.Component {
this.state = {
loading: false,
data: [
{email: '@zbox', name: '2', type: 'Caracas', actions: [
{
props: {
href: '/mailboxes/8758658/edit',
className: 'btn btn-primary btn-xs'
},
label: 'Editar'
},
{
props: {
href: '/mailboxes/8758658/delete',
className: 'btn btn-danger btn-xs'
},
label: 'Eliminar'
}
], props: {className: 'domain-row'}},
{email: '@Nombre', name: '2NNS', type: 'Descripción', actions: [
{
props: {
href: '/mailboxes/86767676/edit',
className: 'btn btn-danger btn-xs'
},
label: 'Editar'
}
], props: {className: 'domain-row'}},
{email: '@microsoft', name: '34NS', type: 'Solteros', actions: [], props: {className: 'domain-row'}},
{email: '@descargasnsn', name: '2NNS', type: 'Descripción', actions: [], props: {className: 'domain-row'}},
{email: '@Nombre', name: '2NNS', type: 'Descripción', actions: [], props: {className: 'domain-row'}},
{email: '@machinesoft', name: '', type: 'Hola que tal', actions: [], props: {className: 'domain-row'}},
{email: '@Nombre', name: '2S', type: 'Descripción', actions: [], props: {className: 'domain-row'}},
{email: '@getonboard', name: '45NS', type: 'Casados', actions: [], props: {className: 'domain-row'}}
],
pagination: [
{url: './domains/1', label: '1', props: {className: 'active'}},
{url: './domains/2', label: '2'},
{url: './domains/3', label: '3'},
{url: './domains/prev', label: 'prev'},
{url: './domains/next', label: 'next'}
],
tabs: [
{url: '/mailboxes', label: 'Todas (100)', props: {id: 'tab-all'}},
{url: '/archiving', label: 'Archiving', props: {id: 'tab-archiving'}},
{url: '/tab-basic', label: 'Básico', props: {style: {display: 'none'}}},
{url: '/professional', label: 'Professional', props: {style: {display: 'none'}}},
{url: '/premium', label: 'Premium', props: {style: {display: 'none'}}},
{url: '/unknown', label: 'Sin Plan (130)', props: {id: 'tab-unknown'}},
{url: '/locked', label: 'bloqueada (1)', props: {id: 'tab-locked'}}
]
data: []
};
}
......@@ -142,7 +91,7 @@ export default class Panel extends React.Component {
const tab = this.state.tabs.map((li, i) => {
return (
<Link
<Anchor
key={i}
attrs={li.props}
url={li.url}
......@@ -163,13 +112,6 @@ export default class Panel extends React.Component {
className='col-md-12 panel-width-tabs mailboxes-index'
data-domain=''
>
<Alert
className='alert alert-success'
withClose={true}
>
<button>Tu datos han sido guardados! ok .</button>
</Alert>
<div className='hpanel'>
{tabs}
<div className='tab-content'>
......
src/components/label.jsx → src/components/status_label.jsx
View file @ e88b7c48
import React from 'react';
export default class Label extends React.Component {
export default class StatusLabel extends React.Component {
render() {
return (
<span className={this.props.classes}>
......@@ -10,12 +10,12 @@ export default class Label extends React.Component {
}
}
Label.propTypes = {
StatusLabel.propTypes = {
classes: React.PropTypes.string,
children: React.PropTypes.any
};
Label.defaultProps = {
StatusLabel.defaultProps = {
classes: '',
children: ''
};
src/index.jsx
View file @ e88b7c48
......@@ -8,7 +8,7 @@ import ErrorPage from './components/error_page.jsx';
import LoggedIn from './components/logged_in.jsx';
import NotLoggedIn from './components/not_logged_in.jsx';
import Login from './components/login/login.jsx';
import Accounts from './components/accounts.jsx';
import Accounts from './components/accounts/accounts.jsx';
import * as Client from './utils/client.jsx';
import * as Utils from './utils/utils.jsx';
......
src/sass/components/_various.scss
View file @ e88b7c48
......@@ -1474,3 +1474,125 @@ label {
.x-edit-checkbox .checkbox label::before {
display: none;
}
.pretty-input {
padding-left: 0;
.pretty-radio {
display: inline-block;
vertical-align: middle;
.pretty[type='radio'] {
display: none;
+ span {
border: 1px solid $border-color-input;
border-radius: 50%;
box-shadow: inset 0 0 10px 14px $bg-border-color;
display: inline-block;
height: 22px;
margin-right: 5px;
overflow: hidden;
position: relative;
transition: border-color .3s;
width: 22px;
&:hover {
border: 1px solid $bg-border-color;
}
&::before {
background-color: $white;
color: $white;
content: '\2713';
height: 100%;
left: 0;
line-height: 1.7;
position: absolute;
text-align: center;
top: 0;
transition: background-color .4s;
width: 100%;
}
}
&:checked {
+ span {
border: 1px solid $bg-border-color;
}
+ span::before {
background-color: $bg-border-color;
color: $white;
content: '\2713';
height: 100%;
left: 0;
line-height: 1.7;
position: absolute;
text-align: center;
top: 0;
transition: background-color .4s;
width: 100%;
}
}
}
}
.pretty-checkbox {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
.pretty[type='checkbox'] {
display: none;
+ span {
border: 1px solid $border-color-input;
display: inline-block;
height: 22px;
margin-right: 5px;
position: relative;
transition: border-color .3s;
width: 22px;
&:hover {
border: 1px solid $bg-border-color;
}
&::before {
background-color: $white;
color: $white;
content: '\2713';
height: 100%;
left: 0;
line-height: 1.7;
position: absolute;
text-align: center;
top: 0;
transition: background-color .4s;
width: 100%;
}
}
&:checked {
+ span {
border: 1px solid $bg-border-color;
}
+ span::before {
background-color: $bg-border-color;
color: $white;
content: '\2713';
height: 100%;
left: 0;
line-height: 1.7;
position: absolute;
text-align: center;
top: 0;
transition: background-color .4s;
width: 100%;
}
}
}
}
}
src/sass/utils/_variables.scss
View file @ e88b7c48
......@@ -77,3 +77,7 @@ $bg-success-color: #74d348;
$bg-error-color: #f2dede;
$bg-warning-color: #e67e22;
$flash-error-color: #a94442;
//Pretty Inputs
$border-color-input: #ccc;
$bg-border-color: #63a758;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment