diff --git a/data.js b/data.js index e13024ba..7c4792de 100644 --- a/data.js +++ b/data.js @@ -88,4 +88,60 @@ export const generateTestData = (num) => { } return testDataArray; -}; \ No newline at end of file +}; + +export const word_filter_list = [ + { value: "りんご", is_redoable: false }, + { value: "forest", is_redoable: false }, + { value: "もり", is_redoable: false }, + { value: "elephant", is_redoable: false }, + { value: "penguin", is_redoable: false }, + { value: "やま", is_redoable: false }, + { value: "notebook", is_redoable: false }, + { value: "zebra", is_redoable: false }, + { value: "ちょう", is_redoable: false }, + { value: "dinosaur", is_redoable: false }, + { value: "たいこ", is_redoable: false }, + { value: "カンガルー", is_redoable: false }, + { value: "ふうせん", is_redoable: false }, + { value: "candle", is_redoable: false }, + { value: "tiger", is_redoable: false }, + { value: "umbrella", is_redoable: false }, + { value: "garden", is_redoable: false }, + { value: "ペンギン", is_redoable: false }, + { value: "ひまわり", is_redoable: false }, + { value: "kangaroo", is_redoable: false }, + { value: "とうだい", is_redoable: false }, + { value: "シロフォン", is_redoable: false }, + { value: "ひこうき", is_redoable: false }, + { value: "しろ", is_redoable: false }, + { value: "しあわせ", is_redoable: false }, + { value: "xylophone", is_redoable: false }, + { value: "volcano", is_redoable: false }, + { value: "drum", is_redoable: false }, + { value: "lighthouse", is_redoable: false }, + { value: "quicksand", is_redoable: false }, + { value: "airplane", is_redoable: false }, + { value: "しまうま", is_redoable: false }, + { value: "sunflower", is_redoable: false }, + { value: "ジャングル", is_redoable: false }, + { value: "くじら", is_redoable: false }, + { value: "apple", is_redoable: false }, + { value: "island", is_redoable: false }, + { value: "ocean", is_redoable: false }, + { value: "rainbow", is_redoable: false }, + { value: "castle", is_redoable: false }, + { value: "かさ", is_redoable: false }, + { value: "ぞう", is_redoable: false }, + { value: "balloon", is_redoable: false }, + { value: "happiness", is_redoable: false }, + { value: "whale", is_redoable: false }, + { value: "にじ", is_redoable: false }, + { value: "ヨット", is_redoable: false }, + { value: "しま", is_redoable: false }, + { value: "かざん", is_redoable: false }, + { value: "ノート", is_redoable: false }, + { value: "mountain", is_redoable: false }, + { value: "うみ", is_redoable: false }, + { value: "ジャングル", is_redoable: false }, +]; \ No newline at end of file diff --git a/src-ui/assets/cancel.svg b/src-ui/assets/cancel.svg new file mode 100644 index 00000000..81f096a9 --- /dev/null +++ b/src-ui/assets/cancel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src-ui/assets/redo.svg b/src-ui/assets/redo.svg new file mode 100644 index 00000000..7a2fa599 --- /dev/null +++ b/src-ui/assets/redo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src-ui/store.js b/src-ui/store.js index b9e88dc6..8d97d36e 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -4,7 +4,12 @@ import { useSetAtom } from "jotai"; -import { translator_list, test_device_list, generateTestData } from "@data"; +import { + translator_list, + test_device_list, + generateTestData, + word_filter_list, +} from "@data"; export const store = { backend_subprocess: null, @@ -133,6 +138,8 @@ export const { atomInstance: Atom_ReceivedMessageFormatWithT, useHook: useReceiv is_message_first: true, }, "ReceivedMessageFormatWithT"); +export const { atomInstance: Atom_WordFilterList, useHook: useWordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList"); + export const { atomInstance: Atom_TranslatorListStatus, useHook: useTranslatorListStatus } = createAtomWithHook(translator_list, "TranslatorListStatus"); export const { atomInstance: Atom_SelectedTranslatorIdStatus, useHook: useSelectedTranslatorIdStatus } = createAtomWithHook("CTranslate2", "SelectedTranslatorIdStatus"); diff --git a/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx index 8913d80c..de69b235 100644 --- a/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx +++ b/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx @@ -17,6 +17,7 @@ export const Appearance = () => { RadioButtonContainer, DeeplAuthKeyContainer, MessageFormatContainer, + WordFilterContainer, ActionButtonContainer, } = useSettingBox(); @@ -58,6 +59,8 @@ export const Appearance = () => { + + {}}/> diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx index c6b4e409..1df19e90 100644 --- a/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx +++ b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx @@ -13,6 +13,7 @@ import { RadioButton } from "./radio_button/RadioButton"; import { OpenWebpage_DeeplAuthKey, DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey"; import { MessageFormat } from "./message_format/MessageFormat"; import { ActionButton } from "./action_button/ActionButton"; +import { WordFilter } from "./word_filter/WordFilter"; export const useSettingBox = () => { const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu(); @@ -126,6 +127,20 @@ export const useSettingBox = () => { }; + const WordFilterContainer = (props) => { + return ( +
+
+ + {/* */} +
+
+ +
+
+ ); + }; + return { DropdownMenuContainer, SliderContainer, @@ -136,6 +151,7 @@ export const useSettingBox = () => { RadioButtonContainer, DeeplAuthKeyContainer, MessageFormatContainer, + WordFilterContainer, ActionButtonContainer, }; }; \ No newline at end of file diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/word_filter/WordFilter.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/word_filter/WordFilter.jsx new file mode 100644 index 00000000..955df0e0 --- /dev/null +++ b/src-ui/windows/config_window/setting_section/setting_box/components/word_filter/WordFilter.jsx @@ -0,0 +1,103 @@ +import styles from "./WordFilter.module.scss"; +import { _Entry } from "../_atoms/_entry/_Entry"; +import { useState } from "react"; +import { useWordFilterList } from "@store"; +export const WordFilter = () => { + const [input_value, setInputValue] = useState(); + const { currentWordFilterList, updateWordFilterList } = useWordFilterList(); + + const onChangeEntry = (e) => { + setInputValue(e.target.value); + }; + + const addWords = () => { + const input_value_array = input_value.split(","); + + let updated_list = [...currentWordFilterList]; + + for (let each_input_value of input_value_array) { + each_input_value = each_input_value.trim(); + if (each_input_value) { + const target_item = updated_list.find((item) => item.value === each_input_value); + if (target_item === undefined) { + // Add + updated_list = [...updated_list, { value: each_input_value, is_redoable: false }]; + } else { + // Update + updated_list = updated_list.map(item => + item.value === each_input_value ? { ...item, is_redoable: false } : item + ); + } + } + } + + updateWordFilterList(updated_list); + }; + + + const updateRedoable = (target_item_value, is_redoable) => { + updateWordFilterList((prev_list) => + prev_list.map(item => + item.value === target_item_value ? { ...item, is_redoable: is_redoable } : item + ) + ); + }; + + const deleteAction = (target_item_value) => { + updateRedoable(target_item_value, true); + }; + + const redoAction = (target_item_value) => { + updateRedoable(target_item_value, false); + }; + + + return ( +
+
+ { + currentWordFilterList.map((item, index) => { + return ; + }) + } +
+
+ <_Entry width="30rem" onChange={onChangeEntry}/> + +
+
+ ); +}; + +import DeleteSvg from "@images/cancel.svg?react"; +import RedoSvg from "@images/redo.svg?react"; +import clsx from "clsx"; +const WordFilterItem = (props) => { + + + const item_wrapper_class_names = clsx(styles["item_wrapper"], { + [styles["is_redoable"]]: props.is_redoable + }); + + const item_text_class_names = clsx(styles["item_text"], { + [styles["is_redoable"]]: props.is_redoable + }); + + const target_item_value = props.value; + + return ( +
+

{target_item_value}

+ {props.is_redoable + ? + + : + + } +
+ ); +}; \ No newline at end of file diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/word_filter/WordFilter.module.scss b/src-ui/windows/config_window/setting_section/setting_box/components/word_filter/WordFilter.module.scss new file mode 100644 index 00000000..dbb24320 --- /dev/null +++ b/src-ui/windows/config_window/setting_section/setting_box/components/word_filter/WordFilter.module.scss @@ -0,0 +1,91 @@ +.container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 2rem; +} + + +.list_section_wrapper { + display: flex; + flex-wrap: wrap; + width: 100%; + gap: 0.6rem; + overflow-y: auto; + max-height: 20rem; + padding-right: 2rem; +} + +.item_wrapper { + display: flex; + justify-content: center; + align-items: center; + gap: 0.4rem; + background-color: var(--dark_800_color); + padding: 0.2rem 0.2rem 0.2rem 1rem; + border-radius: 0.4rem; + &.is_redoable { + background-color: var(--dark_850_color); + } +} +.item_text { + font-size: 1.4rem; + font-weight: 300; + color: var(--dark_basic_text_color); + &.is_redoable { + text-decoration: line-through; + } +} + +.action_button { + border-radius: 0.4rem; + &:hover { + background-color: var(--dark_750_color); + } + &:active { + background-color: var(--dark_850_color); + } + &.delete { + padding: 0.2rem; + } + &.redo { + padding: 0.6rem; + } +} + +.delete_svg { + width: 2.4rem; + color: #bb4448; +} + +.redo_svg { + width: 1.6rem; + color: var(--dark_500_color); +} + + + + +.entry_section_wrapper { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; +} + +.add_button { + padding: 0.8rem 1.2rem; + background-color: var(--primary_600_color); + color: var(--dark_basic_text_color); + font-size: 1.4rem; + border-radius: 0.4rem; + text-align: center; + flex-shrink: 0; + &:hover { + background-color: var(--primary_500_color); + } + &:active { + background-color: var(--primary_700_color); + } +} \ No newline at end of file