cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-09 16:53:36 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(home): add snow

Browse source
This commit is contained in:
Paul 2021-12-23 13:16:43 +00:00
parent f14ef2b78f
commit 73d99e4518
4 changed files with 200 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/common/messaging/attachments/Attachment.tsx
View file

@ -5,7 +5,6 @@ import classNames from "classnames";
import { attachContextMenu } from "preact-context-menu";
import { useContext, useState } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import AttachmentActions from "./AttachmentActions";
@ -39,7 +38,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
width={metadata.width}
height={metadata.height}
onContextMenu={attachContextMenu("Menu", {
attachment: attachment,
attachment,
})}
className={classNames({
[styles.margin]: hasContent,

1
src/pages/home/Home.module.scss
View file

@ -1,4 +1,5 @@
.home {
height: 100%;
user-select: none;
h3 {

170
src/pages/home/Home.tsx
View file

@ -3,8 +3,9 @@ import { Link } from "react-router-dom";
import styled, { css } from "styled-components";
import styles from "./Home.module.scss";
import "./snow.scss";
import { Text } from "preact-i18n";
import { useContext, useState } from "preact/hooks";
import { useContext, useMemo, useState } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
@ -32,6 +33,19 @@ const IconConainer = styled.div`
`}
`;
const Overlay = styled.div`
display: grid;
height: 100%;
> * {
grid-area: 1 / 1;
}
.content {
z-index: 1;
}
`;
export default function Home() {
const client = useContext(AppContext);
const [showChannels, setChannels] = useState(
@ -59,68 +73,102 @@ export default function Home() {
}
};
const snowflakes = useMemo(() => {
const flakes = [];
// Disable outside of December
if (new Date().getMonth() !== 11) return [];
for (let i = 0; i < 15; i++) {
flakes.push("❄️");
flakes.push("❄");
}
for (let i = 0; i < 2; i++) {
flakes.push("🎄");
flakes.push("☃️");
flakes.push("⛄");
}
return flakes;
}, []);
return (
<div className={styles.home}>
<Header placement="primary">
<IconConainer onClick={toggleChannelSidebar}>
<HomeIcon size={24} />
</IconConainer>
<Text id="app.navigation.tabs.home" />
</Header>
<h3>
<Text id="app.special.modals.onboarding.welcome" />
<br />
<img src={wideSVG} />
</h3>
<div className={styles.actions}>
<Link to="/invite/Testers">
<CategoryButton
action="chevron"
icon={<Emoji emoji="😁" size={32} />}>
{client.servers.get("01F7ZSBSFHQ8TA81725KQCSDDP") ? (
<Text id="app.home.goto-testers" />
) : (
<Text id="app.home.join-testers" />
)}
</CategoryButton>
</Link>
<a
href="https://insrt.uk/donate"
target="_blank"
rel="noreferrer">
<CategoryButton
action="external"
icon={<Emoji emoji="💷" size={32} />}>
<Text id="app.home.donate" />
</CategoryButton>
</a>
<Link to="/settings/feedback">
<CategoryButton
action="chevron"
icon={<Emoji emoji="🎉" size={32} />}>
<Text id="app.home.feedback" />
</CategoryButton>
</Link>
<a
href="https://revolt.social"
target="_blank"
rel="noreferrer">
<CategoryButton
action="external"
icon={<Emoji emoji="🧭" size={32} />}>
<Text id="app.home.social" />
</CategoryButton>
</a>
<Tooltip content={<Text id="app.home.settings-tooltip" />}>
<Link to="/settings">
<CategoryButton
action="chevron"
icon={<Emoji emoji="🔧" size={32} />}>
<Text id="app.home.settings" />
</CategoryButton>
</Link>
</Tooltip>
</div>
<Overlay>
<div class="snowfall">
{snowflakes.map((emoji, index) => (
<div key={index} class="snowflake">
{emoji}
</div>
))}
</div>
<div class="content">
<Header placement="primary">
<IconConainer onClick={toggleChannelSidebar}>
<HomeIcon size={24} />
</IconConainer>
<Text id="app.navigation.tabs.home" />
</Header>
<h3>
<Text id="app.special.modals.onboarding.welcome" />
<br />
<img src={wideSVG} />
</h3>
<div className={styles.actions}>
<Link to="/invite/Testers">
<CategoryButton
action="chevron"
icon={<Emoji emoji="😁" size={32} />}>
{client.servers.get(
"01F7ZSBSFHQ8TA81725KQCSDDP",
) ? (
<Text id="app.home.goto-testers" />
) : (
<Text id="app.home.join-testers" />
)}
</CategoryButton>
</Link>
<a
href="https://insrt.uk/donate"
target="_blank"
rel="noreferrer">
<CategoryButton
action="external"
icon={<Emoji emoji="💷" size={32} />}>
<Text id="app.home.donate" />
</CategoryButton>
</a>
<Link to="/settings/feedback">
<CategoryButton
action="chevron"
icon={<Emoji emoji="🎉" size={32} />}>
<Text id="app.home.feedback" />
</CategoryButton>
</Link>
<a
href="https://revolt.social"
target="_blank"
rel="noreferrer">
<CategoryButton
action="external"
icon={<Emoji emoji="🧭" size={32} />}>
<Text id="app.home.social" />
</CategoryButton>
</a>
<Tooltip
content={<Text id="app.home.settings-tooltip" />}>
<Link to="/settings">
<CategoryButton
action="chevron"
icon={<Emoji emoji="🔧" size={32} />}>
<Text id="app.home.settings" />
</CategoryButton>
</Link>
</Tooltip>
</div>
</div>
</Overlay>
</div>
);
}

89
src/pages/home/snow.scss Normal file
View file

@ -0,0 +1,89 @@
// Pure CSS Snowfall
// Released by Artimon under MIT license
$count: 36;
$screenOffset: 0px;
$fallDuration: 12;
$windNoise: 30;
$windSpeed: 4;
$sizeNoise: 40;
$rotation: 360;
$imageSize: 20px;
$fontSize: 40px;
.snowfall {
z-index: 0;
display: block;
font-size: $fontSize;
overflow: hidden;
pointer-events: none;
.snowflake {
position: relative;
top: 0;
left: 0;
display: flex;
justify-content: center;
width: $screenOffset;
height: $screenOffset;
span {
align-self: center;
}
img {
align-self: center;
width: $imageSize;
}
}
@while ($count > 0) {
$left: random(100);
$deltaLeft: random(2 * $windNoise * 10) / 10 - $windNoise + $windSpeed;
$scale: 1 + (random(2 * $sizeNoise * 10) / 10 - $sizeNoise) / 100;
.snowflake:nth-child(#{$count}) {
animation: animation-snowflake-#{$count} linear infinite;
animation-duration: $fallDuration +
random($fallDuration * 10) /
10 +
s;
animation-delay: random(2 * $fallDuration * 10) /
10 -
(2 * $fallDuration) +
s;
}
@keyframes animation-snowflake-#{$count} {
0% {
left: percentage($left / 100);
top: calc(0% - #{$screenOffset});
transform: scale($scale)
rotate3d(
random(100) / 100,
random(100) / 100,
random(100) / 100,
0deg
);
}
100% {
left: percentage(($left + $deltaLeft) / 100);
top: calc(100% + #{$screenOffset});
transform: scale($scale)
rotate3d(
random(100) / 100,
random(100) / 100,
random(100) / 100,
(random($rotation) + $rotation) *
((random(2) - 1) * 2 - 1) + deg
);
}
}
$count: $count - 1;
}
}