From af17e057e8195ef94a984d7e5b2c41891b217313 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Sun, 4 May 2025 10:03:37 +0900 Subject: [PATCH] [Update] Add crown emoji to supporter label. Add tooltip that shows their supporting period. Add icon rotate animation when hovered supporter's image. --- .../SupportUsContainer.module.scss | 1 + .../supporters_wrapper/SupportersWrapper.jsx | 26 +++++++++++++++++-- .../SupportersWrapper.module.scss | 16 +++++++++--- .../sidebar_section/SidebarSection.jsx | 4 ++- .../SidebarSection.module.scss | 13 ++++++++-- .../DownloadModelsContainer.module.scss | 1 + 6 files changed, 53 insertions(+), 8 deletions(-) diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss b/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss index 47ea8636..ef7ef6fc 100644 --- a/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/supporters/support_us_container/SupportUsContainer.module.scss @@ -1,4 +1,5 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1); +// Duplicated @keyframes revealTopImg { 0% { diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx index c6397255..73209c10 100644 --- a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx @@ -1,5 +1,6 @@ import React, { useState, useCallback, useEffect } from "react"; import clsx from "clsx"; +import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; import ArrowLeftSvg from "@images/arrow_left.svg?react"; import styles from "./SupportersWrapper.module.scss"; import { shuffleArray, randomIntMinMax, randomMinMax } from "@utils"; @@ -261,18 +262,39 @@ const SupporterLabelComponent = ({ item, target_plan, chato_src }) => { const SupporterPeriodContainer = ({ settings, calc_support_period }) => { const period_data = extractKeys(settings, calc_support_period); + const offset = { + popper: { + sx: { + [`&.${tooltipClasses.popper}[data-popper-placement*="top"] .${tooltipClasses.tooltip}`]: { marginBottom: "0.2em" }, + } + } + }; + return (
{Object.entries(period_data).map(([key, item], index) => { if (item === "") return null; - const class_name = clsx(styles.period_box, { + const period_box_class_name = clsx(styles.period_box, { [styles.mogu_bar]: item === "mogu_2000", [styles.mochi_bar]: item === "mochi_1000", [styles.fuwa_bar]: item === "fuwa_500", [styles.basic_bar]: item === "basic_300", }); - return
; + return ( + {key}

+ } + placement="top" + slotProps={offset} + > +
+
+
+ + ); })}
); diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss index 19cbb0ac..c0c35d76 100644 --- a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss @@ -13,7 +13,7 @@ align-content: start; flex-wrap: wrap; column-gap: 1.8rem; - row-gap: 1rem; + row-gap: 0.4rem; } .supporter_image_container { @@ -21,12 +21,14 @@ width: 18rem; display: flex; flex-direction: column; - gap: 0.3rem; } .supporter_image_wrapper { position: relative; overflow: hidden; + &:hover .supporter_icon_wrapper{ + transform: rotate(360deg); + } } .supporter_image { @@ -54,7 +56,8 @@ height: 1.4rem; } } - +$progress_ease: cubic-bezier(0, 1, 0.75, 1); +// Duplicated .supporter_icon_wrapper { height: 4rem; aspect-ratio: 1 /1; @@ -62,6 +65,7 @@ background-color: #ffffff; overflow: hidden; position: relative; + transition: transform 0.6s $progress_ease; } .supporter_icon { @@ -227,6 +231,12 @@ background-color: var(--dark_800_color); } } +.period_box_wrapper { + padding: 0.3rem 0 0.4rem 0; +} +.tooltip_period_label { + font-size: 1.4rem; +} .progress_bar { diff --git a/src-ui/app/config_page/sidebar_section/SidebarSection.jsx b/src-ui/app/config_page/sidebar_section/SidebarSection.jsx index f845a733..c2342aa2 100644 --- a/src-ui/app/config_page/sidebar_section/SidebarSection.jsx +++ b/src-ui/app/config_page/sidebar_section/SidebarSection.jsx @@ -45,7 +45,9 @@ const Tab = (props) => { const getLabel = () => { if (props.tab_id === "vr") return "VR"; - if (props.tab_id === "supporters") return "Supporters"; + if (props.tab_id === "supporters") return ( + <>Supporters👑 + ); if (props.tab_id === "about_vrct") return "About VRCT"; return t(`config_page.side_menu_labels.${props.tab_id}`); }; diff --git a/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss b/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss index 2e27f0a8..56977d6f 100644 --- a/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss +++ b/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss @@ -60,9 +60,18 @@ } .tab_text { - overflow: hidden; + // overflow: hidden; font-size: 1.6rem; - text-overflow: ellipsis; + // text-overflow: ellipsis; + position: relative; +} +.crown_emoji { + font-size: 1.6rem; + position: absolute; + top: 40%; + left: 100%; + transform: translateY(-50%); + padding-left: 0.4rem; } .separated_tabs_wrapper { diff --git a/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.module.scss b/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.module.scss index 0eabf677..dc60a0d0 100644 --- a/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.module.scss +++ b/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.module.scss @@ -51,6 +51,7 @@ } $progress_ease: cubic-bezier(0, 1, 0.75, 1); +// Duplicated .progress_bar { height: 8px; transition: width 0.3s $progress_ease;