[Update] Combine in one window. Rename Main/Config Window to Main/Config Page accordingly.
For now, I put Config Page to below the main page temporary. Open Config Button does not work.
This commit is contained in:
Sakamoto Shiina
@@ -9,6 +9,6 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="./src-ui/windows/main_window/index.jsx"></script>
|
<script type="module" src="./src-ui/app/index.jsx"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"main_window": {
|
"main_page": {
|
||||||
"translation": "Translation",
|
"translation": "Translation",
|
||||||
"transcription_send": "Voice2Chatbox",
|
"transcription_send": "Voice2Chatbox",
|
||||||
"transcription_receive": "Speaker2Log",
|
"transcription_receive": "Speaker2Log",
|
||||||
@@ -71,7 +71,7 @@
|
|||||||
"display_duration": "Display duration",
|
"display_duration": "Display duration",
|
||||||
"fadeout_duration": "Fadeout duration"
|
"fadeout_duration": "Fadeout duration"
|
||||||
},
|
},
|
||||||
"config_window": {
|
"config_page": {
|
||||||
"config_title": "Settings",
|
"config_title": "Settings",
|
||||||
"compact_mode": "Compact Mode",
|
"compact_mode": "Compact Mode",
|
||||||
"version": "version {{version}}",
|
"version": "version {{version}}",
|
||||||
@@ -119,7 +119,7 @@
|
|||||||
"ui_language": {
|
"ui_language": {
|
||||||
"label": "UI Language"
|
"label": "UI Language"
|
||||||
},
|
},
|
||||||
"to_restore_main_window_geometry": {
|
"to_restore_main_page_geometry": {
|
||||||
"label": "Remember The Main Window Position",
|
"label": "Remember The Main Window Position",
|
||||||
"desc": "Restore the position and size of the previous window upon startup."
|
"desc": "Restore the position and size of the previous window upon startup."
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"main_window": {
|
"main_page": {
|
||||||
"translation": "翻訳",
|
"translation": "翻訳",
|
||||||
"transcription_send": "音声認識（マイク）",
|
"transcription_send": "音声認識（マイク）",
|
||||||
"transcription_receive": "音声認識（スピーカー）",
|
"transcription_receive": "音声認識（スピーカー）",
|
||||||
@@ -69,7 +69,7 @@
|
|||||||
"display_duration": "表示時間",
|
"display_duration": "表示時間",
|
||||||
"fadeout_duration": "フェードアウト時間"
|
"fadeout_duration": "フェードアウト時間"
|
||||||
},
|
},
|
||||||
"config_window": {
|
"config_page": {
|
||||||
"config_title": "設定",
|
"config_title": "設定",
|
||||||
"compact_mode": "コンパクトモード",
|
"compact_mode": "コンパクトモード",
|
||||||
"version": "バージョン {{version}}",
|
"version": "バージョン {{version}}",
|
||||||
@@ -114,7 +114,7 @@
|
|||||||
"ui_language": {
|
"ui_language": {
|
||||||
"label": "UIの言語 / UI Language"
|
"label": "UIの言語 / UI Language"
|
||||||
},
|
},
|
||||||
"to_restore_main_window_geometry": {
|
"to_restore_main_page_geometry": {
|
||||||
"label": "メイン画面の位置を記憶する",
|
"label": "メイン画面の位置を記憶する",
|
||||||
"desc": "起動時、前回の画面の位置とサイズを復元します。"
|
"desc": "起動時、前回の画面の位置とサイズを復元します。"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"main_window": {
|
"main_page": {
|
||||||
"translation": "번역",
|
"translation": "번역",
|
||||||
"transcription_send": "음성인식 (마이크)",
|
"transcription_send": "음성인식 (마이크)",
|
||||||
"transcription_receive": "음성인식 (스피커)",
|
"transcription_receive": "음성인식 (스피커)",
|
||||||
@@ -54,7 +54,7 @@
|
|||||||
"title_target_language": "상대방의 언어",
|
"title_target_language": "상대방의 언어",
|
||||||
"go_back_button": "돌아가기"
|
"go_back_button": "돌아가기"
|
||||||
},
|
},
|
||||||
"config_window": {
|
"config_page": {
|
||||||
"config_title": "설정",
|
"config_title": "설정",
|
||||||
"compact_mode": "컴팩트 모드",
|
"compact_mode": "컴팩트 모드",
|
||||||
"version": "버전 {{version}}",
|
"version": "버전 {{version}}",
|
||||||
@@ -100,7 +100,7 @@
|
|||||||
"ui_language": {
|
"ui_language": {
|
||||||
"label": "UI 언어 / UI Language"
|
"label": "UI 언어 / UI Language"
|
||||||
},
|
},
|
||||||
"to_restore_main_window_geometry": {
|
"to_restore_main_page_geometry": {
|
||||||
"label": "메인 화면 위치 기억",
|
"label": "메인 화면 위치 기억",
|
||||||
"desc": "시작 시 이전 화면의 위치와 크기를 복원합니다."
|
"desc": "시작 시 이전 화면의 위치와 크기를 복원합니다."
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"main_window": {
|
"main_page": {
|
||||||
"translation": "翻譯",
|
"translation": "翻譯",
|
||||||
"transcription_send": "麥克風轉文字",
|
"transcription_send": "麥克風轉文字",
|
||||||
"transcription_receive": "喇叭轉文字",
|
"transcription_receive": "喇叭轉文字",
|
||||||
@@ -70,7 +70,7 @@
|
|||||||
"display_duration": "顯示持續時間",
|
"display_duration": "顯示持續時間",
|
||||||
"fadeout_duration": "淡出持續時間"
|
"fadeout_duration": "淡出持續時間"
|
||||||
},
|
},
|
||||||
"config_window": {
|
"config_page": {
|
||||||
"config_title": "設定",
|
"config_title": "設定",
|
||||||
"compact_mode": "精簡模式",
|
"compact_mode": "精簡模式",
|
||||||
"version": "版本 {{version}}",
|
"version": "版本 {{version}}",
|
||||||
@@ -117,7 +117,7 @@
|
|||||||
"ui_language": {
|
"ui_language": {
|
||||||
"label": "介面語言"
|
"label": "介面語言"
|
||||||
},
|
},
|
||||||
"to_restore_main_window_geometry": {
|
"to_restore_main_page_geometry": {
|
||||||
"label": "記住主視窗位置",
|
"label": "記住主視窗位置",
|
||||||
"desc": "啟動時恢復上次視窗的位置和大小。"
|
"desc": "啟動時恢復上次視窗的位置和大小。"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ edition = "2021"
|
|||||||
tauri-build = { version = "1", features = [] }
|
tauri-build = { version = "1", features = [] }
|
||||||
|
|
||||||
[dependencies]
|
[dependencies]
|
||||||
tauri = { version = "1", features = [ "window-set-decorations", "window-set-always-on-top", "window-create", "window-close", "shell-sidecar", "shell-open", "devtools"] }
|
tauri = { version = "1", features = [ "window-set-decorations", "window-set-always-on-top", "shell-sidecar", "shell-open", "devtools"] }
|
||||||
serde = { version = "1", features = ["derive"] }
|
serde = { version = "1", features = ["derive"] }
|
||||||
serde_json = "1"
|
serde_json = "1"
|
||||||
|
|
||||||
|
|||||||
@@ -13,8 +13,6 @@
|
|||||||
"allowlist": {
|
"allowlist": {
|
||||||
"all": false,
|
"all": false,
|
||||||
"window": {
|
"window": {
|
||||||
"create": true,
|
|
||||||
"close": true,
|
|
||||||
"setAlwaysOnTop": true,
|
"setAlwaysOnTop": true,
|
||||||
"setDecorations": true
|
"setDecorations": true
|
||||||
},
|
},
|
||||||
|
|||||||
35
src-ui/app/App.jsx
Normal file
35
src-ui/app/App.jsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import { getCurrent } from "@tauri-apps/api/window";
|
||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
import { useStartPython } from "@logics/useStartPython";
|
||||||
|
import { useConfig } from "@logics/useConfig";
|
||||||
|
|
||||||
|
import { MainPage } from "./main_page/MainPage";
|
||||||
|
import { ConfigPage } from "./config_page/ConfigPage";
|
||||||
|
|
||||||
|
|
||||||
|
export const App = () => {
|
||||||
|
const { asyncStartPython } = useStartPython();
|
||||||
|
const hasRunRef = useRef(false);
|
||||||
|
const main_page = getCurrent();
|
||||||
|
|
||||||
|
const { getSoftwareVersion } = useConfig();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
main_page.setDecorations(true);
|
||||||
|
if (!hasRunRef.current) {
|
||||||
|
asyncStartPython().then((result) => {
|
||||||
|
getSoftwareVersion();
|
||||||
|
}).catch((err) => {
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return () => hasRunRef.current = true;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<MainPage/>
|
||||||
|
<ConfigPage/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,14 +1,14 @@
|
|||||||
import styles from "./ConfigWindow.module.scss";
|
import styles from "./ConfigPage.module.scss";
|
||||||
|
|
||||||
import { Topbar } from "./topbar/Topbar";
|
import { Topbar } from "./topbar/Topbar.jsx";
|
||||||
import { SidebarSection } from "./sidebar_section/SidebarSection";
|
import { SidebarSection } from "./sidebar_section/SidebarSection.jsx";
|
||||||
import { SettingSection } from "./setting_section/SettingSection.jsx";
|
import { SettingSection } from "./setting_section/SettingSection.jsx";
|
||||||
|
|
||||||
import { useSoftwareVersion } from "@store";
|
import { useSoftwareVersion } from "@store";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
// import { useConfig } from "@logics/useConfig";
|
// import { useConfig } from "@logics/useConfig";
|
||||||
export const ConfigWindow = () => {
|
export const ConfigPage = () => {
|
||||||
const { currentSoftwareVersion, updateSoftwareVersion } = useSoftwareVersion();
|
const { currentSoftwareVersion, updateSoftwareVersion } = useSoftwareVersion();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
@@ -21,7 +21,7 @@ export const ConfigWindow = () => {
|
|||||||
</div>
|
</div>
|
||||||
<p className={styles.software_version}>
|
<p className={styles.software_version}>
|
||||||
{
|
{
|
||||||
t("config_window.version", {version: currentSoftwareVersion})
|
t("config_page.version", {version: currentSoftwareVersion})
|
||||||
}
|
}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -13,7 +13,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding-top: var(--config_window_topbar_height);
|
padding-top: var(--config_page_topbar_height);
|
||||||
}
|
}
|
||||||
|
|
||||||
.software_version {
|
.software_version {
|
||||||
@@ -47,21 +47,21 @@ export const Appearance = () => {
|
|||||||
|
|
||||||
<ThresholdContainer label="Transparent" desc="description" id="mic_threshold" min="0" max="3000"/>
|
<ThresholdContainer label="Transparent" desc="description" id="mic_threshold" min="0" max="3000"/>
|
||||||
|
|
||||||
<DeeplAuthKeyContainer label={t(`config_window.deepl_auth_key.label`)} desc={t(`config_window.deepl_auth_key.desc`)}/>
|
<DeeplAuthKeyContainer label={t(`config_page.deepl_auth_key.label`)} desc={t(`config_page.deepl_auth_key.desc`)}/>
|
||||||
|
|
||||||
|
|
||||||
<MessageFormatContainer label={t(`config_window.send_message_format.label`)} desc={t(`config_window.send_message_format.desc`)} id="send"/>
|
<MessageFormatContainer label={t(`config_page.send_message_format.label`)} desc={t(`config_page.send_message_format.desc`)} id="send"/>
|
||||||
|
|
||||||
<MessageFormatContainer label={t(`config_window.send_message_format_with_t.label`)} desc={t(`config_window.send_message_format_with_t.desc`)} id="send_with_t"/>
|
<MessageFormatContainer label={t(`config_page.send_message_format_with_t.label`)} desc={t(`config_page.send_message_format_with_t.desc`)} id="send_with_t"/>
|
||||||
|
|
||||||
|
|
||||||
<MessageFormatContainer label={t(`config_window.send_message_format.label`)} desc={t(`config_window.send_message_format.desc`)} id="received"/>
|
<MessageFormatContainer label={t(`config_page.send_message_format.label`)} desc={t(`config_page.send_message_format.desc`)} id="received"/>
|
||||||
|
|
||||||
<MessageFormatContainer label={t(`config_window.send_message_format_with_t.label`)} desc={t(`config_window.send_message_format_with_t.desc`)} id="received_with_t"/>
|
<MessageFormatContainer label={t(`config_page.send_message_format_with_t.label`)} desc={t(`config_page.send_message_format_with_t.desc`)} id="received_with_t"/>
|
||||||
|
|
||||||
<WordFilterContainer label={t(`config_window.mic_word_filter.label`)} desc={t(`config_window.mic_word_filter.desc`)}/>
|
<WordFilterContainer label={t(`config_page.mic_word_filter.label`)} desc={t(`config_page.mic_word_filter.desc`)}/>
|
||||||
|
|
||||||
<ActionButtonContainer label={t(`config_window.open_config_filepath.label`)} IconComponent={FolderOpenSvg} OnclickFunction={()=>{}}/>
|
<ActionButtonContainer label={t(`config_page.open_config_filepath.label`)} IconComponent={FolderOpenSvg} OnclickFunction={()=>{}}/>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
@@ -52,12 +52,12 @@ const ExampleComponent = ({ id, current_format }) => {
|
|||||||
const { currentUiLanguageStatus } = useUiLanguageStatus();
|
const { currentUiLanguageStatus } = useUiLanguageStatus();
|
||||||
|
|
||||||
const createExampleMessage = () => {
|
const createExampleMessage = () => {
|
||||||
const originalLangMessage = t("config_window.send_message_format.example_text");
|
const originalLangMessage = t("config_page.send_message_format.example_text");
|
||||||
let format = current_format;
|
let format = current_format;
|
||||||
|
|
||||||
if (["send_with_t", "received_with_t"].includes(id)) {
|
if (["send_with_t", "received_with_t"].includes(id)) {
|
||||||
const translationLocale = currentUiLanguageStatus === "en" ? "ja" : "en";
|
const translationLocale = currentUiLanguageStatus === "en" ? "ja" : "en";
|
||||||
const translatedLangMessage = t("config_window.send_message_format.example_text", { lng: translationLocale });
|
const translatedLangMessage = t("config_page.send_message_format.example_text", { lng: translationLocale });
|
||||||
|
|
||||||
return format.is_message_first
|
return format.is_message_first
|
||||||
? `${format.before}${originalLangMessage}${format.between}${translatedLangMessage}${format.after}`
|
? `${format.before}${originalLangMessage}${format.between}${translatedLangMessage}${format.after}`
|
||||||
@@ -130,7 +130,7 @@ export const WordFilterListToggleComponent = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.toggle_button_container}>
|
<div className={styles.toggle_button_container}>
|
||||||
<p className={styles.words_count_text}>{t("config_window.mic_word_filter.count_desc", {count: word_filter_list_length} )}</p>
|
<p className={styles.words_count_text}>{t("config_page.mic_word_filter.count_desc", {count: word_filter_list_length} )}</p>
|
||||||
<button className={styles.toggle_button_wrapper} onClick={OnclickFunction}>
|
<button className={styles.toggle_button_wrapper} onClick={OnclickFunction}>
|
||||||
<ArrowLeftSvg className={svg_class_names}/>
|
<ArrowLeftSvg className={svg_class_names}/>
|
||||||
</button>
|
</button>
|
||||||
@@ -39,7 +39,7 @@ const Tab = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={tab_container_class_names} onClick={onclickFunction}>
|
<div className={tab_container_class_names} onClick={onclickFunction}>
|
||||||
<p className={styles.tab_text}>{t(`config_window.side_menu_labels.${props.tab_id}`)}</p>
|
<p className={styles.tab_text}>{t(`config_page.side_menu_labels.${props.tab_id}`)}</p>
|
||||||
<div className={switch_indicator_class_names}></div>
|
<div className={switch_indicator_class_names}></div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
.container {
|
.container {
|
||||||
width: var(--config_window_sidebar_width);
|
width: var(--config_page_sidebar_width);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -4,7 +4,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
height: var(--config_window_topbar_height);
|
height: var(--config_page_topbar_height);
|
||||||
background-color: var(--dark_850_color);
|
background-color: var(--dark_850_color);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -6,7 +6,7 @@ export const CompactSwitchBox = () => {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<p>{t("config_window.compact_mode")}</p>
|
<p>{t("config_page.compact_mode")}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@@ -7,7 +7,7 @@ export const SectionTitleBox = () => {
|
|||||||
const { currentSelectedConfigTabId } = useSelectedConfigTabId();
|
const { currentSelectedConfigTabId } = useSelectedConfigTabId();
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<p className={styles.title}>{t(`config_window.side_menu_labels.${currentSelectedConfigTabId}`)}</p>
|
<p className={styles.title}>{t(`config_page.side_menu_labels.${currentSelectedConfigTabId}`)}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@@ -8,7 +8,7 @@ export const TitleBox = () => {
|
|||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<img src={chato_img} className={styles.logo_chato} alt="VRCT logo chato" />
|
<img src={chato_img} className={styles.logo_chato} alt="VRCT logo chato" />
|
||||||
<p className={styles.title}>{t("config_window.config_title")}</p>
|
<p className={styles.title}>{t("config_page.config_title")}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
.container {
|
.container {
|
||||||
// flex: 0;
|
// flex: 0;
|
||||||
width: var(--config_window_sidebar_width);
|
width: var(--config_page_sidebar_width);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
@@ -3,10 +3,10 @@ import ReactDOM from "react-dom/client";
|
|||||||
import "@root/locales/config.js";
|
import "@root/locales/config.js";
|
||||||
import "@utils/root.css";
|
import "@utils/root.css";
|
||||||
|
|
||||||
import { MainWindow } from "./MainWindow";
|
import { App } from "./App";
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<MainWindow />
|
<App />
|
||||||
</React.StrictMode>,
|
</React.StrictMode>,
|
||||||
);
|
);
|
||||||
39
src-ui/app/main_page/MainPage.jsx
Normal file
39
src-ui/app/main_page/MainPage.jsx
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import styles from "./MainPage.module.scss";
|
||||||
|
import { SidebarSection } from "./sidebar_section/SidebarSection";
|
||||||
|
import { MainSection } from "./main_section/MainSection";
|
||||||
|
|
||||||
|
export const MainPage = () => {
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<SidebarSection />
|
||||||
|
<MainSection />
|
||||||
|
{/* <MainPageCover /> */}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// import { useTranslation } from "react-i18next";
|
||||||
|
// import { useIsOpenedConfigPage } from "@store";
|
||||||
|
// import { useWindow } from "@logics/useWindow";
|
||||||
|
|
||||||
|
// export const MainPageCover = () => {
|
||||||
|
// const { t } = useTranslation();
|
||||||
|
// const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
|
||||||
|
// const { closeConfigPage } = useWindow();
|
||||||
|
// if ( currentIsOpenedConfigPage === false) return null;
|
||||||
|
|
||||||
|
// const closeSettingsWindow = () => closeConfigPage();
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <div className={styles.main_page_cover}>
|
||||||
|
// <p className={styles.cover_message}>{t("main_page.cover_message")}</p>
|
||||||
|
// <button
|
||||||
|
// className={styles.close_settings_window_button}
|
||||||
|
// onClick={closeSettingsWindow}
|
||||||
|
// >
|
||||||
|
// {t("main_page.close_settings_window")}
|
||||||
|
// </button>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// };
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main_window_cover {
|
.main_page_cover {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
.container {
|
.container {
|
||||||
height: var(--main_window_topbar_height);
|
height: var(--main_page_topbar_height);
|
||||||
background-color: var(--dark_850_color);
|
background-color: var(--dark_850_color);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -8,7 +8,7 @@ export const MessageContainer = ({ messages, status, category, created_at }) =>
|
|||||||
const is_translated_exist = messages.translated.length >= 1;
|
const is_translated_exist = messages.translated.length >= 1;
|
||||||
const is_pending = status === "pending";
|
const is_pending = status === "pending";
|
||||||
const is_sent_message = category === "sent";
|
const is_sent_message = category === "sent";
|
||||||
const category_text = is_sent_message ? t("main_window.textbox_tab_sent") : t("main_window.textbox_tab_received");
|
const category_text = is_sent_message ? t("main_page.textbox_tab_sent") : t("main_page.textbox_tab_received");
|
||||||
|
|
||||||
const message_type_class_name = clsx({
|
const message_type_class_name = clsx({
|
||||||
[styles.sent_message]: is_sent_message,
|
[styles.sent_message]: is_sent_message,
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
.container {
|
.container {
|
||||||
height: var(--main_window_topbar_height);
|
height: var(--main_page_topbar_height);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -1,18 +1,18 @@
|
|||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
import styles from "./SidebarCompactModeButton.module.scss";
|
import styles from "./SidebarCompactModeButton.module.scss";
|
||||||
|
|
||||||
import { useMainWindowCompactModeStatus } from "@store";
|
import { useMainPageCompactModeStatus } from "@store";
|
||||||
import ArrowLeftSvg from "@images/arrow_left.svg?react";
|
import ArrowLeftSvg from "@images/arrow_left.svg?react";
|
||||||
|
|
||||||
export const SidebarCompactModeButton = () => {
|
export const SidebarCompactModeButton = () => {
|
||||||
const { updateMainWindowCompactModeStatus, currentMainWindowCompactModeStatus } = useMainWindowCompactModeStatus();
|
const { updateMainPageCompactModeStatus, currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
|
||||||
|
|
||||||
const toggleCompactMode = () => {
|
const toggleCompactMode = () => {
|
||||||
updateMainWindowCompactModeStatus(!currentMainWindowCompactModeStatus);
|
updateMainPageCompactModeStatus(!currentMainPageCompactModeStatus);
|
||||||
};
|
};
|
||||||
|
|
||||||
const class_names = clsx(styles["arrow_left_svg"], {
|
const class_names = clsx(styles["arrow_left_svg"], {
|
||||||
[styles["reverse"]]: currentMainWindowCompactModeStatus
|
[styles["reverse"]]: currentMainPageCompactModeStatus
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
|
|
||||||
import styles from "./SidebarSection.module.scss";
|
import styles from "./SidebarSection.module.scss";
|
||||||
import { useMainWindowCompactModeStatus } from "@store";
|
import { useMainPageCompactModeStatus } from "@store";
|
||||||
|
|
||||||
import { Logo } from "./logo/Logo";
|
import { Logo } from "./logo/Logo";
|
||||||
import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch";
|
import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch";
|
||||||
@@ -9,16 +9,16 @@ import { LanguageSettings } from "./language_settings/LanguageSettings";
|
|||||||
import { OpenSettings } from "./open_settings/OpenSettings";
|
import { OpenSettings } from "./open_settings/OpenSettings";
|
||||||
|
|
||||||
export const SidebarSection = () => {
|
export const SidebarSection = () => {
|
||||||
const { currentMainWindowCompactModeStatus } = useMainWindowCompactModeStatus();
|
const { currentMainPageCompactModeStatus } = useMainPageCompactModeStatus();
|
||||||
const container_class_name = clsx(styles["container"], {
|
const container_class_name = clsx(styles["container"], {
|
||||||
[styles["is_compact_mode"]]: currentMainWindowCompactModeStatus
|
[styles["is_compact_mode"]]: currentMainPageCompactModeStatus
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={container_class_name}>
|
<div className={container_class_name}>
|
||||||
<Logo />
|
<Logo />
|
||||||
<MainFunctionSwitch />
|
<MainFunctionSwitch />
|
||||||
{!currentMainWindowCompactModeStatus && <LanguageSettings />}
|
{!currentMainPageCompactModeStatus && <LanguageSettings />}
|
||||||
<OpenSettings />
|
<OpenSettings />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -75,7 +75,7 @@ const PresetContainer = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const your_language_settings = {
|
const your_language_settings = {
|
||||||
title: t("main_window.your_language"),
|
title: t("main_page.your_language"),
|
||||||
is_opened: currentIsOpenedLanguageSelector.your_language,
|
is_opened: currentIsOpenedLanguageSelector.your_language,
|
||||||
onClickFunction: () => handleLanguageSelectorClick("your_language"),
|
onClickFunction: () => handleLanguageSelectorClick("your_language"),
|
||||||
TurnedOnSvgComponent: <MicSvg />,
|
TurnedOnSvgComponent: <MicSvg />,
|
||||||
@@ -83,7 +83,7 @@ const PresetContainer = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const target_language_settings = {
|
const target_language_settings = {
|
||||||
title: t("main_window.target_language"),
|
title: t("main_page.target_language"),
|
||||||
is_opened: currentIsOpenedLanguageSelector.target_language,
|
is_opened: currentIsOpenedLanguageSelector.target_language,
|
||||||
onClickFunction: () => handleLanguageSelectorClick("target_language"),
|
onClickFunction: () => handleLanguageSelectorClick("target_language"),
|
||||||
TurnedOnSvgComponent: <HeadphonesSvg />,
|
TurnedOnSvgComponent: <HeadphonesSvg />,
|
||||||
@@ -11,8 +11,8 @@ export const LanguageSwapButton = () => {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const label = isHovered
|
const label = isHovered
|
||||||
? t("main_window.swap_button_label")
|
? t("main_page.swap_button_label")
|
||||||
: t("main_window.translate_each_other_label");
|
: t("main_page.translate_each_other_label");
|
||||||
|
|
||||||
const labelClassName = clsx(styles["label"], {
|
const labelClassName = clsx(styles["label"], {
|
||||||
[styles["is_hovered"]]: isHovered
|
[styles["is_hovered"]]: isHovered
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user