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

Add i18n to replies.

Browse Source 
Add Fluent design category button.
Update Account page with new design.
This commit is contained in:
Paul
2021-08-04 16:03:38 +01:00
parent 8cc92e0c42
commit fe75f5a6ca
9 changed files with 229 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/common/messaging/attachments/MessageReply.tsx
View File

@@ -187,12 +187,18 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
);
}
}}>
{message.attachments && (
{message.attachments &&
message.attachments.length > 0 && (
<>
<File size={16} />
<em>{message.attachments.length > 1 ?
"Sent multiple attachments" :
"Sent an attachment"}</em>
<em>
{message.attachments.length >
0 ? (
<Text id="app.main.channel.misc.sent_multiple_files" />
) : (
<Text id="app.main.channel.misc.sent_file" />
)}
</em>
</>
)}
<Markdown

51
src/components/common/messaging/bars/ReplyBar.tsx
View File

@@ -32,25 +32,12 @@ const Base = styled.div`
user-select: none;
align-items: center;
background: var(--message-box);
.username {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
}
}
> div {
flex-grow: 1;
margin-bottom: 0;
}
.actions {
gap: 12px;
display: flex;
}
.toggle {
gap: 4px;
display: flex;
@@ -59,6 +46,22 @@ const Base = styled.div`
font-weight: 600;
}
.username {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
}
.message {
display: flex;
}
.actions {
gap: 12px;
display: flex;
}
/*@media (pointer: coarse) { //FIXME: Make action buttons bigger on pointer coarse
.actions > svg {
height: 25px;
@@ -109,14 +112,20 @@ export default observer(({ channel, replies, setReplies }: Props) => {
<UserShort user={message.author} size={16} />
</div>
<div class="message">
{message.attachments && (
<>
<File size={16} />
<em>{message.attachments.length > 1 ?
"Sent multiple attachments" :
"Sent an attachment"}</em>
</>
)}
{message.attachments &&
message.attachments.length > 0 && (
<>
<File size={16} />
<em>
{message.attachments!.length >
1 ? (
<Text id="app.main.channel.misc.sent_multiple_files" />
) : (
<Text id="app.main.channel.misc.sent_file" />
)}
</em>
</>
)}
{message.author_id === SYSTEM_USER_ID ? (
<SystemMessage message={message} />
) : (

8
src/components/ui/Overline.tsx
View File

@@ -8,13 +8,19 @@ type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
error?: string;
block?: boolean;
spaced?: boolean;
noMargin?: boolean;
children?: Children;
type?: "default" | "subtle" | "error";
};
const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
display: inline;
margin: 0.4em 0;
${(props) =>
!props.noMargin &&
css`
margin: 0.4em 0;
`}
${(props) =>
props.spaced &&

63
src/components/ui/fluent/CategoryButton.tsx
View File

@@ -1,4 +1,5 @@
import styled from "styled-components";
import { ChevronRight } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components";
import { Children } from "../../../types/Preact";
@@ -14,13 +15,69 @@ const CategoryBase = styled.div`
display: flex;
align-items: center;
flex-direction: row;
.content {
display: flex;
flex-grow: 1;
flex-direction: column;
font-weight: 600;
font-size: 14px;
.description {
font-size: 11px;
font-weight: 400;
a:hover {
text-decoration: underline;
}
}
}
${(props) =>
typeof props.onClick !== "undefined" &&
css`
transition: 0.1s ease background-color;
&:hover {
background: var(--tertiary-background);
}
a {
cursor: pointer;
}
`}
`;
interface Props {
icon?: Children;
children?: Children;
description?: Children;
onClick?: () => void;
action?: "chevron" | Children;
}
export default function CategoryButton({ icon, children }: Props) {
return <CategoryBase>{icon}</CategoryBase>;
export default function CategoryButton({
icon,
children,
description,
onClick,
action,
}: Props) {
return (
<CategoryBase onClick={onClick}>
{icon}
<div class="content">
{children}
<div className="description">{description}</div>
</div>
<div class="action">
{typeof action === "string" ? (
<ChevronRight size={24} />
) : (
action
)}
</div>
</CategoryBase>
);
}