Merge branch 'add_message_log_ui_scaling' into for_webui

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)
 

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();
 

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -24,6 +24,7 @@ export const Appearance = () => {
         <>
             <UiLanguageContainer />
             <UiScalingContainer />
+            <MessageLogUiScalingContainer />
 
 
 
@@ -141,3 +142,46 @@ const UiScalingContainer = () => {
         />
     );
 };
+
+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 (
+        <SliderContainer
+            label={t("config_page.textbox_ui_size.label") + " (%)"}
+            min="40"
+            max="200"
+            onchangeCommittedFunction={onchangeCommittedFunction}
+            onchangeFunction={onchangeFunction}
+            variable={ui_message_log_ui_scaling}
+            marks={marks}
+            step={null}
+            track={false}
+        />
+    );
+};

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

@@ -41,9 +41,23 @@ export const LogBox = () => {
 
     return (
         <div id="log_container" className={styles.container} ref={log_container_ref}>
+            <MessageLogUiSizeController />
             {currentMessageLogs.data.map(message_data => (
                 <MessageContainer key={message_data.id} {...message_data} />
             ))}
         </div>
     );
 };
+
+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;
+};

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;
-}
+    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.
-
-.text {
-    overflow-wrap: break-word;
 }

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;
 }

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,
+    };
+};

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,

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");