Change search components classes and styling to match upstream

This commit is contained in:
Thibaut Girka 2019-06-27 22:30:55 +02:00 committed by ThibG
parent ca17bae904
commit 6ad870a410
5 changed files with 35 additions and 94 deletions

View file

@ -36,7 +36,7 @@ class SearchPopout extends React.PureComponent {
<div style={{ ...style, position: 'absolute', width: 285, zIndex: 2 }}>
<Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
{({ opacity, scaleX, scaleY }) => (
<div className='drawer--search--popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
<div className='search-popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
<h4><FormattedMessage id='search_popout.search_format' defaultMessage='Advanced search format' /></h4>
<ul>
@ -128,14 +128,14 @@ class Search extends React.PureComponent {
render () {
const { intl, value, submitted } = this.props;
const { expanded } = this.state;
const active = value.length > 0 || submitted;
const computedClass = classNames('drawer--search', { active });
const hasValue = value.length > 0 || submitted;
return (
<div className={computedClass}>
<div className='search'>
<label>
<span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span>
<input
className='search__input'
type='text'
placeholder={intl.formatMessage(messages.placeholder)}
value={value || ''}
@ -145,17 +145,19 @@ class Search extends React.PureComponent {
onBlur={this.handleBlur}
/>
</label>
<div
aria-label={intl.formatMessage(messages.placeholder)}
className='icon'
className='search__icon'
onClick={this.handleClear}
role='button'
tabIndex='0'
>
<Icon icon='search' />
<Icon icon='times-circle' />
<Icon icon='search' className={hasValue ? '' : 'active'} />
<Icon icon='times-circle' className={hasValue ? 'active' : ''} />
</div>
<Overlay show={expanded && !active} placement='bottom' target={this}>
<Overlay show={expanded && !hasValue} placement='bottom' target={this}>
<SearchPopout />
</Overlay>
</div>

View file

@ -317,7 +317,7 @@ export default class UI extends React.Component {
handleHotkeySearch = e => {
e.preventDefault();
const element = this.node.querySelector('.drawer--search input');
const element = this.node.querySelector('.search__input');
if (element) {
element.focus();

View file

@ -73,90 +73,16 @@
}
}
.drawer--search {
.search {
position: relative;
margin-bottom: 10px;
flex: none;
@include limited-single-column('screen and (max-width: 360px)') { margin-bottom: 0 }
@include single-column('screen and (max-width: 630px)') { font-size: 16px }
input {
display: block;
box-sizing: border-box;
margin: 0;
border: none;
padding: 15px 30px 15px 15px;
width: 100%;
outline: 0;
color: $darker-text-color;
background: $ui-base-color;
font-size: 14px;
font-family: inherit;
line-height: 16px;
&:focus {
outline: 0;
background: lighten($ui-base-color, 4%);
}
}
& > .icon {
display: block;
position: absolute;
top: 10px;
right: 10px;
width: 18px;
height: 18px;
color: $secondary-text-color;
font-size: 18px;
line-height: 18px;
z-index: 2;
.fa {
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
cursor: default;
pointer-events: none;
transition: all 100ms linear;
transition-property: color, transform, opacity;
}
.fa-search {
opacity: 0.3;
transform: rotate(0deg);
}
.fa-times-circle {
transform: rotate(-90deg);
cursor: pointer;
&:hover { color: $primary-text-color }
}
}
&.active {
& > .icon {
.fa-search {
opacity: 0;
transform: rotate(90deg);
}
.fa-times-circle {
opacity: 0.3;
pointer-events: auto;
transform: rotate(0deg);
}
}
}
}
.drawer--search--popout {
.search-popout {
@include search-popout();
}

View file

@ -3,13 +3,25 @@
}
.search__input {
display: block;
padding: 10px;
padding-right: 30px;
@include search-input();
display: block;
padding: 15px;
padding-right: 30px;
line-height: 18px;
font-size: 16px;
}
.search__icon {
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus {
outline: 0 !important;
}
.fa {
position: absolute;
top: 16px;
@ -18,7 +30,7 @@
display: inline-block;
opacity: 0;
transition: all 100ms linear;
transition-property: transform, opacity;
transition-property: color, transform, opacity;
font-size: 18px;
width: 18px;
height: 18px;
@ -33,17 +45,18 @@
}
.fa-search {
transform: rotate(90deg);
transform: rotate(0deg);
&.active {
pointer-events: none;
transform: rotate(0deg);
pointer-events: auto;
opacity: 0.3;
}
}
.fa-times-circle {
top: 17px;
transform: rotate(0deg);
color: $action-button-color;
cursor: pointer;
&.active {
@ -51,7 +64,7 @@
}
&:hover {
color: $primary-text-color;
color: lighten($action-button-color, 7%);
}
}
}

View file

@ -6,7 +6,7 @@
height: calc(100% - 10px);
overflow-y: hidden;
.drawer--search input {
.search__input {
line-height: 18px;
font-size: 16px;
padding: 15px;