mirror of
				https://github.com/strapi/strapi.git
				synced 2025-10-31 01:47:13 +00:00 
			
		
		
		
	Apply desgin feedback
This commit is contained in:
		
							parent
							
								
									8e672abc78
								
							
						
					
					
						commit
						c1464f73be
					
				| @ -49,6 +49,7 @@ | |||||||
| 
 | 
 | ||||||
| .modalPosition { | .modalPosition { | ||||||
|   max-width: 37.5rem !important; |   max-width: 37.5rem !important; | ||||||
|  |   margin: 16rem auto !important; | ||||||
|   > div { |   > div { | ||||||
|     width: 37.5rem; |     width: 37.5rem; | ||||||
|     padding: 0 !important; |     padding: 0 !important; | ||||||
|  | |||||||
| @ -1,8 +1,8 @@ | |||||||
| /** | /** | ||||||
| * |  * | ||||||
| * CustomCheckbox |  * CustomCheckbox | ||||||
| * |  * | ||||||
| */ |  */ | ||||||
| 
 | 
 | ||||||
| import React from 'react'; | import React from 'react'; | ||||||
| import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||||
| @ -12,7 +12,8 @@ import InputNumber from 'components/InputNumberWithErrors'; | |||||||
| 
 | 
 | ||||||
| // import styles from './styles.scss';
 | // import styles from './styles.scss';
 | ||||||
| 
 | 
 | ||||||
| class CustomCheckbox extends React.Component { // eslint-disable-line react/prefer-stateless-function
 | class CustomCheckbox extends React.Component { | ||||||
|  |   // eslint-disable-line react/prefer-stateless-function
 | ||||||
|   state = { isChecked: this.props.value !== null && this.props.value !== undefined }; |   state = { isChecked: this.props.value !== null && this.props.value !== undefined }; | ||||||
| 
 | 
 | ||||||
|   handleChange = ({ target: { checked } }) => { |   handleChange = ({ target: { checked } }) => { | ||||||
| @ -23,7 +24,7 @@ class CustomCheckbox extends React.Component { // eslint-disable-line react/pref | |||||||
|     const target = { name, value }; |     const target = { name, value }; | ||||||
| 
 | 
 | ||||||
|     onChange({ target }); |     onChange({ target }); | ||||||
|   } |   }; | ||||||
| 
 | 
 | ||||||
|   handleInputNumberChange = ({ target: { value } }) => { |   handleInputNumberChange = ({ target: { value } }) => { | ||||||
|     const { name, onChange } = this.props; |     const { name, onChange } = this.props; | ||||||
| @ -34,17 +35,17 @@ class CustomCheckbox extends React.Component { // eslint-disable-line react/pref | |||||||
|     }; |     }; | ||||||
| 
 | 
 | ||||||
|     onChange({ target }); |     onChange({ target }); | ||||||
|   } |   }; | ||||||
| 
 | 
 | ||||||
|   render() { |   render() { | ||||||
|     const { isChecked } = this.state; |     const { isChecked } = this.state; | ||||||
|     const { didCheckErrors, errors, label, name, value} = this.props; |     const { didCheckErrors, errors, label, name, value } = this.props; | ||||||
| 
 | 
 | ||||||
|     return ( |     return ( | ||||||
|       <div className="col-md-12" style={{ marginTop: -4, marginBottom: 9 }}> |       <div className="col-md-12" style={{ marginTop: -4, marginBottom: 9 }}> | ||||||
|         <FormattedMessage id={label.id}> |         <FormattedMessage id={label.id}> | ||||||
|           {msg => ( |           {msg => ( | ||||||
|             <label htmlFor={name} style={{ fontWeight: '500', cursor: 'pointer' }}> |             <label htmlFor={name} style={{ fontWeight: '500', fontSize: 12, cursor: 'pointer' }}> | ||||||
|               <input |               <input | ||||||
|                 style={{ marginLeft: 0, marginRight: 13 }} |                 style={{ marginLeft: 0, marginRight: 13 }} | ||||||
|                 checked={isChecked} |                 checked={isChecked} | ||||||
| @ -90,10 +91,7 @@ CustomCheckbox.propTypes = { | |||||||
|   }), |   }), | ||||||
|   name: PropTypes.string, |   name: PropTypes.string, | ||||||
|   onChange: PropTypes.func.isRequired, |   onChange: PropTypes.func.isRequired, | ||||||
|   value: PropTypes.oneOfType([ |   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||||||
|     PropTypes.number, |  | ||||||
|     PropTypes.string, |  | ||||||
|   ]), |  | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
| export default CustomCheckbox; | export default CustomCheckbox; | ||||||
|  | |||||||
| @ -5,6 +5,7 @@ | |||||||
|   padding-top: .6rem; |   padding-top: .6rem; | ||||||
|   color: #9EA7B8; |   color: #9EA7B8; | ||||||
|   font-size: 1.2rem; |   font-size: 1.2rem; | ||||||
|  |   font-weight: 500; | ||||||
|   letter-spacing: 0.7px; |   letter-spacing: 0.7px; | ||||||
|   text-transform: uppercase; |   text-transform: uppercase; | ||||||
|   >div:last-child { |   >div:last-child { | ||||||
|  | |||||||
| @ -16,7 +16,11 @@ import styles from './styles.scss'; | |||||||
| /* istanbul ignore next */ | /* istanbul ignore next */ | ||||||
| function HeaderNavLink({ custom, id, isActive, onClick }) { | function HeaderNavLink({ custom, id, isActive, onClick }) { | ||||||
|   return ( |   return ( | ||||||
|     <div className={cn(isActive && styles.headerNavLink)} onClick={() => onClick(id)}> |     <div | ||||||
|  |       className={cn(isActive && styles.headerNavLink)} | ||||||
|  |       style={{ cursor: 'pointer' }} | ||||||
|  |       onClick={() => onClick(id)} | ||||||
|  |     > | ||||||
|       <FormattedMessage id={`${pluginId}.popUpForm.navContainer.${custom || id}`} /> |       <FormattedMessage id={`${pluginId}.popUpForm.navContainer.${custom || id}`} /> | ||||||
|     </div> |     </div> | ||||||
|   ); |   ); | ||||||
|  | |||||||
| @ -17,6 +17,7 @@ import pluginId from '../../pluginId'; | |||||||
| import styles from '../TableList/styles.scss'; | import styles from '../TableList/styles.scss'; | ||||||
| /* eslint-disable jsx-a11y/no-static-element-interactions */ | /* eslint-disable jsx-a11y/no-static-element-interactions */ | ||||||
| /* eslint-disable react/jsx-curly-brace-presence */ | /* eslint-disable react/jsx-curly-brace-presence */ | ||||||
|  | /* eslint-disable indent */ | ||||||
| 
 | 
 | ||||||
| class TableListRow extends React.Component { | class TableListRow extends React.Component { | ||||||
|   // eslint-disable-line react/prefer-stateless-function
 |   // eslint-disable-line react/prefer-stateless-function
 | ||||||
| @ -46,6 +47,18 @@ class TableListRow extends React.Component { | |||||||
|     this.setState({ showWarning: false }); |     this.setState({ showWarning: false }); | ||||||
|   }; |   }; | ||||||
| 
 | 
 | ||||||
|  |   handleEdit = () => { | ||||||
|  |     const { | ||||||
|  |       push, | ||||||
|  |       rowItem: { name, source }, | ||||||
|  |     } = this.props; | ||||||
|  | 
 | ||||||
|  |     push({ | ||||||
|  |       pathname: `/plugins/content-type-builder/models/${name}${source ? `&source=${source}` : ''}`, | ||||||
|  |       search: `modalType=model&settingType=base&actionType=edit&modelName=${name}`, | ||||||
|  |     }); | ||||||
|  |   }; | ||||||
|  | 
 | ||||||
|   handleGoTo = () => { |   handleGoTo = () => { | ||||||
|     const { push } = this.props; |     const { push } = this.props; | ||||||
| 
 | 
 | ||||||
| @ -88,7 +101,10 @@ class TableListRow extends React.Component { | |||||||
|     const spanStyle = this.props.rowItem.isTemporary ? '60%' : '100%'; |     const spanStyle = this.props.rowItem.isTemporary ? '60%' : '100%'; | ||||||
|     const icons = this.props.rowItem.source |     const icons = this.props.rowItem.source | ||||||
|       ? [] |       ? [] | ||||||
|       : [{ icoType: 'trash', onClick: this.handleShowModalWarning, id: `delete${name}` }]; |       : [ | ||||||
|  |           { icoType: 'pencil', onClick: this.handleEdit }, | ||||||
|  |           { icoType: 'trash', onClick: this.handleShowModalWarning, id: `delete${name}` }, | ||||||
|  |         ]; | ||||||
| 
 | 
 | ||||||
|     return ( |     return ( | ||||||
|       <ListRow onClick={this.handleGoTo} style={{ height: '5.4rem' }}> |       <ListRow onClick={this.handleGoTo} style={{ height: '5.4rem' }}> | ||||||
|  | |||||||
| @ -1,4 +1,16 @@ | |||||||
| [ | [ | ||||||
|  |   { | ||||||
|  |     "type": "string", | ||||||
|  |     "description": "content-type-builder.popUpForm.attributes.string.description" | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     "type": "text", | ||||||
|  |     "description": "content-type-builder.popUpForm.attributes.text.description" | ||||||
|  |   }, | ||||||
|  |   { | ||||||
|  |     "type": "number", | ||||||
|  |     "description": "content-type-builder.popUpForm.attributes.number.description" | ||||||
|  |   }, | ||||||
|   { |   { | ||||||
|     "type": "boolean", |     "type": "boolean", | ||||||
|     "description": "content-type-builder.popUpForm.attributes.boolean.description" |     "description": "content-type-builder.popUpForm.attributes.boolean.description" | ||||||
| @ -12,8 +24,8 @@ | |||||||
|     "description": "content-type-builder.popUpForm.attributes.email.description" |     "description": "content-type-builder.popUpForm.attributes.email.description" | ||||||
|   }, |   }, | ||||||
|   { |   { | ||||||
|     "type": "enumeration", |     "type": "password", | ||||||
|     "description": "content-type-builder.popUpForm.attributes.enumeration.description" |     "description": "content-type-builder.popUpForm.attributes.password.description" | ||||||
|   }, |   }, | ||||||
|   { |   { | ||||||
|     "type": "json", |     "type": "json", | ||||||
| @ -23,24 +35,12 @@ | |||||||
|     "type": "media", |     "type": "media", | ||||||
|     "description": "content-type-builder.popUpForm.attributes.media.description" |     "description": "content-type-builder.popUpForm.attributes.media.description" | ||||||
|   }, |   }, | ||||||
|   { |  | ||||||
|     "type": "number", |  | ||||||
|     "description": "content-type-builder.popUpForm.attributes.number.description" |  | ||||||
|   }, |  | ||||||
|   { |  | ||||||
|     "type": "password", |  | ||||||
|     "description": "content-type-builder.popUpForm.attributes.password.description" |  | ||||||
|   }, |  | ||||||
|   { |   { | ||||||
|     "type": "relation", |     "type": "relation", | ||||||
|     "description": "content-type-builder.popUpForm.attributes.relation.description" |     "description": "content-type-builder.popUpForm.attributes.relation.description" | ||||||
|   }, |   }, | ||||||
|   { |   { | ||||||
|     "type": "string", |     "type": "enumeration", | ||||||
|     "description": "content-type-builder.popUpForm.attributes.string.description" |     "description": "content-type-builder.popUpForm.attributes.enumeration.description" | ||||||
|   }, |  | ||||||
|   { |  | ||||||
|     "type": "text", |  | ||||||
|     "description": "content-type-builder.popUpForm.attributes.text.description" |  | ||||||
|   } |   } | ||||||
| ] | ] | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user
	 soupette
						soupette