+
- {currentMessageLogs.data.map(message_data => (
+ {currentMessageLogs.data.map((message_data) => (
))}
diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
index 309da7f8..ea82b297 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
@@ -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 {
diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.module.scss b/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.module.scss
index 30b436b1..0fff2f3b 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.module.scss
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.module.scss
@@ -30,7 +30,7 @@
.tooltip_title {
font-size: 1.2rem;
- color: var(--dark_basic_text_color);
+ color: var(--dark_200_color);
}
.hold_progress_bar {
diff --git a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
index 88ee0605..e5725637 100644
--- a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
+++ b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
@@ -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]
: ""
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss
index 25e087f2..8859ce6d 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss
+++ b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss
@@ -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);
}
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.module.scss
index 1badfdda..ea175207 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.module.scss
+++ b/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.module.scss
@@ -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);
}
}
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.module.scss
index 906bafd3..25be3bb9 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.module.scss
+++ b/src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.module.scss
@@ -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;
}
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss
index 463a9c29..6549c5b3 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss
@@ -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);
}
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss
index 84aea69e..efdd0854 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss
@@ -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);
}
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
index dd0df0d8..6ac3c3cf 100644
--- a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
+++ b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
@@ -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;
}
diff --git a/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
index 085ea43c..57881896 100644
--- a/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
+++ b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
@@ -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);
}
\ No newline at end of file
diff --git a/src-ui/app/snackbar_controller/SnackbarController.module.scss b/src-ui/app/snackbar_controller/SnackbarController.module.scss
index 2db44fa9..b0b96ce9 100644
--- a/src-ui/app/snackbar_controller/SnackbarController.module.scss
+++ b/src-ui/app/snackbar_controller/SnackbarController.module.scss
@@ -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);
}
}
diff --git a/src-ui/app/splash_component/SplashComponent.module.scss b/src-ui/app/splash_component/SplashComponent.module.scss
index 489f338a..f279b21b 100644
--- a/src-ui/app/splash_component/SplashComponent.module.scss
+++ b/src-ui/app/splash_component/SplashComponent.module.scss
@@ -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;
}
diff --git a/src-ui/app/window_title_bar/WindowTitleBar.module.scss b/src-ui/app/window_title_bar/WindowTitleBar.module.scss
index 8aa100b1..048f5d31 100644
--- a/src-ui/app/window_title_bar/WindowTitleBar.module.scss
+++ b/src-ui/app/window_title_bar/WindowTitleBar.module.scss
@@ -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);
}
}
diff --git a/src-ui/logics/main/index.js b/src-ui/logics/main/index.js
index 9d142003..7cd492d6 100644
--- a/src-ui/logics/main/index.js
+++ b/src-ui/logics/main/index.js
@@ -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";
\ No newline at end of file
diff --git a/src-ui/logics/main/useMessageLogScroll.js b/src-ui/logics/main/useMessageLogScroll.js
new file mode 100644
index 00000000..425adcb0
--- /dev/null
+++ b/src-ui/logics/main/useMessageLogScroll.js
@@ -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,
+ };
+};
diff --git a/src-ui/utils.js b/src-ui/utils.js
index a2d38fc9..b7296f49 100644
--- a/src-ui/utils.js
+++ b/src-ui/utils.js
@@ -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);