yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-01 10:23:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add required input class

Browse Source
This commit is contained in:
cyril lopez 2017-08-09 09:52:00 +02:00
parent 1cbe94941d
commit b3eeebb556
10 changed files with 57 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/strapi-plugin-settings-manager/admin/src/components/InputNumber/index.js
View File

@ -140,8 +140,10 @@ class InputNumber extends React.Component { // eslint-disable-line react/prefer-
placeholder={placeholder}
/>;
const requiredClass = this.props.validations.required && this.props.addRequiredInputDesign ? this.props.styles.requiredClass : '';
return (
<div className={`${this.props.styles.inputNumber} ${bootStrapClass} ${bootStrapClassDanger}`}>
<div className={`${this.props.styles.inputNumber} ${requiredClass} ${bootStrapClass} ${bootStrapClassDanger}`}>
<label htmlFor={this.props.name}><FormattedMessage {...{id: this.props.name}} /></label>
{input}
<small>{this.props.inputDescription}</small>
@ -152,6 +154,7 @@ class InputNumber extends React.Component { // eslint-disable-line react/prefer-
}
InputNumber.propTypes = {
addRequiredInputDesign: React.PropTypes.bool,
customBootstrapClass: React.PropTypes.string,
deactivateErrorHighlight: React.PropTypes.bool,
errors: React.PropTypes.oneOfType([

5
packages/strapi-plugin-settings-manager/admin/src/components/InputSelect/index.js
View File

@ -20,9 +20,10 @@ class InputSelect extends React.Component { // eslint-disable-line react/prefer-
render() {
const bootStrapClass = this.props.customBootstrapClass ? this.props.customBootstrapClass : 'col-md-6';
const requiredClass = this.props.validations.required && this.props.addRequiredInputDesign ? styles.requiredClass : '';
return (
<div className={`${styles.inputSelect} ${bootStrapClass}`}>
<div className={`${styles.inputSelect} ${requiredClass} ${bootStrapClass}`}>
<label htmlFor={this.props.name}>
<FormattedMessage {...{id: this.props.name}} />
</label>
@ -49,6 +50,7 @@ class InputSelect extends React.Component { // eslint-disable-line react/prefer-
}
InputSelect.propTypes = {
addRequiredInputDesign: React.PropTypes.bool,
customBootstrapClass: React.PropTypes.string,
handleChange: React.PropTypes.func.isRequired,
name: React.PropTypes.string.isRequired,
@ -57,6 +59,7 @@ InputSelect.propTypes = {
React.PropTypes.object, // TODO remove
]),
target: React.PropTypes.string,
validations: React.PropTypes.object,
value: React.PropTypes.string,
};

10
packages/strapi-plugin-settings-manager/admin/src/components/InputSelect/styles.scss
View File

@ -14,3 +14,13 @@
border-radius: 0rem!important;
}
}
.requiredClass {
> label:after {
color: red;
font-family: Lato;
font-weight: bold;
margin-left: 5px;
content: "*";
}
}

6
packages/strapi-plugin-settings-manager/admin/src/components/InputText/index.js
View File

@ -158,8 +158,11 @@ class InputText extends React.Component { // eslint-disable-line react/prefer-st
placeholder={placeholder}
/>;
const requiredClass = this.props.validations.required && this.props.addRequiredInputDesign ? this.props.styles.requiredClass : '';
return (
<div className={`${this.props.styles.inputText} ${bootStrapClass} ${bootStrapClassDanger}`}>
<div className={`${this.props.styles.inputText} ${bootStrapClass} ${requiredClass} ${bootStrapClassDanger}`}>
{label}
{input}
<small>{this.props.inputDescription}</small>
@ -170,6 +173,7 @@ class InputText extends React.Component { // eslint-disable-line react/prefer-st
}
InputText.propTypes = {
addRequiredInputDesign: React.PropTypes.bool,
customBootstrapClass: React.PropTypes.string,
deactivateErrorHighlight: React.PropTypes.bool,
errors: React.PropTypes.array,

13
packages/strapi-plugin-settings-manager/admin/src/components/List/styles.scss
View File

@ -93,12 +93,20 @@
color: white;
width: 15rem;
margin-left: 1.9rem!important;
&:hover {
color: white;
}
}
.secondary {
font-family: Lato;
color: #F64D0A;
border: 0.1rem solid #F64D0A;
&:hover {
color: #F64D0A;
background-color: white;
border: 0.1rem solid #F64D0A;
}
}
.bordered {
@ -152,6 +160,11 @@
> input {
margin-top: 1.3rem!important;
}
> button {
&:focus {
outline: 0;
}
}
}
.padded {

4
packages/strapi-plugin-settings-manager/admin/src/components/PopUpForm/styles.scss
View File

@ -11,7 +11,7 @@
bottom: -5.4rem;
left: 3rem;
display: flex;
color: #27B710;
}
.rounded {
@ -22,7 +22,7 @@
border-radius: 50%;
padding-left: .1rem;
padding-bottom: .1rem;
border: 1px solid black;
border: 1px solid #27B710;
font-size: .4rem;
vertical-align: middle;
display: flex;

2
packages/strapi-plugin-settings-manager/admin/src/components/WithFormSection/index.js
View File

@ -19,6 +19,7 @@ import styles from './styles.scss';
const WithFormSection = (InnerComponent) => class extends React.Component {
static propTypes = {
addRequiredInputDesign: React.PropTypes.bool,
cancelAction: React.PropTypes.bool,
handleChange: React.PropTypes.func.isRequired,
section: React.PropTypes.oneOfType([
@ -113,6 +114,7 @@ const WithFormSection = (InnerComponent) => class extends React.Component {
selectOptions={selectOptions}
validations={props.validations}
value={inputValue}
addRequiredInputDesign={this.props.addRequiredInputDesign}
/>
);
}

10
packages/strapi-plugin-settings-manager/admin/src/components/WithInput/styles.scss
View File

@ -52,3 +52,13 @@
.insideInput:hover {
color: black!important;
}
.requiredClass {
> label:after {
color: red;
font-family: Lato;
font-weight: bold;
margin-left: 5px;
content: "*";
}
}

4
packages/strapi-plugin-settings-manager/admin/src/containers/Home/index.js
View File

@ -304,6 +304,7 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
clearable={false}
/>
<div className={styles.popUpSpacer} />
</div>
)
})
@ -332,7 +333,7 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
const specificComponent = findKey(this.customComponents, (value) => includes(value, this.props.params.slug)) || 'defaultComponent';
// if custom view display render specificComponent
const Component = this.components[specificComponent];
const addRequiredInputDesign = this.props.params.slug === 'databases';
const listTitle = this.props.params.slug === 'languages' || 'databases' ? this.renderListTitle() : '';
const listButtonLabel = this.props.params.slug === 'languages' || 'databases' ? this.renderListButtonLabel() : '';
@ -390,6 +391,7 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
renderListComponent={renderListComponent}
cancelAction={this.props.home.cancelAction}
actionBeforeOpenPopUp={actionBeforeOpenPopUp}
addRequiredInputDesign={addRequiredInputDesign}
/>
);
}

4
packages/strapi-plugin-settings-manager/admin/src/containers/Home/styles.scss
View File

@ -34,3 +34,7 @@
.modalLanguageLabel {
padding-bottom: 10px;
}
.popUpSpacer {
height: 1rem;
}