cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-29 02:10:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(search): started work on new search

Browse source
This commit is contained in:
trashtemp 2022-01-11 23:15:18 +01:00
parent 7da7bc8ef7
commit 3d68dab0b4
No known key found for this signature in database
GPG key ID: D1F0DB65081B0FC6
1 changed files with 93 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/pages/channels/actions/HeaderActions.tsx
View file

@ -9,6 +9,7 @@ import {
} from "@styled-icons/boxicons-solid"; } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import styled, { css } from "styled-components";
import { chainedDefer, defer } from "../../../lib/defer"; import { chainedDefer, defer } from "../../../lib/defer";
import { internalEmit } from "../../../lib/eventEmitter"; import { internalEmit } from "../../../lib/eventEmitter";
@ -25,6 +26,51 @@ import IconButton from "../../../components/ui/IconButton";
import { ChannelHeaderProps } from "../ChannelHeader"; import { ChannelHeaderProps } from "../ChannelHeader";
const Testing = styled.div`
display: flex;
gap: 16px;
`;
const SearchBar = styled.div`
display: flex;
align-items: center;
background: var(--primary-background);
border-radius: 4px;
position: relative;
width: 120px;
transition: width .25s ease;
:focus-within {
width: 200px;
box-shadow: 0 0 0 1pt var(--accent);
}
input {
all: unset;
font-size: 13px;
padding: 0 8px;
font-weight: 400;
height: 100%;
width: 100%;
}
}
.actions {
display: flex;
align-items: center;
position: absolute;
right: 0;
padding: 0 8px;
pointer-events: none;
background: inherit;
svg {
opacity: 0.4;
color: var(--foreground);
}
}
`;
export default function HeaderActions({ channel }: ChannelHeaderProps) { export default function HeaderActions({ channel }: ChannelHeaderProps) {
const layout = useApplicationState().layout; const layout = useApplicationState().layout;
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
@ -62,6 +108,7 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) {
return ( return (
<> <>
<Testing>
<UpdateIndicator style="channel" /> <UpdateIndicator style="channel" />
{channel.channel_type === "Group" && ( {channel.channel_type === "Group" && (
<> <>
@ -88,17 +135,28 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) {
</> </>
)} )}
<VoiceActions channel={channel} /> <VoiceActions channel={channel} />
{channel.channel_type !== "VoiceChannel" && (
<IconButton onClick={openSearch}>
<Search size={25} />
</IconButton>
)}
{(channel.channel_type === "Group" || {(channel.channel_type === "Group" ||
channel.channel_type === "TextChannel") && ( channel.channel_type === "TextChannel") && (
<IconButton onClick={openMembers}> <IconButton onClick={openMembers}>
<Group size={25} /> <Group size={25} />
</IconButton> </IconButton>
)} )}
{channel.channel_type !== "VoiceChannel" && (
/*<SearchBar>
<input
type="text"
placeholder="Search..."
onClick={openSearch}
/>
<div className="actions">
<Search size={18} />
</div>
</SearchBar>*/
<IconButton onClick={openSearch}>
<Search size={25} />
</IconButton>
)}
</Testing>
</> </>
); );
} }