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 }}> <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 }) }}> <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 }) => ( {({ 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> <h4><FormattedMessage id='search_popout.search_format' defaultMessage='Advanced search format' /></h4>
<ul> <ul>
@ -128,14 +128,14 @@ class Search extends React.PureComponent {
render () { render () {
const { intl, value, submitted } = this.props; const { intl, value, submitted } = this.props;
const { expanded } = this.state; const { expanded } = this.state;
const active = value.length > 0 || submitted; const hasValue = value.length > 0 || submitted;
const computedClass = classNames('drawer--search', { active });
return ( return (
<div className={computedClass}> <div className='search'>
<label> <label>
<span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span> <span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span>
<input <input
className='search__input'
type='text' type='text'
placeholder={intl.formatMessage(messages.placeholder)} placeholder={intl.formatMessage(messages.placeholder)}
value={value || ''} value={value || ''}
@ -145,17 +145,19 @@ class Search extends React.PureComponent {
onBlur={this.handleBlur} onBlur={this.handleBlur}
/> />
</label> </label>
<div <div
aria-label={intl.formatMessage(messages.placeholder)} aria-label={intl.formatMessage(messages.placeholder)}
className='icon' className='search__icon'
onClick={this.handleClear} onClick={this.handleClear}
role='button' role='button'
tabIndex='0' tabIndex='0'
> >
<Icon icon='search' /> <Icon icon='search' className={hasValue ? '' : 'active'} />
<Icon icon='times-circle' /> <Icon icon='times-circle' className={hasValue ? 'active' : ''} />
</div> </div>
<Overlay show={expanded && !active} placement='bottom' target={this}>
<Overlay show={expanded && !hasValue} placement='bottom' target={this}>
<SearchPopout /> <SearchPopout />
</Overlay> </Overlay>
</div> </div>

View File

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

View File

@ -73,90 +73,16 @@
} }
} }
.drawer--search { .search {
position: relative; position: relative;
margin-bottom: 10px; margin-bottom: 10px;
flex: none; flex: none;
@include limited-single-column('screen and (max-width: 360px)') { margin-bottom: 0 } @include limited-single-column('screen and (max-width: 360px)') { margin-bottom: 0 }
@include single-column('screen and (max-width: 630px)') { font-size: 16px } @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(); @include search-popout();
} }

View File

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

View File

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