1
0
mirror of https://github.com/ascribe/onion.git synced 2024-06-17 18:13:18 +02:00

Merge commit '436ffab' into AD-907-bootstrap-styleguide

Conflicts:
	js/routes.js
	sass/main.scss
This commit is contained in:
vrde 2015-09-16 21:31:41 +02:00
commit f91a7e3152
11 changed files with 327 additions and 13 deletions

View File

@ -77,6 +77,10 @@ gulp.task('serve', ['browser-sync', 'run-server', 'sass:build', 'sass:watch', 'c
opn('http://www.localhost.com:3000');
});
gulp.task('styleguide', ['browser-sync', 'run-server', 'sass:build', 'sass:watch', 'copy'], function() {
bundle(true, './styleguide/app.js');
});
gulp.task('jest', function(done) {
jest.runCLI({ config : config.jestOptions }, ".", function() {
done();
@ -153,11 +157,13 @@ gulp.task('lint:watch', function () {
gulp.watch('js/**/*.js', ['lint']);
});
function bundle(watch) {
var bro;
function bundle(watch, sourceFile, destDir) {
var bro,
sourceFile = sourceFile || './js/app.js',
destDir = destDir || './build/js';
if (watch) {
bro = watchify(browserify('./js/app.js',
bro = watchify(browserify(sourceFile,
// Assigning debug to have sourcemaps
_.assign(watchify.args, {
debug: true
@ -166,7 +172,7 @@ function bundle(watch) {
rebundle(bro, true);
});
} else {
bro = browserify('./js/app.js', {
bro = browserify(sourceFile, {
debug: true
});
}
@ -192,7 +198,7 @@ function bundle(watch) {
mangle: true
})))
.on('error', notify.onError('Error: <%= error.message %>'))
.pipe(gulp.dest('./build/js'))
.pipe(gulp.dest(destDir))
.on('error', notify.onError('Error: <%= error.message %>'))
.pipe(browserSync.stream())
.on('error', notify.onError('Error: <%= error.message %>'));

53
js/lib/buttons.js Normal file
View File

@ -0,0 +1,53 @@
/**
*
*/
'use strict';
import React from 'react';
import _Button from 'react-bootstrap/lib/Button';
import classnames from 'classnames';
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() {
let disabled = DISABLED_STATUSES.indexOf(this.state.status) !== -1;
let className = '';
if (this.state.status !== 'disabled') {
className = this.state.status;
}
return (
<_Button bsStyle={btnClassName} className={classnames(className)} disabled={disabled}>
{this.props.children}
</_Button>
);
}
});
return GenericButton;
}
export const Button = ButtonFactory('btn-primary');
export const SecondaryButton = ButtonFactory('btn-secondary');
export const DangerButton = ButtonFactory('btn-danger');

View File

@ -30,6 +30,18 @@ let Redirect = Router.Redirect;
let baseUrl = AppConstants.baseUrl;
function getDebugRoutes() {
let StyleGuideContainer = require('./styleguide/container.js');
if (window.DEBUG) {
return (
<Route name="styleguide" path="styleguide" handler={StyleGuideContainer} headerTitle="Style Guide" />
);
} else {
return null;
}
}
const COMMON_ROUTES = (
<Route name="app" path={baseUrl} handler={App}>
<Redirect from={baseUrl} to="login" />

View File

@ -0,0 +1,78 @@
'use strict';
import React from 'react';
import { Button, SecondaryButton, DangerButton } from '../../lib/buttons';
import Panel from 'react-bootstrap/lib/Panel';
let Buttons = React.createClass({
render() {
return (
<div>
<h2>Button</h2>
<p><code>import &#123; Button, SecondaryButton, DangerButton &#125; from './js/lib/buttons';</code></p>
<Panel header='example'>
<h4>In the wild</h4>
<div>
<p>This is a paragraph with <Button>{"a button"}</Button> that should be displayed inline</p>
</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>
<p>This is a form with a large submit button
<form className="ascribe-form-bordered">
<div className="footer">
<Button>
Submit nao
</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>
</p>
</div>
</Panel>
<div>
<SecondaryButton>
{"<SecondaryButton>"}
</SecondaryButton>
</div>
</div>
);
}
});
export default Buttons;

View File

@ -0,0 +1,20 @@
'use strict';
import React from 'react';
import Buttons from './components/buttons';
let StyleGuideContainer = React.createClass({
render() {
return (
<div>
<Buttons />
</div>
);
}
});
export default StyleGuideContainer;

View File

@ -0,0 +1,77 @@
$ascribe-brand-color: #02b6a3;
body {
background-color: #fdfdfd;
}
.btn-primary {
color: white;
background-color: $ascribe-brand-color;
border-color: $ascribe-brand-color;
}
.btn-primary:active:hover,
.btn-primary:active:focus {
background-color: darken($ascribe-brand-color, 20%);
border-color: darken($ascribe-brand-color, 20%);
}
.btn-primary[disabled],
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:active {
background-color: lighten($ascribe-brand-color, 10%);
border-color: lighten($ascribe-brand-color, 10%);
}
/*
.ascribe-piece-list-toolbar-filter-widget {
button {
color: $ascribe-brand-color;
background-color: transparent;
border-color: transparent;
&:hover, &:active {
color: white;
background-color: $ascribe-brand-color;
border-color: $ascribe-brand-color;
}
}
}
.navbar-default {
background-color: white;
border-color: $ascribe-color-borders;
}
.navbar-default .navbar-nav > .active > {
a, a:hover, a:focus {
background-color: transparent;
color: $ascribe-brand-color;
border-bottom: 1px solid $ascribe-brand-color;
}
}
.ascribe-settings-wrapper {
background-color: white;
&:hover{
border-left-color: rgba($ascribe-brand-color, .4);
}
&:last-of-type {
border-bottom-color: rgba(0, 0, 0, .05);
}
}
.ascribe-settings-wrapper.is-focused {
background-color: rgba($ascribe-brand-color, .05);
border-left-color: rgba($ascribe-brand-color, 1);
}
.ascribe-settings-property-collapsible-toggle input[type=checkbox]:checked + .checkbox:before {
color: $ascribe-brand-color;
}
#intercom-container .intercom-launcher-button {
background-color: $ascribe-brand-color !important;
border-color: $ascribe-brand-color !important;
}
*/

View File

@ -49,7 +49,6 @@ $break-small: 764px;
}
}
.ascribe-login-wrapper {
margin: 0 auto;
max-width: 600px;

View File

@ -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
View 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
View File

@ -0,0 +1,2 @@
@import 'defaults';
@import 'buttons';

View File

@ -8,10 +8,11 @@ $BASE_URL: '<%= BASE_URL %>';
@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
@import '../node_modules/react-star-rating/dist/css/react-star-rating.min';
@import '../node_modules/react-datepicker/dist/react-datepicker';
@import 'lib/index';
@import 'glyphicons-social';
@import 'ascribe_theme';
@import './ascribe-fonts/style';
@import './ascribe-fonts/ascribe-fonts';
@import 'ascribe-fonts/style';
@import 'ascribe-fonts/ascribe-fonts';
@import 'ascribe_login';
@import 'ascribe_table';
@import 'ascribe_accordion_list';
@ -238,18 +239,17 @@ hr {
}
}
.btn-ascribe {
background-color: #fff;
border: 1px solid #444;
border-radius: 0 !important;
color: #222 !important;
font-family: sans-serif !important;
line-height: 2em;
margin-left: 0 !important;
font-family: sans-serif !important;
border-radius: 0 !important;
color: #222 !important;
}
.btn-ascribe:active, .btn-ascribe:hover {
color: #FFF !important;
.btn-ascribe:active,
.btn-ascribe:hover {
background-color: #444;
}