mirrors/catstodon
1
0
Fork 0
mirror of https://git.kescher.at/CatCatNya/catstodon.git synced 2024-12-18 02:19:04 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixes to search dropdown

Browse source
This commit is contained in:
kibigo! 2018-01-06 15:34:01 -08:00
parent 61ef8d643e
commit b5874c1428
4 changed files with 102 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/javascript/flavours/glitch/features/drawer/search/index.js
View file

@ -45,10 +45,10 @@ const handlers = {
const {
onClear,
submitted,
value: { length },
value,
} = this.props;
e.preventDefault(); // Prevents focus change ??
if (onClear && (submitted || length)) {
if (onClear && (submitted || value && value.length)) {
onClear();
}
},
@ -100,7 +100,8 @@ export default class DrawerSearch extends React.PureComponent {
value,
} = this.props;
const { expanded } = this.state;
const computedClass = classNames('drawer--search', { active: value.length || submitted });
const active = value && value.length || submitted;
const computedClass = classNames('drawer--search', { active });
return (
<div className={computedClass}>
@ -126,11 +127,11 @@ export default class DrawerSearch extends React.PureComponent {
tabIndex='0'
>
<Icon icon='search' />
<Icon icon='fa-times-circle' />
<Icon icon='times-circle' />
</div>
<Overlay
placement='bottom'
show={expanded && !(value || '').length && !submitted}
show={expanded && !active}
target={this}
><DrawerSearchPopout /></Overlay>
</div>

13
app/javascript/flavours/glitch/features/drawer/search/popout/index.js
View file

@ -42,6 +42,14 @@ export default function DrawerSearchPopout ({ style }) {
// The result.
return (
<div
className='drawer--search--popout'
style={{
...style,
position: 'absolute',
width: 285,
}}
>
<Motion
defaultStyle={{
opacity: 0,
@ -56,11 +64,7 @@ export default function DrawerSearchPopout ({ style }) {
>
{({ opacity, scaleX, scaleY }) => (
<div
className='drawer--search--popout'
style={{
...style,
position: 'absolute',
width: 285,
opacity: opacity,
transform: `scale(${scaleX}, ${scaleY})`,
}}
@ -92,6 +96,7 @@ export default function DrawerSearchPopout ({ style }) {
</div>
)}
</Motion>
</div>
);
}

43
app/javascript/flavours/glitch/styles/components/drawer.scss
View file

@ -114,8 +114,7 @@
}
& > .icon {
.fa {
display: inline-block;
display: block;
position: absolute;
top: 10px;
right: 10px;
@ -123,10 +122,19 @@
height: 18px;
color: $ui-secondary-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;
z-index: 2;
transition: all 100ms linear;
}
@ -136,14 +144,15 @@
}
.fa-times-circle {
top: 11px;
transform: rotate(-90deg);
cursor: pointer;
&:hover { color: $primary-text-color }
}
}
&.active {
& > .icon {
.fa-search {
opacity: 0;
transform: rotate(90deg);
@ -158,6 +167,32 @@
}
}
.drawer--search--popout {
box-sizing: border-box;
margin-top: 10px;
border-radius: 4px;
padding: 10px 14px 14px 14px;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
color: $ui-primary-color;
background: $simple-background-color;
h4 {
margin-bottom: 10px;
color: $ui-primary-color;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}
ul { margin-bottom: 10px }
li { padding: 4px 0 }
em {
color: $ui-base-color;
font-weight: 500;
}
}
.drawer--account {
padding: 10px;
color: $ui-primary-color;

31
app/javascript/flavours/glitch/styles/components/index.scss
View file

@ -3918,37 +3918,6 @@
border-radius: 0;
}
.drawer--search--popout {
background: $simple-background-color;
border-radius: 4px;
padding: 10px 14px;
padding-bottom: 14px;
margin-top: 10px;
color: $ui-primary-color;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
h4 {
text-transform: uppercase;
color: $ui-primary-color;
font-size: 13px;
font-weight: 500;
margin-bottom: 10px;
}
li {
padding: 4px 0;
}
ul {
margin-bottom: 10px;
}
em {
font-weight: 500;
color: $ui-base-color;
}
}
noscript {
text-align: center;