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
2025-01-03 21:14:49 +09:00
parent 93975aab36 abeeb69afb
commit ffa1319b5b
34 changed files with 144 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/app/_index_css/root.css
View File

@@ -3,7 +3,7 @@
:root {
font-size: 62.5%;
color: #F2F2F2;
color: var(--dark_basic_text_color);
}
* {

9
src-ui/app/_index_css/variables.css
View File

@@ -20,6 +20,10 @@
--sent_400_color: #6197b4;
--received_300_color: #a861b4;
--error_bc_color: #bb4448;
--error_bc_active_color: #9c3938;
--success_bc_color: #368777;
--waring_color: #cb944f;
--dark_basic_text_color: #f2f2f2;
--dark_100_color: #f5f7fb;
@@ -48,8 +52,11 @@
--dark_975_color: #1a1b1d;
--dark_1000_color: #151517;
--dark_825_color_cc: #434447cc;
--dark_550_color_22: #94959922;
--dark_825_color_cc: #434447cc;
--dark_1000_color_66: #15151766;
--dark_1000_color_aa: #151517aa;
--dark_1000_color_dd: #151517dd;
--title_bar_height: 2rem;

1
src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss
View File

@@ -16,7 +16,6 @@
height: 100%;
font-size: 1.4rem;
resize: none;
color: var(--dark_basic_text_color);
&.is_disabled {
color: var(--dark_500_color);
pointer-events: none;

7
src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss
View File

@@ -22,11 +22,11 @@
bottom: 0;
left: 0;
border-radius: 0.4rem;
background-color: (#00000044);
background-color: var(--dark_1000_color_66);
backdrop-filter: blur(4rem);
border: solid 0.1rem var(--dark_700_color);
&:hover {
background-color: (#00000088);
background-color: var(--dark_1000_color_aa);
}
&:active {
backdrop-filter: blur(1.4rem);
@@ -35,7 +35,6 @@
.edit_button {
padding: 0.8rem 1.2rem;
color: var(--dark_basic_text_color);
height: 100%;
width: 100%;
font-size: 1.4rem;
@@ -62,7 +61,6 @@
}
.save_button_label {
color: var(--dark_basic_text_color);
font-size: 1.4rem;
}
@@ -91,7 +89,6 @@
.open_webpage_text {
font-size: 1.2rem;
color: var(--dark_basic_text_color);
}
.external_link_svg {

22
src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx
View File

@@ -1,12 +1,10 @@
import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import clsx from "clsx";
import CircularProgress from "@mui/material/CircularProgress";
import styles from "./DownloadModels.module.scss";
import {
RadioButton,
// DownloadModels,
} from "../index";
export const DownloadModels = (props) => {
const options = props.options.map(item => ({
...item,
@@ -25,25 +23,11 @@ export const DownloadModels = (props) => {
downloadStartFunction={props.downloadStartFunction}
/>
</>
// <div className={styles.container}>
// {props.models.map((option) => (
// <ModelSelector key={option.model_id} option={option} {...props}/>
// ))}
// </div>
);
};
const ModelSelector = ({option, ...props}) => {
const { t } = useTranslation();
const [circular_color, setCircularColor] = useState("");
const [circular_color_2, setCircularColor2] = useState("");
useEffect(() => {
const circular_color = getComputedStyle(document.documentElement).getPropertyValue("--dark_600_color");
setCircularColor(circular_color.trim());
const circular_color_2 = getComputedStyle(document.documentElement).getPropertyValue("--primary_300_color");
setCircularColor2(circular_color_2.trim());
}, []);
const renderContent = () => {
const circular_progress = Math.floor(option.progress / 10) * 10;
@@ -56,13 +40,13 @@ const ModelSelector = ({option, ...props}) => {
variant={(option.progress === 100) ? "indeterminate" : "determinate"}
value={circular_progress}
size="3rem"
sx={{ color: circular_color_2 }}
sx={{ color: "var(--primary_300_color)" }}
/>
<p className={styles.progress_label}>{`${Math.round(option.progress)}%`}</p>
</>
);
case option.is_pending:
return <CircularProgress size="3rem" sx={{ color: circular_color }}/>;
return <CircularProgress size="3rem" sx={{ color: "var(--dark_600_color)" }}/>;
case !option.is_downloaded:
return (
<button

2
src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.module.scss
View File

@@ -22,11 +22,9 @@
}
.download_button_label {
font-size: 1.2rem;
color: var(--dark_basic_text_color);
}
.progress_label {
position: absolute;
font-size: 1rem;
color: var(--dark_basic_text_color);
}

1
src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss
View File

@@ -8,7 +8,6 @@
.label {
font-size: 1.6rem;
font-weight: 400;
color: var(--dark_basic_text_color);
white-space: nowrap;
width: max-content;
}

7
src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
View File

@@ -31,13 +31,6 @@ export const Slider = (props) => {
backgroundColor: "var(--dark_800_color)",
padding: "0.6rem 1rem",
lineHeight: "1.15",
// top: "-1.4rem",
// "&::before": {
// left: "30%",
// width: "1rem",
// height: "1rem",
// clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
// },
},
},
"& .MuiSlider-markLabel": {

1
src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss
View File

@@ -16,7 +16,6 @@
height: 100%;
font-size: 1.4rem;
resize: none;
color: var(--dark_basic_text_color);
&.is_disable {
color: var(--dark_500_color);
pointer-events: none;

1
src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.module.scss
View File

@@ -41,5 +41,4 @@
.button_text {
font-size: 1.2rem;
color: var(--dark_basic_text_color);
}

4
src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss
View File

@@ -32,7 +32,6 @@
.item_text {
font-size: 1.4rem;
font-weight: 300;
color: var(--dark_basic_text_color);
&.is_redoable {
text-decoration: line-through;
}
@@ -56,7 +55,7 @@
.delete_svg {
width: 2.4rem;
color: #bb4448;
color: var(--error_bc_color);
}
.redo_svg {
@@ -77,7 +76,6 @@
.add_button {
padding: 0.8rem 1.2rem;
background-color: var(--primary_600_color);
color: var(--dark_basic_text_color);
font-size: 1.4rem;
border-radius: 0.4rem;
text-align: center;

1
src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.module.scss
View File

@@ -3,6 +3,7 @@
gap: 2.2rem;
flex-direction: column;
width: 72rem;
margin: auto;
// background-color: gray;
}

4
src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
View File

@@ -61,7 +61,6 @@
.device_label {
font-size: 1.8rem;
color: var(--dark_basic_text_color);
}
.device_contents {
@@ -76,6 +75,8 @@
display: flex;
flex-direction: column;
gap: 1.2rem;
justify-content: center;
align-items: center;
}
.device_dropdown_wrapper {
@@ -97,6 +98,7 @@
.device_secondary_label {
padding-left: 0.2rem;
padding-right: 0.4rem;
font-size: 1.4rem;
color: var(--dark_500_color);
white-space: nowrap;

4
src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
View File

@@ -39,7 +39,7 @@
background-color: var(--dark_850_color);
}
&.is_selected .controller_switcher_label {
color: var(--dark_basic_text_color);
color: var(--dark_200_color);
}
}
.controller_switcher_label {
@@ -92,7 +92,6 @@
transform: translateX(10%) rotate(90deg);
}
.sample_text_button_label {
color: var(--dark_basic_text_color);
position: absolute;
left: 50%;
top: 110%;
@@ -281,7 +280,6 @@
}
.restore_default_settings_button {
color: var(--dark_basic_text_color);
font-size: 1.2rem;
margin-top: 6rem;
padding: 0.8rem;

1
src-ui/app/config_page/sidebar_section/SidebarSection.module.scss
View File

@@ -22,7 +22,6 @@
display: flex;
justify-content: left;
align-items: center;
color: var(--dark_basic_text_color);
padding: 0.8rem 0 0.8rem 1rem;
cursor: pointer;
&:hover {

36
src-ui/app/main_page/MainPage.module.scss
View File

@@ -26,39 +26,3 @@
background-color: var(--dark_888_color);
position: relative;
}
.main_page_cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: (#000000cc);
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: center;
align-items: center;
backdrop-filter: blur(0.8rem);
color: var(--dark_basic_text_color);
}
.cover_message {
font-size: 2rem;
font-weight: 300;
}
.close_settings_window_button {
font-size: 1.6rem;
font-weight: 300;
padding: 1rem 1.4rem;
border-radius: 0.4rem;
background-color: var(--dark_888_color);
cursor: pointer;
&:hover {
background-color: var(--dark_825_color);
}
&:active {
background-color: var(--dark_925_color);
}
}

1
src-ui/app/main_page/main_section/language_selector/LanguageSelector.module.scss
View File

@@ -46,5 +46,4 @@
.language_label {
font-size: 1.4rem;
color: var(--dark_basic_text_color);
}

46
src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
View File

@@ -1,50 +1,26 @@
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import React, { useRef, useLayoutEffect, useEffect } from "react";
import styles from "./LogBox.module.scss";
import { store } from "@store";
import { MessageContainer } from "./message_container/MessageContainer";
import { scrollToBottom } from "@utils";
import { useMessage } from "@logics_common";
import { useMessageLogScroll } from "@logics_main";
import { store } from "@store";
export const LogBox = () => {
const { currentMessageLogs } = useMessage();
const log_container_ref = useRef(null);
const [is_scrolling, setIsScrolling] = useState(false);
const { scrollToBottom, isScrolling } = useMessageLogScroll();
const logContainerRef = useRef(null);
useLayoutEffect(() => {
store.log_box_ref = log_container_ref;
if (!is_scrolling) {
scrollToBottom(store.log_box_ref);
// scrollToBottom(store.log_box_ref, true); [Fix me]
store.log_box_ref = logContainerRef;
if (!isScrolling) {
scrollToBottom();
}
}, [currentMessageLogs.data]);
useEffect(() => {
const handleScroll = () => {
const element = log_container_ref.current;
if (!element) return;
const currentScrollTop = element.scrollTop;
const at_bottom = element.scrollHeight - currentScrollTop === element.clientHeight;
if (at_bottom) {
setIsScrolling(false);
} else {
setIsScrolling(true);
}
};
const element = log_container_ref.current;
element.addEventListener("scroll", handleScroll);
return () => {
element.removeEventListener("scroll", handleScroll);
};
}, []);
}, [currentMessageLogs.data, isScrolling]);
return (
<div id="log_container" className={styles.container} ref={log_container_ref}>
<div id="log_container" className={styles.container} ref={logContainerRef}>
<MessageLogUiSizeController />
{currentMessageLogs.data.map(message_data => (
{currentMessageLogs.data.map((message_data) => (
<MessageContainer key={message_data.id} {...message_data} />
))}
</div>

5
src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
View File

@@ -72,18 +72,21 @@
display: flex;
flex-direction: column;
&.sent_message {
width: 100%;
align-items: end;
text-align: end;
}
&.received_message {
width: 100%;
align-items: start;
}
}
.message_main {
color: var(--dark_basic_text_color);
user-select: text;
font-size: 1.4em;
overflow-wrap: break-word;
max-width: 100%;
}
.message_second {

2
src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.module.scss
View File

@@ -30,7 +30,7 @@
.tooltip_title {
font-size: 1.2rem;
color: var(--dark_basic_text_color);
color: var(--dark_200_color);
}
.hold_progress_bar {

9
src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
View File

@@ -3,8 +3,7 @@ import styles from "./MessageInputBox.module.scss";
import SendMessageSvg from "@images/send_message.svg?react";
import { useMessage } from "@logics_common";
import { useSendMessageButtonType, useEnableAutoClearMessageInputBox } from "@logics_configs";
import { store } from "@store";
import { scrollToBottom } from "@utils";
import { useMessageLogScroll } from "@logics_main";
export const MessageInputBox = () => {
const [message_history, setMessageHistory] = useState([]);
@@ -21,6 +20,8 @@ export const MessageInputBox = () => {
const { currentEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
const { currentSendMessageButtonType } = useSendMessageButtonType();
const { scrollToBottom } = useMessageLogScroll();
useEffect(() => {
if (currentMessageLogs.data) {
const sentMessages = currentMessageLogs.data
@@ -40,7 +41,7 @@ export const MessageInputBox = () => {
if (currentEnableAutoClearMessageInputBox.data) updateMessageInputValue("");
setTimeout(() => {
scrollToBottom(store.log_box_ref);
scrollToBottom();
}, 10);
setHistoryIndex(-1);
@@ -69,7 +70,7 @@ export const MessageInputBox = () => {
if (history_index > -1) {
const new_index = history_index - 1;
setHistoryIndex(new_index);
setInputValue(
updateMessageInputValue(
new_index >= 0
? message_history[message_history.length - 1 - new_index]
: ""

2
src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss
View File

@@ -57,7 +57,6 @@
.selected_language {
font-size: 1.2rem;
color: var(--dark_basic_text_color);
}
.arrow_left_svg {
@@ -66,7 +65,6 @@
margin: 0 0.2rem;
transform: rotate(180deg);
width: 1.6rem;
color: var(--dark_basic_text_color);
&.reverse {
transform: rotate(0deg);
}

2
src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.module.scss
View File

@@ -31,6 +31,6 @@
font-size: 1.2rem;
color: var(--dark_500_color);
&.is_hovered {
color: var(--dark_basic_text_color);
color: var(--dark_200_color);
}
}

2
src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.module.scss
View File

@@ -21,7 +21,7 @@
}
&.is_selected {
background-color: var(--dark_800_color);
color: var(--dark_basic_text_color);
color: var(--dark_200_color);
cursor: default;
pointer-events: none;
}

3
src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss
View File

@@ -24,7 +24,6 @@
.label {
font-size: 1.2rem;
color: var(--dark_basic_text_color);
white-space: nowrap;
}
@@ -32,5 +31,5 @@
margin-left: 0.2rem;
padding-bottom: 0.2rem;
width: 1.8rem;
color: #cb944f;
color: var(--waring_color);
}

6
src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss
View File

@@ -3,8 +3,7 @@
bottom: 100%;
width: 100%;
height: 26rem;
background-color: (#000000dd);
// background-color: (var(--dark_875_color) + 80);
background-color: var(--dark_1000_color_dd);
backdrop-filter: blur(0.1rem);
display: flex;
justify-content: center;
@@ -75,7 +74,7 @@ $box_size: 6.8rem;
bottom: 0;
width: 100%;
height: 100%;
background-color: (#22222233);
background-color: var(--dark_1000_color_66);
display: flex;
justify-content: center;
align-items: start;
@@ -87,5 +86,4 @@ $box_size: 6.8rem;
font-size: 1.4rem;
text-align: center;
text-wrap: balance;
color: var(--dark_basic_text_color);
}

3
src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
View File

@@ -35,11 +35,9 @@
gap: 0.8rem;
}
$basic_label_color: var(--dark_basic_text_color);
$pending_label_color: var(--dark_500_color);
.switch_label {
font-size: 1.4rem;
color: $basic_label_color;
&.is_compact_mode {
display: none;
}
@@ -50,7 +48,6 @@ $pending_label_color: var(--dark_500_color);
.switch_svg {
width: 1.8rem;
color: $basic_label_color;
&.is_pending {
color: $pending_label_color;
}

11
src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
View File

@@ -66,7 +66,6 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--dark_basic_text_color);
}
.accept_button {
@@ -91,19 +90,19 @@
border-radius: 0.4rem;
}
&.is_latest_version_already {
background-color: var(--dark_800_color);
background-color: var(--dark_825_color);
pointer-events: none;
}
}
}
.deny_button {
background-color: var(--dark_800_color);
background-color: var(--dark_825_color);
&:hover {
background-color: var(--dark_700_color);
background-color: var(--dark_800_color);
}
&:active {
background-color: var(--dark_800_color);
background-color: var(--dark_850_color);
}
}
@@ -137,7 +136,6 @@
gap: 0.6rem;
}
.version_desc_point {
background-color: var(--dark_basic_text_color);
width: 0.3rem;
border-radius: 50%;
aspect-ratio: 1 / 1;
@@ -147,5 +145,4 @@
max-width: 48rem;
// text-align: center;
font-weight: 300;
color: var(--dark_basic_text_color);
}

4
src-ui/app/snackbar_controller/SnackbarController.module.scss
View File

@@ -4,10 +4,10 @@
padding: 2rem;
color: #fff;
&.is_success {
background-color: #368777;
background-color: var(--success_bc_color);
}
&.is_error {
background-color: #bb4448;
background-color: var(--error_bc_color);
}
}

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

@@ -22,13 +22,13 @@
animation: appear .3s ease;
}
& .announcements_link_svg {
color: var(--dark_basic_text_color);
color: var(--dark_200_color);
}
}
&:hover {
background-color: var(--dark_825_color);
& .announcements_label {
color: var(--dark_basic_text_color);
color: var(--dark_200_color);
}
& .announcements_link_svg {
color: var(--primary_300_color);
@@ -79,14 +79,14 @@
width: 68px;
aspect-ratio: 1 / 1;
&:hover {
background-color: #bb4448;
background-color: var(--error_bc_color);
& .x_mark_svg {
color: var(--dark_200_color);
transform: rotate(45deg);
}
}
&:active {
background-color: #9c3938;
background-color: var(--error_bc_active_color);
}
transition: all 0.1s ease;
}

4
src-ui/app/window_title_bar/WindowTitleBar.module.scss
View File

@@ -61,10 +61,10 @@
}
.close_button {
&:hover {
background-color: #bb4448;
background-color: var(--error_bc_color);
}
&:active {
background-color: #9c3938;
background-color: var(--error_bc_active_color);
}
}

1
src-ui/logics/main/index.js
View File

@@ -2,5 +2,6 @@ export { useIsVisibleResendButton } from "./useIsVisibleResendButton";
export { useIsMainPageCompactMode } from "./useIsMainPageCompactMode";
export { useLanguageSettings } from "./useLanguageSettings";
export { useMainFunction } from "./useMainFunction";
export { useMessageLogScroll } from "./useMessageLogScroll";
export { useMessageInputBoxRatio } from "./useMessageInputBoxRatio";
export { useSelectableLanguageList } from "./useSelectableLanguageList";

85
src-ui/logics/main/useMessageLogScroll.js Normal file
View File

@@ -0,0 +1,85 @@
import { useRef, useEffect, useCallback, useState } from "react";
import { store } from "@store";
export const useMessageLogScroll = () => {
const [isScrolling, setIsScrolling] = useState(false);
const isSmoothScrollingRef = useRef(false);
const animationFrameRef = useRef(null);
const cancelSmoothScroll = () => {
if (animationFrameRef.current) {
cancelAnimationFrame(animationFrameRef.current);
animationFrameRef.current = null;
}
isSmoothScrollingRef.current = false;
};
const scrollToBottom = useCallback((smooth = false) => {
const element = store.log_box_ref.current;
if (!element) return;
const scrollHeight = element.scrollHeight - element.clientHeight;
if (smooth) {
cancelSmoothScroll();
isSmoothScrollingRef.current = true;
const duration = 100;
const startTime = performance.now();
const initialScrollTop = element.scrollTop;
const scroll = (currentTime) => {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const easeInOutQuad = (t) =>
t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
element.scrollTop =
initialScrollTop + (scrollHeight - initialScrollTop) * easeInOutQuad(progress);
if (progress < 1) {
animationFrameRef.current = requestAnimationFrame(scroll);
} else {
isSmoothScrollingRef.current = false;
}
};
animationFrameRef.current = requestAnimationFrame(scroll);
} else {
cancelSmoothScroll();
element.scrollTop = scrollHeight;
}
}, []);
useEffect(() => {
const handleScroll = () => {
if (isSmoothScrollingRef.current) return;
const element = store.log_box_ref.current;
if (!element) return;
const atBottom =
Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) < 5;
setIsScrolling(!atBottom);
};
const element = store.log_box_ref.current;
if (element) {
element.addEventListener("scroll", handleScroll);
}
return () => {
if (element) {
element.removeEventListener("scroll", handleScroll);
}
cancelSmoothScroll();
};
}, []);
return {
scrollToBottom,
isScrolling,
};
};

28
src-ui/utils.js
View File

@@ -31,34 +31,6 @@ export const randomIntMinMax = (min, max) => {
return int;
};
export const scrollToBottom = (ref, smooth = false) => {
const element = ref.current;
const scroll_height = element.scrollHeight - element.clientHeight;
if (smooth) {
const duration = 300; // スクロールにかける時間（ミリ秒）
const start_time = performance.now();
const scroll_top = element.scrollTop;
const scroll = (current_time) => {
const elapsed = current_time - start_time;
const progress = Math.min(elapsed / duration, 1);
const ease_in_out_quad = (t) => t < 0.5
? 2 * t * t
: -1 + (4 - 2 * t) * t;
element.scrollTop = scroll_top + (scroll_height - scroll_top) * ease_in_out_quad(progress);
if (progress < 1) {
requestAnimationFrame(scroll);
}
};
requestAnimationFrame(scroll);
} else {
element.scrollTop = scroll_height;
}
};
export const updateLabelsById = (data_array, updates) => {
return data_array.map(item => {
const update = updates.find(update_item => update_item.id === item.id);