Enhance design filters

This commit is contained in:
Aurelsicoko 2018-05-30 14:19:36 +02:00
parent e0376cdd28
commit b83c8370f2
11 changed files with 37 additions and 13 deletions

View File

@ -15,7 +15,7 @@ import Logo from '../../assets/images/icon_filter.png';
const imgStyle = {
marginTop: '-3px',
marginRight: '10px',
height: '9px',
height: '7px',
};
function AddFilterCTA({ onClick, showHideText }) {

View File

@ -8,7 +8,7 @@ const CustomButton = styled.button`
background-color: #FFFFFF;
border: 1px solid #E3E9F3;
border-radius: 2px;
line-height: 30px;
line-height: 28px;
font-size: 13px;
font-weight: 500;
font-family: Lato;
@ -17,6 +17,10 @@ const CustomButton = styled.button`
&:hover {
background: #F7F8F8;
}
img{
font-size: 12px;
}
`;
export default CustomButton;

View File

@ -1,27 +1,37 @@
.flexWrapper {
height: 30px;
display: inline-block;
height: 30px;
margin-bottom: 6px;
margin-right: 10px;
padding: 0 10px;
background: rgba(0,126,255,0.08);
border: 1px solid rgba(0,126,255,0.24);
border-radius: 2px;
line-height: 30px;
line-height: 28px;
color: #007EFF;
font-size: 13px;
> span{
display: inline-block;
margin-top: -1px;
}
> span:nth-child(2) {
font-weight: 700;
}
> span:nth-child(3) {
cursor: pointer;
}
-webkit-font-smoothing: antialiased;
}
.remove {
height: 30px;
height: 28px;
cursor: pointer;
vertical-align: bottom;
&:after {
content: '\f00d';
font-family: FontAwesome;

View File

@ -2,8 +2,14 @@ import styled from 'styled-components';
const Div = styled.div`
display: flex;
min-height: 36px;
border-left: ${props => props.borderLeft ? '3px solid #007EFF' : '0px' };
padding-left: ${props => props.borderLeft ? '10px' : '13px' };
margin-bottom: 0px !important;
input, select{
margin: 0px 5px !important;
}
`;
export default Div;

View File

@ -69,7 +69,7 @@ function FilterOptions({ filter, filterToFocus, index, onChange, onClickAdd, onC
{showAddButton && (
<Add
onClick={onClickAdd}
style={attrType === 'boolean' ? { marginLeft: '10px' } : {}}
style={{ marginLeft: '6px' }}
type="button"
/>
)}

View File

@ -5,7 +5,7 @@ const FilterOptionsCTA = styled.button`
justify-content: center;
height: 20px;
width: 20px;
margin: 17px 10px 0px 0px;
margin: 8px 5px 0px 0px;
border-radius: 50%;
border: 1px solid #E3E9F3;
cursor: pointer;

View File

@ -3,13 +3,16 @@ import styled from 'styled-components';
const Flex = styled.div`
display: flex;
justify-content: flex-end;
padding: 0 30px 9px 30px !important;
padding: 0 0 9px 30px !important;
color: #C3C5C8;
font-size: 13px;
> span {
vertical-align: text-top;
cursor: pointer;
&:after {
margin-left: 2px;
content: '\f077';
font-family: FontAwesome;
font-size: 10px;

View File

@ -1,7 +1,7 @@
.wrapperStyle {
margin-top: -13px;
> div:not(:first-child) {
padding-top: 2px;
padding-top: 10px;
}
> div:last-child {
margin-bottom: 2px;

View File

@ -8,6 +8,7 @@
.row{
padding-bottom: 36px;
padding-left: 5px;
}
.noPadding {

View File

@ -15,8 +15,8 @@
"components.LimitSelect.itemsPerPage": "Items per page",
"containers.List.errorFetchRecords": "Error",
"components.AddFilterCTA.add": "Add filter",
"components.AddFilterCTA.hide": "Hide filters",
"components.AddFilterCTA.add": "Filters",
"components.AddFilterCTA.hide": "Filters",
"components.FilterOptions.button.apply": "Apply",
"components.FiltersPickWrapper.PluginHeader.actions.apply": "Apply",
"components.FiltersPickWrapper.PluginHeader.actions.clearAll": "Clear all",

View File

@ -16,8 +16,8 @@
"components.LimitSelect.itemsPerPage": "Éléments par page",
"containers.List.errorFetchRecords": "Erreur",
"components.AddFilterCTA.add": "Ajouter un filtre",
"components.AddFilterCTA.hide": "Cacher les filtres",
"components.AddFilterCTA.add": "Filtres",
"components.AddFilterCTA.hide": "Filtres",
"components.FilterOptions.button.apply": "Appliquer",
"components.FiltersPickWrapper.PluginHeader.actions.apply": "Appliquer",
"components.FiltersPickWrapper.PluginHeader.actions.clearAll": "Tout supprimer",