coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved search filtering (#940)

Browse Source 
* Filter search by collectionId

* Improve spec, remove recursive import

* Add userId filter for documents.search

* 💚

* Search filter UI

* WIP UI

* Date filtering
Prevent dupe menu

* Refactor

* button

* Added year option, improved hover states

* Add new indexes

* Remove manual string interpolation in SQL construction

* Move dateFilter validation to controller

* Fixes: Double query when changing filter
Fixes: Visual jump between filters in dropdown

* Add option to clear filters

* More clearly define dropdowns in dark mode

* Checkbox -> Checkmark
This commit is contained in:
Tom Moor
2019-04-23 07:31:20 -07:00
committed by GitHub
parent a256eba856
commit da7fdfef0a
23 changed files with 679 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/components/Button.js
View File

@ -2,6 +2,7 @@
import * as React from 'react';
import styled from 'styled-components';
import { darken } from 'polished';
import { ExpandedIcon } from 'outline-icons';
const RealButton = styled.button`
display: inline-block;
@ -22,6 +23,10 @@ const RealButton = styled.button`
cursor: pointer;
user-select: none;
svg {
fill: ${props => props.theme.buttonText};
}
&::-moz-focus-inner {
padding: 0;
border: 0;
@ -45,6 +50,10 @@ const RealButton = styled.button`
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px;
border: 1px solid ${darken(0.1, props.theme.buttonNeutralBackground)};
svg {
fill: ${props.theme.buttonNeutralText};
}
&:hover {
background: ${darken(0.05, props.theme.buttonNeutralBackground)};
border: 1px solid ${darken(0.15, props.theme.buttonNeutralBackground)};
@ -70,8 +79,9 @@ const Label = styled.span`
`;
const Inner = styled.span`
padding: 0 ${props => (props.small ? 8 : 12)}px;
display: flex;
padding: 0 ${props => (props.small ? 8 : 12)}px;
padding-right: ${props => (props.disclosure ? 2 : props.small ? 8 : 12)}px;
line-height: ${props => (props.small ? 24 : 28)}px;
justify-content: center;
align-items: center;
@ -88,6 +98,7 @@ export type Props = {
className?: string,
children?: React.Node,
small?: boolean,
disclosure?: boolean,
};
export default function Button({
@ -95,6 +106,7 @@ export default function Button({
icon,
children,
value,
disclosure,
small,
...rest
}: Props) {
@ -103,9 +115,10 @@ export default function Button({
return (
<RealButton small={small} {...rest}>
<Inner hasIcon={hasIcon} small={small}>
<Inner hasIcon={hasIcon} small={small} disclosure={disclosure}>
{hasIcon && icon}
{hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
{disclosure && <ExpandedIcon />}
</Inner>
</RealButton>
);