github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-12 20:04:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): make main panel styling and title consistent

Browse Source
This commit is contained in:
psychedelicious
2025-06-06 20:35:14 +10:00
parent c316f07fb2
commit ac206f4767
6 changed files with 41 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
invokeai/frontend/web/src/features/controlLayers/components/AdvancedSession/AdvancedSession.tsx
View File

@@ -1,6 +1,6 @@
/* eslint-disable i18next/no-literal-string */
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { ContextMenu, Flex, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
import { ContextMenu, Divider, Flex, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { FocusRegionWrapper } from 'common/components/FocusRegionWrapper';
import { CanvasAlertsInvocationProgress } from 'features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress';
@@ -77,6 +77,7 @@ export const AdvancedSession = memo(({ id }: { id: string | null }) => {
<CanvasManagerProviderGate>
<CanvasToolbar />
</CanvasManagerProviderGate>
<Divider />
<ContextMenu<HTMLDivElement> renderMenu={renderMenu} withLongPress={false}>
{(ref) => (
<Flex ref={ref} sx={canvasBgSx} data-dynamic-grid={dynamicGrid}>

58
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/InitialState.tsx
View File

@@ -1,6 +1,6 @@
/* eslint-disable i18next/no-literal-string */
import { Button, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
import { Button, Divider, Flex, Grid, Heading, Text } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { InitialStateAddAStyleReference } from 'features/controlLayers/components/SimpleSession/InitialStateAddAStyleReference';
import { InitialStateCardGridItem } from 'features/controlLayers/components/SimpleSession/InitialStateCardGridItem';
@@ -17,33 +17,39 @@ export const InitialState = memo(() => {
}, [dispatch]);
return (
<Flex flexDir="column" h="full" justifyContent="center" mx={16}>
<Heading mb={4}>Choose a starting method.</Heading>
<Text fontSize="md" fontStyle="italic" mb={6}>
Drag an image onto a card or click the upload icon.
</Text>
<Flex flexDir="column" h="full" w="full" gap={2}>
<Flex px={2} alignItems="center" minH="24px">
<Heading size="sm">Get Started</Heading>
</Flex>
<Divider />
<Flex flexDir="column" h="full" justifyContent="center" mx={16}>
<Heading mb={4}>Choose a starting method.</Heading>
<Text fontSize="md" fontStyle="italic" mb={6}>
Drag an image onto a card or click the upload icon.
</Text>
<Grid gridTemplateColumns="1fr 1fr" gridTemplateRows="1fr 1fr" gap={4}>
<InitialStateCardGridItem>
<InitialStateGenerateFromText />
</InitialStateCardGridItem>
<InitialStateCardGridItem>
<InitialStateAddAStyleReference />
</InitialStateCardGridItem>
<InitialStateCardGridItem>
<InitialStateUseALayoutImageCard />
</InitialStateCardGridItem>
<InitialStateCardGridItem>
<InitialStateEditImageCard />
</InitialStateCardGridItem>
</Grid>
<Grid gridTemplateColumns="1fr 1fr" gridTemplateRows="1fr 1fr" gap={4}>
<InitialStateCardGridItem>
<InitialStateGenerateFromText />
</InitialStateCardGridItem>
<InitialStateCardGridItem>
<InitialStateAddAStyleReference />
</InitialStateCardGridItem>
<InitialStateCardGridItem>
<InitialStateUseALayoutImageCard />
</InitialStateCardGridItem>
<InitialStateCardGridItem>
<InitialStateEditImageCard />
</InitialStateCardGridItem>
</Grid>
<Text fontSize="md" color="base.300" alignSelf="center" mt={6}>
or{' '}
<Button variant="link" onClick={newCanvasSession}>
start from a blank canvas.
</Button>
</Text>
<Text fontSize="md" color="base.300" alignSelf="center" mt={6}>
or{' '}
<Button variant="link" onClick={newCanvasSession}>
start from a blank canvas.
</Button>
</Text>
</Flex>
</Flex>
);
});

6
invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaHeader.tsx
View File

@@ -1,5 +1,5 @@
/* eslint-disable i18next/no-literal-string */
import { Divider, Flex, FormControl, FormLabel, Spacer, Switch, Text } from '@invoke-ai/ui-library';
import { Divider, Flex, FormControl, FormLabel, Heading, Spacer, Switch } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
import { StartOverButton } from 'features/controlLayers/components/StartOverButton';
@@ -19,9 +19,7 @@ export const StagingAreaHeader = memo(() => {
return (
<Flex gap={2} w="full" alignItems="center" px={2}>
<Text fontSize="lg" fontWeight="bold">
Staging Area
</Text>
<Heading size="sm">Review Session</Heading>
<Spacer />
<FormControl w="min-content" me={2}>
<FormLabel m={0}>Auto-switch</FormLabel>

4
invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolBrushWidth.tsx
View File

@@ -1,7 +1,6 @@
import {
CompositeSlider,
FormControl,
FormLabel,
IconButton,
NumberInput,
NumberInputField,
@@ -20,7 +19,6 @@ import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/us
import { clamp } from 'lodash-es';
import type { KeyboardEvent } from 'react';
import { memo, useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PiCaretDownBold } from 'react-icons/pi';
const selectBrushWidth = createSelector(selectCanvasSettingsSlice, (settings) => settings.brushWidth);
@@ -67,7 +65,6 @@ const sliderDefaultValue = mapRawValueToSliderValue(50);
export const ToolBrushWidth = memo(() => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const isSelected = useToolIsSelected('brush');
const width = useAppSelector(selectBrushWidth);
const [localValue, setLocalValue] = useState(width);
@@ -145,7 +142,6 @@ export const ToolBrushWidth = memo(() => {
return (
<Popover>
<FormControl w="min-content" gap={2}>
<FormLabel m={0}>{t('controlLayers.width')}</FormLabel>
<PopoverAnchor>
<NumberInput
variant="outline"

4
invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolEraserWidth.tsx
View File

@@ -1,7 +1,6 @@
import {
CompositeSlider,
FormControl,
FormLabel,
IconButton,
NumberInput,
NumberInputField,
@@ -23,7 +22,6 @@ import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/us
import { clamp } from 'lodash-es';
import type { KeyboardEvent } from 'react';
import { memo, useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PiCaretDownBold } from 'react-icons/pi';
const selectEraserWidth = createSelector(selectCanvasSettingsSlice, (settings) => settings.eraserWidth);
@@ -70,7 +68,6 @@ const sliderDefaultValue = mapRawValueToSliderValue(50);
export const ToolEraserWidth = memo(() => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const isSelected = useToolIsSelected('eraser');
const width = useAppSelector(selectEraserWidth);
const [localValue, setLocalValue] = useState(width);
@@ -148,7 +145,6 @@ export const ToolEraserWidth = memo(() => {
return (
<Popover>
<FormControl w="min-content" gap={2}>
<FormLabel m={0}>{t('controlLayers.width')}</FormLabel>
<PopoverAnchor>
<NumberInput
variant="outline"

9
invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx
View File

@@ -1,5 +1,5 @@
/* eslint-disable i18next/no-literal-string */
import { Divider, Flex, Spacer } from '@invoke-ai/ui-library';
import { Divider, Flex, Heading } from '@invoke-ai/ui-library';
import { CanvasSettingsPopover } from 'features/controlLayers/components/Settings/CanvasSettingsPopover';
import { StartOverButton } from 'features/controlLayers/components/StartOverButton';
import { ToolColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
@@ -30,11 +30,12 @@ export const CanvasToolbar = memo(() => {
useCanvasFilterHotkey();
return (
<Flex w="full" gap={2} alignItems="center" pe={2}>
<Flex w="full" gap={2} alignItems="center" px={2}>
<Heading size="sm" me={2}>Canvas</Heading>
<Divider orientation="vertical" />
<ToolColorPicker />
<ToolSettings />
<Spacer />
<Flex alignItems="center" h="full">
<Flex alignItems="center" h="full" flexGrow={1} justifyContent="flex-end">
<CanvasToolbarScale />
<CanvasToolbarResetViewButton />
<CanvasToolbarFitBboxToLayersButton />