diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx index 9369488b..17e08a53 100644 --- a/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx +++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx @@ -50,14 +50,14 @@ export const WordFilter = () => { return (
- { currentIsOpenedMicWordFilterList.data && -
- { - currentMicWordFilterList.data.map((item, index) => { - return ; - }) - } -
+ { currentIsOpenedMicWordFilterList.data && currentMicWordFilterList.data.length > 0 && +
+ { + currentMicWordFilterList.data.map((item, index) => { + return ; + }) + } +
}
<_Entry width="30rem" onChange={onChangeEntry} ui_variable={input_value}/> diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss index 2fe9600d..842fee46 100644 --- a/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss +++ b/src-ui/views/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss @@ -4,11 +4,13 @@ align-items: center; flex-direction: column; gap: 2rem; + width: 100%; } .list_section_wrapper { display: flex; + justify-content: center; flex-wrap: wrap; width: 100%; gap: 0.6rem; diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx index 6faf882c..b9050ab9 100644 --- a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx +++ b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.jsx @@ -22,13 +22,6 @@ import { } from "../_components"; import { Checkbox } from "@common_components"; -const LabeledContainer = ({ children, label, desc, custom_class_name }) => ( -
- - {children} -
-); - export const useOnMouseLeaveDropdownMenu = () => { const { updateIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu(); @@ -49,19 +42,44 @@ export const DropdownMenuContainer = (props) => { ); }; -const CommonContainer = ({ Component, ...props }) => { +const CommonContainer = ({ + label_type = "label_component", + add_break_point = true, + flex_column = false, + remove_border_bottom = false, + Component, + ...props +}) => { const { currentIsBreakPoint } = useStore_IsBreakPoint(); const container_class = clsx(styles.container, { - [styles.is_break_point]: props.add_break_point ?? currentIsBreakPoint.data, + [styles.is_break_point]: add_break_point && currentIsBreakPoint.data, + [styles.flex_column]: flex_column, + [styles.remove_border_bottom]: remove_border_bottom, }); - return ( - - - - ); + if (label_type === "label_component") { + return ( +
+ + +
+ ); + } else if (label_type === "no_label") { + return ( +
+ +
+ ); + } else if (label_type === "label_only") { + return ( +
+ +
+ ); + } }; + export const SliderContainer = (props) => ( ); @@ -114,19 +132,22 @@ export const ComputeDeviceContainer = (props) => ( ); -export const WordFilterContainer = (props) => ( -
-
-
- -
- -
-
- -
-
-); +export const WordFilterContainer = (props) => { + return ( + <> + + + + ); +}; export const DownloadModelsContainer = (props) => ( diff --git a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.module.scss b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.module.scss index cab3118a..41360598 100644 --- a/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.module.scss +++ b/src-ui/views/app/config_page/setting_section/setting_box/_templates/Templates.module.scss @@ -8,7 +8,9 @@ &.flex_column { flex-direction: column; } - border-bottom: solid 0.1rem var(--dark_800_color); + &:not(.remove_border_bottom) { + border-bottom: solid 0.1rem var(--dark_800_color); + } &.is_break_point { flex-direction: column; @@ -32,26 +34,4 @@ .message_format_section { width: 100%; -} - - -.word_filter_container { - display: flex; - width: 100%; - flex-direction: column; - justify-content: space-between; - align-items: center; - gap: 2rem; - padding: 2rem; -} - -.word_filter_switch_section { - display: flex; - width: 100%; - justify-content: space-between; - align-items: center; -} - -.word_filter_label_wrapper { - max-width: 34rem; } \ No newline at end of file