ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity

Cherrypicking unfinished form changes in preparation of move to react-components

Browse Source
This commit is contained in:
Brett Sun 2016-03-21 16:30:54 +01:00
parent f162117c92
commit 8dec470e46
8 changed files with 50 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/components/ascribe_forms/input_checkbox.js
View File

@ -64,7 +64,7 @@ let InputCheckbox = React.createClass({
}
},
onChange() {
onChange(event) {
// if this.props.disabled is true, we're just going to ignore every click,
// as the value should then not be changable by the user
if(this.props.disabled) {
@ -102,7 +102,7 @@ let InputCheckbox = React.createClass({
}
return (
<span
<label
style={this.props.style}
onClick={this.onChange}
name={this.props.name}>
@ -118,7 +118,7 @@ let InputCheckbox = React.createClass({
style={style}>
{this.props.children}
</span>
</span>
</label>
);
}
});

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

@ -13,6 +13,13 @@ import { getLangText } from '../../utils/lang';
import { isEmail } from '../../utils/regex';
//FIXME!!!!!!
// Create an HOC that wraps around a form that injects it with the contract agreements.
// Then, instead of having state here, we should be able to just get the contract agreements from the form
// and the form can also use the `hidden` prop of the parent Property to hide this component when there
// are no contract agreements.
const InputContractAgreementCheckbox = React.createClass({
propTypes: {
createPublicContractAgreement: React.PropTypes.bool,

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

@ -286,7 +286,7 @@ const Property = React.createClass({
getLabelAndErrors() {
if(this.props.label || this.state.errors) {
return (
<p>
<p className="clearfix">
<span className="pull-left">{this.props.label}</span>
<span className="pull-right">{this.state.errors}</span>
</p>

93
sass/ascribe_custom_style.scss
View File

@ -288,103 +288,10 @@ fieldset[disabled] .btn-secondary.active {
}
.ascribe-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before,
.ascribe-checkbox-wrapper [type=checkbox]:checked + .checkbox:before {
color: $ascribe--button-default-color;
}
.ascribe-form-header {
background-color: transparent;
border-color: transparent;
}
// properties!
.is-focused {
border-left-color: $ascribe--button-default-color !important;
background-color: rgba($ascribe--button-default-color, .05);
}
.is-error {
> div {
> span {
color: rgba($ascribe-red-error, 1) !important;
}
}
&:hover {
border-left: 3px solid rgba($ascribe-red-error, .5)!important;
}
}
.ascribe-property-wrapper:hover {
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),
> p,
> p > span,
> textarea {
color: $ascribe-dark-blue;
font-family: $ascribe--font;
font-weight: $ascribe--font-weight-light;
}
> div {
> div:not(.file-drag-and-drop div) {
font-family: $ascribe--font;
font-weight: $ascribe--font-weight-light;
}
}
> span:not(.glyphicon) {
color: $ascribe--button-default-color;
}
textarea::-webkit-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* firefox 19+ */
textarea::-moz-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* ie */
textarea:-ms-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;
}
input::-webkit-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* firefox 19+ */
input::-moz-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* ie */
input:-ms-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;
}
}
// panel
.ascribe-panel-wrapper {
border: 1px solid $ascribe-blue-border;

23
sass/ascribe_form.scss
View File

@ -1,26 +1,3 @@
.ascribe-form {
hr {
background-color: rgba(0, 0, 0, .05);
border: 0;
color: rgba(0, 0, 0, .05);
height: 1px;
margin-top: 0;
}
}
.ascribe-form-header {
background-color: white;
margin-bottom: 0;
padding-bottom: 0;
> h3 {
color: #616161;
margin-bottom: 0;
margin-top: 0;
padding: .75em 0 .75em 1em;
}
}
.ascribe-form-wrapper {
margin: 0 auto;
max-width: 600px;

148
sass/ascribe_property.scss
View File

@ -11,7 +11,7 @@ $ascribe-red-error: rgb(169, 68, 66);
}
&:hover {
border-left: 3px solid rgba(2, 182, 163, .4);
border-left: 3px solid rgba($ascribe-blue, .5);
}
}
@ -20,14 +20,15 @@ $ascribe-red-error: rgb(169, 68, 66);
}
.is-focused {
background-color: rgba(2, 182, 163, .05);
border-left: 3px solid rgba(2, 182, 163, 1) !important;
background-color: rgba($ascribe--button-default-color, .05);
border-left: 3px solid $ascribe--button-default-color;
}
.is-error {
background-color: rgba($ascribe-red-error, .03);
border-left: 3px solid rgba($ascribe-red-error, 1);
//FIXME
> div {
> p {
> span {
@ -37,6 +38,10 @@ $ascribe-red-error: rgb(169, 68, 66);
}
}
> span {
color: rgba($ascribe-red-error, 1) !important;
}
> input,
> textarea {
color: #666;
@ -44,7 +49,7 @@ $ascribe-red-error: rgb(169, 68, 66);
}
&:hover {
border-left: 3px solid rgba($ascribe-red-error, 1);
border-left: 3px solid rgba($ascribe-red-error, .5)!important
}
}
@ -74,45 +79,36 @@ $ascribe-red-error: rgb(169, 68, 66);
.ascribe-property {
border-top: 1px solid rgba(0, 0, 0, .05);
color: $ascribe-dark-blue;
cursor: pointer;
display: inline-block;
padding: 1em 1.5em;
text-align: left;
width: 100%;
> div,
> input,
> pre,
> select,
> span:not(.glyphicon),
> textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
> .file-drag-and-drop {
margin-top: .5em;
}
> p {
height: 20px;
margin-bottom: 0;
> span {
font-size: .9em;
font-weight: normal;
}
}
//FIXME
> div {
> div:not(.file-drag-and-drop div) {
color: rgba(0, 0, 0, .5);
cursor: default;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.1em;
font-weight: normal;
font-weight: $ascribe--font-weight-light;
padding-left: 0;
}
}
> span:not(.glyphicon) {
color: $ascribe--button-default-color;
}
> .progressbar-container, .progressbar-progress {
margin-top: 0 !important;
}
@ -121,43 +117,14 @@ $ascribe-red-error: rgb(169, 68, 66);
margin-top: 1em;
margin-bottom: 1em;
}
//END OF FIXME SECTION
> input,
> pre,
> textarea,
> select,
.datepicker__input {
background-color: rgba(0, 0, 0, 0);
border: 0;
box-shadow: none;
color: rgba(0, 0, 0, .8);
font-size: 1.1em;
font-weight: 400;
margin-top: .5em;
padding-left: 0;
width: 100%;
.form-control {
color: $ascribe-dark-blue;
&:focus {
border: 0;
box-shadow: none;
outline: 0;
}
&::selection {
background-color: rgba(0, 0, 0, 1);
color: white;
}
}
.datepicker__input {
padding: 0;
}
> textarea {
color: #666;
margin-top: 1em;
padding: 0;
}
}
@ -175,62 +142,25 @@ $ascribe-red-error: rgb(169, 68, 66);
width: 100%;
}
.ascribe-checkbox-wrapper{
.checkbox > span {
color: black;
}
}
.ascribe-property-collapsible-toggle, .ascribe-checkbox-wrapper {
cursor: pointer;
// Taken from: http://www.htmllion.com/css3-checkbox.html
.checkbox {
display: inline-block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: .9em;
font-weight: normal;
vertical-align: middle;
> span {
left: 5px;
position: relative;
top: 1px;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
}
[type=checkbox] {
display: none;
}
.checkbox:before {
background-color: white;
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 1px;
color: #f3f3f3;
content: "";
display: inline-block;
height: 17px;
text-align: center;
vertical-align: middle;
width: 17px;
}
[type=checkbox]:checked + .checkbox:before {
color: rgba(2, 182, 163, 1);
content: "\2713";
font-size: 20px;
line-height: .8;
}
}
.ascribe-checkbox-badge {
> span > span {
margin-top: 0;
.ascribe-property {
input::-webkit-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* firefox 19+ */
input::-moz-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* firefox 18- */
input:-moz-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
/* ie */
input:-ms-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5);
font-style: normal;
}
}

23
sass/ascribe_textarea.scss
View File

@ -1,23 +0,0 @@
.ascribe-textarea {
border: 0;
box-shadow: none;
margin-bottom: 1em;
}
.ascribe-textarea-editable:hover {
border: 0;
}
.ascribe-pre {
background-color: white;
border: 0;
font-family: inherit;
margin: 0;
padding: 0;
text-align: left;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
white-space: -pre-wrap;
white-space: pre-wrap;
word-break: break-word;
}

12
sass/main.scss
View File

@ -193,18 +193,6 @@ hr {
font-style: italic;
}
.textarea-ascribe-message {
height: 13em !important;
}
.input-checkbox-ascribe {
line-height: 1.6;
margin-left: 1.6em;
margin-right: auto;
text-align: left;
width: 90%;
}
// columns of same height styles
// http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
.row-full-height {