hiro/Vulcan
1
0
Fork 0
mirror of https://github.com/vale981/Vulcan synced 2025-03-06 10:01:40 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Better nested form icons

Browse source
This commit is contained in:
SachaG 2018-03-28 16:47:10 +09:00
parent 7f67f21eb9
commit f07d07d2ff
3 changed files with 78 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
packages/vulcan-forms/lib/components/FormGroup.jsx
View file

@ -4,50 +4,6 @@ import { Components } from 'meteor/vulcan:core';
import classNames from 'classnames';
import { registerComponent } from 'meteor/vulcan:core';
const IconRight = ({ width = 24, height = 24 }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
viewBox="0 0 24 24"
>
<polyline
fill="none"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
points="5.5,23.5 18.5,12 5.5,0.5"
id="Outline_Icons"
/>
<rect fill="none" width="24" height="24" id="Frames-24px" />
</svg>
);
registerComponent('IconRight', IconRight);
const IconDown = ({ width = 24, height = 24 }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
viewBox="0 0 24 24"
>
<polyline
fill="none"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
points="0.501,5.5 12.001,18.5 23.501,5.5"
id="Outline_Icons"
/>
<rect fill="none" width="24" height="24" id="Frames-24px" />
</svg>
);
registerComponent('IconDown', IconDown);
class FormGroup extends PureComponent {
constructor(props) {
super(props);
@ -112,3 +68,47 @@ FormGroup.propTypes = {
};
registerComponent('FormGroup', FormGroup);
const IconRight = ({ width = 24, height = 24 }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
viewBox="0 0 24 24"
>
<polyline
fill="none"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
points="5.5,23.5 18.5,12 5.5,0.5"
id="Outline_Icons"
/>
<rect fill="none" width="24" height="24" id="Frames-24px" />
</svg>
);
registerComponent('IconRight', IconRight);
const IconDown = ({ width = 24, height = 24 }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
viewBox="0 0 24 24"
>
<polyline
fill="none"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
points="0.501,5.5 12.001,18.5 23.501,5.5"
id="Outline_Icons"
/>
<rect fill="none" width="24" height="24" id="Frames-24px" />
</svg>
);
registerComponent('IconDown', IconDown);

29
packages/vulcan-forms/lib/components/FormNested.jsx
View file

@ -3,10 +3,7 @@ import PropTypes from 'prop-types';
import { Components, registerComponent } from 'meteor/vulcan:core';
import Button from 'react-bootstrap/lib/Button';
const FormNestedItem = (
{ nestedFields, name, path, removeItem, itemIndex, ...props },
{ errors }
) => {
const FormNestedItem = ({ nestedFields, name, path, removeItem, itemIndex, ...props }, { errors }) => {
return (
<div className="form-nested-item">
<div className="form-nested-item-inner">
@ -24,12 +21,14 @@ const FormNestedItem = (
</div>
<div className="form-nested-item-remove">
<Button
className="form-nested-button"
bsStyle="danger"
bsSize="small"
onClick={() => {
removeItem(name);
}}
>
✖️
<Components.IconRemove height={12} width={12} />
</Button>
</div>
<div className="form-nested-item-deleted-overlay" />
@ -85,8 +84,8 @@ class FormNested extends PureComponent {
/>
)
)}
<Button bsStyle="success" onClick={this.addItem}>
➕
<Button bsSize="small" bsStyle="success" onClick={this.addItem} className="form-nested-button">
<Components.IconAdd height={12} width={12} />
</Button>
</div>
</div>
@ -99,3 +98,19 @@ FormNested.contextTypes = {
};
registerComponent('FormNested', FormNested);
const IconAdd = ({ width = 24, height = 24 }) => (
<svg width={width} height={height} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M448 294.2v-76.4c0-13.3-10.7-24-24-24H286.2V56c0-13.3-10.7-24-24-24h-76.4c-13.3 0-24 10.7-24 24v137.8H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h137.8V456c0 13.3 10.7 24 24 24h76.4c13.3 0 24-10.7 24-24V318.2H424c13.3 0 24-10.7 24-24z" />
</svg>
);
registerComponent('IconAdd', IconAdd);
const IconRemove = ({ width = 24, height = 24 }) => (
<svg width={width} height={height} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M424 318.2c13.3 0 24-10.7 24-24v-76.4c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h400z" />
</svg>
);
registerComponent('IconRemove', IconRemove);

19
packages/vulcan-forms/lib/stylesheets/style.scss
View file

@ -238,16 +238,21 @@ div.ReactTags__suggestions mark{
}
}
.form-nested-item-deleted{
opacity: 0.3;
.form-nested-item-deleted-overlay{
display: block;
}
}
.form-nested-item-inner{
flex: 1;
}
.form-nested-item-remove{
margin-left: 10px;
}
.form-nested-button{
display: flex;
justify-content: center;
align-items: center;
svg{
display:block;
path{
fill: rgba(255,255,255,0.7);
stroke: rgba(255,255,255,0.7);
}
}
}