From 0e3106f63175a2501414ca6983ed83d4ae1adf31 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Mon, 12 Jun 2023 19:29:08 +1200 Subject: [PATCH 01/27] feat: Add Mantine Support --- invokeai/frontend/web/package.json | 4 +- .../app/components/ThemeLocaleProvider.tsx | 17 +- invokeai/frontend/web/yarn.lock | 310 ++++++++++++++++-- 3 files changed, 297 insertions(+), 34 deletions(-) diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json index 64b9a828cd..c072a9d95c 100644 --- a/invokeai/frontend/web/package.json +++ b/invokeai/frontend/web/package.json @@ -62,10 +62,12 @@ "@dagrejs/graphlib": "^2.1.12", "@dnd-kit/core": "^6.0.8", "@dnd-kit/modifiers": "^6.0.1", - "@emotion/react": "^11.10.6", + "@emotion/react": "^11.11.1", "@emotion/styled": "^11.10.6", "@floating-ui/react-dom": "^2.0.0", "@fontsource/inter": "^4.5.15", + "@mantine/core": "^6.0.13", + "@mantine/hooks": "^6.0.13", "@reduxjs/toolkit": "^1.9.5", "@roarr/browser-log-writer": "^1.1.5", "chakra-ui-contextmenu": "^1.0.5", diff --git a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx index 6aa38fc15b..73646e5727 100644 --- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx +++ b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx @@ -3,11 +3,11 @@ import { createLocalStorageManager, extendTheme, } from '@chakra-ui/react'; +import { RootState } from 'app/store/store'; +import { useAppSelector } from 'app/store/storeHooks'; import { ReactNode, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { theme as invokeAITheme } from 'theme/theme'; -import { RootState } from 'app/store/store'; -import { useAppSelector } from 'app/store/storeHooks'; import { greenTeaThemeColors } from 'theme/colors/greenTea'; import { invokeAIThemeColors } from 'theme/colors/invokeAI'; @@ -15,6 +15,7 @@ import { lightThemeColors } from 'theme/colors/lightTheme'; import { oceanBlueColors } from 'theme/colors/oceanBlue'; import '@fontsource/inter/variable.css'; +import { MantineProvider } from '@mantine/core'; import 'overlayscrollbars/overlayscrollbars.css'; import 'theme/css/overlayscrollbars.css'; @@ -51,9 +52,15 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) { }, [direction]); return ( - - {children} - + + + {children} + + ); } diff --git a/invokeai/frontend/web/yarn.lock b/invokeai/frontend/web/yarn.lock index b14d83ae2b..e1ee68e95c 100644 --- a/invokeai/frontend/web/yarn.lock +++ b/invokeai/frontend/web/yarn.lock @@ -64,6 +64,13 @@ dependencies: regenerator-runtime "^0.13.11" +"@babel/runtime@^7.10.2", "@babel/runtime@^7.13.10": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec" + integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA== + dependencies: + regenerator-runtime "^0.13.11" + "@babel/types@^7.21.4", "@babel/types@^7.4": version "7.21.4" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.4.tgz#2d5d6bb7908699b3b416409ffd3b5daa25b030d4" @@ -985,22 +992,44 @@ source-map "^0.5.7" stylis "4.1.4" -"@emotion/cache@^11.10.8": - version "11.10.8" - resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.8.tgz#3b39b4761bea0ae2f4f07f0a425eec8b6977c03e" - integrity sha512-5fyqGHi51LU95o7qQ/vD1jyvC4uCY5GcBT+UgP4LHdpO9jPDlXqhrRr9/wCKmfoAvh5G/F7aOh4MwQa+8uEqhA== +"@emotion/babel-plugin@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c" + integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ== dependencies: - "@emotion/memoize" "^0.8.0" - "@emotion/sheet" "^1.2.1" - "@emotion/utils" "^1.2.0" - "@emotion/weak-memoize" "^0.3.0" - stylis "4.1.4" + "@babel/helper-module-imports" "^7.16.7" + "@babel/runtime" "^7.18.3" + "@emotion/hash" "^0.9.1" + "@emotion/memoize" "^0.8.1" + "@emotion/serialize" "^1.1.2" + babel-plugin-macros "^3.1.0" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.2.0" + +"@emotion/cache@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff" + integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ== + dependencies: + "@emotion/memoize" "^0.8.1" + "@emotion/sheet" "^1.2.2" + "@emotion/utils" "^1.2.1" + "@emotion/weak-memoize" "^0.3.1" + stylis "4.2.0" "@emotion/hash@^0.9.0": version "0.9.0" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ== +"@emotion/hash@^0.9.1": + version "0.9.1" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" + integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== + "@emotion/is-prop-valid@^0.8.2": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" @@ -1025,18 +1054,23 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== -"@emotion/react@^11.10.6": - version "11.10.8" - resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.8.tgz#02e274ecb45e03ab9d7a8eb9f0f0c064613eaf7b" - integrity sha512-ZfGfiABtJ1P1OXqOBsW08EgCDp5fK6C5I8hUJauc/VcJBGSzqAirMnFslhFWnZJ/w5HxPI36XbvMV0l4KZHl+w== +"@emotion/memoize@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" + integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== + +"@emotion/react@^11.11.1": + version "11.11.1" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157" + integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA== dependencies: "@babel/runtime" "^7.18.3" - "@emotion/babel-plugin" "^11.10.8" - "@emotion/cache" "^11.10.8" - "@emotion/serialize" "^1.1.1" - "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0" - "@emotion/utils" "^1.2.0" - "@emotion/weak-memoize" "^0.3.0" + "@emotion/babel-plugin" "^11.11.0" + "@emotion/cache" "^11.11.0" + "@emotion/serialize" "^1.1.2" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1" + "@emotion/utils" "^1.2.1" + "@emotion/weak-memoize" "^0.3.1" hoist-non-react-statics "^3.3.1" "@emotion/serialize@^1.1.1": @@ -1050,10 +1084,21 @@ "@emotion/utils" "^1.2.0" csstype "^3.0.2" -"@emotion/sheet@^1.2.1": - version "1.2.1" - resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c" - integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA== +"@emotion/serialize@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.2.tgz#017a6e4c9b8a803bd576ff3d52a0ea6fa5a62b51" + integrity sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA== + dependencies: + "@emotion/hash" "^0.9.1" + "@emotion/memoize" "^0.8.1" + "@emotion/unitless" "^0.8.1" + "@emotion/utils" "^1.2.1" + csstype "^3.0.2" + +"@emotion/sheet@^1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec" + integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA== "@emotion/styled@^11.10.6": version "11.10.8" @@ -1072,20 +1117,35 @@ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db" integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== +"@emotion/unitless@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" + integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== + "@emotion/use-insertion-effect-with-fallbacks@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df" integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A== +"@emotion/use-insertion-effect-with-fallbacks@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963" + integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw== + "@emotion/utils@^1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561" integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw== -"@emotion/weak-memoize@^0.3.0": - version "0.3.0" - resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb" - integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg== +"@emotion/utils@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4" + integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg== + +"@emotion/weak-memoize@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6" + integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww== "@esbuild/android-arm64@0.17.18": version "0.17.18" @@ -1234,6 +1294,18 @@ resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.6.tgz#d21ace437cc919cdd8f1640302fa8851e65e75c0" integrity sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg== +"@floating-ui/core@^1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.3.0.tgz#113bc85fa102cf890ae801668f43ee265c547a09" + integrity sha512-vX1WVAdPjZg9DkDkC+zEx/tKtnST6/qcNpwcjeBgco3XRNHz5PUA+ivi/yr6G3o0kMR60uKBJcfOdfzOFI7PMQ== + +"@floating-ui/dom@^1.2.1": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.3.0.tgz#69456f2164fc3d33eb40837686eaf71537235ac9" + integrity sha512-qIAwejE3r6NeA107u4ELDKkH8+VtgRKdXqtSPaKflL2S2V+doyN+Wt9s5oHKXPDo4E8TaVXaHT3+6BbagH31xw== + dependencies: + "@floating-ui/core" "^1.3.0" + "@floating-ui/dom@^1.2.7": version "1.2.7" resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.7.tgz#c123e4db014b07b97e996cd459245fa217049c6b" @@ -1241,6 +1313,13 @@ dependencies: "@floating-ui/core" "^1.2.6" +"@floating-ui/react-dom@^1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.3.0.tgz#4d35d416eb19811c2b0e9271100a6aa18c1579b3" + integrity sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g== + dependencies: + "@floating-ui/dom" "^1.2.1" + "@floating-ui/react-dom@^2.0.0": version "2.0.0" resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.0.tgz#7514baac526c818892bbcc84e1c3115008c029f9" @@ -1248,6 +1327,15 @@ dependencies: "@floating-ui/dom" "^1.2.7" +"@floating-ui/react@^0.19.1": + version "0.19.2" + resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.19.2.tgz#c6e4d2097ed0dca665a7c042ddf9cdecc95e9412" + integrity sha512-JyNk4A0Ezirq8FlXECvRtQOX/iBe5Ize0W/pLkrZjfHW9GUV7Xnq6zm6fyZuQzaHHqEnVizmvlA96e1/CkZv+w== + dependencies: + "@floating-ui/react-dom" "^1.3.0" + aria-hidden "^1.1.3" + tabbable "^6.0.1" + "@fontsource/inter@^4.5.15": version "4.5.15" resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.15.tgz#eed1873d68755d3b52d6fcfcfa3493118430a512" @@ -1335,6 +1423,36 @@ resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796" integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg== +"@mantine/core@^6.0.13": + version "6.0.13" + resolved "https://registry.yarnpkg.com/@mantine/core/-/core-6.0.13.tgz#f05a952e1e2e3cc6eb24d4d77b6c96a1c23fb0bb" + integrity sha512-FjVUGgat2qISV9WD1maVJa81y7H0JjKJ3m0cJj65PzgrXT20hzdEda7S3i4j+a8vUnx+836x5q/yS+RDHvoSlA== + dependencies: + "@floating-ui/react" "^0.19.1" + "@mantine/styles" "6.0.13" + "@mantine/utils" "6.0.13" + "@radix-ui/react-scroll-area" "1.0.2" + react-remove-scroll "^2.5.5" + react-textarea-autosize "8.3.4" + +"@mantine/hooks@^6.0.13": + version "6.0.13" + resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-6.0.13.tgz#d90fa315ee30a900e0d9a460c6bb00c9a65f18e0" + integrity sha512-fHuE3zXo5OP/Q1dMOTnegU6U+tI9GuhO2tgOz6szVuOxrrk0Hzuq1Na9NUSv27HShSRbAfQk+hvyIh+iVV7KXA== + +"@mantine/styles@6.0.13": + version "6.0.13" + resolved "https://registry.yarnpkg.com/@mantine/styles/-/styles-6.0.13.tgz#a3dc542e1613e7cc461dd8b11c6069b5dd8143d7" + integrity sha512-+27oX8ObiBv8jHHDxXKjqe+7cfTJyaAV/Ie00T49EE4LuHuS6nL4vlXHmqamFtDCj2ypEWBV0sdXDev/DNAXSg== + dependencies: + clsx "1.1.1" + csstype "3.0.9" + +"@mantine/utils@6.0.13": + version "6.0.13" + resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-6.0.13.tgz#a7adc128a2e7c07031c7221c1533800d0c80279a" + integrity sha512-iqIU9wurqAeccVbWjM0yr1JGne5VP+ob55M03QAXOEN4+ck93VDTjCkZJR2RFhDcs5q0twQFoOmU/gULR8aKIA== + "@microsoft/api-extractor-model@7.26.5": version "7.26.5" resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.26.5.tgz#b3d0939b4dab6897ce27c966bd394a582f1871e7" @@ -1403,6 +1521,96 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7" integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw== +"@radix-ui/number@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.0.tgz#4c536161d0de750b3f5d55860fc3de46264f897b" + integrity sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/primitive@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253" + integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-compose-refs@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae" + integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-context@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0" + integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-direction@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45" + integrity sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-presence@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a" + integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "1.0.0" + "@radix-ui/react-use-layout-effect" "1.0.0" + +"@radix-ui/react-primitive@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz#c1ebcce283dd2f02e4fbefdaa49d1cb13dbc990a" + integrity sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-slot" "1.0.1" + +"@radix-ui/react-scroll-area@1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.2.tgz#26c906d351b56835c0301126b24574c9e9c7b93b" + integrity sha512-k8VseTxI26kcKJaX0HPwkvlNBPTs56JRdYzcZ/vzrNUkDlvXBy8sMc7WvCpYzZkHgb+hd72VW9MqkqecGtuNgg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/number" "1.0.0" + "@radix-ui/primitive" "1.0.0" + "@radix-ui/react-compose-refs" "1.0.0" + "@radix-ui/react-context" "1.0.0" + "@radix-ui/react-direction" "1.0.0" + "@radix-ui/react-presence" "1.0.0" + "@radix-ui/react-primitive" "1.0.1" + "@radix-ui/react-use-callback-ref" "1.0.0" + "@radix-ui/react-use-layout-effect" "1.0.0" + +"@radix-ui/react-slot@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81" + integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "1.0.0" + +"@radix-ui/react-use-callback-ref@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90" + integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-use-layout-effect@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc" + integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@reactflow/background@11.2.0": version "11.2.0" resolved "https://registry.yarnpkg.com/@reactflow/background/-/background-11.2.0.tgz#2a6f89d4f4837d488629d32a2bd5f01708018115" @@ -2251,7 +2459,7 @@ argparse@~1.0.9: dependencies: sprintf-js "~1.0.2" -aria-hidden@^1.2.2: +aria-hidden@^1.1.3, aria-hidden@^1.2.2: version "1.2.3" resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954" integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ== @@ -2644,6 +2852,11 @@ clone@^1.0.2: resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg== +clsx@1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" + integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== + code-block-writer@^12.0.0: version "12.0.0" resolved "https://registry.yarnpkg.com/code-block-writer/-/code-block-writer-12.0.0.tgz#4dd58946eb4234105aff7f0035977b2afdc2a770" @@ -2833,6 +3046,11 @@ css-tree@^1.1.2: mdn-data "2.0.14" source-map "^0.6.1" +csstype@3.0.9: + version "3.0.9" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b" + integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw== + csstype@^3.0.11, csstype@^3.0.2, csstype@^3.0.6: version "3.1.2" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" @@ -5623,6 +5841,15 @@ react-style-singleton@^2.2.1: invariant "^2.2.4" tslib "^2.0.0" +react-textarea-autosize@8.3.4: + version "8.3.4" + resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz#270a343de7ad350534141b02c9cb78903e553524" + integrity sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ== + dependencies: + "@babel/runtime" "^7.10.2" + use-composed-ref "^1.3.0" + use-latest "^1.2.1" + react-universal-interface@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b" @@ -6287,6 +6514,11 @@ stylis@4.1.4, stylis@^4.0.6: resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.4.tgz#9cb60e7153d8ac6d02d773552bf51c7a0344535b" integrity sha512-USf5pszRYwuE6hg9by0OkKChkQYEXfkeTtm0xKw+jqQhwyjCVLdYyMBK7R+n7dhzsblAWJnGxju4vxq5eH20GQ== +stylis@4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51" + integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw== + stylus-lookup@^3.0.1: version "3.0.2" resolved "https://registry.yarnpkg.com/stylus-lookup/-/stylus-lookup-3.0.2.tgz#c9eca3ff799691020f30b382260a67355fefdddd" @@ -6321,6 +6553,11 @@ supports-preserve-symlinks-flag@^1.0.0: resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== +tabbable@^6.0.1: + version "6.1.2" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.2.tgz#b0d3ca81d582d48a80f71b267d1434b1469a3703" + integrity sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ== + tapable@^2.2.0: version "2.2.1" resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0" @@ -6631,11 +6868,28 @@ use-callback-ref@^1.3.0: dependencies: tslib "^2.0.0" +use-composed-ref@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda" + integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ== + use-image@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/use-image/-/use-image-1.1.0.tgz#dc244c34506d3cf3a8177c1f0bbfb158b9beefe5" integrity sha512-+cBHRR/44ZyMUS873O0vbVylgMM0AbdTunEplAWXvIQ2p69h2sIo2Qq74zeUsq6AMo+27e5lERQvXzd1crGiMg== +use-isomorphic-layout-effect@^1.1.1: + version "1.1.2" + resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb" + integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA== + +use-latest@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.1.tgz#d13dfb4b08c28e3e33991546a2cee53e14038cf2" + integrity sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw== + dependencies: + use-isomorphic-layout-effect "^1.1.1" + use-sidecar@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2" From 9a914250a00b051b6c84ee61d3275be0f4d18dca Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Mon, 12 Jun 2023 19:29:31 +1200 Subject: [PATCH 02/27] feat: Change Model Select To Mantine --- .../system/components/ModelSelect.tsx | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx index 48be6d263a..cedc0d48f3 100644 --- a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx +++ b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx @@ -1,17 +1,15 @@ import { createSelector } from '@reduxjs/toolkit'; -import { ChangeEvent, memo, useCallback } from 'react'; import { isEqual } from 'lodash-es'; +import { ChangeEvent, memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { selectModelsAll, selectModelsById } from '../store/modelSlice'; +import { Select } from '@mantine/core'; import { RootState } from 'app/store/store'; -import { modelSelected } from 'features/parameters/store/generationSlice'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { IAICustomSelectOption } from 'common/components/IAICustomSelect'; import { generationSelector } from 'features/parameters/store/generationSelectors'; -import IAICustomSelect, { - IAICustomSelectOption, -} from 'common/components/IAICustomSelect'; -import IAISelect from 'common/components/IAISelect'; +import { modelSelected } from 'features/parameters/store/generationSlice'; +import { selectModelsAll, selectModelsById } from '../store/modelSlice'; const selector = createSelector( [(state: RootState) => state, generationSelector], @@ -64,13 +62,13 @@ const ModelSelect = () => { // ); return ( - ); From 5b20766ea30c8fecfe666e9dc7d6e77de5f16679 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Mon, 12 Jun 2023 19:48:26 +1200 Subject: [PATCH 03/27] chore: Move Mantine Theme Override to own file --- .../app/components/ThemeLocaleProvider.tsx | 7 ++----- .../frontend/web/src/mantine-theme/theme.ts | 21 +++++++++++++++++++ 2 files changed, 23 insertions(+), 5 deletions(-) create mode 100644 invokeai/frontend/web/src/mantine-theme/theme.ts diff --git a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx index 73646e5727..966e110019 100644 --- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx +++ b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx @@ -16,6 +16,7 @@ import { oceanBlueColors } from 'theme/colors/oceanBlue'; import '@fontsource/inter/variable.css'; import { MantineProvider } from '@mantine/core'; +import { mantineTheme } from 'mantine-theme/theme'; import 'overlayscrollbars/overlayscrollbars.css'; import 'theme/css/overlayscrollbars.css'; @@ -52,11 +53,7 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) { }, [direction]); return ( - + {children} diff --git a/invokeai/frontend/web/src/mantine-theme/theme.ts b/invokeai/frontend/web/src/mantine-theme/theme.ts new file mode 100644 index 0000000000..2313b9a41b --- /dev/null +++ b/invokeai/frontend/web/src/mantine-theme/theme.ts @@ -0,0 +1,21 @@ +import { MantineThemeOverride } from '@mantine/core'; + +export const mantineTheme: MantineThemeOverride = { + colorScheme: 'dark', + colors: { + ocean: [ + '#dcf5ff', + '#afddff', + '#80c4fd', + '#50acf9', + '#2295f6', + '#097bdd', + '#0060ad', + '#00447d', + '#00294e', + '#000f20', + ], + }, + primaryColor: 'ocean', + primaryShade: 6, +}; From 68a02da9902f5dcd4643fa2f380bbdec19c18efe Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Mon, 12 Jun 2023 19:50:34 +1200 Subject: [PATCH 04/27] feat: Use Mantine Select for Scheduler --- .../components/Parameters/Core/ParamScheduler.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx index b12345ae8d..f2c1f62a33 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamScheduler.tsx @@ -1,9 +1,8 @@ +import { Select } from '@mantine/core'; import { createSelector } from '@reduxjs/toolkit'; import { Scheduler } from 'app/constants'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; -import IAICustomSelect from 'common/components/IAICustomSelect'; -import IAISelect from 'common/components/IAISelect'; import { generationSelector } from 'features/parameters/store/generationSelectors'; import { setScheduler } from 'features/parameters/store/generationSlice'; import { uiSelector } from 'features/ui/store/uiSelectors'; @@ -52,11 +51,12 @@ const ParamScheduler = () => { // ); return ( - ); From 32200efce8daab91a9f775cc3e24037e5cdd51d9 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Mon, 12 Jun 2023 19:53:03 +1200 Subject: [PATCH 05/27] feat: Change default font to Inter --- invokeai/frontend/web/src/mantine-theme/theme.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/invokeai/frontend/web/src/mantine-theme/theme.ts b/invokeai/frontend/web/src/mantine-theme/theme.ts index 2313b9a41b..e66d178554 100644 --- a/invokeai/frontend/web/src/mantine-theme/theme.ts +++ b/invokeai/frontend/web/src/mantine-theme/theme.ts @@ -2,6 +2,7 @@ import { MantineThemeOverride } from '@mantine/core'; export const mantineTheme: MantineThemeOverride = { colorScheme: 'dark', + fontFamily: `'InterVariable', sans-serif`, colors: { ocean: [ '#dcf5ff', From 5fe674e22337613f6b94fdc1b6ea151244763b49 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Mon, 12 Jun 2023 21:25:37 +1200 Subject: [PATCH 06/27] feat: Standardize IAIMantineSelect Component --- .../web/src/app/components/ThemeLocaleProvider.tsx | 2 +- .../web/src/common/components/IAIMantineSelect.tsx | 11 +++++++++++ .../components/Parameters/Core/ParamScheduler.tsx | 5 ++--- .../src/features/system/components/ModelSelect.tsx | 5 ++--- 4 files changed, 16 insertions(+), 7 deletions(-) create mode 100644 invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx diff --git a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx index 966e110019..82065d83e3 100644 --- a/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx +++ b/invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx @@ -53,7 +53,7 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) { }, [direction]); return ( - + {children} diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx new file mode 100644 index 0000000000..8f25e4b197 --- /dev/null +++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx @@ -0,0 +1,11 @@ +import { Select, SelectProps } from '@mantine/core'; +import { memo } from 'react'; + +type IAISelectProps = SelectProps; + +const IAIMantineSelect = (props: IAISelectProps) => { + const { searchable = true, ...rest } = props; + return ); diff --git a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx index cedc0d48f3..69407b6e61 100644 --- a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx +++ b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx @@ -3,10 +3,10 @@ import { isEqual } from 'lodash-es'; import { ChangeEvent, memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { Select } from '@mantine/core'; import { RootState } from 'app/store/store'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { IAICustomSelectOption } from 'common/components/IAICustomSelect'; +import IAIMantineSelect from 'common/components/IAIMantineSelect'; import { generationSelector } from 'features/parameters/store/generationSelectors'; import { modelSelected } from 'features/parameters/store/generationSlice'; import { selectModelsAll, selectModelsById } from '../store/modelSlice'; @@ -62,12 +62,11 @@ const ModelSelect = () => { // ); return ( - ; + return ( + ({ + root: {}, label: { color: 'var(--invokeai-colors-base-300)', fontWeight: 'normal', }, input: { backgroundColor: 'var(--invokeai-colors-base-900)', - border: 'none', + borderWidth: '2px', + borderColor: 'var(--invokeai-colors-base-800)', color: 'var(--invokeai-colors-base-100)', - fontWeight: 500, + fontWeight: 600, + '&:hover': { borderColor: 'var(--invokeai-colors-base-700)' }, + '&:focus': { + borderColor: 'var(--invokeai-colors-accent-600)', + }, }, dropdown: { backgroundColor: 'var(--invokeai-colors-base-800)', borderColor: 'var(--invokeai-colors-base-700)', }, item: { - color: 'var(--invokeai-colors-base-300)', - ':hover': { - color: 'var(--invokeai-colors-base-300)', - backgroundColor: 'var(--invokeai-colors-accent-750)', + backgroundColor: 'var(--invokeai-colors-base-800)', + color: 'var(--invokeai-colors-base-200)', + '&[data-hovered]': { + color: 'var(--invokeai-colors-base-100)', + backgroundColor: 'var(--invokeai-colors-base-750)', + }, + '&[data-active]': { + backgroundColor: 'var(--invokeai-colors-base-750)', + '&:hover': { + color: 'var(--invokeai-colors-base-100)', + backgroundColor: 'var(--invokeai-colors-base-750)', + }, }, '&[data-selected]': { - color: 'var(--invokeai-colors-base-300)', + color: 'var(--invokeai-colors-base-50)', backgroundColor: 'var(--invokeai-colors-accent-750)', - fontWeight: 500, - ':hover': { - backgroundColor: 'var(--invokeai-colors-accent-750)', + fontWeight: 600, + '&:hover': { + backgroundColor: 'var(--invokeai-colors-accent-700)', }, }, }, From 9a77bd9140e9f4d3d8f032f59c39599020434dd9 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Tue, 13 Jun 2023 00:11:30 +1200 Subject: [PATCH 09/27] feat: Port IAISelect's to IAIMantineSelect's Ported everything except Model Manager selects and the Canvas Layer Select (this needs tooltip support) --- invokeai/frontend/web/src/app/constants.ts | 6 +-- .../common/components/IAIMantineSelect.tsx | 1 - .../src/features/canvas/store/canvasTypes.ts | 6 +-- .../parameters/ParamControlNetModel.tsx | 34 +++++--------- .../ParamControlNetProcessorSelect.tsx | 46 +++++++++---------- .../InfillAndScaling/ParamInfillMethod.tsx | 12 ++--- .../ParamScaleBeforeProcessing.tsx | 16 +++---- .../FaceRestore/FaceRestoreType.tsx | 11 ++--- .../Parameters/Upscale/UpscaleScale.tsx | 17 ++++--- .../SettingsModal/SettingsModal.tsx | 22 ++++----- 10 files changed, 75 insertions(+), 96 deletions(-) diff --git a/invokeai/frontend/web/src/app/constants.ts b/invokeai/frontend/web/src/app/constants.ts index 6700a732b3..c2e525ad7d 100644 --- a/invokeai/frontend/web/src/app/constants.ts +++ b/invokeai/frontend/web/src/app/constants.ts @@ -22,9 +22,9 @@ export const SCHEDULERS = [ export type Scheduler = (typeof SCHEDULERS)[number]; // Valid upscaling levels -export const UPSCALING_LEVELS: Array<{ key: string; value: number }> = [ - { key: '2x', value: 2 }, - { key: '4x', value: 4 }, +export const UPSCALING_LEVELS: Array<{ label: string; value: string }> = [ + { label: '2x', value: '2' }, + { label: '4x', value: '4' }, ]; export const NUMPY_RAND_MIN = 0; diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx index 82b1042029..5b5659080e 100644 --- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx +++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx @@ -9,7 +9,6 @@ const IAIMantineSelect = (props: IAISelectProps) => { ({ label: { @@ -31,6 +33,7 @@ const IAIMantineSelect = (props: IAISelectProps) => { item: { backgroundColor: 'var(--invokeai-colors-base-800)', color: 'var(--invokeai-colors-base-200)', + padding: 6, '&[data-hovered]': { color: 'var(--invokeai-colors-base-100)', backgroundColor: 'var(--invokeai-colors-base-750)', @@ -44,10 +47,10 @@ const IAIMantineSelect = (props: IAISelectProps) => { }, '&[data-selected]': { color: 'var(--invokeai-colors-base-50)', - backgroundColor: 'var(--invokeai-colors-accent-750)', + backgroundColor: 'var(--invokeai-colors-accent-650)', fontWeight: 600, '&:hover': { - backgroundColor: 'var(--invokeai-colors-accent-700)', + backgroundColor: 'var(--invokeai-colors-accent-600)', }, }, }, @@ -55,6 +58,6 @@ const IAIMantineSelect = (props: IAISelectProps) => { {...rest} /> ); -}; +}); export default memo(IAIMantineSelect); From 4ba5086b9afccff84152ed541a42ecc2c2989e5f Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Mon, 12 Jun 2023 22:11:56 +1000 Subject: [PATCH 12/27] feat(ui): add tooltip to IAIMantineSelect --- .../common/components/IAIMantineSelect.tsx | 95 ++++++++++--------- .../parameters/ParamControlNetModel.tsx | 1 + .../system/components/ModelSelect.tsx | 1 + 3 files changed, 52 insertions(+), 45 deletions(-) diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx index 1dff0db407..115914213b 100644 --- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx +++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx @@ -1,62 +1,67 @@ -import { forwardRef } from '@chakra-ui/react'; +import { Tooltip, forwardRef } from '@chakra-ui/react'; import { Select, SelectProps } from '@mantine/core'; import { memo } from 'react'; -type IAISelectProps = SelectProps; +type IAISelectProps = SelectProps & { + tooltip?: string; +}; const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => { - const { searchable = true, ...rest } = props; + const { searchable = true, tooltip, ...rest } = props; return ( - ({ + root: {}, + label: { + color: 'var(--invokeai-colors-base-300)', + fontWeight: 'normal', }, - }, - dropdown: { - backgroundColor: 'var(--invokeai-colors-base-800)', - borderColor: 'var(--invokeai-colors-base-700)', - }, - item: { - backgroundColor: 'var(--invokeai-colors-base-800)', - color: 'var(--invokeai-colors-base-200)', - padding: 6, - '&[data-hovered]': { + input: { + backgroundColor: 'var(--invokeai-colors-base-900)', + borderWidth: '2px', + borderColor: 'var(--invokeai-colors-base-800)', color: 'var(--invokeai-colors-base-100)', - backgroundColor: 'var(--invokeai-colors-base-750)', + fontWeight: 600, + '&:hover': { borderColor: 'var(--invokeai-colors-base-700)' }, + '&:focus': { + borderColor: 'var(--invokeai-colors-accent-600)', + }, }, - '&[data-active]': { - backgroundColor: 'var(--invokeai-colors-base-750)', - '&:hover': { + dropdown: { + backgroundColor: 'var(--invokeai-colors-base-800)', + borderColor: 'var(--invokeai-colors-base-700)', + }, + item: { + backgroundColor: 'var(--invokeai-colors-base-800)', + color: 'var(--invokeai-colors-base-200)', + padding: 6, + '&[data-hovered]': { color: 'var(--invokeai-colors-base-100)', backgroundColor: 'var(--invokeai-colors-base-750)', }, - }, - '&[data-selected]': { - color: 'var(--invokeai-colors-base-50)', - backgroundColor: 'var(--invokeai-colors-accent-650)', - fontWeight: 600, - '&:hover': { - backgroundColor: 'var(--invokeai-colors-accent-600)', + '&[data-active]': { + backgroundColor: 'var(--invokeai-colors-base-750)', + '&:hover': { + color: 'var(--invokeai-colors-base-100)', + backgroundColor: 'var(--invokeai-colors-base-750)', + }, + }, + '&[data-selected]': { + color: 'var(--invokeai-colors-base-50)', + backgroundColor: 'var(--invokeai-colors-accent-650)', + fontWeight: 600, + '&:hover': { + backgroundColor: 'var(--invokeai-colors-accent-600)', + }, }, }, - }, - })} - {...rest} - /> + })} + {...rest} + /> + ); }); diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx index e5543cc2eb..d5d86dd3ef 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx @@ -54,6 +54,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => { value={model} onChange={handleModelChanged} disabled={!isReady} + tooltip={model} /> ); // return ( diff --git a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx index 69407b6e61..3f76aa0251 100644 --- a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx +++ b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx @@ -63,6 +63,7 @@ const ModelSelect = () => { return ( Date: Tue, 13 Jun 2023 00:20:52 +1200 Subject: [PATCH 13/27] feat: Port Canvas Layer Select to IAIMantineSelect --- .../IAICanvasToolbar/IAICanvasToolbar.tsx | 23 +++++++++---------- .../src/features/canvas/store/canvasTypes.ts | 4 ++-- .../UnifiedCanvasLayerSelect.tsx | 12 +++++----- .../UnifiedCanvasToolbarBeta.tsx | 4 ++-- 4 files changed, 21 insertions(+), 22 deletions(-) diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx index 30ff6fff81..cc408728ab 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx @@ -2,7 +2,6 @@ import { Box, ButtonGroup, Flex } from '@chakra-ui/react'; import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIIconButton from 'common/components/IAIIconButton'; -import IAISelect from 'common/components/IAISelect'; import useImageUploader from 'common/hooks/useImageUploader'; import { useSingleAndDoubleClick } from 'common/hooks/useSingleAndDoubleClick'; import { @@ -25,7 +24,13 @@ import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider'; import { systemSelector } from 'features/system/store/systemSelectors'; import { isEqual } from 'lodash-es'; -import { ChangeEvent } from 'react'; +import IAIMantineSelect from 'common/components/IAIMantineSelect'; +import { + canvasCopiedToClipboard, + canvasDownloadedAsImage, + canvasMerged, + canvasSavedToGallery, +} from 'features/canvas/store/actions'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { @@ -43,12 +48,6 @@ import IAICanvasRedoButton from './IAICanvasRedoButton'; import IAICanvasSettingsButtonPopover from './IAICanvasSettingsButtonPopover'; import IAICanvasToolChooserOptions from './IAICanvasToolChooserOptions'; import IAICanvasUndoButton from './IAICanvasUndoButton'; -import { - canvasCopiedToClipboard, - canvasDownloadedAsImage, - canvasMerged, - canvasSavedToGallery, -} from 'features/canvas/store/actions'; export const selector = createSelector( [systemSelector, canvasSelector, isStagingSelector], @@ -197,8 +196,8 @@ const IAICanvasToolbar = () => { dispatch(canvasDownloadedAsImage()); }; - const handleChangeLayer = (e: ChangeEvent) => { - const newLayer = e.target.value as CanvasLayer; + const handleChangeLayer = (v: string) => { + const newLayer = v as CanvasLayer; dispatch(setLayer(newLayer)); if (newLayer === 'mask' && !isMaskEnabled) { dispatch(setIsMaskEnabled(true)); @@ -214,11 +213,11 @@ const IAICanvasToolbar = () => { }} > - diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts b/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts index 9143b69d55..ae78287a7b 100644 --- a/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts +++ b/invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts @@ -4,8 +4,8 @@ import { RgbaColor } from 'react-colorful'; import { ImageDTO } from 'services/api'; export const LAYER_NAMES_DICT = [ - { key: 'Base', value: 'base' }, - { key: 'Mask', value: 'mask' }, + { label: 'Base', value: 'base' }, + { label: 'Mask', value: 'mask' }, ]; export const LAYER_NAMES = ['base', 'mask'] as const; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasLayerSelect.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasLayerSelect.tsx index 780744b045..5b35042fa5 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasLayerSelect.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasLayerSelect.tsx @@ -1,6 +1,6 @@ import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import IAISelect from 'common/components/IAISelect'; +import IAIMantineSelect from 'common/components/IAIMantineSelect'; import { canvasSelector, isStagingSelector, @@ -12,7 +12,6 @@ import { } from 'features/canvas/store/canvasTypes'; import { isEqual } from 'lodash-es'; -import { ChangeEvent } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; @@ -51,22 +50,23 @@ export default function UnifiedCanvasLayerSelect() { [layer] ); - const handleChangeLayer = (e: ChangeEvent) => { - const newLayer = e.target.value as CanvasLayer; + const handleChangeLayer = (v: string) => { + const newLayer = v as CanvasLayer; dispatch(setLayer(newLayer)); if (newLayer === 'mask' && !isMaskEnabled) { dispatch(setIsMaskEnabled(true)); } }; return ( - ); } diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx index ece4386d45..b5eec3bec3 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx @@ -2,6 +2,7 @@ import { Flex } from '@chakra-ui/react'; import IAICanvasRedoButton from 'features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton'; import IAICanvasUndoButton from 'features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton'; +import UnifiedCanvasSettings from './UnifiedCanvasToolSettings/UnifiedCanvasSettings'; import UnifiedCanvasCopyToClipboard from './UnifiedCanvasToolbar/UnifiedCanvasCopyToClipboard'; import UnifiedCanvasDownloadImage from './UnifiedCanvasToolbar/UnifiedCanvasDownloadImage'; import UnifiedCanvasFileUploader from './UnifiedCanvasToolbar/UnifiedCanvasFileUploader'; @@ -13,11 +14,10 @@ import UnifiedCanvasResetCanvas from './UnifiedCanvasToolbar/UnifiedCanvasResetC import UnifiedCanvasResetView from './UnifiedCanvasToolbar/UnifiedCanvasResetView'; import UnifiedCanvasSaveToGallery from './UnifiedCanvasToolbar/UnifiedCanvasSaveToGallery'; import UnifiedCanvasToolSelect from './UnifiedCanvasToolbar/UnifiedCanvasToolSelect'; -import UnifiedCanvasSettings from './UnifiedCanvasToolSettings/UnifiedCanvasSettings'; const UnifiedCanvasToolbarBeta = () => { return ( - + From 705573f0a8b71300cc9fb5a1d4c2a5209136f170 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Mon, 12 Jun 2023 22:31:54 +1000 Subject: [PATCH 14/27] feat(ui): even more pedantic mantine select theming --- .../web/src/common/components/IAIMantineSelect.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx index 115914213b..2b880d5765 100644 --- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx +++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx @@ -1,4 +1,4 @@ -import { Tooltip, forwardRef } from '@chakra-ui/react'; +import { Tooltip } from '@chakra-ui/react'; import { Select, SelectProps } from '@mantine/core'; import { memo } from 'react'; @@ -6,12 +6,11 @@ type IAISelectProps = SelectProps & { tooltip?: string; }; -const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => { +const IAIMantineSelect = (props: IAISelectProps) => { const { searchable = true, tooltip, ...rest } = props; return ( ({ - root: {}, label: { color: 'var(--invokeai-colors-base-300)', fontWeight: 'normal',