From df48d39654fdd7d5e5cb85ca41bc9e5565fa386d Mon Sep 17 00:00:00 2001 From: Angelica Chung Date: Mon, 4 Jul 2022 15:37:56 -0400 Subject: [PATCH] more cleanup --- packages/fakeyou/src/App.scss | 16 +++---- .../fakeyou/src/_i18n/FakeYouTranslations.ts | 4 +- .../tts/tts_model_list/AutocompleteSearch.tsx | 28 +++++------ .../tts_model_list/MultiDropdownSearch.tsx | 48 +++++++++---------- .../tts/tts_model_list/TtsModelListFc.tsx | 31 ++++++------ 5 files changed, 64 insertions(+), 63 deletions(-) diff --git a/packages/fakeyou/src/App.scss b/packages/fakeyou/src/App.scss index 79c26a1c80..58b3d0d3d3 100644 --- a/packages/fakeyou/src/App.scss +++ b/packages/fakeyou/src/App.scss @@ -24,12 +24,10 @@ body { .bg-gradient { background: rgb(13, 16, 25) !important; - background: linear-gradient( - 325deg, - rgba(13, 16, 25, 1) 0%, - rgba(42, 21, 34, 1) 55%, - rgba(16, 14, 26, 1) 100% - ) !important; + background: linear-gradient(325deg, + rgba(13, 16, 25, 1) 0%, + rgba(42, 21, 34, 1) 55%, + rgba(16, 14, 26, 1) 100%) !important; background-repeat: no-repeat; background-attachment: fixed; } @@ -180,7 +178,7 @@ nav { } a.top-bar-text:hover { - color: $primary !important; + color: $primary !important; } .top-bar { @@ -394,6 +392,7 @@ a.top-bar-text:hover { .nav-link { color: $white; } + .dropdown-menu { transition: 0.2s; opacity: 1; @@ -402,6 +401,7 @@ a.top-bar-text:hover { transform: rotateX(0deg); } } + .dropdown-menu { display: block; opacity: 0; @@ -412,4 +412,4 @@ a.top-bar-text:hover { } } } -} +} \ No newline at end of file diff --git a/packages/fakeyou/src/_i18n/FakeYouTranslations.ts b/packages/fakeyou/src/_i18n/FakeYouTranslations.ts index 1ddc5f038e..348163e8ac 100644 --- a/packages/fakeyou/src/_i18n/FakeYouTranslations.ts +++ b/packages/fakeyou/src/_i18n/FakeYouTranslations.ts @@ -2,7 +2,7 @@ import { COMMON_TRANSLATIONS, MergeDeepDictionary } from '@storyteller/component // Use \u{00a0} =   character literal -const FAKEYOU_TRANSLATIONS : any = { +const FAKEYOU_TRANSLATIONS: any = { // English: 46.6% Twitch (#1), 30+% FakeYou (#1) en: { translation: { @@ -269,6 +269,6 @@ const FAKEYOU_TRANSLATIONS : any = { } // TODO: Type these as i18next dictionaries -const FAKEYOU_MERGED_TRANSLATIONS : any = MergeDeepDictionary(FAKEYOU_TRANSLATIONS, COMMON_TRANSLATIONS); +const FAKEYOU_MERGED_TRANSLATIONS: any = MergeDeepDictionary(FAKEYOU_TRANSLATIONS, COMMON_TRANSLATIONS); export { FAKEYOU_MERGED_TRANSLATIONS } diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/AutocompleteSearch.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/AutocompleteSearch.tsx index b4730664d2..b2e5306436 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_model_list/AutocompleteSearch.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_model_list/AutocompleteSearch.tsx @@ -15,7 +15,7 @@ import { t } from 'i18next'; interface Props { allTtsCategories: TtsCategoryType[], allTtsModels: TtsModelListItem[], - allTtsModelsByTokenMap: Map, + allTtsModelsByTokenMap: Map, dropdownCategories: TtsCategoryType[][], setDropdownCategories: (dropdownCategories: TtsCategoryType[][]) => void, @@ -37,18 +37,18 @@ export function AutocompleteSearch(props: Props) { return ( <>
- {t('ttsListPage.search')} -
+ {t('ttsListPage.search')} +
{/* NB: See note above about this library. */} item.title} + getItemValue={(item: TtsModelListItem) => item.title} items={props.allTtsModels} renderInput={(props) => ( - )} renderMenu={children => ( @@ -56,14 +56,14 @@ export function AutocompleteSearch(props: Props) { {children.slice(0, maxMenuItems)}
)} - renderItem={(item : TtsModelListItem, isHighlighted : boolean) => + renderItem={(item: TtsModelListItem, isHighlighted: boolean) =>
{item.title}
} value={searchValue} - onChange={(e : any) => setSearchValue(e.target.value) } - onSelect={(val : string, item: TtsModelListItem) => { + onChange={(e: any) => setSearchValue(e.target.value)} + onSelect={(val: string, item: TtsModelListItem) => { // Nothing selected. props.setSelectedCategories([]); @@ -81,7 +81,7 @@ export function AutocompleteSearch(props: Props) { props.setDropdownCategories(newDropdownCategories); props.setMaybeSelectedTtsModel(item) }} - shouldItemRender={(item : TtsModelListItem, value) => { + shouldItemRender={(item: TtsModelListItem, value) => { // TODO: A trie would be so much better. Ugh, this is so bad. let test = value.toLocaleLowerCase().trim(); if (test.length === 0) { @@ -93,9 +93,9 @@ export function AutocompleteSearch(props: Props) { inputProps={{ id: 'states-autocomplete' }} wrapperStyle={{ position: 'relative', display: 'inline-block' }} /> - + {/* - + */}
diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx index cd7f9d1ec4..0832b173be 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx @@ -9,9 +9,9 @@ interface Props { allTtsCategories: TtsCategoryType[], allTtsModels: TtsModelListItem[], - allTtsCategoriesByTokenMap: Map, - allTtsModelsByTokenMap: Map, - ttsModelsByCategoryToken: Map>, + allTtsCategoriesByTokenMap: Map, + allTtsModelsByTokenMap: Map, + ttsModelsByCategoryToken: Map>, dropdownCategories: TtsCategoryType[][], setDropdownCategories: (dropdownCategories: TtsCategoryType[][]) => void, @@ -24,8 +24,8 @@ interface Props { } export function MultiDropdownSearch(props: Props) { - const { - allTtsCategories, + const { + allTtsCategories, allTtsModels, allTtsCategoriesByTokenMap, allTtsModelsByTokenMap, @@ -81,7 +81,7 @@ export function MultiDropdownSearch(props: Props) { const doChangeCategory = (level: number, maybeToken: string) => { // Slice off all the irrelevant child category choices, then append new choice. let newCategorySelections = selectedCategories.slice(0, level); - + // And the dropdowns themselves let newDropdownCategories = dropdownCategories.slice(0, level + 1); @@ -114,7 +114,7 @@ export function MultiDropdownSearch(props: Props) { } } - const handleChangeCategory = (ev: React.FormEvent, level: number) => { + const handleChangeCategory = (ev: React.FormEvent, level: number) => { const maybeToken = (ev.target as HTMLSelectElement).value; if (!maybeToken) { return true; @@ -137,7 +137,7 @@ export function MultiDropdownSearch(props: Props) { } } - const handleChangeVoice = (ev: React.FormEvent) => { + const handleChangeVoice = (ev: React.FormEvent) => { const ttsModelToken = (ev.target as HTMLSelectElement).value; const maybeTtsModel = allTtsModelsByTokenMap.get(ttsModelToken); if (maybeTtsModel) { @@ -154,10 +154,10 @@ export function MultiDropdownSearch(props: Props) { let dropdownOptions = []; dropdownOptions.push( - ); @@ -178,7 +178,7 @@ export function MultiDropdownSearch(props: Props) { if (dropdownOptions.length <= 1) { // We've run out of subcategories. (1 == "Select...") // No sense trying to build more. - break; + break; } categoryDropdowns.push( @@ -190,7 +190,7 @@ export function MultiDropdownSearch(props: Props) { name={`categories-${i}`} onChange={(ev) => handleChangeCategory(ev, i)} defaultValue="*" - > + > {dropdownOptions} @@ -200,7 +200,7 @@ export function MultiDropdownSearch(props: Props) {
-
) diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx index ff0e1b0284..7dadb7be74 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx @@ -332,13 +332,14 @@ function TtsModelListFc(props: Props) { {twitchTtsNotice} -
+
-

Create TTS

+ +

Create TTS

-
-
+
+ -
+
+
@@ -383,18 +384,18 @@ function TtsModelListFc(props: Props) { {maybeError}
-
-
+
+
-
+
- -
+ +


@@ -434,7 +435,7 @@ function TtsModelListFc(props: Props) { -
+
); }