5d49352f93
* feat(search): redesign search filters as bubbles like mobile * fix(search): decouble Bubble component styling - animate the bubles on search - decouple the Bubbles styling using utility classes - improve styling of the new search options * fix(Bubble): remove duplicated utility classes * fix(bubble): use color neutral utility * fix(bubble): increase gaps and justify center * fix(Bubble): increase height and decrease gap * fix(search): improve usability on search options - increase animation timing to match mobile - properly center cancel button - only show cancel on text input - prevent search options from disappearing when clicking with no text * fix(search-options): improve spacing and auto size * fix(search-options): improve animation and decrease gap
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import { AppState } from '@/ui_models/app_state';
|
|
import { WebApplication } from '@/ui_models/application';
|
|
import { observer } from 'mobx-react-lite';
|
|
import Bubble from './Bubble';
|
|
|
|
type Props = {
|
|
appState: AppState;
|
|
application: WebApplication;
|
|
};
|
|
|
|
export const SearchOptions = observer(({ appState }: Props) => {
|
|
const { searchOptions } = appState;
|
|
|
|
const { includeProtectedContents, includeArchived, includeTrashed } =
|
|
searchOptions;
|
|
|
|
async function toggleIncludeProtectedContents() {
|
|
await searchOptions.toggleIncludeProtectedContents();
|
|
}
|
|
|
|
return (
|
|
<div
|
|
role="tablist"
|
|
className="search-options justify-center"
|
|
onMouseDown={(e) => e.preventDefault()}
|
|
>
|
|
<Bubble
|
|
label="Protected Contents"
|
|
selected={includeProtectedContents}
|
|
onSelect={toggleIncludeProtectedContents}
|
|
/>
|
|
|
|
<Bubble
|
|
label="Archived"
|
|
selected={includeArchived}
|
|
onSelect={searchOptions.toggleIncludeArchived}
|
|
/>
|
|
|
|
<Bubble
|
|
label="Trashed"
|
|
selected={includeTrashed}
|
|
onSelect={searchOptions.toggleIncludeTrashed}
|
|
/>
|
|
</div>
|
|
);
|
|
});
|