Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): use make label widths grow

Browse Source 
Fixes issue where translations overflowed due to hardcoded widths.
This commit is contained in:
psychedelicious 2023-12-30 09:21:36 +11:00 committed by Kent Keirsey
parent 2a41fd0b29
commit 55dfabb892
7 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx
View File

@ -53,4 +53,4 @@ export const AspectRatioSelect = memo(() => {
AspectRatioSelect.displayName = 'AspectRatioSelect'; AspectRatioSelect.displayName = 'AspectRatioSelect';
const selectStyles: SystemStyleObject = { minW: 48 }; const selectStyles: SystemStyleObject = { minW: 24 };

2
invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
View File

@ -12,7 +12,7 @@ import { memo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const labelProps: InvLabelProps = { const labelProps: InvLabelProps = {
w: '9.2rem', minW: '9.2rem',
}; };
const labelProps2: InvLabelProps = { const labelProps2: InvLabelProps = {

2
invokeai/frontend/web/src/features/settingsAccordions/CompositingSettingsAccordion/CompositingSettingsAccordion.tsx
View File

@ -20,7 +20,7 @@ import { memo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const coherenceLabelProps: FormLabelProps = { const coherenceLabelProps: FormLabelProps = {
w: '4.5rem', minW: '4.5rem',
}; };
export const CompositingSettingsAccordion = memo(() => { export const CompositingSettingsAccordion = memo(() => {

2
invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
View File

@ -25,7 +25,7 @@ import { memo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const labelProps: InvLabelProps = { const labelProps: InvLabelProps = {
w: '4rem', minW: '4rem',
}; };
const badgesSelector = createMemoizedSelector( const badgesSelector = createMemoizedSelector(

4
invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSettingsAccordion.tsx
View File

@ -43,11 +43,11 @@ const selector = createMemoizedSelector(
); );
const labelProps: InvLabelProps = { const labelProps: InvLabelProps = {
w: 12, minW: 12,
}; };
const scalingLabelProps: InvLabelProps = { const scalingLabelProps: InvLabelProps = {
w: '4.5rem', minW: '4.5rem',
}; };
export const ImageSettingsAccordion = memo(() => { export const ImageSettingsAccordion = memo(() => {

4
invokeai/frontend/web/src/features/settingsAccordions/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
View File

@ -19,11 +19,11 @@ import { useTranslation } from 'react-i18next';
import { useIsRefinerAvailable } from 'services/api/hooks/useIsRefinerAvailable'; import { useIsRefinerAvailable } from 'services/api/hooks/useIsRefinerAvailable';
const aestheticLabelProps: InvLabelProps = { const aestheticLabelProps: InvLabelProps = {
w: '9.2rem', minW: '9.2rem',
}; };
const stepsScaleLabelProps: InvLabelProps = { const stepsScaleLabelProps: InvLabelProps = {
w: '5rem', minW: '5rem',
}; };
const selector = createMemoizedSelector(stateSelector, (state) => { const selector = createMemoizedSelector(stateSelector, (state) => {

3
invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
View File

@ -99,6 +99,7 @@ export const NO_GALLERY_TABS: InvokeTabName[] = ['modelManager', 'queue'];
export const NO_SIDE_PANEL_TABS: InvokeTabName[] = ['modelManager', 'queue']; export const NO_SIDE_PANEL_TABS: InvokeTabName[] = ['modelManager', 'queue'];
const panelStyles: CSSProperties = { height: '100%', width: '100%' }; const panelStyles: CSSProperties = { height: '100%', width: '100%' };
const GALLERY_MIN_SIZE_PCT = 20; const GALLERY_MIN_SIZE_PCT = 20;
const OPTIONS_PANEL_WIDTH = '434px';
const InvokeTabs = () => { const InvokeTabs = () => {
const activeTabIndex = useAppSelector(activeTabIndexSelector); const activeTabIndex = useAppSelector(activeTabIndexSelector);
@ -191,7 +192,7 @@ const InvokeTabs = () => {
<Panel id="main" order={0} minSize={50}> <Panel id="main" order={0} minSize={50}>
<Flex w="full" h="full" gap={4}> <Flex w="full" h="full" gap={4}>
{!NO_SIDE_PANEL_TABS.includes(activeTabName) && ( {!NO_SIDE_PANEL_TABS.includes(activeTabName) && (
<Flex h="full" w={434} flexShrink={0}> <Flex h="full" w={OPTIONS_PANEL_WIDTH} flexShrink={0}>
{activeTabName === 'nodes' ? ( {activeTabName === 'nodes' ? (
<NodeEditorPanelGroup /> <NodeEditorPanelGroup />
) : ( ) : (