diff --git a/src-python/config.py b/src-python/config.py
index 7b41b86f..74e0e7c0 100644
--- a/src-python/config.py
+++ b/src-python/config.py
@@ -377,7 +377,7 @@ class Config:
@TEXTBOX_UI_SCALING.setter
def TEXTBOX_UI_SCALING(self, value):
- if isinstance(value, int) and self.TEXTBOX_UI_SCALING_RANGE[0] <= value <= self.TEXTBOX_UI_SCALING_RANGE[1]:
+ if isinstance(value, int):
self._TEXTBOX_UI_SCALING = value
saveJson(self.PATH_CONFIG, inspect.currentframe().f_code.co_name, value)
diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index 43be2060..28cd4be8 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -32,6 +32,7 @@ import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClear
import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
import { useUiLanguage } from "@logics_configs/useUiLanguage";
import { useUiScaling } from "@logics_configs/useUiScaling";
+import { useMessageLogUiScaling } from "@logics_configs/useMessageLogUiScaling";
import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
import { useLanguageSettings } from "@logics_main/useLanguageSettings";
@@ -64,6 +65,7 @@ const StartPythonFacadeComponent = () => {
const { getSendMessageButtonType } = useSendMessageButtonType();
const { getUiLanguage } = useUiLanguage();
const { getUiScaling } = useUiScaling();
+ const { getMessageLogUiScaling } = useMessageLogUiScaling();
const {
getSelectedPresetTabNumber,
@@ -83,6 +85,7 @@ const StartPythonFacadeComponent = () => {
asyncStartPython().then((result) => {
getUiLanguage();
getUiScaling();
+ getMessageLogUiScaling();
getIsMainPageCompactMode();
getMessageInputBoxRatio();
diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
index 36f38671..ee5c7bd2 100644
--- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
@@ -24,6 +24,7 @@ export const Appearance = () => {
<>
+
@@ -140,4 +141,47 @@ const UiScalingContainer = () => {
track={false}
/>
);
+};
+
+import { useMessageLogUiScaling } from "@logics_configs/useMessageLogUiScaling";
+
+const MessageLogUiScalingContainer = () => {
+ const { t } = useTranslation();
+ const { currentMessageLogUiScaling, setMessageLogUiScaling } = useMessageLogUiScaling();
+ const [ui_message_log_ui_scaling, setUiMessageLogUiScaling] = useState(currentMessageLogUiScaling.data);
+
+ const onchangeFunction = (value) => {
+ setUiMessageLogUiScaling(value);
+ };
+ const onchangeCommittedFunction = (value) => {
+ setMessageLogUiScaling(value);
+ };
+ useEffect(() => {
+ setUiMessageLogUiScaling(currentMessageLogUiScaling.data);
+ }, [currentMessageLogUiScaling.data]);
+
+ const createMarks = (min, max) => {
+ const marks = [];
+ for (let value = min; value <= max; value += 10) {
+ const label = ([50,70,130,140,160,170,190].includes(value)) ? "" : value;
+ marks.push({ value, label: `${label}` });
+ }
+ return marks;
+ };
+
+ const marks = createMarks(40, 200);
+
+ return (
+
+ );
};
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
index b04ef63b..5df72203 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
+++ b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
@@ -41,9 +41,23 @@ export const LogBox = () => {
return (
+
{currentMessageLogs.data.map(message_data => (
))}
);
+};
+
+import { useMessageLogUiScaling } from "@logics_configs/useMessageLogUiScaling";
+const MessageLogUiSizeController = () => {
+ const { currentMessageLogUiScaling } = useMessageLogUiScaling();
+ const font_size = currentMessageLogUiScaling.data / 100;
+
+ useEffect(() => {
+ const log_container_el = document.getElementById("log_container");
+ log_container_el.style.setProperty("font-size", `${font_size}rem`);
+ }, [currentMessageLogUiScaling.data]);
+
+ return null;
};
\ No newline at end of file
diff --git a/src-ui/app/main_page/main_section/message_container/log_box/LogBox.module.scss b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.module.scss
index 1a29c1dc..35d49601 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/LogBox.module.scss
+++ b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.module.scss
@@ -6,8 +6,5 @@
overflow: auto;
border-radius: 0.8rem;
padding: 1rem;
-}
-
-.text {
- overflow-wrap: break-word;
+ font-size: 1rem; // This is the standard font size for message logs, and is controlled by JavaScript. All child elements this are generally expressed in "em" and are affected by the font size setting here.
}
\ No newline at end of file
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 c92335b1..6ac8ecee 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
@@ -1,7 +1,7 @@
@import "@scss_mixins";
.container {
- margin-bottom: 1rem;
+ margin-bottom: 1em;
width: 100%;
flex-direction: column;
display: flex;
@@ -18,7 +18,7 @@
.info_box {
position: relative;
display: flex;
- gap: 0.8rem;
+ gap: 0.8em;
justify-content: center;
&.sent_message {
align-items: end;
@@ -30,16 +30,16 @@
}
.loader {
- @include loader(0.8rem, 0.1rem, left, -1rem);
+ @include loader(0.8em, 0.1em, left, -1em);
}
.time {
- font-size: 1rem;
+ font-size: 1em;
color: var(--dark_600_color);
}
.category {
- font-size: 1rem;
+ font-size: 1em;
&.sent_message {
color: var(--sent_400_color);
}
@@ -63,11 +63,11 @@
.message_main {
color: var(--dark_basic_text_color);
user-select: text;
- font-size: 1.4rem;
+ font-size: 1.4em;
}
.message_second {
color: var(--dark_450_color);
user-select: text;
- font-size: 1rem;
+ font-size: 1em;
}
\ No newline at end of file
diff --git a/src-ui/logics/configs/useMessageLogUiScaling.js b/src-ui/logics/configs/useMessageLogUiScaling.js
new file mode 100644
index 00000000..625f6263
--- /dev/null
+++ b/src-ui/logics/configs/useMessageLogUiScaling.js
@@ -0,0 +1,24 @@
+import { useStore_MessageLogUiScaling } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMessageLogUiScaling = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentMessageLogUiScaling, updateMessageLogUiScaling, pendingMessageLogUiScaling } = useStore_MessageLogUiScaling();
+
+ const getMessageLogUiScaling = () => {
+ pendingMessageLogUiScaling();
+ asyncStdoutToPython("/get/data/textbox_ui_scaling");
+ };
+
+ const setMessageLogUiScaling = (selected_ui_scaling) => {
+ pendingMessageLogUiScaling();
+ asyncStdoutToPython("/set/data/textbox_ui_scaling", selected_ui_scaling);
+ };
+
+ return {
+ currentMessageLogUiScaling,
+ getMessageLogUiScaling,
+ updateMessageLogUiScaling,
+ setMessageLogUiScaling,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index 0b07554f..c74e6681 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -28,6 +28,7 @@ import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonTy
import { useUiLanguage } from "@logics_configs/useUiLanguage";
import { useUiScaling } from "@logics_configs/useUiScaling";
+import { useMessageLogUiScaling } from "@logics_configs/useMessageLogUiScaling";
export const useReceiveRoutes = () => {
const { updateIsMainPageCompactMode } = useIsMainPageCompactMode();
@@ -65,6 +66,7 @@ export const useReceiveRoutes = () => {
const { updateSendMessageButtonType } = useSendMessageButtonType();
const { updateUiLanguage } = useUiLanguage();
const { updateUiScaling } = useUiScaling();
+ const { updateMessageLogUiScaling } = useMessageLogUiScaling();
const {
updateVolumeVariable_Mic,
updateVolumeVariable_Speaker,
@@ -203,6 +205,9 @@ export const useReceiveRoutes = () => {
"/get/data/ui_scaling": updateUiScaling,
"/set/data/ui_scaling": updateUiScaling,
+ "/get/data/textbox_ui_scaling": updateMessageLogUiScaling,
+ "/set/data/textbox_ui_scaling": updateMessageLogUiScaling,
+
// Others Tab
"/get/data/auto_clear_message_box": updateEnableAutoClearMessageBox,
"/set/enable/auto_clear_message_box": updateEnableAutoClearMessageBox,
diff --git a/src-ui/store.js b/src-ui/store.js
index 2bb8531d..7afbd47c 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -171,6 +171,7 @@ export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useS
// Appearance
export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook("en", "UiLanguage");
export const { atomInstance: Atom_UiScaling, useHook: useStore_UiScaling } = createAtomWithHook(100, "UiScaling");
+export const { atomInstance: Atom_MessageLogUiScaling, useHook: useStore_MessageLogUiScaling } = createAtomWithHook(100, "MessageLogUiScaling");
export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");