every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'ui' into develop

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-12-31 15:37:26 +09:00
parent e595dc4025 5673225ecc
commit a1e2bc2e66
2 changed files with 39 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src-ui/app/splash_component/SplashComponent.jsx
View File

@@ -18,7 +18,7 @@ export const SplashComponent = () => {
); );
}; };
const SHOW_MEGAPHONE_TIME = 1000; const SHOW_MEGAPHONE_TIME = 500;
const AnnouncementsContainer = () => { const AnnouncementsContainer = () => {
const labels = ["Check the Latest Status", "最新の状況を確認"]; const labels = ["Check the Latest Status", "最新の状況を確認"];
@@ -33,7 +33,7 @@ const AnnouncementsContainer = () => {
const labelsTimeout = setTimeout(() => { const labelsTimeout = setTimeout(() => {
setIsLabelsActive(true); setIsLabelsActive(true);
}, SHOW_MEGAPHONE_TIME + 500); }, SHOW_MEGAPHONE_TIME + 15000);
let labelInterval; let labelInterval;
if (is_labels_active) { if (is_labels_active) {
@@ -52,14 +52,17 @@ const AnnouncementsContainer = () => {
return ( return (
<a <a
className={clsx(styles.announcements_button_wrapper, { [styles.is_shown]: is_shown })} className={clsx(styles.announcements_button_wrapper, {
[styles.is_shown]: is_shown,
[styles.is_labels_active]: is_labels_active,
})}
href="https://docs.google.com/spreadsheets/d/1_L5i-1U6PB1dnaPPTE_5uKMfqOpkLziPyRkiMLi4mqU/edit?usp=sharing" href="https://docs.google.com/spreadsheets/d/1_L5i-1U6PB1dnaPPTE_5uKMfqOpkLziPyRkiMLi4mqU/edit?usp=sharing"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
<button className={styles.announcements_button}> <button className={styles.announcements_button}>
<MegaphoneSvg className={styles.announcements_link_svg} /> <MegaphoneSvg className={styles.announcements_link_svg} />
<p className={clsx(styles.announcements_label, { [styles.is_labels_active]: is_labels_active })}> <p className={styles.announcements_label}>
{labels[currentLabelIndex]} {labels[currentLabelIndex]}
</p> </p>
</button> </button>

49
src-ui/app/splash_component/SplashComponent.module.scss
View File

@@ -7,22 +7,24 @@
.announcements_button_wrapper { .announcements_button_wrapper {
position: absolute; position: absolute;
top: 16px; top: 10px;
left: 20px; left: 10px;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s ease, border 0.3s ease;
padding: 4px 8px;
border-radius: 4px;
&.is_shown { &.is_shown {
opacity: 1; opacity: 1;
} }
} &.is_labels_active {
.announcements_button { & .announcements_label {
border: 1px solid var(--dark_700_color); display: block;
display: flex; animation: appear .3s ease;
justify-content: center; }
align-items: center; & .announcements_link_svg {
gap: 6px; color: var(--dark_basic_text_color);
padding: 4px 8px; }
border-radius: 4px; }
&:hover { &:hover {
background-color: var(--dark_825_color); background-color: var(--dark_825_color);
& .announcements_label { & .announcements_label {
@@ -35,20 +37,33 @@
&:active { &:active {
background-color: var(--dark_850_color); background-color: var(--dark_850_color);
} }
}
@keyframes appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.announcements_button {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
transition: all 0.1s ease; transition: all 0.1s ease;
} }
.announcements_label { .announcements_label {
font-size: 12px; font-size: 12px;
color: var(--dark_400_color); color: var(--dark_400_color);
opacity: 0; display: none;
transition: opacity 0.3s ease; transition: all 0.3s ease;
&.is_labels_active {
opacity: 1;
}
} }
.announcements_link_svg { .announcements_link_svg {
width: 20px; width: 20px;
color: var(--dark_600_color);
} }