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

Add tool tips

Browse Source
This commit is contained in:
mickr777 2023-07-18 12:56:34 +10:00 committed by GitHub
parent 9dbffadc6e
commit 32662c5ee8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 51 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
invokeai/frontend/web/src/features/nodes/components/ViewportControls.tsx
View File

@ -1,4 +1,4 @@
import { ButtonGroup } from '@chakra-ui/react'; import { ButtonGroup, Tooltip } from '@chakra-ui/react';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
@ -11,6 +11,7 @@ import {
FaMapMarkerAlt, FaMapMarkerAlt,
} from 'react-icons/fa'; } from 'react-icons/fa';
import { useReactFlow } from 'reactflow'; import { useReactFlow } from 'reactflow';
import { useTranslation } from 'react-i18next';
import { import {
shouldShowGraphOverlayChanged, shouldShowGraphOverlayChanged,
shouldShowFieldTypeLegendChanged, shouldShowFieldTypeLegendChanged,
@ -18,6 +19,7 @@ import {
} from '../store/nodesSlice'; } from '../store/nodesSlice';
const ViewportControls = () => { const ViewportControls = () => {
const { t } = useTranslation();
const { zoomIn, zoomOut, fitView } = useReactFlow(); const { zoomIn, zoomOut, fitView } = useReactFlow();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const shouldShowGraphOverlay = useAppSelector( const shouldShowGraphOverlay = useAppSelector(
@ -26,7 +28,6 @@ const ViewportControls = () => {
const shouldShowFieldTypeLegend = useAppSelector( const shouldShowFieldTypeLegend = useAppSelector(
(state) => state.nodes.shouldShowFieldTypeLegend (state) => state.nodes.shouldShowFieldTypeLegend
); );
const shouldShowMinimapPanel = useAppSelector( const shouldShowMinimapPanel = useAppSelector(
(state) => state.nodes.shouldShowMinimapPanel (state) => state.nodes.shouldShowMinimapPanel
); );
@ -57,39 +58,54 @@ const ViewportControls = () => {
return ( return (
<ButtonGroup isAttached orientation="vertical"> <ButtonGroup isAttached orientation="vertical">
<IAIIconButton <Tooltip label={t('nodes.zoomInNodes')}>
onClick={handleClickedZoomIn} <IAIIconButton onClick={handleClickedZoomIn} icon={<FaPlus />} />
aria-label="Zoom In" </Tooltip>
icon={<FaPlus />} <Tooltip label={t('nodes.zoomOutNodes')}>
/> <IAIIconButton onClick={handleClickedZoomOut} icon={<FaMinus />} />
<IAIIconButton </Tooltip>
onClick={handleClickedZoomOut} <Tooltip label={t('nodes.fitViewportNodes')}>
aria-label="Zoom Out" <IAIIconButton onClick={handleClickedFitView} icon={<FaExpand />} />
icon={<FaMinus />} </Tooltip>
/> <Tooltip
<IAIIconButton label={
onClick={handleClickedFitView} shouldShowGraphOverlay
aria-label="Fit to Viewport" ? t('nodes.hideGraphNodes')
icon={<FaExpand />} : t('nodes.showGraphNodes')
/> }
<IAIIconButton >
isChecked={shouldShowGraphOverlay} <IAIIconButton
onClick={handleClickedToggleGraphOverlay} isChecked={shouldShowGraphOverlay}
aria-label="Show/Hide Graph" onClick={handleClickedToggleGraphOverlay}
icon={<FaCode />} icon={<FaCode />}
/> />
<IAIIconButton </Tooltip>
isChecked={shouldShowFieldTypeLegend} <Tooltip
onClick={handleClickedToggleFieldTypeLegend} label={
aria-label="Show/Hide Field Type Legend" shouldShowFieldTypeLegend
icon={<FaInfo />} ? t('nodes.hideLegendNodes')
/> : t('nodes.showLegendNodes')
<IAIIconButton }
isChecked={shouldShowMinimapPanel} >
onClick={handleClickedToggleMiniMapPanel} <IAIIconButton
aria-label="Show/Hide Minimap" isChecked={shouldShowFieldTypeLegend}
icon={<FaMapMarkerAlt />} onClick={handleClickedToggleFieldTypeLegend}
/> icon={<FaInfo />}
/>
</Tooltip>
<Tooltip
label={
shouldShowMinimapPanel
? t('nodes.hideMinimapnodes')
: t('nodes.showMinimapnodes')
}
>
<IAIIconButton
isChecked={shouldShowMinimapPanel}
onClick={handleClickedToggleMiniMapPanel}
icon={<FaMapMarkerAlt />}
/>
</Tooltip>
</ButtonGroup> </ButtonGroup>
); );
}; };