Skip to content

Commit 4457618

Browse files
jpggvilacajpggvilaca
authored
Add tool selection bar (#4655)
1 parent c98aa36 commit 4457618

File tree

3 files changed

+174
-23
lines changed

3 files changed

+174
-23
lines changed

‎ui/src/components/tool-selection-bar/tool-selection-bar.component.tsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
// Copyright (C) 2025 Intel Corporation
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import { ReactNode } from 'react';
5+
6+
import { Divider, Flex, Grid } from '@geti/ui';
7+
import {
8+
Add,
9+
Adjustments,
10+
FitScreen,
11+
Hotkeys,
12+
Polygon,
13+
Redo,
14+
Remove,
15+
SegmentAnythingIcon,
16+
Selector,
17+
Undo,
18+
Visible,
19+
} from '@geti/ui/icons';
20+
21+
import classes from './tool-selection-bar.module.scss';
22+
23+
const IconWrapper = ({ children, isSelected }: { children: ReactNode; isSelected?: boolean }) => {
24+
return (
25+
<Flex
26+
UNSAFE_className={classes.iconWrapper}
27+
UNSAFE_style={{
28+
backgroundColor: isSelected ? 'var(--energy-blue)' : 'transparent',
29+
fill: isSelected ? 'var(--spectrum-global-color-gray-50)' : 'white',
30+
}}
31+
>
32+
{children}
33+
</Flex>
34+
);
35+
};
36+
37+
const Tools = () => {
38+
return (
39+
<>
40+
<IconWrapper>
41+
<Selector />
42+
</IconWrapper>
43+
44+
<Divider size='S' />
45+
46+
<IconWrapper isSelected>
47+
<Polygon />
48+
</IconWrapper>
49+
50+
<IconWrapper>
51+
<SegmentAnythingIcon />
52+
</IconWrapper>
53+
54+
<Divider size='S' />
55+
56+
<IconWrapper>
57+
<Undo />
58+
</IconWrapper>
59+
60+
<IconWrapper>
61+
<Redo />
62+
</IconWrapper>
63+
</>
64+
);
65+
};
66+
67+
const Settings = () => {
68+
return (
69+
<>
70+
<IconWrapper>
71+
<Visible />
72+
</IconWrapper>
73+
74+
<IconWrapper>
75+
<Adjustments />
76+
</IconWrapper>
77+
78+
<Divider size='S' />
79+
80+
<IconWrapper>
81+
<Add />
82+
</IconWrapper>
83+
84+
<Flex>110%</Flex>
85+
86+
<IconWrapper>
87+
<Remove />
88+
</IconWrapper>
89+
90+
<Divider size='S' />
91+
92+
<IconWrapper>
93+
<FitScreen />
94+
</IconWrapper>
95+
</>
96+
);
97+
};
98+
99+
export const ToolSelectionBar = () => {
100+
return (
101+
<Flex height={'100%'} alignItems={'center'} justifyContent={'center'}>
102+
<Grid UNSAFE_className={classes.grid}>
103+
<Flex UNSAFE_className={classes.section}>
104+
<Tools />
105+
</Flex>
106+
107+
<Flex UNSAFE_className={classes.section}>
108+
<Settings />
109+
</Flex>
110+
111+
<Flex UNSAFE_className={classes.section}>
112+
<IconWrapper>
113+
<Hotkeys />
114+
</IconWrapper>
115+
</Flex>
116+
</Grid>
117+
</Flex>
118+
);
119+
};

‎ui/src/components/tool-selection-bar/tool-selection-bar.module.scss‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.section {
2+
background-color: var(--spectrum-global-color-gray-50);
3+
padding: var(--spectrum-global-dimension-size-100);
4+
border-radius: var(--spectrum-global-dimension-size-50);
5+
gap: var(--spectrum-global-dimension-size-50);
6+
flex-direction: column;
7+
align-items: center;
8+
}
9+
10+
.iconWrapper {
11+
width: var(--spectrum-global-dimension-size-400);
12+
height: var(--spectrum-global-dimension-size-400);
13+
align-items: center;
14+
justify-content: center;
15+
border-radius: var(--spectrum-global-dimension-size-50);
16+
cursor: pointer;
17+
18+
svg {
19+
width: var(--spectrum-global-dimension-size-200);
20+
height: var(--spectrum-global-dimension-size-200);
21+
}
22+
}
23+
24+
.grid {
25+
grid-template-rows: 'auto auto auto';
26+
gap: var(--spectrum-global-dimension-size-50);
27+
background-color: var(--spectrum-global-color-gray-200);
28+
border-radius: var(--spectrum-global-dimension-size-100);
29+
padding: var(--spectrum-global-dimension-size-50);
30+
}

‎ui/src/features/dataset/media-preview/media-preview.component.tsx‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33

44
import { useState } from 'react';
55

6-
import { Button, ButtonGroup, Content, Dialog, Divider, Flex, Grid, Heading, ToggleButton, View } from '@geti/ui';
6+
import { Button, ButtonGroup, Content, Dialog, Divider, Grid, Heading, ToggleButton, View } from '@geti/ui';
77

8+
import { ToolSelectionBar } from '../../../components/tool-selection-bar/tool-selection-bar.component';
89
import { AnnotatorCanvas } from '../../annotator/annotator-canvas';
910
import { response } from '../mock-response';
1011

@@ -17,40 +18,41 @@ export const MediaPreview = ({ mediaItem, close }: { mediaItem: Item; close: ()
1718
<Dialog UNSAFE_style={{ width: '95vw', height: '95vh' }}>
1819
<Heading>Preview</Heading>
1920
<Divider />
20-
<Content>
21+
<Content
22+
UNSAFE_style={{
23+
backgroundColor: 'var(--spectrum-global-color-gray-50)',
24+
}}
25+
>
2126
<View height='100%'>
2227
<Grid
23-
areas={['toolbar aside', 'canvas aside', 'footer aside']}
28+
areas={['toolbar canvas aside', 'toolbar canvas aside', 'toolbar footer aside']}
2429
width={'100%'}
2530
height='100%'
26-
columns={'1fr auto'}
31+
columns={'auto 1fr auto'}
2732
rows={'auto 1fr auto'}
28-
UNSAFE_style={{
29-
border: 'thin solid var(--spectrum-global-color-gray-50)',
30-
backgroundColor: 'var(--spectrum-global-color-gray-50)',
31-
}}
3233
>
33-
<View gridArea={'toolbar'} backgroundColor={'gray-100'} padding={'size-100'}>
34-
<Flex justifyContent={'end'}>
35-
<ButtonGroup>
36-
<ToggleButton isEmphasized isSelected={isFocussed} onChange={setIsFocussed}>
37-
Focus
38-
</ToggleButton>
39-
</ButtonGroup>
40-
</Flex>
34+
<View gridArea={'toolbar'} margin={'size-350'}>
35+
<ToolSelectionBar />
4136
</View>
4237

43-
<View gridArea={'canvas'} backgroundColor={'gray-50'}>
38+
<View gridArea={'canvas'}>
4439
<AnnotatorCanvas mediaItem={mediaItem} isFocussed={isFocussed} />
4540
</View>
4641

47-
<View
48-
gridArea={'footer'}
49-
padding={'size-100'}
50-
backgroundColor={'gray-100'}
51-
UNSAFE_style={{ textAlign: 'right' }}
52-
>
42+
<View gridArea={'aside'}>
43+
<div>Aside</div>
44+
</View>
45+
46+
<View gridArea={'footer'} padding={'size-100'} UNSAFE_style={{ textAlign: 'right' }}>
5347
<ButtonGroup>
48+
<ToggleButton
49+
marginEnd={'size-100'}
50+
isEmphasized
51+
isSelected={isFocussed}
52+
onChange={setIsFocussed}
53+
>
54+
Focus
55+
</ToggleButton>
5456
<Button variant='secondary' onPress={close}>
5557
Close
5658
</Button>

0 commit comments

Comments
 (0)