yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-10-29 17:04:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Attributes and relation Modals UI fix

Browse Source
This commit is contained in:
Virginie Ky 2019-08-01 16:45:57 +02:00
parent 8342dc79a7
commit 30985f9553
14 changed files with 129 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/strapi-plugin-content-type-builder/admin/src/components/BodyModal/index.js
View File

@ -1,8 +1,8 @@
/**
*
* BodyModal
*
*/
*
* BodyModal
*
*/
import React from 'react';
import PropTypes from 'prop-types';
@ -14,9 +14,7 @@ function BodyModal({ children, ...rest }) {
return (
<ModalBody className={styles.bodyModal} {...rest}>
<div className="container-fluid">
<div className="row">
{children}
</div>
<div className="row">{children}</div>
</div>
</ModalBody>
);

2
packages/strapi-plugin-content-type-builder/admin/src/components/BodyModal/styles.scss
View File

@ -1,3 +1,3 @@
.bodyModal {
padding: 2.2rem 1.4rem 0 1.4rem;
padding: 2.2rem 1.5rem 0 1.5rem;
}

37
packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/StyledCustomCheckbox.js Normal file
View File

@ -0,0 +1,37 @@
/**
*
* StyledCustomCheckbox
*
*/
import styled from 'styled-components';
const StyledCustomCheckbox = styled.div`
width: 100%;
padding: 0 15px;
margin-top: -6px;
margin-bottom: 16px;
label {
cursor: pointer;
input[type='checkbox'] {
margin-left: 0;
margin-right: 13px;
}
input[type='checkbox'],
span {
display: inline-block;
vertical-align: bottom;
}
span {
font-weight: 500;
font-size: 12px;
line-height: 10px;
}
}
input[type='number'] {
margin-top: -10px;
margin-bottom: -4px;
}
`;
export default StyledCustomCheckbox;

15
packages/strapi-plugin-content-type-builder/admin/src/components/CustomCheckbox/index.js
View File

@ -10,6 +10,8 @@ import { FormattedMessage } from 'react-intl';
import { InputNumberWithErrors as InputNumber } from 'strapi-helper-plugin';
import StyledCustomCheckbox from './StyledCustomCheckbox';
class CustomCheckbox extends React.Component {
// eslint-disable-line react/prefer-stateless-function
state = {
@ -43,22 +45,18 @@ class CustomCheckbox extends React.Component {
// TODO: remove inline after migrating to Buffet
return (
<div className="col-md-12" style={{ marginTop: -4, marginBottom: 9 }}>
<StyledCustomCheckbox>
<FormattedMessage id={label.id}>
{msg => (
<label
htmlFor={name}
style={{ fontWeight: '500', fontSize: 12, cursor: 'pointer' }}
>
<label htmlFor={name}>
<input
style={{ marginLeft: 0, marginRight: 13 }}
checked={isChecked}
name={name}
id={name}
onChange={this.handleChange}
type="checkbox"
/>
{msg}
<span>{msg}</span>
</label>
)}
</FormattedMessage>
@ -69,10 +67,9 @@ class CustomCheckbox extends React.Component {
name={name}
onChange={this.handleInputNumberChange}
value={value || ''}
style={{ marginTop: -15 }}
/>
)}
</div>
</StyledCustomCheckbox>
);
}
}

20
packages/strapi-plugin-content-type-builder/admin/src/components/FormModal/index.js Normal file
View File

@ -0,0 +1,20 @@
/**
*
* FormModal
*
*/
import styled from 'styled-components';
const FormModal = styled.div`
width: 100%;
.form-check {
label {
input[type='checkbox'] + p {
margin-bottom: 0;
}
}
}
`;
export default FormModal;

6
packages/strapi-plugin-content-type-builder/admin/src/components/ListRow/StyledListRow.js
View File

@ -1,6 +1,6 @@
/**
*
* StyedListRow
* StyledListRow
*
*/
@ -8,7 +8,7 @@ import styled from 'styled-components';
import { colors } from 'strapi-helper-plugin';
const StyedListRow = styled.tr`
const StyledListRow = styled.tr`
background-color: transparent;
p {
margin-bottom: 0;
@ -59,4 +59,4 @@ const StyedListRow = styled.tr`
}
`;
export default StyedListRow;
export default StyledListRow;

2
packages/strapi-plugin-content-type-builder/admin/src/components/RelationsWrapper/index.js
View File

@ -13,7 +13,7 @@ const RelationsWrapper = styled.div`
}
hr {
width: 100%;
margin: 1.3rem 1.5rem 2.1rem 1.5rem;
margin: 1.4rem 1.5rem 2.1rem 1.5rem;
height: 1px;
background-color: rgba(14, 22, 34, 0.04);
border: 0;

2
packages/strapi-plugin-content-type-builder/admin/src/components/WrapperModal/styles.scss
View File

@ -4,7 +4,7 @@
.modal {
background-color: white;
max-width: 92.1rem !important;
max-width: 92rem !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 12.7rem !important;

20
packages/strapi-plugin-content-type-builder/admin/src/containers/AttributeForm/StyledAttributeForm.js Normal file
View File

@ -0,0 +1,20 @@
/**
*
* StyledAttributeForm
*
*/
import styled from 'styled-components';
const StyledAttributeForm = styled.div`
width: 100%;
.form-check {
label {
input[type='checkbox'] + p {
margin-bottom: 0;
}
}
}
`;
export default StyledAttributeForm;

7
packages/strapi-plugin-content-type-builder/admin/src/containers/AttributeForm/index.js
View File

@ -19,6 +19,7 @@ import ButtonModalSecondary from '../../components/ButtonModalSecondary';
import ButtonModalSuccess from '../../components/ButtonModalSuccess';
import CustomCheckbox from '../../components/CustomCheckbox';
import FooterModal from '../../components/FooterModal';
import FormModal from '../../components/FormModal';
import HeaderModal from '../../components/HeaderModal';
import HeaderModalTitle from '../../components/HeaderModalTitle';
import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
@ -286,7 +287,11 @@ class AttributeForm extends React.Component {
</section>
</HeaderModal>
<form onSubmit={this.handleSubmitAndContinue}>
<BodyModal>{showForm && currentForm.map(this.renderInput)}</BodyModal>
<FormModal>
<BodyModal>
{showForm && currentForm.map(this.renderInput)}
</BodyModal>
</FormModal>
<FooterModal>
<section>
<ButtonModalPrimary

2
packages/strapi-plugin-content-type-builder/admin/src/containers/AttributesPickerModal/index.js
View File

@ -143,7 +143,7 @@ class AttributesPickerModal extends React.Component {
renderAttribute = (attribute, index) => {
const { featureType } = this.props;
const { isDisplayed, nodeToFocus } = this.state;
console.log(this.props);
if (attribute.type === featureType) {
return null;
}

5
packages/strapi-plugin-content-type-builder/admin/src/containers/RelationForm/index.js
View File

@ -18,6 +18,7 @@ import ButtonModalPrimary from '../../components/ButtonModalPrimary';
import ButtonModalSecondary from '../../components/ButtonModalSecondary';
import ButtonModalSuccess from '../../components/ButtonModalSuccess';
import FooterModal from '../../components/FooterModal';
import FormModal from '../../components/FormModal';
import HeaderModal from '../../components/HeaderModal';
import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
import HeaderModalTitle from '../../components/HeaderModalTitle';
@ -312,7 +313,9 @@ class RelationForm extends React.Component {
</section>
</HeaderModal>
<form onSubmit={this.handleSubmitAndContinue}>
<BodyModal>{showForm && content}</BodyModal>
<FormModal>
<BodyModal>{showForm && content}</BodyModal>
</FormModal>
<FooterModal>
<section>
<ButtonModalPrimary

32
packages/strapi-plugin-content-type-builder/admin/src/containers/RelationForm/styles.scss
View File

@ -1,7 +1,7 @@
.relationWrapper {
width: 100%;
display: flex;
padding: 2.7rem 15px;
padding: 2.7rem 15px 3.3rem 15px;
.relationNatureWrapper {
position: relative;
display: flex;
@ -12,7 +12,7 @@
z-index: 2;
}
&:before {
content: "";
content: '';
position: absolute;
top: 20px;
left: 0;
@ -35,8 +35,8 @@
.relationBoxHeader {
height: 3.6rem;
width: 100%;
padding-top: .1rem;
background-color: rgba(16,22,34,.04);
padding-top: 0.1rem;
background-color: rgba(16, 22, 34, 0.04);
line-height: 3.6rem;
text-align: center;
font-size: 1.4rem;
@ -73,8 +73,11 @@
font-weight: 700;
text-transform: capitalize;
color: black;
&:focus, &:active, &:hover, &:visited {
background-color: transparent!important;
&:focus,
&:active,
&:hover,
&:visited {
background-color: transparent !important;
box-shadow: none;
color: black;
}
@ -107,7 +110,6 @@
}
}
.dropdownItem {
height: 3.6rem;
border-bottom: 1px solid #f6f6f6;
@ -119,7 +121,8 @@
-webkit-font-smoothing: antialiased;
cursor: pointer;
&:focus, &:active {
&:focus,
&:active {
outline: 0;
background-color: rgb(255, 255, 255) !important;
color: rgba(50, 55, 64, 0.75);
@ -138,7 +141,8 @@
}
}
.relationNaturePicker { /* stylelint-disable */
.relationNaturePicker {
/* stylelint-disable */
display: flex;
width: 29.5rem;
position: relative;
@ -147,7 +151,7 @@
padding-right: 25px;
justify-content: space-around;
img:hover{
img:hover {
cursor: pointer;
}
}
@ -158,7 +162,7 @@
top: 9.2rem;
height: 2px;
width: 100%;
background-color: #1C5DE7;
background-color: #1c5de7;
z-index: 0;
}
@ -174,15 +178,15 @@
text-align: center;
margin: 0;
line-height: 22px;
> span:nth-child(1), span:nth-child(3) {
> span:nth-child(1),
span:nth-child(3) {
text-transform: capitalize;
}
> span:nth-child(2) {
color: #1C5DE7;
color: #1c5de7;
}
}
.divider {
width: 100%;
margin-top: 1.3rem;

9
packages/strapi-plugin-content-type-builder/admin/src/containers/RelationFormGroup/index.js
View File

@ -18,6 +18,7 @@ import ButtonModalPrimary from '../../components/ButtonModalPrimary';
import ButtonModalSecondary from '../../components/ButtonModalSecondary';
import ButtonModalSuccess from '../../components/ButtonModalSuccess';
import FooterModal from '../../components/FooterModal';
import FormModal from '../../components/FormModal';
import HeaderModal from '../../components/HeaderModal';
import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
import HeaderModalTitle from '../../components/HeaderModalTitle';
@ -320,9 +321,11 @@ class RelationFormGroup extends React.Component {
</section>
</HeaderModal>
<form onSubmit={this.handleSubmitAndContinue}>
<BodyModal>
<RelationsWrapper>{showForm && content}</RelationsWrapper>
</BodyModal>
<FormModal>
<BodyModal>
<RelationsWrapper>{showForm && content}</RelationsWrapper>
</BodyModal>
</FormModal>
<FooterModal>
<section>
<ButtonModalPrimary