From 055ac64d8945b88bc99c53e90a7724e42c9f2f14 Mon Sep 17 00:00:00 2001 From: chenyu <63953834+chenyu-01@users.noreply.github.com> Date: Fri, 27 Dec 2024 10:44:15 +0800 Subject: [PATCH 1/7] feat: add search box and title above model list --- app/components/ui-lib.module.scss | 31 ++++++++- app/components/ui-lib.tsx | 103 ++++++++++++++++++++---------- app/locales/cn.ts | 3 + app/locales/en.ts | 3 + 4 files changed, 103 insertions(+), 37 deletions(-) diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss index 56aeac311ae..f71ce003480 100644 --- a/app/components/ui-lib.module.scss +++ b/app/components/ui-lib.module.scss @@ -78,7 +78,7 @@ .list { border: var(--border-in-light); - border-radius: 10px; + border-radius: 0 0 10px 10px; box-shadow: var(--card-shadow); margin-bottom: 20px; animation: slide-in ease 0.3s; @@ -313,11 +313,37 @@ .selector-item-disabled { opacity: 0.6; } + .selector-bar { + background-color: var(--white); + border: solid var(--border-in-light); + border-top-left-radius: 10px; + border-top-right-radius: 10px; + min-height: 40px; + width: 100%; + } + .selector-title { + font-size: large; + font-weight: bold; + padding: 10px; + } + .selector-search-container { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px; + border-bottom: solid var(--border-in-light); + } + .selector-search-input { + padding: 5px; + margin-right: 5px; + flex-grow: 1; + max-width: none; + } &-content { min-width: 300px; .list { - max-height: 90vh; + max-height: 50vh; overflow-x: hidden; overflow-y: auto; @@ -336,4 +362,3 @@ } } } - diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx index a642652358f..bc7128fe72f 100644 --- a/app/components/ui-lib.tsx +++ b/app/components/ui-lib.tsx @@ -507,44 +507,79 @@ export function Selector(props: { props.onClose?.(); } }; - + const [searchText, setSearchText] = useState(""); + const [filteredItems, setFilteredItems] = useState([...props.items]); + function onSearch(text: string) { + setSearchText(text); + if (text === "") { + setFilteredItems([...props.items]); + return; + } + // filter by items title + const newItems = props.items.filter((item) => + item.title.toLowerCase().includes(text.toLowerCase()), + ); + setFilteredItems([...newItems]); + } return (
props.onClose?.()}>
+ {/* todo: add searchbox */} +
+
+ {Locale.UI.SelectorTitle} +
+
+ onSearch(e.currentTarget.value)} + /> +
+
- {props.items.map((item, i) => { - const selected = selectedValues.includes(item.value); - return ( - { - if (item.disable) { - e.stopPropagation(); - } else { - handleSelection(e, item.value); - } - }} - > - {selected ? ( -
- ) : ( - <> - )} - - ); - })} + {filteredItems.length ? ( + filteredItems.map((item, i) => { + const selected = selectedValues.includes(item.value); + return ( + { + if (item.disable) { + e.stopPropagation(); + } else { + handleSelection(e, item.value); + } + }} + > + {selected ? ( +
+ ) : ( + <> + )} + + ); + }) + ) : ( + + )}
diff --git a/app/locales/cn.ts b/app/locales/cn.ts index 47be019a809..fd40c175b61 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -758,6 +758,9 @@ const cn = { Import: "导入", Sync: "同步", Config: "配置", + Search: "搜索", + SelectorTitle: "选择model", + NoResults: "没有结果", }, Exporter: { Description: { diff --git a/app/locales/en.ts b/app/locales/en.ts index fddb6f09153..fb80ca4b412 100644 --- a/app/locales/en.ts +++ b/app/locales/en.ts @@ -764,6 +764,9 @@ const en: LocaleType = { Import: "Import", Sync: "Sync", Config: "Config", + Search: "Search", + SelectorTitle: "Choose Model", + NoResults: "No Results", }, Exporter: { Description: { From 8cfa534053904ced6342613c5d1388d24fcd4ea5 Mon Sep 17 00:00:00 2001 From: chenyu <63953834+chenyu-01@users.noreply.github.com> Date: Sun, 29 Dec 2024 10:56:16 +0800 Subject: [PATCH 2/7] fix: move llm selector animation to upper class --- app/components/ui-lib.module.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss index f71ce003480..e2abfc9d92a 100644 --- a/app/components/ui-lib.module.scss +++ b/app/components/ui-lib.module.scss @@ -81,7 +81,7 @@ border-radius: 0 0 10px 10px; box-shadow: var(--card-shadow); margin-bottom: 20px; - animation: slide-in ease 0.3s; + background: var(--white); } @@ -341,6 +341,7 @@ } &-content { + animation: slide-in ease 0.3s; min-width: 300px; .list { max-height: 50vh; From 8fab48b6f86537ae41d7e00dcdae71d56f46f44c Mon Sep 17 00:00:00 2001 From: chenyu <63953834+chenyu-01@users.noreply.github.com> Date: Sun, 29 Dec 2024 11:05:07 +0800 Subject: [PATCH 3/7] fix: prevent closing the selector when clicking title and search box --- app/components/ui-lib.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx index bc7128fe72f..1fa614f3b4e 100644 --- a/app/components/ui-lib.tsx +++ b/app/components/ui-lib.tsx @@ -523,8 +523,11 @@ export function Selector(props: { } return (
props.onClose?.()}> -
- {/* todo: add searchbox */} +
e.stopPropagation()} + > + {/* title and search box */}
{Locale.UI.SelectorTitle} @@ -539,6 +542,7 @@ export function Selector(props: { />
+ {/* list content */} {filteredItems.length ? ( filteredItems.map((item, i) => { From 96ede7d06a6a78ae50ca0da90e1f9ee5b8f1d9ba Mon Sep 17 00:00:00 2001 From: chenyu <63953834+chenyu-01@users.noreply.github.com> Date: Sun, 29 Dec 2024 11:19:52 +0800 Subject: [PATCH 4/7] fix: update selector content to fixed width --- app/components/ui-lib.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss index e2abfc9d92a..3c7425a4b63 100644 --- a/app/components/ui-lib.module.scss +++ b/app/components/ui-lib.module.scss @@ -342,7 +342,7 @@ &-content { animation: slide-in ease 0.3s; - min-width: 300px; + width: 30rem; .list { max-height: 50vh; overflow-x: hidden; From d8934709dcc248131046fb98b79313015a780257 Mon Sep 17 00:00:00 2001 From: chenyu <63953834+chenyu-01@users.noreply.github.com> Date: Sun, 29 Dec 2024 12:22:54 +0800 Subject: [PATCH 5/7] fix: update selector content to fixed height --- app/components/ui-lib.module.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss index 3c7425a4b63..9914dd4b47d 100644 --- a/app/components/ui-lib.module.scss +++ b/app/components/ui-lib.module.scss @@ -345,6 +345,8 @@ width: 30rem; .list { max-height: 50vh; + min-height: 50vh; + overflow-x: hidden; overflow-y: auto; From 6582376e3b04465cfd3a149ccb2e318b233c560d Mon Sep 17 00:00:00 2001 From: chenyu <63953834+chenyu-01@users.noreply.github.com> Date: Sun, 29 Dec 2024 13:11:16 +0800 Subject: [PATCH 6/7] fix: update selector title in localization files, in case when dalle3 config selector use same title --- app/locales/cn.ts | 2 +- app/locales/en.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/locales/cn.ts b/app/locales/cn.ts index fd40c175b61..f483be804bb 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -759,7 +759,7 @@ const cn = { Sync: "同步", Config: "配置", Search: "搜索", - SelectorTitle: "选择model", + SelectorTitle: "选择", NoResults: "没有结果", }, Exporter: { diff --git a/app/locales/en.ts b/app/locales/en.ts index fb80ca4b412..0a1d0edd2ee 100644 --- a/app/locales/en.ts +++ b/app/locales/en.ts @@ -765,7 +765,7 @@ const en: LocaleType = { Sync: "Sync", Config: "Config", Search: "Search", - SelectorTitle: "Choose Model", + SelectorTitle: "Select", NoResults: "No Results", }, Exporter: { From dee9c945348cdb91178dcd4d767f0e102ec2db02 Mon Sep 17 00:00:00 2001 From: chenyu <63953834+chenyu-01@users.noreply.github.com> Date: Mon, 30 Dec 2024 15:56:07 +0800 Subject: [PATCH 7/7] style: change select content height to fixed height --- app/components/ui-lib.module.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss index 9914dd4b47d..403653b0032 100644 --- a/app/components/ui-lib.module.scss +++ b/app/components/ui-lib.module.scss @@ -343,10 +343,8 @@ &-content { animation: slide-in ease 0.3s; width: 30rem; + height: 60vh; .list { - max-height: 50vh; - min-height: 50vh; - overflow-x: hidden; overflow-y: auto;