ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-11-13 16:45:05 +01:00
Code Issues Releases Wiki Activity

spinners in forms

Browse Source 
button wide
This commit is contained in:
diminator 2015-10-12 17:55:02 +02:00
parent aa7c4a57e5
commit 8d970a65c4
17 changed files with 169 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/components/ascribe_detail/edition.js
View File

@ -81,7 +81,7 @@ let Edition = React.createClass({
</Col>
<Col md={6} className="ascribe-edition-details">
<div className="ascribe-detail-header">
<hr/>
<hr style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
<EditionDetailProperty label="BY" value={this.props.edition.artist_name} />
<EditionDetailProperty label="DATE" value={ this.props.edition.date_created.slice(0, 4) } />

7
js/components/ascribe_forms/create_editions_form.js
View File

@ -8,6 +8,7 @@ import Property from '../ascribe_forms/property';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
import AscribeSpinner from '../ascribe_spinner';
import ApiUrls from '../../constants/api_urls';
import { getLangText } from '../../utils/lang_utils';
@ -43,12 +44,12 @@ let CreateEditionsForm = React.createClass({
buttons={
<button
type="submit"
className="btn ascribe-btn ascribe-btn-login">
className="btn btn-default btn-wide">
{getLangText('Create editions')}
</button>}
spinner={
<button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
<button className="btn btn-default btn-wide btn-spinner">
<AscribeSpinner color="dark-blue" size="md" />
</button>
}>
<Property

7
js/components/ascribe_forms/form_contract_agreement.js
View File

@ -15,6 +15,7 @@ import PropertyCollapsible from './property_collapsible';
import InputTextAreaToggable from './input_textarea_toggable';
import ApiUrls from '../../constants/api_urls';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils';
import { mergeOptions } from '../../utils/general_utils';
@ -100,12 +101,12 @@ let ContractAgreementForm = React.createClass({
handleSuccess={this.handleSubmitSuccess}
buttons={<button
type="submit"
className="btn ascribe-btn ascribe-btn-login">
className="btn btn-default btn-wide">
{getLangText('Send contract')}
</button>}
spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
<span className="btn btn-default btn-wide btn-spinner">
<AscribeSpinner color="dark-blue" size="md" />
</span>
}>
<div className="ascribe-form-header">

2
js/components/ascribe_forms/form_loan.js
View File

@ -191,7 +191,7 @@ let LoanForm = React.createClass({
return (
<button
type="submit"
className="btn ascribe-btn ascribe-btn-login">
className="btn btn-default btn-wide">
{getLangText('Finish process')}
</button>
);

7
js/components/ascribe_forms/form_login.js
View File

@ -14,6 +14,7 @@ import Property from './property';
import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils';
@ -125,12 +126,12 @@ let LoginForm = React.createClass({
buttons={
<button
type="submit"
className="btn ascribe-btn ascribe-btn-login">
className="btn btn-default btn-wide">
{this.props.submitMessage}
</button>}
spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
<span className="btn btn-default btn-wide btn-spinner">
<AscribeSpinner color="dark-blue" size="md" />
</span>
}>
<div className="ascribe-form-header">

7
js/components/ascribe_forms/form_register_piece.js
View File

@ -11,6 +11,7 @@ import InputFineUploader from './input_fineuploader';
import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils';
import { mergeOptions } from '../../utils/general_utils';
@ -83,14 +84,14 @@ let RegisterPieceForm = React.createClass({
buttons={
<button
type="submit"
className="btn ascribe-btn ascribe-btn-login"
className="btn btn-default btn-wide"
disabled={!this.state.isUploadReady || this.props.disabled}>
{this.props.submitMessage}
</button>
}
spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
<span className="btn btn-default btn-wide btn-spinner">
<AscribeSpinner color="dark-blue" size="md" />
</span>
}>
<div className="ascribe-form-header">

11
js/components/ascribe_forms/form_signup.js
View File

@ -3,8 +3,6 @@
import React from 'react';
import Router from 'react-router';
import { getLangText } from '../../utils/lang_utils';
import UserStore from '../../stores/user_store';
import GlobalNotificationModel from '../../models/global_notification_model';
@ -16,6 +14,9 @@ import InputCheckbox from './input_checkbox';
import AppConstants from '../../constants/application_constants';
import ApiUrls from '../../constants/api_urls';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils';
let SignupForm = React.createClass({
@ -109,12 +110,12 @@ let SignupForm = React.createClass({
getFormData={this.getFormData}
handleSuccess={this.handleSuccess}
buttons={
<button type="submit" className="btn ascribe-btn ascribe-btn-login">
<button type="submit" className="btn btn-default btn-wide">
{this.props.submitMessage}
</button>}
spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
<span className="btn btn-default btn-wide btn-spinner">
<AscribeSpinner color="dark-blue" size="md" />
</span>
}>
<div className="ascribe-form-header">

23
js/components/ascribe_forms/property.js
View File

@ -125,6 +125,17 @@ let Property = React.createClass({
}
},
isDescendant(parent, child) {
let node = child.parentNode;
while (node != null) {
if (node === parent) {
return true;
}
node = node.parentNode;
}
return false;
},
handleChange(event) {
this.props.handleChange(event);
if (typeof this.props.onChange === 'function') {
@ -154,6 +165,13 @@ let Property = React.createClass({
},
handleBlur(event) {
let e = event.toElement || event.relatedTarget;
if (this.isDescendant(this.getDOMNode(), e)){
return;
}
if (this.refs.input.getDOMNode() === document.activeElement) {
return;
}
this.setState({
isFocused: false
});
@ -208,7 +226,7 @@ let Property = React.createClass({
style,
onChange: this.handleChange,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
onClick: this.handleClick,
disabled: !this.props.editable,
ref: 'input'
});
@ -242,7 +260,8 @@ let Property = React.createClass({
<div
className={'ascribe-property-wrapper ' + this.getClassName()}
onClick={this.handleFocus}
onFocus={this.handleFocus}
onMouseOut={this.handleBlur}
onMouseOver={this.handleBlur}
style={style}>
<OverlayTrigger
delay={500}

8
js/components/coa_verify_container.js
View File

@ -10,6 +10,8 @@ import Form from './ascribe_forms/form';
import Property from './ascribe_forms/property';
import InputTextAreaToggable from './ascribe_forms/input_textarea_toggable';
import AscribeSpinner from './ascribe_spinner';
import ApiUrls from '../constants/api_urls';
import { getLangText } from '../utils/lang_utils';
@ -64,12 +66,12 @@ let CoaVerifyForm = React.createClass({
buttons={
<button
type="submit"
className="btn ascribe-btn ascribe-btn-login">
className="btn btn-default btn-wide">
{getLangText('Verify your Certificate of Authenticity')}
</button>}
spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
<span className="btn btn-default btn-wide btn-spinner">
<AscribeSpinner color="dark-blue" size="md" />
</span>
}>
<Property

13
js/components/password_reset_container.js
View File

@ -6,6 +6,7 @@ import Router from 'react-router';
import Form from './ascribe_forms/form';
import Property from './ascribe_forms/property';
import ApiUrls from '../constants/api_urls';
import AscribeSpinner from './ascribe_spinner';
import GlobalNotificationModel from '../models/global_notification_model';
import GlobalNotificationActions from '../actions/global_notification_actions';
@ -80,12 +81,12 @@ let PasswordRequestResetForm = React.createClass({
buttons={
<button
type="submit"
className="btn ascribe-btn ascribe-btn-login">
className="btn btn-default btn-wide">
{getLangText('Reset your password')}
</button>}
spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
<span className="btn btn-default btn-wide btn-spinner">
<AscribeSpinner color="dark-blue" size="md" />
</span>
}>
<div className="ascribe-form-header">
@ -138,12 +139,12 @@ let PasswordResetForm = React.createClass({
buttons={
<button
type="submit"
className="btn ascribe-btn ascribe-btn-login">
className="btn btn-default btn-wide">
{getLangText('Reset your password')}
</button>}
spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
<span className="btn btn-default btn-wide btn-spinner">
<AscribeSpinner color="dark-blue" size="md" />
</span>
}>
<div className="ascribe-form-header">

2
js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js
View File

@ -84,7 +84,7 @@ let CylandAdditionalDataForm = React.createClass({
buttons = (
<button
type="submit"
className="btn ascribe-btn ascribe-btn-login"
className="btn btn-default btn-wide"
disabled={!this.state.isUploadReady || disabled}>
{getLangText('Proceed to loan')}
</button>

2
js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artist_details_form.js
View File

@ -66,7 +66,7 @@ let IkonotvArtistDetailsForm = React.createClass({
buttons = (
<button
type="submit"
className="btn ascribe-btn ascribe-btn-login"
className="btn btn-default btn-wide"
disabled={this.props.disabled}>
{getLangText('Proceed to loan')}
</button>

2
js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artwork_details_form.js
View File

@ -65,7 +65,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
buttons = (
<button
type="submit"
className="btn ascribe-btn ascribe-btn-login"
className="btn btn-default btn-wide"
disabled={this.props.disabled}>
{getLangText('Proceed to artist details')}
</button>

124
sass/ascribe_custom_style.scss
View File

@ -16,26 +16,31 @@ $ascribe--nav-bg-color: $ascribe-dark-blue;
$ascribe--button-default-color: $ascribe--bg-color;
$ascribe--button-secondary-fg-color: $ascribe--bg-color;
$ascribe--button-secondary-bg-color: white;
$ascribe--font-weight: 300;
$ascribe--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png';
$ascribe--font: 'canada-type-gibson';
$ascribe--font: 'canada-type-gibson', sans-serif !important;
$ascribe--font-weight: 300 !important;
html,
body {
//font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
font-family: 'canada-type-gibson', sans-serif !important;
font-weight: $ascribe--font-weight !important;
font-family: $ascribe--font;
font-weight: $ascribe--font-weight;
background-color: #fcfcfc !important;
}
h1, h3 {
font-family: 'canada-type-gibson', sans-serif !important;
font-weight: $ascribe--font-weight !important;
font-family: $ascribe--font;
font-weight: $ascribe--font-weight;
}
h1 {
font-size: 30px;
}
hr {
border-top: 1px solid $ascribe-blue-border;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
@ -219,17 +224,15 @@ h1 {
.route--login,
.route--signup {
.ascribe-btn-login {
.btn-wide {
display: block;
margin: 50px auto 0;
width: auto;
padding: 10px 30px;
text-transform: uppercase;
font-weight: bold;
width: 180px;
}
.ascribe-btn-login-spinner {
.btn-spinner {
background-color: $ascribe--button-default-color;
}
@ -384,7 +387,21 @@ fieldset[disabled] .btn-default.active {
}
}
.ascribe-btn-login,
.btn-wide {
font-weight: $ascribe--font-weight;
}
.btn-spinner, .btn-spinner:hover {
background-color: $ascribe--button-default-color;
border-color: $ascribe--button-default-color;
[class^="spinner-wrapper-"] {
color: white;
.spinner-circle {
border-color: white;
}
}
}
.btn-default {
background-color: $ascribe--button-default-color;
border-color: $ascribe--button-default-color;
@ -398,8 +415,8 @@ fieldset[disabled] .btn-default.active {
&.active:hover,
&.active:focus,
&.active.focus {
background-color: darken($ascribe--button-default-color, 20%);
border-color: darken($ascribe--button-default-color, 20%);
background-color: lighten($ascribe--button-default-color, 20%);
border-color: lighten($ascribe--button-default-color, 20%);
}
}
@ -504,11 +521,6 @@ fieldset[disabled] .btn-secondary.active {
font-style: normal;
}
//input::-webkit-input-placeholder { color:transparent }
//input::-moz-placeholder { color:transparent; } /* firefox 19+ */
//input:-ms-input-placeholder { color:transparent; } /* ie */
//input:-moz-placeholder { color:transparent; }
}
.ascribe-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before,
@ -516,6 +528,14 @@ fieldset[disabled] .btn-secondary.active {
color: $ascribe--button-default-color;
}
.ascribe-form-header {
background-color: transparent;
border-color: transparent;
}
.ascribe-form-bordered {
border-color: transparent;
}
// properties!
.is-focused {
@ -523,14 +543,78 @@ fieldset[disabled] .btn-secondary.active {
background-color: rgba($ascribe--button-default-color, .05);
}
.ascribe-property-wrapper:hover {
border-left-color: rgba($ascribe--button-default-color, .5);
//border-left-color: rgba($ascribe--button-default-color, .5);
border-left-color: rgba($ascribe-blue, .5);
}
.ascribe-accordion-list-item .wrapper:hover {
background-color: rgba($ascribe--button-default-color, .05);
}
.ascribe-property {
> div,
> input,
> pre,
> select,
> span:not(.glyphicon),
> textarea {
font-family: $ascribe--font;
font-weight: $ascribe--font-weight;
}
> div {
> div:not(.file-drag-and-drop div) {
font-family: $ascribe--font;
font-weight: $ascribe--font-weight;
}
}
> span:not(.glyphicon) {
color: $ascribe-pink;
//font-weight: normal !important;
}
textarea::-webkit-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
textarea::-moz-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* firefox 19+ */
textarea:-ms-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* ie */
textarea:-moz-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
input::-webkit-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
input::-moz-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* firefox 19+ */
input:-ms-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* ie */
input:-moz-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
}
// panel
.ascribe-panel-wrapper {
border: 1px solid $ascribe-blue-border;
}
// intercom stuff
#intercom-container .intercom-launcher-button {
background-color: $ascribe--button-default-color !important;

14
sass/ascribe_login.scss
View File

@ -1,28 +1,18 @@
$break-small: 764px;
.ascribe-btn-login {
.btn-wide {
background-color: rgba(2, 182, 163, 1);
border: none;
border-radius: 0;
color: white;
font-size: 1.2em;
font-weight: 500;
padding: .5em;
text-align: center;
width: 100%;
//margin-left: 1.2em;
&:hover {
opacity: .3;
border: 0;
color: white;
}
&:active,
&:focus {
background-color: rgba(2, 182, 163, .6);
border: 0;
color: white;
}
@ -31,7 +21,7 @@ $break-small: 764px;
}
}
.ascribe-btn-login-spinner {
.btn-spinner {
background-color: rgba(2, 182, 163, .4);
padding: .4em;

45
sass/main.scss
View File

@ -172,51 +172,6 @@ hr {
border: 1px solid $ascribe-brand-danger;
}
}
.btn-ascribe {
border: 1px solid #444;
border-radius: 0 !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;
background-color: #444;
}
.btn-ascribe-sm {
font-size: 12px;
line-height: 1.3em;
}
.btn-ascribe-green,
.btn-ascribe-green-inv {
border: 1px solid #48dacb;
border-radius: 0 !important;
font-family: sans-serif !important;
line-height: 2em;
margin-left: 0 !important;
}
.btn-ascribe-green,
.btn-ascribe-green-inv:active,
.btn-ascribe-green-inv:hover {
background-color: #fff;
border: 1px solid rgba(2, 182, 163, .5);
color: rgba(2, 182, 163, 0.5);
}
.btn-ascribe-green:active,
.btn-ascribe-green:hover,
.btn-ascribe-green-inv {
background-color: rgba(2, 182, 163, .5);
border: 1px solid rgba(2, 182, 163, .5);
color: white;
}
.ascribe-detail-title {
font-size: 2em;

6
sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss
View File

@ -105,7 +105,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
.client--ikonotv .route--signup {
background-color: $ikono--landing-bg-color;
.ascribe-btn-login {
.btn-wide {
display: block;
margin: 50px auto 0;
width: auto;
@ -115,7 +115,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
width: 180px;
}
.ascribe-btn-login-spinner {
.btn-spinner {
background-color: $ikono--button-color;
}
@ -348,7 +348,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
}
}
.ascribe-btn-login,
.btn-wide,
.btn-default {
background-color: $ikono--button-color;
border-color: $ikono--button-color;