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 0425981b..2755cce9 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 @@ -91,7 +91,7 @@ const UiScalingContainer = () => { }; -const MessageLogUiScalingContainer = () => { +export const MessageLogUiScalingContainer = () => { const { t } = useTranslation(); const { currentMessageLogUiScaling, setMessageLogUiScaling } = useMessageLogUiScaling(); const [ui_message_log_ui_scaling, setUiMessageLogUiScaling] = useState(currentMessageLogUiScaling.data); diff --git a/src-ui/app/config_page/setting_section/setting_box/index.js b/src-ui/app/config_page/setting_section/setting_box/index.js index 5c19a095..10521c96 100644 --- a/src-ui/app/config_page/setting_section/setting_box/index.js +++ b/src-ui/app/config_page/setting_section/setting_box/index.js @@ -1,5 +1,5 @@ export { Device } from "./device/Device"; -export { Appearance } from "./appearance/Appearance"; +export { Appearance, MessageLogUiScalingContainer } from "./appearance/Appearance"; export { Translation } from "./translation/Translation"; export { Transcription } from "./transcription/Transcription"; export { Others, VrcMicMuteSyncContainer } from "./others/Others"; 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 492afc8a..8ff1f14f 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 @@ -3,13 +3,14 @@ import { useRef, useEffect, useState } from "react"; import styles from "./MessageContainer.module.scss"; import { appWindow } from "@tauri-apps/api/window"; import { LogBox } from "./log_box/LogBox"; +import { MessageLogSettingsContainer } from "./message_log_settings_container/MessageLogSettingsContainer"; import { MessageInputBox } from "./message_input_box/MessageInputBox"; import { useMessageInputBoxRatio } from "@logics_main"; import { useUiScaling } from "@logics_configs"; - export const MessageContainer = () => { const { currentMessageInputBoxRatio, asyncSetMessageInputBoxRatio } = useMessageInputBoxRatio(); const { currentUiScaling } = useUiScaling(); + const [is_hovered, setIsHovered] = useState(false); const [message_box_height_in_rem, setMessageBoxHeightInRem] = useState(10); const FONT_SIZE_STANDARD = 10 * currentUiScaling.data / 100; // 10px = 1rem @@ -84,8 +85,13 @@ export const MessageContainer = () => { return (
-
+
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > +
{ const { t } = useTranslation(); const { sendMessage, updateMessageInputValue, } = useMessage(); - + const { currentIsVisibleResendButton } = useIsVisibleResendButton(); const [is_hovered, setIsHovered] = useState(false); const [is_locked, setIsLocked] = useState(false); @@ -45,6 +46,7 @@ export const MessageContainer = ({ messages, status, category, created_at }) => const message_type_class_name = clsx({ [styles.sent_message]: is_sent_message, + [styles.is_shown_resend_button]: currentIsVisibleResendButton.data, [styles.received_message]: !is_sent_message, }); @@ -67,7 +69,7 @@ export const MessageContainer = ({ messages, status, category, created_at }) => }
- {is_sent_message && is_hovered ? ( + {currentIsVisibleResendButton.data && is_sent_message && is_hovered ? ( { + const [is_opened, setIsOpened] = useState(false); + const [is_hovered, setIsHovered] = useState(false); + + const { currentIsVisibleResendButton, toggleIsVisibleResendButton } = useIsVisibleResendButton(); + + const container_class_name = clsx(styles.container, { + [styles.to_visible_toggle_bar]: props.to_visible_toggle_bar, + [styles.is_hovered]: is_hovered, + [styles.is_opened]: is_opened + }); + + const toggleVisibleResendButton = () => { + toggleIsVisibleResendButton(); + }; + + return ( +
setIsHovered(true)} + onMouseLeave={() => {setIsHovered(false); setIsOpened(false);}} + onClick={() => setIsOpened(true)} + > + +
+
+

Show Resend Button

+ +
+
+
+ ); +}; \ No newline at end of file diff --git a/src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.module.scss b/src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.module.scss new file mode 100644 index 00000000..3d1077a0 --- /dev/null +++ b/src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.module.scss @@ -0,0 +1,49 @@ +$container_height: 18rem; +.container { + position: absolute; + top: -#{$container_height}; + left: 0; + height: $container_height; + width: 100%; + background-color: (#555555cc); + backdrop-filter: blur(0.6rem); + transition: top 0.3s ease; + padding: 0.6rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + &.to_visible_toggle_bar { + top: calc(-#{$container_height} + 1rem); + } + &.is_hovered { + top: calc(-#{$container_height} + 2rem); + } + &.is_opened { + top: 0; + } + &:not(.is_opened) { + cursor: pointer; + } +} + +.others_wrapper { + width: 100%; + display: flex; +} + +.resend_checkbox_toggle { + display: flex; + justify-content: center; + align-items: center; + padding: 0.6rem 1.2rem; + gap: 1rem; + cursor: pointer; + &:hover { + background-color: var(--dark_850_color); + } +} + +.resend_checkbox_label { + font-size: 1.4rem; +} diff --git a/src-ui/common_components/checkbox/Checkbox.jsx b/src-ui/common_components/checkbox/Checkbox.jsx new file mode 100644 index 00000000..ac291f65 --- /dev/null +++ b/src-ui/common_components/checkbox/Checkbox.jsx @@ -0,0 +1,49 @@ +import styles from "./Checkbox.module.scss"; + +export const Checkbox = ({ + checkboxId, + variable, + toggleFunction, + state = "idle", + size = "2.8rem", + color = "var(--primary_600_color)", + borderWidth = "0.2rem", + padding = "2rem", +}) => { + + return ( +
+ +
+ ); +}; diff --git a/src-ui/common_components/checkbox/Checkbox.module.scss b/src-ui/common_components/checkbox/Checkbox.module.scss new file mode 100644 index 00000000..4b536841 --- /dev/null +++ b/src-ui/common_components/checkbox/Checkbox.module.scss @@ -0,0 +1,60 @@ +@import "@scss_mixins"; + +.checkbox_container { + height: 100%; + display: flex; + justify-content: end; + align-items: center; +} + +.checkbox_wrapper { + display: inline-block; + cursor: pointer; + padding: var(--checkbox-padding, 2rem); + position: relative; + + &:hover { + & .cbx { + border: var(--checkbox-color, var(--primary_600_color)) solid var(--checkbox-border-width, 0.2rem); + } + } +} + +.checkbox_wrapper .cbx { + display: block; + width: var(--checkbox-size, 2.8rem); + height: var(--checkbox-size, 2.8rem); + border-radius: 0.4rem; + border: var(--dark_700_color) solid var(--checkbox-border-width, 0.2rem); + transition: all 0.15s ease; + padding: calc(var(--checkbox-size, 2.8rem) / 7); +} + +.checkbox_wrapper .cbx svg { + fill: none; + stroke-linecap: round; + stroke-linejoin: round; + stroke: var(--dark_basic_text_color); + stroke-width: calc(var(--checkbox-border-width, 0.2rem) / 2); + stroke-dasharray: 1.7rem; + stroke-dashoffset: 1.7rem; +} + +.checkbox_wrapper input[type="checkbox"] { + display: none; + visibility: hidden; +} + +.checkbox_wrapper input[type="checkbox"]:checked + .cbx { + background-color: var(--checkbox-color, var(--primary_600_color)); + border: none; +} + +.checkbox_wrapper input[type="checkbox"]:checked + .cbx svg { + stroke-dashoffset: 0; + transition: all 0.15s ease; +} + +.loader { + @include loader(2rem, 0.2rem, right, -2rem); +} diff --git a/src-ui/common_components/index.js b/src-ui/common_components/index.js new file mode 100644 index 00000000..244dff53 --- /dev/null +++ b/src-ui/common_components/index.js @@ -0,0 +1 @@ +export { Checkbox } from "./checkbox/Checkbox"; \ No newline at end of file diff --git a/src-ui/logics/main/index.js b/src-ui/logics/main/index.js index a86b3484..9d142003 100644 --- a/src-ui/logics/main/index.js +++ b/src-ui/logics/main/index.js @@ -1,3 +1,4 @@ +export { useIsVisibleResendButton } from "./useIsVisibleResendButton"; export { useIsMainPageCompactMode } from "./useIsMainPageCompactMode"; export { useLanguageSettings } from "./useLanguageSettings"; export { useMainFunction } from "./useMainFunction"; diff --git a/src-ui/logics/main/useIsVisibleResendButton.js b/src-ui/logics/main/useIsVisibleResendButton.js new file mode 100644 index 00000000..c479af0b --- /dev/null +++ b/src-ui/logics/main/useIsVisibleResendButton.js @@ -0,0 +1,15 @@ +import { useStore_IsVisibleResendButton } from "@store"; + +export const useIsVisibleResendButton = () => { + const { currentIsVisibleResendButton, updateIsVisibleResendButton } = useStore_IsVisibleResendButton(); + + const toggleIsVisibleResendButton = () => { + updateIsVisibleResendButton(!currentIsVisibleResendButton.data); + }; + + return { + currentIsVisibleResendButton, + toggleIsVisibleResendButton, + updateIsVisibleResendButton, + }; +}; \ No newline at end of file diff --git a/src-ui/store.js b/src-ui/store.js index d082b3fb..0470dd61 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -121,6 +121,7 @@ export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_Foreground export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook(generateTestData(20), "MessageLogs"); export const { atomInstance: Atom_MessageInputValue, useHook: useStore_MessageInputValue } = createAtomWithHook("", "MessageInputValue"); +export const { atomInstance: Atom_IsVisibleResendButton, useHook: useStore_IsVisibleResendButton } = createAtomWithHook(false, "IsVisibleResendButton"); export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList"); diff --git a/vite.config.js b/vite.config.js index a2b46140..04151cd9 100644 --- a/vite.config.js +++ b/vite.config.js @@ -46,6 +46,7 @@ export default defineConfig(async () => ({ "@logics_configs": path.resolve(__dirname, "src-ui/logics/configs"), "@setting_box": path.resolve(__dirname, "src-ui/app/config_page/setting_section/setting_box/index.js"), + "@common_components": path.resolve(__dirname, "src-ui/common_components/index.js"), }, },