mirror of
https://github.com/ascribe/onion.git
synced 2024-06-30 21:52:08 +02:00
Add custom buttons
This commit is contained in:
parent
24d5275c1a
commit
436ffabffb
|
@ -1,27 +1,53 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import _Button from 'react-bootstrap/lib/Button';
|
import _Button from 'react-bootstrap/lib/Button';
|
||||||
|
import classnames from 'classnames';
|
||||||
|
|
||||||
export const Button = React.createClass({
|
|
||||||
|
const DISABLED_STATUSES = ['loading', 'disabled'];
|
||||||
|
|
||||||
|
|
||||||
|
function ButtonFactory(btnClassName) {
|
||||||
|
|
||||||
|
let GenericButton = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
status: React.PropTypes.oneOf(['loading', 'disabled']),
|
||||||
|
children: React.PropTypes.oneOfType([React.PropTypes.arrayOf(React.PropTypes.element),
|
||||||
|
React.PropTypes.element])
|
||||||
|
},
|
||||||
|
|
||||||
|
getInitialState: function() {
|
||||||
|
return {
|
||||||
|
status: this.props.status
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
render: function render() {
|
render: function render() {
|
||||||
|
let disabled = DISABLED_STATUSES.indexOf(this.state.status) !== -1;
|
||||||
|
let className = '';
|
||||||
|
|
||||||
|
if (this.state.status !== 'disabled') {
|
||||||
|
className = this.state.status;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<_Button>
|
<_Button bsStyle={btnClassName} className={classnames(className)} disabled={disabled}>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</_Button>
|
</_Button>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
return GenericButton;
|
||||||
export const SecondaryButton = React.createClass({
|
|
||||||
|
|
||||||
render: function render() {
|
|
||||||
return (
|
|
||||||
<_Button className='btn-secondary'>
|
|
||||||
{this.props.children}
|
|
||||||
</_Button>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
|
||||||
|
export const Button = ButtonFactory('btn-primary');
|
||||||
|
export const SecondaryButton = ButtonFactory('btn-secondary');
|
||||||
|
export const DangerButton = ButtonFactory('btn-danger');
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Button, SecondaryButton } from '../../lib/buttons';
|
import { Button, SecondaryButton, DangerButton } from '../../lib/buttons';
|
||||||
import Panel from 'react-bootstrap/lib/Panel';
|
import Panel from 'react-bootstrap/lib/Panel';
|
||||||
|
|
||||||
|
|
||||||
|
@ -11,23 +11,54 @@ let Buttons = React.createClass({
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<h2>Button</h2>
|
<h2>Button</h2>
|
||||||
<p><code>import { Button } from './js/lib/buttons';</code></p>
|
<p><code>import { Button, SecondaryButton, DangerButton } from './js/lib/buttons';</code></p>
|
||||||
<Panel header='example'>
|
<Panel header='example'>
|
||||||
|
<h4>In the wild</h4>
|
||||||
<div>
|
<div>
|
||||||
<p>This is a paragraph with
|
<p>This is a paragraph with <Button>{"a button"}</Button> that should be displayed inline</p>
|
||||||
<Button>
|
|
||||||
{"a button"}
|
|
||||||
</Button>
|
|
||||||
that should be displayed inline
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h4>Different states</h4>
|
||||||
|
<div>
|
||||||
|
<Button>button</Button>
|
||||||
|
<Button status="disabled">disabled</Button>
|
||||||
|
<Button status="loading">loading</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>In a form</h4>
|
||||||
<div>
|
<div>
|
||||||
<p>This is a form with a large submit button
|
<p>This is a form with a large submit button
|
||||||
<form className="ascribe-form-bordered">
|
<form className="ascribe-form-bordered">
|
||||||
|
<div className="footer">
|
||||||
<Button>
|
<Button>
|
||||||
{"an inline button"}
|
Submit nao
|
||||||
</Button>
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>In a form with multiple buttons</h4>
|
||||||
|
<div>
|
||||||
|
<p>This is a form with many buttons
|
||||||
|
<form className="ascribe-form-bordered">
|
||||||
|
<div className="footer">
|
||||||
|
<Button>
|
||||||
|
Submit nao
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button>
|
||||||
|
Submit later
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<SecondaryButton>
|
||||||
|
Cancel
|
||||||
|
</SecondaryButton>
|
||||||
|
|
||||||
|
<DangerButton>
|
||||||
|
Delete
|
||||||
|
</DangerButton>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,52 +1,30 @@
|
||||||
|
$ascribe-brand-color: #02b6a3;
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: $ascribe-color-background
|
background-color: #fdfdfd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-default {
|
.btn-primary {
|
||||||
color: white;
|
color: white;
|
||||||
background-color: $ascribe-brand-color;
|
background-color: $ascribe-brand-color;
|
||||||
border-color: $ascribe-brand-color;
|
border-color: $ascribe-brand-color;
|
||||||
&:hover, &:focus {
|
|
||||||
background-color: darken($ascribe-brand-color, 10%);
|
|
||||||
border-color: darken($ascribe-brand-color, 10%);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-default:active:hover,
|
.btn-primary:active:hover,
|
||||||
.btn-default:active:focus,
|
.btn-primary:active:focus {
|
||||||
.btn-default:active.focus,
|
|
||||||
.btn-default.active:hover,
|
|
||||||
.btn-default.active:focus,
|
|
||||||
.btn-default.active.focus,
|
|
||||||
.open > .btn-default.dropdown-toggle:hover,
|
|
||||||
.open > .btn-default.dropdown-toggle:focus,
|
|
||||||
.open > .btn-default.dropdown-toggle.focus {
|
|
||||||
background-color: darken($ascribe-brand-color, 20%);
|
background-color: darken($ascribe-brand-color, 20%);
|
||||||
border-color: darken($ascribe-brand-color, 20%);
|
border-color: darken($ascribe-brand-color, 20%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-default.disabled,
|
.btn-primary[disabled],
|
||||||
.btn-default.disabled:hover,
|
.btn-primary[disabled]:hover,
|
||||||
.btn-default.disabled:focus,
|
.btn-primary[disabled]:focus,
|
||||||
.btn-default.disabled.focus,
|
.btn-primary[disabled]:active {
|
||||||
.btn-default.disabled:active,
|
|
||||||
.btn-default.disabled.active,
|
|
||||||
.btn-default[disabled],
|
|
||||||
.btn-default[disabled]:hover,
|
|
||||||
.btn-default[disabled]:focus,
|
|
||||||
.btn-default[disabled].focus,
|
|
||||||
.btn-default[disabled]:active,
|
|
||||||
.btn-default[disabled].active,
|
|
||||||
fieldset[disabled] .btn-default,
|
|
||||||
fieldset[disabled] .btn-default:hover,
|
|
||||||
fieldset[disabled] .btn-default:focus,
|
|
||||||
fieldset[disabled] .btn-default.focus,
|
|
||||||
fieldset[disabled] .btn-default:active,
|
|
||||||
fieldset[disabled] .btn-default.active {
|
|
||||||
background-color: lighten($ascribe-brand-color, 10%);
|
background-color: lighten($ascribe-brand-color, 10%);
|
||||||
border-color: lighten($ascribe-brand-color, 10%);
|
border-color: lighten($ascribe-brand-color, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
.ascribe-piece-list-toolbar-filter-widget {
|
.ascribe-piece-list-toolbar-filter-widget {
|
||||||
button {
|
button {
|
||||||
color: $ascribe-brand-color;
|
color: $ascribe-brand-color;
|
||||||
|
@ -96,3 +74,4 @@ fieldset[disabled] .btn-default.active {
|
||||||
background-color: $ascribe-brand-color !important;
|
background-color: $ascribe-brand-color !important;
|
||||||
border-color: $ascribe-brand-color !important;
|
border-color: $ascribe-brand-color !important;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
|
@ -49,7 +49,6 @@ $break-small: 764px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.ascribe-login-wrapper {
|
.ascribe-login-wrapper {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
|
|
|
@ -0,0 +1,56 @@
|
||||||
|
/**
|
||||||
|
* Styles for the buttons
|
||||||
|
*
|
||||||
|
* The style of a button is context-dependent. This means that if the button
|
||||||
|
* is placed in a form, for example, and is the only child, it will be displayed
|
||||||
|
* with 100% width. If the button is together with other buttons, it will
|
||||||
|
* be displayed with auto width and pushed on the right.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins/_buttons';
|
||||||
|
|
||||||
|
|
||||||
|
// Buttons that are one next to the other will have 1px margin on the left
|
||||||
|
.btn + .btn {
|
||||||
|
margin-left: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buttons in the footer of a form are aligned on the right
|
||||||
|
form .footer {
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
// A single button in the footer of a form will take all the space available
|
||||||
|
> .btn:only-child {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.loading {
|
||||||
|
background-image: url('//s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif');
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
|
||||||
|
// force transparency so we don't need to go crazy with all the states of the button.
|
||||||
|
color: rgba(0, 0, 0, 0) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Colors
|
||||||
|
*/
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
@include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
|
||||||
|
border-color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
color: $btn-secondary-color;
|
||||||
|
}
|
11
sass/lib/defaults.scss
Normal file
11
sass/lib/defaults.scss
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
$btn-primary-bg: #02b6a3;
|
||||||
|
$btn-primary-color: #fff;
|
||||||
|
$btn-primary-border: $btn-primary-bg;
|
||||||
|
|
||||||
|
$btn-secondary-bg: #ddd;
|
||||||
|
$btn-secondary-color: #666;
|
||||||
|
$btn-secondary-border: $btn-secondary-bg;
|
||||||
|
|
||||||
|
$btn-danger-bg: #ec4742;
|
||||||
|
$btn-danger-color: #fff;
|
||||||
|
$btn-danger-border: $btn-danger-bg;
|
2
sass/lib/index.scss
Normal file
2
sass/lib/index.scss
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
@import 'defaults';
|
||||||
|
@import 'buttons';
|
|
@ -8,10 +8,11 @@ $BASE_URL: '<%= BASE_URL %>';
|
||||||
@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
|
@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
|
||||||
@import '../node_modules/react-star-rating/dist/css/react-star-rating.min';
|
@import '../node_modules/react-star-rating/dist/css/react-star-rating.min';
|
||||||
@import '../node_modules/react-datepicker/dist/react-datepicker';
|
@import '../node_modules/react-datepicker/dist/react-datepicker';
|
||||||
|
@import 'lib/index';
|
||||||
@import 'glyphicons-social';
|
@import 'glyphicons-social';
|
||||||
@import 'ascribe_theme';
|
@import 'ascribe_theme';
|
||||||
@import './ascribe-fonts/style';
|
@import 'ascribe-fonts/style';
|
||||||
@import './ascribe-fonts/ascribe-fonts';
|
@import 'ascribe-fonts/ascribe-fonts';
|
||||||
@import 'ascribe_login';
|
@import 'ascribe_login';
|
||||||
@import 'ascribe_table';
|
@import 'ascribe_table';
|
||||||
@import 'ascribe_accordion_list';
|
@import 'ascribe_accordion_list';
|
||||||
|
|
Loading…
Reference in New Issue
Block a user