From 99cd3d1df0454ae076ddda90dda658da7c4e42d5 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Fri, 11 Oct 2024 04:25:34 +0900 Subject: [PATCH 1/2] [bugfix] Main Page: Message Box Ratio. store the data in float and fix the bug that was set bit off message box's height. --- src-python/config.py | 2 +- src-python/webui_controller.py | 2 +- .../main_section/message_container/MessageContainer.jsx | 4 ++-- src-ui/app/window_title_bar/WindowTitleBar.module.scss | 2 +- src-ui/utils/variables.css | 1 + 5 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src-python/config.py b/src-python/config.py index 2aa8ac28..3537c2f5 100644 --- a/src-python/config.py +++ b/src-python/config.py @@ -399,7 +399,7 @@ class Config: @MESSAGE_BOX_RATIO.setter def MESSAGE_BOX_RATIO(self, value): - if isinstance(value, int) and self.MESSAGE_BOX_RATIO_RANGE[0] <= value <= self.MESSAGE_BOX_RATIO_RANGE[1]: + if isinstance(value, float): self._MESSAGE_BOX_RATIO = value saveJson(self.PATH_CONFIG, inspect.currentframe().f_code.co_name, value) diff --git a/src-python/webui_controller.py b/src-python/webui_controller.py index 6632e3a0..3a48a7cd 100644 --- a/src-python/webui_controller.py +++ b/src-python/webui_controller.py @@ -549,7 +549,7 @@ class Controller: @staticmethod def setMessageBoxRatio(data, *args, **kwargs) -> dict: - config.MESSAGE_BOX_RATIO = int(data) + config.MESSAGE_BOX_RATIO = float(data) return {"status":200, "result":config.MESSAGE_BOX_RATIO} @staticmethod diff --git a/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx b/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx index 944c3fcc..c19158cf 100644 --- a/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx +++ b/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx @@ -49,8 +49,8 @@ export const MessageContainer = () => { const container_height = container_ref.current.offsetHeight; const container_padding_bottom = parseFloat(window.getComputedStyle(container_ref.current).paddingBottom); const total_height = container_height - container_padding_bottom; - - return ((ratio / 100) * total_height / 10) | 0; // 10px = 1rem + if (total_height === 0) return 0; + return ((ratio / 100) * total_height / 10); // 10px = 1rem }; diff --git a/src-ui/app/window_title_bar/WindowTitleBar.module.scss b/src-ui/app/window_title_bar/WindowTitleBar.module.scss index 75785d0e..8aa100b1 100644 --- a/src-ui/app/window_title_bar/WindowTitleBar.module.scss +++ b/src-ui/app/window_title_bar/WindowTitleBar.module.scss @@ -11,7 +11,7 @@ width: 100%; justify-content: space-between; align-items: center; - height: 2rem; + height: var(--title_bar_height); margin-top: 0.4rem; } diff --git a/src-ui/utils/variables.css b/src-ui/utils/variables.css index 1b462bf0..9cd88d28 100644 --- a/src-ui/utils/variables.css +++ b/src-ui/utils/variables.css @@ -46,6 +46,7 @@ --dark_1000_color: #151517; + --title_bar_height: 2rem; --main_page_topbar_height: 4.8rem; --config_page_sidebar_width: 18rem; --config_page_topbar_height: 8rem; From 0d8eb887f7314ddc26e866f2590a173c84961d1d Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Fri, 11 Oct 2024 17:12:16 +0900 Subject: [PATCH 2/2] [bugfix] Fix the separator position, that was bit off again, when the Ui scaling bigger than 100%. --- .../message_container/MessageContainer.jsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx b/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx index c19158cf..2fb696c9 100644 --- a/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx +++ b/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx @@ -1,14 +1,17 @@ import { useResizable } from "react-resizable-layout"; import { useRef, useEffect, useState } from "react"; import styles from "./MessageContainer.module.scss"; -import { appWindow } from "@tauri-apps/api/window"; // Tauriのwindow APIをインポート +import { appWindow } from "@tauri-apps/api/window"; import { LogBox } from "./log_box/LogBox"; import { MessageInputBox } from "./message_input_box/MessageInputBox"; import { useMessageInputBoxRatio } from "@logics_main"; +import { useUiScaling } from "@logics_configs"; export const MessageContainer = () => { const { currentMessageInputBoxRatio, setMessageInputBoxRatio } = useMessageInputBoxRatio(); + const { currentUiScaling } = useUiScaling(); const [message_box_height_in_rem, setMessageBoxHeightInRem] = useState(10); + const FONT_SIZE_STANDARD = 10 * currentUiScaling.data / 100; // 10px = 1rem const container_ref = useRef(null); const log_box_ref = useRef(null); @@ -37,7 +40,9 @@ export const MessageContainer = () => { }); useEffect(() => { - setMessageBoxHeightInRem((position / 10) - 1.5); + // Note: I thought the part "1.4" is message box bottom padding + (message box separator height/2) + // but it should be fixed at 1.4. Idk why, tho. + setMessageBoxHeightInRem((position / FONT_SIZE_STANDARD) - 1.4); }, [position]); @@ -50,7 +55,7 @@ export const MessageContainer = () => { const container_padding_bottom = parseFloat(window.getComputedStyle(container_ref.current).paddingBottom); const total_height = container_height - container_padding_bottom; if (total_height === 0) return 0; - return ((ratio / 100) * total_height / 10); // 10px = 1rem + return ((ratio / 100) * total_height / FONT_SIZE_STANDARD); };