mirror of
https://github.com/strapi/strapi.git
synced 2025-11-03 19:36:20 +00:00
Add new icon and update CSS to follow the original design
This commit is contained in:
parent
84fb1fda1c
commit
be87950148
@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Shape</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Pages" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Content-Manager---List-view" transform="translate(-568.000000, -172.000000)" fill="#007EFF">
|
||||
<g id="Container" transform="translate(234.000000, 0.000000)">
|
||||
<g id="Filter" transform="translate(29.000000, 160.000000)">
|
||||
<g id="Filter-#1" transform="translate(91.000000, 0.000000)">
|
||||
<path d="M221.779774,18.7197709 L219.060003,16 L221.779774,13.2802291 C222.073409,12.9865938 222.073409,12.5138618 221.779774,12.2202265 C221.486138,11.9265912 221.013406,11.9265912 220.719771,12.2202265 L218,14.9399974 L215.280229,12.2202265 C214.986594,11.9265912 214.513862,11.9265912 214.220226,12.2202265 C213.926591,12.5138618 213.926591,12.9865938 214.220226,13.2802291 L216.939997,16 L214.220226,18.7197709 C213.926591,19.0134062 213.926591,19.4861382 214.220226,19.7797735 C214.513862,20.0734088 214.986594,20.0734088 215.280229,19.7797735 L218,17.0600026 L220.719771,19.7797735 C221.013406,20.0734088 221.486138,20.0734088 221.779774,19.7797735 C222.071326,19.4861382 222.071326,19.0113237 221.779774,18.7197709 L221.779774,18.7197709 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Shape</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Search" transform="translate(-300.000000, -29.000000)" fill="#B3B5B9">
|
||||
<g id="Shape">
|
||||
<path d="M307.779774,35.7197709 L305.060003,33 L307.779774,30.2802291 C308.073409,29.9865938 308.073409,29.5138618 307.779774,29.2202265 C307.486138,28.9265912 307.013406,28.9265912 306.719771,29.2202265 L304,31.9399974 L301.280229,29.2202265 C300.986594,28.9265912 300.513862,28.9265912 300.220226,29.2202265 C299.926591,29.5138618 299.926591,29.9865938 300.220226,30.2802291 L302.939997,33 L300.220226,35.7197709 C299.926591,36.0134062 299.926591,36.4861382 300.220226,36.7797735 C300.513862,37.0734088 300.986594,37.0734088 301.280229,36.7797735 L304,34.0600026 L306.719771,36.7797735 C307.013406,37.0734088 307.486138,37.0734088 307.779774,36.7797735 C308.071326,36.4861382 308.071326,36.0113237 307.779774,35.7197709 L307.779774,35.7197709 Z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icon-search</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Search" transform="translate(0.000000, -24.000000)" fill="#B3B5B9">
|
||||
<g id="icon-search">
|
||||
<path d="M15.875,37.4458333 L12.3416667,33.8666667 C12.9166667,32.8625 13.2166667,31.7458333 13.2166667,30.6208333 C13.2166667,26.9708333 10.25,24 6.60833333,24 C2.96666667,24 0,26.9708333 0,30.6208333 C0,34.2708333 2.96666667,37.2416667 6.60833333,37.2416667 C7.77083333,37.2416667 8.92083333,36.9208333 9.94583333,36.3083333 L13.4625,39.875 C13.5416667,39.9541667 13.6541667,40.0041667 13.7666667,40.0041667 C13.8791667,40.0041667 13.9916667,39.9583333 14.0708333,39.875 L15.875,38.05 C16.0416667,37.8791667 16.0416667,37.6125 15.875,37.4458333 L15.875,37.4458333 Z M6.60833333,26.5791667 C8.83333333,26.5791667 10.6416667,28.3916667 10.6416667,30.6208333 C10.6416667,32.85 8.83333333,34.6625 6.60833333,34.6625 C4.38333333,34.6625 2.575,32.85 2.575,30.6208333 C2.575,28.3916667 4.38333333,26.5791667 6.60833333,26.5791667 L6.60833333,26.5791667 Z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="9px" height="7px" viewBox="0 0 9 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Icon filter</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
||||
<g id="Search" transform="translate(-339.000000, -29.000000)" stroke="#007EFF">
|
||||
<g id="Label">
|
||||
<g transform="translate(328.000000, 21.000000)">
|
||||
<g id="Icon-filter" transform="translate(11.000000, 7.000000)">
|
||||
<path d="M3.5,7.5 L5.5,7.5" id="Line-3"></path>
|
||||
<path d="M2.5,5.5 L6.5,5.5" id="Line-3"></path>
|
||||
<path d="M1.5,3.5 L7.5,3.5" id="Line-3"></path>
|
||||
<path d="M0.5,1.5 L8.5,1.5" id="Line-3"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -30,13 +30,16 @@
|
||||
.remove {
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
vertical-align: bottom;
|
||||
vertical-align: middle;
|
||||
|
||||
&:after {
|
||||
content: '\f00d';
|
||||
font-family: FontAwesome;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: auto;
|
||||
margin-top: -3px;
|
||||
background-image: url('../../assets/images/icon-cross-blue.svg');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ import { isEmpty, upperFirst } from 'lodash';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import Logo from 'assets/images/icon_filter.png';
|
||||
import Logo from 'assets/images/icon_filter_blue.svg';
|
||||
import styles from './styles.scss';
|
||||
|
||||
const WAIT = 400;
|
||||
@ -19,7 +19,7 @@ class Search extends React.Component {
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { model, value } = this.props;
|
||||
|
||||
|
||||
if (prevProps.model !== model || !isEmpty(prevProps.value) && isEmpty(value)) {
|
||||
this.resetState();
|
||||
}
|
||||
|
||||
@ -1,28 +1,40 @@
|
||||
.search{
|
||||
position: fixed;
|
||||
display: flex;
|
||||
top: 0;
|
||||
height: 6rem;
|
||||
min-width: 44rem;
|
||||
padding-right: 30px;
|
||||
line-height: 6rem;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
color: #B3B5B9;
|
||||
border-right: 1px solid #F3F4F4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
min-width: 44rem;
|
||||
height: 6rem;
|
||||
padding-right: 20px;
|
||||
background-color: #FFFFFF;
|
||||
border-right: 1px solid #F3F4F4;
|
||||
z-index: 999;
|
||||
color: #9EA7B8;
|
||||
line-height: 6rem;
|
||||
letter-spacing: 0;
|
||||
|
||||
&:before {
|
||||
content: '\f002';
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url('../../assets/images/icon-search.svg');
|
||||
margin-right: 10px;
|
||||
font-family: 'FontAwesome';
|
||||
font-size: 1.3rem;
|
||||
font-weight: bolder;
|
||||
color: #B3B5B9;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
|
||||
&::placeholder {
|
||||
color: #9EA7B8 !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
> div:first-child {
|
||||
display: flex;
|
||||
flex: 2;
|
||||
@ -34,9 +46,10 @@
|
||||
position: relative;
|
||||
height: 22px;
|
||||
margin: auto;
|
||||
margin-left: 30px;
|
||||
margin-top: 19px;
|
||||
margin-left: 20px;
|
||||
padding-right: 10px;
|
||||
padding-left: 27px;
|
||||
padding-left: 30px;
|
||||
background: rgba(0,126,255,0.08);
|
||||
border: 1px solid rgba(0,126,255,0.24);
|
||||
border-radius: 2px;
|
||||
@ -44,32 +57,33 @@
|
||||
color: #007EFF;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
> img {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
margin: auto;
|
||||
bottom: 0;
|
||||
left: 10px;
|
||||
left: 11px;
|
||||
height: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.clearable {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-color: #B3B5B9;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
margin: 25px auto 0;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
content: '\f00d';
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: auto;
|
||||
color: white;
|
||||
font-family: FontAwesome;
|
||||
font-size: 8px;
|
||||
background-image: url('../../assets/images/icon-cross.svg');
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@ module.exports = {
|
||||
.sort(params.sort)
|
||||
.skip(Number(params.skip))
|
||||
.populate(populate || this.associations.map(x => x.alias).join(' '))
|
||||
.lean();
|
||||
.lean();
|
||||
},
|
||||
|
||||
countSearch: async function (params = {}) { // eslint-disable-line no-unused-vars
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user