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

[Refactor] Move to src-ui/views and src-ui/logics structure.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-11-05 11:49:48 +09:00
parent 62f7c6d534
commit db820375f1
339 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src-ui/views/app/others/snackbar_controller/ReactToastifyOverrideClass.scss Normal file
View File

@@ -0,0 +1,144 @@
:root {
--toastify-color-light: #fff;
--toastify-color-dark: var(--dark_950_color);
--toastify-color-info: var(--sent_400_color);
--toastify-color-success: var(--primary_400_color);
--toastify-color-warning: var(--warning_bc_color);
--toastify-color-error: var(--error_bc_color);
--toastify-color-transparent: rgba(255, 255, 255, 0.7);
--toastify-icon-color-info: var(--toastify-color-info);
--toastify-icon-color-success: var(--toastify-color-success);
--toastify-icon-color-warning: var(--toastify-color-warning);
--toastify-icon-color-error: var(--toastify-color-error);
--toastify-container-width: fit-content;
--toastify-toast-width: 32rem;
--toastify-toast-offset: 1.6rem;
--toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
--toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
--toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
--toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
--toastify-toast-background: #fff;
--toastify-toast-padding: 1.4rem;
--toastify-toast-min-height: 6.4rem;
--toastify-toast-max-height: 80rem;
--toastify-toast-bd-radius: 0.6rem;
--toastify-toast-shadow: .0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);
--toastify-font-family: var(--font_family);
--toastify-z-index: 9999;
--toastify-text-color-light: #757575;
--toastify-text-color-dark: var(--dark_basic_text_color);
/* Used only for colored theme */
--toastify-text-color-info: var(--dark_basic_text_color);
--toastify-text-color-success: var(--dark_basic_text_color);
--toastify-text-color-warning: var(--dark_basic_text_color);
--toastify-text-color-error: var(--dark_basic_text_color);
--toastify-spinner-color: #616161;
--toastify-spinner-color-empty-area: #e0e0e0;
--toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
--toastify-color-progress-dark: #bb86fc;
--toastify-color-progress-info: var(--toastify-color-info);
--toastify-color-progress-success: var(--toastify-color-success);
--toastify-color-progress-warning: var(--toastify-color-warning);
--toastify-color-progress-error: var(--toastify-color-error);
/* used to control the opacity of the progress trail */
--toastify-color-progress-bgo: 0.2;
}
.Toastify__toast {
// --------------------------------------------------------
// Default Settings
// --------------------------------------------------------
position: relative;
touch-action: none;
// width: var(--toastify-toast-width);
min-height: var(--toastify-toast-min-height);
box-sizing: border-box;
margin-bottom: 1rem;
// padding: var(--toastify-toast-padding);
border-radius: 0.6rem;
box-shadow: none;
max-height: var(--toastify-toast-max-height);
// font-family: "Yu Gothic UI";
// font-family: var(--toastify-font-family);
// z-index: 0;
// display: flex;
// flex: 1 auto;
// align-items: center;
word-break: break-word;
// --------------------------------------------------------
// --------------------------------------------------------
// Comment out above and override. Commented out is just for memorization.
overflow: hidden;
display: flex;
justify-content: start;
align-items: center;
font-size: 1.4rem;
width: fit-content;
max-width: 70vw;
padding-right: 4rem;
background-color: var(--dark_950_color);
gap: 0.6rem;
white-space: pre-wrap;
}
.Toastify__progress-bar--wrp {
height: 0.4rem;
}
.Toastify__progress-bar--success {
background: var(--success_bc_color);
}
.Toastify__progress-bar--warning {
background: var(--warning_bc_color);
}
.Toastify__progress-bar--error {
background: var(--error_bc_color);
}
.Toastify__toast-icon {
width: fit-content;
max-width: 2.8rem;
min-width: 2.8rem;
justify-content: center;
align-items: center;
}
@keyframes fade_in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade_out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fade_in {
opacity: 0;
animation-name: fade_in;
animation-duration: 0.1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.fade_out {
opacity: 1;
animation-name: fade_out;
animation-duration: 0.1s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}

115
src-ui/views/app/others/snackbar_controller/SnackbarController.jsx Normal file
View File

@@ -0,0 +1,115 @@
import React, { useEffect, useState, isValidElement } from "react";
import { ToastContainer, toast, cssTransition } from "react-toastify";
import clsx from "clsx";
import "./ReactToastifyOverrideClass.scss";
import styles from "./SnackbarController.module.scss";
import XMarkSvg from "@images/cancel.svg?react";
import WarningSvg from "@images/warning.svg?react";
import MegaphoneSvg from "@images/megaphone.svg?react";
import CheckMarkSvg from "@images/check_mark.svg?react";
import ErrorSvg from "@images/error.svg?react";
import { useNotificationStatus } from "@logics_common";
const CustomTransition = cssTransition({
enter: "fade_in",
exit: "fade_out",
collapse: false,
});
export const SnackbarController = () => {
const { currentNotificationStatus, closeNotification } = useNotificationStatus();
const [containerKey, setContainerKey] = useState(0);
const settings = currentNotificationStatus.data;
const snackbar_classname = clsx(
styles.snackbar_content,
{
[styles.is_success]: settings.status === "success",
[styles.is_warning]: settings.status === "warning",
[styles.is_error]: settings.status === "error",
}
);
let hide_duration = 5000;
if (settings.options?.hide_duration === null) {
hide_duration = false;
} else if (Number(settings.options?.hide_duration)) {
hide_duration = Number(settings.options?.hide_duration);
}
useEffect(() => {
if (!settings.is_open) return;
const message_text = settings.message;
const category_id = settings.category_id ? settings.category_id : message_text;
const to_hide_progress_bar = (settings.options?.to_hide_progress_bar === true) ? true : false;
const asyncShowNotification = async () => {
setTimeout(() => {
toast(message_text, {
toastId: category_id,
type: settings.status,
autoClose: hide_duration,
transition: CustomTransition,
toastClassName: snackbar_classname,
hideProgressBar: to_hide_progress_bar,
progressClassName: styles.toast_progress,
closeButton: <CloseButtonContainer />,
onClose: () => {
closeNotification();
},
});
}, 100);
};
// setContainerKey(prevKey => prevKey + 1);
asyncShowNotification();
}, [settings]);
return (
<ToastContainer
// key={containerKey}
position="bottom-left"
transition={CustomTransition}
hideProgressBar={false}
newestOnTop={false}
closeOnClick={false}
pauseOnFocusLoss={false}
draggable={false}
pauseOnHover={true}
theme="dark"
icon={({ type }) => {
switch (type) {
case "info":
return <MegaphoneSvg className={styles.megaphone_svg} />;
case "error":
return <ErrorSvg className={styles.error_svg} />;
case "success":
return <CheckMarkSvg className={styles.check_mark_svg} />;
case "warning":
return <WarningSvg className={styles.warning_svg} />;
default:
return null;
}
}}
/>
);
};
const CloseButtonContainer = ({ closeToast }) => {
return (
<button className={styles.close_button_wrapper} onClick={closeToast}>
<div className={styles.close_button}>
<XMarkSvg className={styles.x_mark_svg} />
</div>
</button>
);
};

75
src-ui/views/app/others/snackbar_controller/SnackbarController.module.scss Normal file
View File

@@ -0,0 +1,75 @@
.snackbar_content {
position: relative;
padding: 1.2rem 1.6rem;
border-radius: 0.8rem;
font-size: 1.4rem;
box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.5);
}
// .is_success {
// background-color: var(--success_bc_color);
// }
// .is_warning {
// background-color: var(--warning_bc_color);
// }
// .is_error {
// background-color: var(--error_bc_color);
// }
.megaphone_svg {
color: var(--dark_200_color);
width: 2.4rem;
}
.error_svg {
color: var(--error_bc_color);
width: 2.4rem;
}
.check_mark_svg {
color: var(--primary_400_color);
width: 2rem;
}
.warning_svg {
color: var(--warning_color);
width: 2.4rem;
}
// Duplicated (Customized)
.close_button_wrapper {
position: absolute;
top: 0;
left: 100%;
transform: translate(-50%, -50%) rotate(45deg);
display: flex;
justify-content: center;
align-items: end;
width: 5.6rem;
aspect-ratio: 1 / 1;
&:hover {
background-color: var(--error_bc_color);
& .x_mark_svg {
color: var(--dark_200_color);
transform: rotate(45deg);
}
}
&:active {
background-color: var(--error_bc_active_color);
}
transition: all 0.1s ease;
}
.close_button {
// width: 100%;
// height: 100%;
}
.x_mark_svg {
width: 2rem;
transform: rotate(-45deg);
color: var(--dark_700_color);
transition: transform 0.3s ease;
}