mirror of
https://github.com/revoltchat/revite.git
synced 2024-09-20 01:57:12 -04:00
Continue work on category buttons
This commit is contained in:
parent
0aa18d22e9
commit
95a149407b
4 changed files with 62 additions and 14 deletions
2
external/lang
vendored
2
external/lang
vendored
|
@ -1 +1 @@
|
||||||
Subproject commit ede822613d642a345595f690ab99e35c78aa09c4
|
Subproject commit d2e491a8ef38a4b67fe1be7b5eabcfea8064942e
|
|
@ -4,23 +4,30 @@ import styled, { css } from "styled-components";
|
||||||
import { Children } from "../../../types/Preact";
|
import { Children } from "../../../types/Preact";
|
||||||
|
|
||||||
interface BaseProps {
|
interface BaseProps {
|
||||||
|
readonly account?: boolean;
|
||||||
readonly disabled?: boolean;
|
readonly disabled?: boolean;
|
||||||
readonly largeDescription?: boolean;
|
readonly largeDescription?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const CategoryBase = styled.div<BaseProps>`
|
const CategoryBase = styled.div<BaseProps>`
|
||||||
height: 54px;
|
/*height: 54px;*/
|
||||||
padding: 8px 12px;
|
padding: 10px 12px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
background: var(--secondary-header);
|
background: var(--secondary-header);
|
||||||
|
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
opacity: .7;
|
||||||
|
|
||||||
|
> svg {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -29,6 +36,15 @@ const CategoryBase = styled.div<BaseProps>`
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
${(props) =>
|
${(props) =>
|
||||||
props.largeDescription
|
props.largeDescription
|
||||||
|
@ -40,6 +56,10 @@ const CategoryBase = styled.div<BaseProps>`
|
||||||
`}
|
`}
|
||||||
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
@ -50,10 +70,12 @@ const CategoryBase = styled.div<BaseProps>`
|
||||||
${(props) =>
|
${(props) =>
|
||||||
typeof props.onClick !== "undefined" &&
|
typeof props.onClick !== "undefined" &&
|
||||||
css`
|
css`
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 1;
|
||||||
transition: 0.1s ease background-color;
|
transition: 0.1s ease background-color;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--tertiary-background);
|
background: var(--secondary-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
@ -68,6 +90,32 @@ const CategoryBase = styled.div<BaseProps>`
|
||||||
.action {
|
.action {
|
||||||
color: var(--tertiary-foreground);
|
color: var(--tertiary-foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.action {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
|
||||||
|
${(props) =>
|
||||||
|
props.account &&
|
||||||
|
css`
|
||||||
|
height: 54px;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
.title {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--secondary-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
`}
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -84,7 +132,7 @@ export default function CategoryButton({
|
||||||
icon,
|
icon,
|
||||||
children,
|
children,
|
||||||
description,
|
description,
|
||||||
largeDescription,
|
account,
|
||||||
disabled,
|
disabled,
|
||||||
onClick,
|
onClick,
|
||||||
action,
|
action,
|
||||||
|
@ -93,10 +141,11 @@ export default function CategoryButton({
|
||||||
<CategoryBase
|
<CategoryBase
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
largeDescription={largeDescription}>
|
account={account}>
|
||||||
{icon}
|
{icon}
|
||||||
<div class="content">
|
<div class="content">
|
||||||
{children}
|
<div className="title">{children}</div>
|
||||||
|
|
||||||
<div className="description">{description}</div>
|
<div className="description">{description}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="action">
|
<div class="action">
|
||||||
|
@ -104,7 +153,7 @@ export default function CategoryButton({
|
||||||
action === "chevron" ? (
|
action === "chevron" ? (
|
||||||
<ChevronRight size={24} />
|
<ChevronRight size={24} />
|
||||||
) : (
|
) : (
|
||||||
<LinkExternal size={24} />
|
<LinkExternal size={20} />
|
||||||
)
|
)
|
||||||
) : (
|
) : (
|
||||||
action
|
action
|
||||||
|
@ -112,4 +161,4 @@ export default function CategoryButton({
|
||||||
</div>
|
</div>
|
||||||
</CategoryBase>
|
</CategoryBase>
|
||||||
);
|
);
|
||||||
}
|
}
|
|
@ -136,7 +136,7 @@ export const Account = observer(() => {
|
||||||
value
|
value
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
largeDescription
|
account
|
||||||
action="chevron"
|
action="chevron"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
openScreen({
|
openScreen({
|
||||||
|
@ -144,9 +144,7 @@ export const Account = observer(() => {
|
||||||
field,
|
field,
|
||||||
})
|
})
|
||||||
}>
|
}>
|
||||||
<Overline type="subtle" noMargin>
|
<Text id={`login.${field}`} />
|
||||||
<Text id={`login.${field}`} />
|
|
||||||
</Overline>
|
|
||||||
</CategoryButton>
|
</CategoryButton>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
.banner {
|
.banner {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px 10px;
|
padding: 12px 10px;
|
||||||
|
|
Loading…
Reference in a new issue