cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2025-02-20 23:32:48 -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
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
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

128
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,43 +108,55 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) {
return ( return (
<> <>
<UpdateIndicator style="channel" /> <Testing>
{channel.channel_type === "Group" && ( <UpdateIndicator style="channel" />
<> {channel.channel_type === "Group" && (
<IconButton <>
onClick={() => <IconButton
openScreen({ onClick={() =>
id: "user_picker", openScreen({
omit: channel.recipient_ids!, id: "user_picker",
callback: async (users) => { omit: channel.recipient_ids!,
for (const user of users) { callback: async (users) => {
await channel.addMember(user); for (const user of users) {
} await channel.addMember(user);
}, }
}) },
}> })
<UserPlus size={27} /> }>
<UserPlus size={27} />
</IconButton>
<IconButton
onClick={() =>
history.push(`/channel/${channel._id}/settings`)
}>
<Cog size={24} />
</IconButton>
</>
)}
<VoiceActions channel={channel} />
{(channel.channel_type === "Group" ||
channel.channel_type === "TextChannel") && (
<IconButton onClick={openMembers}>
<Group size={25} />
</IconButton> </IconButton>
<IconButton )}
onClick={() => {channel.channel_type !== "VoiceChannel" && (
history.push(`/channel/${channel._id}/settings`) /*<SearchBar>
}> <input
<Cog size={24} /> type="text"
placeholder="Search..."
onClick={openSearch}
/>
<div className="actions">
<Search size={18} />
</div>
</SearchBar>*/
<IconButton onClick={openSearch}>
<Search size={25} />
</IconButton> </IconButton>
</> )}
)} </Testing>
<VoiceActions channel={channel} />
{channel.channel_type !== "VoiceChannel" && (
<IconButton onClick={openSearch}>
<Search size={25} />
</IconButton>
)}
{(channel.channel_type === "Group" ||
channel.channel_type === "TextChannel") && (
<IconButton onClick={openMembers}>
<Group size={25} />
</IconButton>
)}
</> </>
); );
} }