Skip to content
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

Jump to bottom

feat(react-components): tooltip for working toolbar buttons #3642

Merged
merged 3 commits into from
Aug 29, 2023
Merged

feat(react-components): tooltip for working toolbar buttons #3642

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
0285a1e
added tooltip for working toolbar buttons
pramodcog Aug 29, 2023
8a25b5f
Merge master into pramodcog/UX-1129
cognite-bulldozer[bot] Aug 29, 2023
e40e0be
Merge refs/heads/master into pramodcog/UX-1129
cognite-bulldozer[bot] Aug 29, 2023
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
16 changes: 9 additions & 7 deletions react-components/src/components/RevealToolbar/FitModelsButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

import { type ReactElement, useCallback } from 'react';

import { Button } from '@cognite/cogs.js';
import { Button, Tooltip as CogsTooltip } from '@cognite/cogs.js';
import { useCameraNavigation } from '../../hooks/useCameraNavigation';

export const FitModelsButton = (): ReactElement => {
Expand All @@ -15,11 +15,13 @@ export const FitModelsButton = (): ReactElement => {
}, []);

return (
<Button
type="ghost"
icon="ExpandAlternative"
aria-label="Fit camera to models"
onClick={updateCamera}
/>
<CogsTooltip content={'Fit view'} placement="right" appendTo={document.body}>
<Button
type="ghost"
icon="ExpandAlternative"
aria-label="Fit camera to models"
onClick={updateCamera}
/>
</CogsTooltip>
);
};
28 changes: 15 additions & 13 deletions react-components/src/components/RevealToolbar/HelpButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,28 @@

import { type ReactElement } from 'react';

import { Button, Dropdown } from '@cognite/cogs.js';
import { Button, Dropdown, Tooltip as CogsTooltip } from '@cognite/cogs.js';
import styled from 'styled-components';
import { MouseNavigation } from './Help/MouseNavigation';
import { TouchNavigation } from './Help/TouchNavigation';
import { KeyboardNavigation } from './Help/KeyboardNavigation';

export const HelpButton = (): ReactElement => {
return (
<Dropdown
appendTo={document.body}
content={
<StyledMenu>
<MouseNavigation />
<KeyboardNavigation />
<TouchNavigation />
</StyledMenu>
}
placement="right">
<Button type="ghost" icon="Help" aria-label="help-button" />
</Dropdown>
<CogsTooltip content={'Help'} placement="right" appendTo={document.body}>
<Dropdown
appendTo={document.body}
content={
<StyledMenu>
<MouseNavigation />
<KeyboardNavigation />
<TouchNavigation />
</StyledMenu>
}
placement="right">
<Button type="ghost" icon="Help" aria-label="help-button" />
</Dropdown>
</CogsTooltip>
);
};

Expand Down
32 changes: 17 additions & 15 deletions react-components/src/components/RevealToolbar/LayersButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/

import { type ReactElement, useState, useEffect, useMemo, useRef } from 'react';
import { Button, Dropdown } from '@cognite/cogs.js';
import { Button, Dropdown, Tooltip as CogsTooltip } from '@cognite/cogs.js';
import { type Reveal3DResourcesLayerStates } from './LayersContainer/types';
import LayersContainer from './LayersContainer/LayersContainer';
import {
Expand Down Expand Up @@ -155,19 +155,21 @@ export const LayersButton = (): ReactElement => {
}, [viewer]);

return (
<Dropdown
appendTo={revealContainerElement ?? document.body}
content={
<LayersContainer
props={{
reveal3DResourcesLayerData,
setReveal3DResourcesLayerData
}}
/>
}
visible={visible}
placement="auto">
<Button type="ghost" icon="Layers" aria-label="3D Resource layers" onClick={showLayers} />
</Dropdown>
<CogsTooltip content={'Filter 3D resource layers'} placement="right" appendTo={document.body}>
<Dropdown
appendTo={revealContainerElement ?? document.body}
content={
<LayersContainer
props={{
reveal3DResourcesLayerData,
setReveal3DResourcesLayerData
}}
/>
}
visible={visible}
placement="auto">
<Button type="ghost" icon="Layers" aria-label="3D Resource layers" onClick={showLayers} />
</Dropdown>
</CogsTooltip>
);
};
22 changes: 12 additions & 10 deletions react-components/src/components/RevealToolbar/MeasurementButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

import { useMemo, type ReactElement, useState, useEffect } from 'react';
import { useReveal } from '../RevealContainer/RevealContext';
import { Button } from '@cognite/cogs.js';
import { Button, Tooltip as CogsTooltip } from '@cognite/cogs.js';
import { MeasurementTool } from '@cognite/reveal/tools';
import { FEET_TO_INCHES, METERS_TO_FEET } from '../../utilities/constants';

Expand Down Expand Up @@ -56,14 +56,16 @@ export const MeasurementButton = (): ReactElement => {
}, [measurementEnabled]);

return (
<Button
type="ghost"
icon="Ruler"
toggled={measurementEnabled}
aria-label="Make measurements"
onClick={() => {
handleMeasurement(!measurementEnabled);
}}
/>
<CogsTooltip content={'Distance measuring tool'} placement="right" appendTo={document.body}>
<Button
type="ghost"
icon="Ruler"
toggled={measurementEnabled}
aria-label="Make measurements"
onClick={() => {
handleMeasurement(!measurementEnabled);
}}
/>
</CogsTooltip>
);
};
32 changes: 17 additions & 15 deletions react-components/src/components/RevealToolbar/SettingsButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/

import { type ReactElement } from 'react';
import { Button, Dropdown, Menu } from '@cognite/cogs.js';
import { Button, Dropdown, Menu, Tooltip as CogsTooltip } from '@cognite/cogs.js';
import { type QualitySettings } from './SettingsContainer/types';
import { HighFidelityContainer } from './SettingsContainer/HighFidelityContainer';

Expand All @@ -19,19 +19,21 @@ export const SettingsButton = ({
highQualitySettings
}: CustomSettingsProps): ReactElement => {
return (
<Dropdown
appendTo={document.body}
content={
<Menu>
<HighFidelityContainer
lowQualitySettings={lowQualitySettings}
highQualitySettings={highQualitySettings}
/>
{customSettingsContent ?? <></>}
</Menu>
}
placement="auto">
<Button icon="Settings" type="ghost" aria-label="Show settings" />
</Dropdown>
<CogsTooltip content={'Settings'} placement="right" appendTo={document.body}>
<Dropdown
appendTo={document.body}
content={
<Menu>
<HighFidelityContainer
lowQualitySettings={lowQualitySettings}
highQualitySettings={highQualitySettings}
/>
{customSettingsContent ?? <></>}
</Menu>
}
placement="auto">
<Button icon="Settings" type="ghost" aria-label="Show settings" />
</Dropdown>
</CogsTooltip>
);
};
40 changes: 21 additions & 19 deletions react-components/src/components/RevealToolbar/SlicerButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { type ReactElement, useState, useEffect } from 'react';
import { Box3, Plane, Vector3 } from 'three';

import { useReveal } from '../RevealContainer/RevealContext';
import { Button, Dropdown, Menu, RangeSlider } from '@cognite/cogs.js';
import { Button, Dropdown, Menu, RangeSlider, Tooltip as CogsTooltip } from '@cognite/cogs.js';

import styled from 'styled-components';

Expand Down Expand Up @@ -62,24 +62,26 @@ export const SlicerButton = (): ReactElement => {
}

return (
<Dropdown
appendTo={() => document.body}
content={
<StyledMenu>
<RangeSlider
min={0}
max={1}
step={0.01}
setValue={changeSlicingState}
marks={{}}
value={[bottomRatio, topRatio]}
vertical
/>
</StyledMenu>
}
placement="right-end">
<Button type="ghost" icon="Slice" aria-label="Slice models" />
</Dropdown>
<CogsTooltip content={'Slice'} placement="right" appendTo={document.body}>
<Dropdown
appendTo={() => document.body}
content={
<StyledMenu>
<RangeSlider
min={0}
max={1}
step={0.01}
setValue={changeSlicingState}
marks={{}}
value={[bottomRatio, topRatio]}
vertical
/>
</StyledMenu>
}
placement="right-end">
<Button type="ghost" icon="Slice" aria-label="Slice models" />
</Dropdown>
</CogsTooltip>
);
};

Expand Down
Loading