cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-21 22:50: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

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

@ -9,6 +9,7 @@ import {
} from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom";
import styled, { css } from "styled-components";
import { chainedDefer, defer } from "../../../lib/defer";
import { internalEmit } from "../../../lib/eventEmitter";
@ -25,6 +26,51 @@ import IconButton from "../../../components/ui/IconButton";
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) {
const layout = useApplicationState().layout;
const { openScreen } = useIntermediate();
@ -62,43 +108,55 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) {
return (
<>
<UpdateIndicator style="channel" />
{channel.channel_type === "Group" && (
<>
<IconButton
onClick={() =>
openScreen({
id: "user_picker",
omit: channel.recipient_ids!,
callback: async (users) => {
for (const user of users) {
await channel.addMember(user);
}
},
})
}>
<UserPlus size={27} />
<Testing>
<UpdateIndicator style="channel" />
{channel.channel_type === "Group" && (
<>
<IconButton
onClick={() =>
openScreen({
id: "user_picker",
omit: channel.recipient_ids!,
callback: async (users) => {
for (const user of users) {
await channel.addMember(user);
}
},
})
}>
<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
onClick={() =>
history.push(`/channel/${channel._id}/settings`)
}>
<Cog size={24} />
)}
{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>
</>
)}
<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>
)}
)}
</Testing>
</>
);
}