abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-09 10:15:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(settings): UI improvements (#448)

Browse Source 
* Fixed CSS for Settings.tsx + new Theme Shop design

* reformat

* More changes to UI CSS

* Small CSS fixes for Settings.tsx, Account, Bots

* Updated theme shop, settings pages, cleanup

* chore: force sync language submodule

* fix(sidebar): prevent items from shrinking

* fix(push): fix timestamp and icon for push notifications

* fix(voice): hide grant permission button after grant

* chore: hide new shop / chevron before merge

* chore(ci): bump node to v16 in dockerfile

* fix(sidebar): change width of channel sidebar

Co-authored-by: trashtemp <96388163+trashtemp@users.noreply.github.com>
This commit is contained in:
Paul Makles
2021-12-20 13:37:21 +00:00
committed by GitHub
parent abefaca143
commit 3ee0c37a60
23 changed files with 744 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/pages/channels/ChannelHeader.tsx
View File

@@ -1,4 +1,4 @@
import { At, Hash, Menu } from "@styled-icons/boxicons-regular";
import { At, Hash, Menu, ChevronLeft } from "@styled-icons/boxicons-regular";
import { Notepad, Group } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Channel } from "revolt.js/dist/maps/Channels";
@@ -65,85 +65,103 @@ const Info = styled.div`
}
`;
const IconConainer = styled.div`
const IconContainer = styled.div`
display: flex;
align-items: center;
cursor: pointer;
color: var(--secondary-foreground);
margin-right: 5px;
${!isTouchscreenDevice && css`
> svg {
margin-right: -5px;
}
${!isTouchscreenDevice &&
css`
&:hover {
color: var(--foreground);
}
`}
`
`;
export default observer(({ channel, toggleSidebar, toggleChannelSidebar }: ChannelHeaderProps) => {
const { openScreen } = useIntermediate();
export default observer(
({ channel, toggleSidebar, toggleChannelSidebar }: ChannelHeaderProps) => {
const { openScreen } = useIntermediate();
const name = getChannelName(channel);
let icon, recipient: User | undefined;
switch (channel.channel_type) {
case "SavedMessages":
icon = <Notepad size={24} />;
break;
case "DirectMessage":
icon = <At size={24} />;
recipient = channel.recipient;
break;
case "Group":
icon = <Group size={24} />;
break;
case "TextChannel":
icon = <Hash size={24} />;
break;
}
const name = getChannelName(channel);
let icon, recipient: User | undefined;
switch (channel.channel_type) {
case "SavedMessages":
icon = <Notepad size={24} />;
break;
case "DirectMessage":
icon = <At size={24} />;
recipient = channel.recipient;
break;
case "Group":
icon = <Group size={24} />;
break;
case "TextChannel":
icon = <Hash size={24} />;
break;
}
return (
<Header placement="primary">
<HamburgerAction />
<IconConainer onClick={toggleChannelSidebar}>{icon}</IconConainer>
<Info>
<span className="name">{name}</span>
{isTouchscreenDevice &&
channel.channel_type === "DirectMessage" && (
<>
<div className="divider" />
<span className="desc">
<div
className="status"
style={{
backgroundColor:
useStatusColour(recipient),
}}
/>
<UserStatus user={recipient} />
</span>
</>
)}
{!isTouchscreenDevice &&
(channel.channel_type === "Group" ||
channel.channel_type === "TextChannel") &&
channel.description && (
<>
<div className="divider" />
<span
className="desc"
onClick={() =>
openScreen({
id: "channel_info",
channel,
})
}>
<Markdown
content={
channel.description.split("\n")[0] ?? ""
}
disallowBigEmoji
/>
</span>
</>
)}
</Info>
<HeaderActions channel={channel} toggleSidebar={toggleSidebar} />
</Header>
);
});
return (
<Header placement="primary">
<HamburgerAction />
<IconContainer onClick={toggleChannelSidebar}>
{/*isTouchscreenDevice && <ChevronLeft size={18} /> FIXME: requires mobx merge */}
{icon}
</IconContainer>
<Info>
<span className="name">{name}</span>
{isTouchscreenDevice &&
channel.channel_type === "DirectMessage" && (
<>
<div className="divider" />
<span className="desc">
<div
className="status"
style={{
backgroundColor:
useStatusColour(recipient),
}}
/>
<UserStatus user={recipient} />
</span>
</>
)}
{!isTouchscreenDevice &&
(channel.channel_type === "Group" ||
channel.channel_type === "TextChannel") &&
channel.description && (
<>
<div className="divider" />
<span
className="desc"
onClick={() =>
openScreen({
id: "channel_info",
channel,
})
}>
<Markdown
content={
channel.description.split(
"\n",
)[0] ?? ""
}
disallowBigEmoji
/>
</span>
</>
)}
</Info>
<HeaderActions
channel={channel}
toggleSidebar={toggleSidebar}
/>
</Header>
);
},
);