1
0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-22 10:22:30 +01:00

different icon states for channel header

This commit is contained in:
Puyodead1 2023-12-03 00:37:12 -05:00
parent e957e19a82
commit 6ce4b6b828
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC

View File

@ -5,7 +5,7 @@ import styled from "styled-components";
import { ContextMenuContext } from "../contexts/ContextMenuContext"; import { ContextMenuContext } from "../contexts/ContextMenuContext";
import { useAppStore } from "../stores/AppStore"; import { useAppStore } from "../stores/AppStore";
import { IContextMenuItem } from "./ContextMenuItem"; import { IContextMenuItem } from "./ContextMenuItem";
import Icon from "./Icon"; import Icon, { IconProps } from "./Icon";
import { SectionHeader } from "./SectionHeader"; import { SectionHeader } from "./SectionHeader";
import LeaveServerModal from "./modals/LeaveServerModal"; import LeaveServerModal from "./modals/LeaveServerModal";
@ -33,6 +33,7 @@ function ChannelHeader() {
const { openModal } = useModals(); const { openModal } = useModals();
const [contextMenuItems, setContextMenuItems] = React.useState<IContextMenuItem[]>([]); const [contextMenuItems, setContextMenuItems] = React.useState<IContextMenuItem[]>([]);
const [icon, setIcon] = React.useState<IconProps["icon"]>("mdiChevronDown");
React.useEffect(() => { React.useEffect(() => {
if (app.activeGuild && app.activeGuild.ownerId !== app.account?.id) { if (app.activeGuild && app.activeGuild.ownerId !== app.account?.id) {
@ -66,6 +67,7 @@ function ChannelHeader() {
if (contextMenu.visible) { if (contextMenu.visible) {
// "toggles" the menu // "toggles" the menu
contextMenu.close(); contextMenu.close();
setIcon("mdiChevronDown");
return; return;
} }
@ -82,6 +84,8 @@ function ChannelHeader() {
boxSizing: "border-box", boxSizing: "border-box",
}, },
}); });
setIcon("mdiClose");
} }
if (app.activeGuildId === "@me") { if (app.activeGuildId === "@me") {
@ -104,7 +108,7 @@ function ChannelHeader() {
return ( return (
<Wrapper onClick={openMenu}> <Wrapper onClick={openMenu}>
<HeaderText>{app.activeGuild.name}</HeaderText> <HeaderText>{app.activeGuild.name}</HeaderText>
<Icon icon="mdiChevronDown" size="20px" color="var(--text)" /> <Icon icon={icon} size="20px" color="var(--text)" />
</Wrapper> </Wrapper>
); );
} }