From 5d9da2bf1c560a0ee8d8ed61dc090295d8c46b9d Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 10 Oct 2024 22:09:10 +0900
Subject: [PATCH] [Update] Add Transparency.
---
src-python/config.py | 2 +-
src-ui/app/App.jsx | 14 ++++++
.../setting_box/appearance/Appearance.jsx | 43 +++++++++++++++++++
src-ui/logics/configs/useTransparency.js | 24 +++++++++++
src-ui/logics/useReceiveRoutes.js | 5 +++
src-ui/store.js | 1 +
6 files changed, 88 insertions(+), 1 deletion(-)
create mode 100644 src-ui/logics/configs/useTransparency.js
diff --git a/src-python/config.py b/src-python/config.py
index 1d9b530d..e5ac086e 100644
--- a/src-python/config.py
+++ b/src-python/config.py
@@ -347,7 +347,7 @@ class Config:
@TRANSPARENCY.setter
def TRANSPARENCY(self, value):
- if isinstance(value, int) and self.TRANSPARENCY_RANGE[0] <= value <= self.TRANSPARENCY_RANGE[1]:
+ if isinstance(value, int):
self._TRANSPARENCY = 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 9533054e..8c8fb406 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -13,6 +13,7 @@ export const App = () => {
+
@@ -38,6 +39,7 @@ import { useUiLanguage } from "@logics_configs/useUiLanguage";
import { useUiScaling } from "@logics_configs/useUiScaling";
import { useMessageLogUiScaling } from "@logics_configs/useMessageLogUiScaling";
import { useSelectedFontFamily } from "@logics_configs/useSelectedFontFamily";
+import { useTransparency } from "@logics_configs/useTransparency";
import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
import { useLanguageSettings } from "@logics_main/useLanguageSettings";
@@ -72,6 +74,7 @@ const StartPythonFacadeComponent = () => {
const { getUiScaling } = useUiScaling();
const { getMessageLogUiScaling } = useMessageLogUiScaling();
const { getSelectedFontFamily } = useSelectedFontFamily();
+ const { getTransparency } = useTransparency();
const {
getSelectedPresetTabNumber,
@@ -93,6 +96,7 @@ const StartPythonFacadeComponent = () => {
getMessageLogUiScaling();
getIsMainPageCompactMode();
getMessageInputBoxRatio();
+ getTransparency();
asyncFetchFonts();
getSelectedFontFamily();
@@ -231,4 +235,14 @@ const useAsyncFetchFonts = () => {
}
};
return { asyncFetchFonts };
+};
+
+
+const TransparencyController = () => {
+ const { currentTransparency } = useTransparency();
+ useEffect(() => {
+ document.documentElement.style.setProperty("opacity", `${currentTransparency.data / 100}`);
+ }, [currentTransparency.data]);
+
+ return null;
};
\ No newline at end of file
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 2c14f4da..69fa94f3 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
@@ -26,6 +26,7 @@ export const Appearance = () => {
+
@@ -209,4 +210,46 @@ const FontFamilyContainer = () => {
state={currentSelectedFontFamily.state}
/>
);
+};
+
+import { useTransparency } from "@logics_configs/useTransparency";
+
+const TransparencyContainer = () => {
+ const { t } = useTranslation();
+ const { currentTransparency, setTransparency } = useTransparency();
+ const [ui_message_log_ui_scaling, setUiTransparency] = useState(currentTransparency.data);
+
+ const onchangeFunction = (value) => {
+ setUiTransparency(value);
+ };
+ const onchangeCommittedFunction = (value) => {
+ setTransparency(value);
+ };
+ useEffect(() => {
+ setUiTransparency(currentTransparency.data);
+ }, [currentTransparency.data]);
+
+ const createMarks = (min, max) => {
+ const marks = [];
+ for (let value = min; value <= max; value += 10) {
+ marks.push({ value, label: `${value}` });
+ }
+ return marks;
+ };
+
+ const marks = createMarks(40, 100);
+
+ return (
+
+ );
};
\ No newline at end of file
diff --git a/src-ui/logics/configs/useTransparency.js b/src-ui/logics/configs/useTransparency.js
new file mode 100644
index 00000000..9ab7429f
--- /dev/null
+++ b/src-ui/logics/configs/useTransparency.js
@@ -0,0 +1,24 @@
+import { useStore_Transparency } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useTransparency = () => {
+ const { asyncStdoutToPython } = useStdoutToPython();
+ const { currentTransparency, updateTransparency, pendingTransparency } = useStore_Transparency();
+
+ const getTransparency = () => {
+ pendingTransparency();
+ asyncStdoutToPython("/get/data/transparency");
+ };
+
+ const setTransparency = (selected_transparency) => {
+ pendingTransparency();
+ asyncStdoutToPython("/set/data/transparency", selected_transparency);
+ };
+
+ return {
+ currentTransparency,
+ getTransparency,
+ updateTransparency,
+ setTransparency,
+ };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index bfc06aea..c2cabe2c 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -30,6 +30,7 @@ import { useSelectedFontFamily } from "@logics_configs/useSelectedFontFamily";
import { useUiLanguage } from "@logics_configs/useUiLanguage";
import { useUiScaling } from "@logics_configs/useUiScaling";
import { useMessageLogUiScaling } from "@logics_configs/useMessageLogUiScaling";
+import { useTransparency } from "@logics_configs/useTransparency";
export const useReceiveRoutes = () => {
const { updateIsMainPageCompactMode } = useIsMainPageCompactMode();
@@ -77,6 +78,7 @@ export const useReceiveRoutes = () => {
const { updateMessageInputBoxRatio } = useMessageInputBoxRatio();
const { updateSelectedFontFamily } = useSelectedFontFamily();
+ const { updateTransparency } = useTransparency();
const routes = {
@@ -213,6 +215,9 @@ export const useReceiveRoutes = () => {
"/get/data/font_family": updateSelectedFontFamily,
"/set/data/font_family": updateSelectedFontFamily,
+ "/get/data/transparency": updateTransparency,
+ "/set/data/transparency": updateTransparency,
+
// 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 e21379f0..e104d8af 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -174,6 +174,7 @@ export const { atomInstance: Atom_UiScaling, useHook: useStore_UiScaling } = cre
export const { atomInstance: Atom_MessageLogUiScaling, useHook: useStore_MessageLogUiScaling } = createAtomWithHook(100, "MessageLogUiScaling");
export const { atomInstance: Atom_SelectedFontFamily, useHook: useStore_SelectedFontFamily } = createAtomWithHook("Yu Gothic UI", "SelectedFontFamily");
export const { atomInstance: Atom_SelectableFontFamilyList, useHook: useStore_SelectableFontFamilyList } = createAtomWithHook({}, "SelectableFontFamilyList");
+export const { atomInstance: Atom_Transparency, useHook: useStore_Transparency } = createAtomWithHook(100, "Transparency");
export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");