every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update] Main Page: Message Logs: Add message log settings. and add tot visible resend or not toggle.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-11-30 04:33:38 +09:00
parent 2d5d148f17
commit 7df1eb04d0
15 changed files with 238 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
src-ui/app/config_page/setting_section/setting_box/index.js
View File

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

10
src-ui/app/main_page/main_section/message_container/MessageContainer.jsx
View File

@@ -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 (
<div className={styles.container} ref={container_ref}>
<div ref={log_box_ref} className={styles.log_box_resize_wrapper}>
<div className={styles.log_box_resize_wrapper}
ref={log_box_ref}
onMouseOver={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<LogBox />
<MessageLogSettingsContainer to_visible_toggle_bar={is_hovered}/>
</div>
<Separator {...separatorProps} onDragStart={calculateMessageBoxRatioAndHeight} />
<div

1
src-ui/app/main_page/main_section/message_container/MessageContainer.module.scss
View File

@@ -9,6 +9,7 @@
.log_box_resize_wrapper {
flex: 1;
overflow: auto;
position: relative;
}
.separator {

6
src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
View File

@@ -4,13 +4,14 @@ import clsx from "clsx";
import styles from "./MessageContainer.module.scss";
import { MessageSubMenuContainer } from "./message_sub_menu_container/MessageSubMenuContainer";
import { useMessage } from "@logics_common";
import { useIsVisibleResendButton } from "@logics_main";
export const MessageContainer = ({ messages, status, category, created_at }) => {
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 }) =>
}
</div>
</div>
{is_sent_message && is_hovered ? (
{currentIsVisibleResendButton.data && is_sent_message && is_hovered ? (
<MessageSubMenuContainer
setIsHovered={lockHoverState}
resendFunction={resendFunction}

2
src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
View File

@@ -8,7 +8,7 @@
display: flex;
user-select: text;
gap: 0.6rem;
&.sent_message:hover {
&.sent_message.is_shown_resend_button:hover {
background-color: var(--dark_950_color);
}
}

45
src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.jsx Normal file
View File

@@ -0,0 +1,45 @@
import { useState } from "react";
import styles from "./MessageLogSettingsContainer.module.scss";
import clsx from "clsx";
import { useIsVisibleResendButton } from "@logics_main";
import { MessageLogUiScalingContainer } from "@setting_box";
import { Checkbox } from "@common_components";
export const MessageLogSettingsContainer = (props) => {
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 (
<div className={container_class_name}
onMouseOver={() => setIsHovered(true)}
onMouseLeave={() => {setIsHovered(false); setIsOpened(false);}}
onClick={() => setIsOpened(true)}
>
<MessageLogUiScalingContainer />
<div className={styles.others_wrapper}>
<div className={styles.resend_checkbox_toggle} onClick={toggleVisibleResendButton}>
<p className={styles.resend_checkbox_label}>Show Resend Button</p>
<Checkbox
id="visible_resend_button"
variable={currentIsVisibleResendButton}
size="2rem"
padding="0"
/>
</div>
</div>
</div>
);
};

49
src-ui/app/main_page/main_section/message_container/message_log_settings_container/MessageLogSettingsContainer.module.scss Normal file
View File

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

49
src-ui/common_components/checkbox/Checkbox.jsx Normal file
View File

@@ -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 (
<div className={styles.checkbox_container}>
<label
className={styles.checkbox_wrapper}
htmlFor={checkboxId}
style={{
"--checkbox-size": size,
"--checkbox-color": color,
"--checkbox-border-width": borderWidth,
"--checkbox-padding": padding,
}}
>
{state === "pending" ? (
<span className={styles.loader}></span>
) : (
<input
type="checkbox"
id={checkboxId}
checked={variable.data}
onClick={(e) => e.stopPropagation()}
onChange={() => {
if (toggleFunction) {
toggleFunction();
}
}}
/>
)}
<span className={styles.cbx}>
<svg viewBox="0 0 12 12">
<polyline points="1 6.29411765 4.5 10 11 1"></polyline>
</svg>
</span>
</label>
</div>
);
};

60
src-ui/common_components/checkbox/Checkbox.module.scss Normal file
View File

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

1
src-ui/common_components/index.js Normal file
View File

@@ -0,0 +1 @@
export { Checkbox } from "./checkbox/Checkbox";

1
src-ui/logics/main/index.js
View File

@@ -1,3 +1,4 @@
export { useIsVisibleResendButton } from "./useIsVisibleResendButton";
export { useIsMainPageCompactMode } from "./useIsMainPageCompactMode";
export { useLanguageSettings } from "./useLanguageSettings";
export { useMainFunction } from "./useMainFunction";

15
src-ui/logics/main/useIsVisibleResendButton.js Normal file
View File

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

1
src-ui/store.js
View File

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

1
vite.config.js
View File

@@ -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"),
},
},