Skip to content

misc(ui): image/asset tab tooltips, icon to rename board, getting started text #7067

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 8, 2024
Merged

misc(ui): image/asset tab tooltips, icon to rename board, getting started text #7067

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e591ad4
add tooltips for images/assets tabs
Oct 8, 2024
61b9bef
add icon by board name that can be used to activate editable
Oct 8, 2024
eb752b4
update getting started text
Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion invokeai/frontend/web/public/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,7 @@
"gallery": "Gallery",
"alwaysShowImageSizeBadge": "Always Show Image Size Badge",
"assets": "Assets",
"assetsTab": "Files you’ve uploaded for use in your projects.",
"autoAssignBoardOnClick": "Auto-Assign Board on Click",
"autoSwitchNewImages": "Auto-Switch to New Images",
"copy": "Copy",
Expand All @@ -301,6 +302,7 @@
"gallerySettings": "Gallery Settings",
"go": "Go",
"image": "image",
"imagesTab": "Images you’ve created and saved within Invoke.",
"jump": "Jump",
"loading": "Loading",
"newestFirst": "Newest First",
Expand Down Expand Up @@ -1974,7 +1976,7 @@
}
},
"newUserExperience": {
"toGetStarted": "To get started, enter a prompt in the box and click <StrongComponent>Invoke</StrongComponent> to generate your first image. You can choose to save your images directly to the <StrongComponent>Gallery</StrongComponent> or edit them to the <StrongComponent>Canvas</StrongComponent>.",
"toGetStarted": "To get started, enter a prompt in the box and click <StrongComponent>Invoke</StrongComponent> to generate your first image. Select a prompt template to improve results. You can choose to save your images directly to the <StrongComponent>Gallery</StrongComponent> or edit them to the <StrongComponent>Canvas</StrongComponent>.",
"gettingStartedSeries": "Want more guidance? Check out our <LinkComponent>Getting Started Series</LinkComponent> for tips on unlocking the full potential of the Invoke Studio."
},
"whatsNew": {
Expand Down
45 changes: 33 additions & 12 deletions ...eai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardEditableTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Input, Text } from '@invoke-ai/ui-library';
import { Flex, IconButton, Input, Text } from '@invoke-ai/ui-library';
import { useBoolean } from 'common/hooks/useBoolean';
import { withResultAsync } from 'common/util/result';
import { toast } from 'features/toast/toast';
import type { ChangeEvent, KeyboardEvent } from 'react';
import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PiPencilBold } from 'react-icons/pi';
import { useUpdateBoardMutation } from 'services/api/endpoints/boards';
import type { BoardDTO } from 'services/api/types';

Expand All @@ -16,6 +17,7 @@ type Props = {
export const BoardEditableTitle = memo(({ board, isSelected }: Props) => {
const { t } = useTranslation();
const isEditing = useBoolean(false);
const [isHovering, setIsHovering] = useState(false);
const [localTitle, setLocalTitle] = useState(board.board_name);
const ref = useRef<HTMLInputElement>(null);
const [updateBoard, updateBoardResult] = useUpdateBoardMutation();
Expand Down Expand Up @@ -58,6 +60,14 @@ export const BoardEditableTitle = memo(({ board, isSelected }: Props) => {
[board.board_name, isEditing, onBlur]
);

const handleMouseOver = useCallback(() => {
setIsHovering(true);
}, []);

const handleMouseOut = useCallback(() => {
setIsHovering(false);
}, []);

useEffect(() => {
if (isEditing.isTrue) {
ref.current?.focus();
Expand All @@ -67,17 +77,28 @@ export const BoardEditableTitle = memo(({ board, isSelected }: Props) => {

if (!isEditing.isTrue) {
return (
<Text
size="sm"
fontWeight="semibold"
userSelect="none"
color={isSelected ? 'base.100' : 'base.300'}
onDoubleClick={isEditing.setTrue}
cursor="text"
minW={16}
>
{localTitle}
</Text>
<Flex alignItems="center" gap={1} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This gap is a bit too small.

image

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Flex alignItems="center" gap={1} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
<Flex alignItems="center" gap={3} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>

<Text
size="sm"
fontWeight="semibold"
userSelect="none"
color={isSelected ? 'base.100' : 'base.300'}
onDoubleClick={isEditing.setTrue}
cursor="text"
minW={16}
>
{localTitle}
</Text>
{isHovering && (
<IconButton
aria-label="edit name"
icon={<PiPencilBold />}
size="sm"
variant="ghost"
onClick={isEditing.setTrue}
/>
Comment on lines +93 to +99
Copy link
Collaborator

@psychedelicious psychedelicious Oct 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

variant="link" with alignSelf="stretch" looks better here (and no need to change the gap bc its kinda built-in to the button)

)}
Comment on lines +92 to +100
Copy link
Collaborator

@psychedelicious psychedelicious Oct 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this needed? You can click the board title to edit it. Maybe the trigger to edit a board title should be a single click instead, would that not serve the need better than adding more buttons?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also this introduces a race condition (ish) where the icon doesn't disappear.

Screen.Recording.2024-10-09.at.6.55.56.am.mov

Copy link
Collaborator

@psychedelicious psychedelicious Oct 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I think there's just a typo in the PR description - mentions right-click but it actually means double-click, all good. I'll tidy up the minor issues I've mentioned in a followup or you can if you want

</Flex>
);
}

Expand Down
17 changes: 11 additions & 6 deletions invokeai/frontend/web/src/features/gallery/components/Gallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
TabList,
Tabs,
Text,
Tooltip,
useDisclosure,
} from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit';
Expand Down Expand Up @@ -74,12 +75,16 @@ export const Gallery = () => {
{boardName}
</Text>
<Spacer />
<Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickImages} data-testid="images-tab">
{t('parameters.images')}
</Tab>
<Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickAssets} data-testid="assets-tab">
{t('gallery.assets')}
</Tab>
<Tooltip label={t('gallery.imagesTab')}>
<Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickImages} data-testid="images-tab">
{t('parameters.images')}
</Tab>
</Tooltip>
<Tooltip label={t('gallery.assetsTab')}>
<Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickAssets} data-testid="assets-tab">
{t('gallery.assets')}
</Tab>
</Tooltip>
<IconButton
size="sm"
variant="link"
Expand Down
Loading