Skip to content
This repository was archived by the owner on Apr 18, 2024. It is now read-only.

Commit 9edda24

Browse files
authored
fix: LSDV-5119: Minor improvements on labeling ui (#1375)
* fix: LSDV-5119: Minor improvements on labeling ui * fix some issues with css * fix linter and font size and weight of the menu * fix spacing and height of the buttons * remove unused imports * fix cypress test * remove unused imports * fix e2e --------- Co-authored-by: juliosgarbi <[email protected]>
1 parent 19ce9d7 commit 9edda24

File tree

11 files changed

+72
-22
lines changed

11 files changed

+72
-22
lines changed

src/common/Dropdown/DropdownComponent.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { alignElements } from '../../utils/dom';
66
import { aroundTransition } from '../../utils/transition';
77
import './Dropdown.styl';
88
import { DropdownContext } from './DropdownContext';
9+
import { FF_DEV_3873, isFF } from '../../utils/feature-flags';
910

1011
let lastIndex = 1;
1112

@@ -200,7 +201,10 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(({
200201
name="dropdown"
201202
data-testid={props.dataTestId}
202203
mix={[props.className, visibilityClasses]}
203-
style={compositeStyles}
204+
style={{
205+
...compositeStyles,
206+
borderRadius: isFF(FF_DEV_3873) && 4,
207+
}}
204208
onClick={(e: MouseEvent) => e.stopPropagation()}
205209
>
206210
{content}

src/components/BottomBar/BottomBar.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Block, Elem } from '../../utils/bem';
33
import { Actions } from './Actions';
44
import { Controls } from './Controls';
55
import './BottomBar.styl';
6+
import { FF_DEV_3873, isFF } from '../../utils/feature-flags';
67

78
export const BottomBar = observer(({ store }) => {
89
const annotationStore = store.annotationStore;
@@ -12,7 +13,7 @@ export const BottomBar = observer(({ store }) => {
1213
const isViewAll = annotationStore?.viewingAll === true;
1314

1415
return store && !isViewAll ? (
15-
<Block name="bottombar">
16+
<Block name="bottombar" style={{ borderTop: isFF(FF_DEV_3873) && '1px solid rgba(0,0,0,0.1)' }}>
1617
<Elem name="group">
1718
<Actions store={store}/>
1819
</Elem>

src/components/BottomBar/HistoryActions.styl

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
.history-buttons
22
display flex
3+
gap 8px
4+
margin-left: 8px
35

46
&__action
57
width 36px

src/components/Filter/Filter.styl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99

1010
.filter-button
1111
display flex
12-
height 30px
13-
padding 0 7px 0 0
12+
height 24px
13+
padding 0 6px 0 2px
1414
cursor pointer
1515
align-items center
1616
border-radius 4px

src/components/Filter/Filter.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import './Filter.styl';
99
import { FilterInterface, FilterListInterface } from './FilterInterfaces';
1010
import { FilterRow } from './FilterRow';
1111
import { FilterItems } from './filter-util';
12+
import { FF_DEV_3873, isFF } from '../../utils/feature-flags';
1213

1314
export const Filter: FC<FilterInterface> = ({
1415
availableFilters,
@@ -118,7 +119,11 @@ export const Filter: FC<FilterInterface> = ({
118119
<Elem name={'icon'}>
119120
<IconFilter />
120121
</Elem>
121-
<Elem name={'text'}>Filter</Elem>
122+
<Elem name={'text'} style={{
123+
fontSize:isFF(FF_DEV_3873) && 12,
124+
fontWeight:isFF(FF_DEV_3873) && 500,
125+
lineHeight:isFF(FF_DEV_3873) && '24px',
126+
}}>Filter</Elem>
122127
{filterList.length > 0 && <Elem name={'filter-length'} data-testid={'filter-length'}>{filterList.length}</Elem>}
123128
</Block>
124129
</Dropdown.Trigger>

src/components/Settings/Settings.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { triggerResizeEvent } from '../../utils/utilities';
1111
import EditorSettings from '../../core/settings/editorsettings';
1212
import * as TagSettings from './TagSettings';
1313
import { useMemo } from 'react';
14+
import { FF_DEV_3873, isFF } from '../../utils/feature-flags';
1415

1516
const HotkeysDescription = () => {
1617
const columns = [
@@ -87,7 +88,7 @@ const LayoutSettings = observer(({ store }) => {
8788
setTimeout(triggerResizeEvent);
8889
}}
8990
>
90-
Move sidepanel to the bottom
91+
Move sidepanel to the bottom
9192
</Checkbox>
9293
</Elem>
9394

@@ -117,7 +118,7 @@ const LayoutSettings = observer(({ store }) => {
117118
store.settings.togglePredictionsPanel();
118119
}}
119120
>
120-
Show Predictions panel
121+
Show Predictions panel
121122
</Checkbox>
122123
</Elem>
123124

@@ -132,7 +133,6 @@ const LayoutSettings = observer(({ store }) => {
132133
>
133134
Show image in fullsize
134135
</Checkbox>
135-
136136
</Elem> */}
137137
</Block>
138138
);
@@ -141,9 +141,12 @@ const LayoutSettings = observer(({ store }) => {
141141
const Settings = {
142142
General: { name: 'General', component: GeneralSettings },
143143
Hotkeys: { name: 'Hotkeys', component: HotkeysDescription },
144-
Layout: { name: 'Layout', component: LayoutSettings },
145144
};
146145

146+
if (!isFF(FF_DEV_3873)) {
147+
Settings.Layout = { name: 'Layout', component: LayoutSettings };
148+
}
149+
147150
const DEFAULT_ACTIVE = Object.keys(Settings)[0];
148151

149152
export default observer(({ store }) => {

src/components/SidePanels/OutlinerPanel/ViewControls.styl

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414

1515
&__sort
1616
display flex
17+
align-items center
1718

1819
&__label
1920
width 100%
@@ -37,6 +38,13 @@
3738
padding 0
3839
justify-content flex-start
3940

41+
&_newUI
42+
font-size 12px
43+
font-weight 500
44+
line-height 24px
45+
height 24px
46+
box-shadow initial
47+
4048
&__icon
4149
width 24px
4250
height 24px

src/components/SidePanels/OutlinerPanel/ViewControls.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,11 @@ const Grouping = <T extends string>({
167167
return (
168168
<Menu
169169
size="medium"
170-
style={{ width: 200, minWidth: 200 }}
170+
style={{
171+
width: 200,
172+
minWidth: 200,
173+
borderRadius: isFF(FF_DEV_3873) && 4,
174+
}}
171175
selectedKeys={[value]}
172176
allowClickSelected={allowClickSelected}
173177
>
@@ -185,9 +189,13 @@ const Grouping = <T extends string>({
185189
);
186190
}, [value, optionsList, readableValue, direction]);
187191

192+
188193
return (
189194
<Dropdown.Trigger content={dropdownContent} style={{ width: 200 }}>
190-
<Button type="text" icon={readableValue.icon} style={{ padding: 0, whiteSpace: 'nowrap' }} extra={(
195+
<Button type="text" mod={{ newUI: isFF(FF_DEV_3873) }} icon={readableValue.icon} style={{
196+
padding: isFF(FF_DEV_3873) ? '0 6px 0 2px': 0,
197+
whiteSpace: 'nowrap',
198+
}} extra={(
191199
<DirectionIndicator
192200
direction={direction}
193201
name={value}

src/components/TopBar/CurrentTask.js

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { observer } from 'mobx-react';
22
import { useEffect, useMemo, useState } from 'react';
33
import { Button } from '../../common/Button/Button';
44
import { Block, Elem } from '../../utils/bem';
5-
import { FF_DEV_3034, FF_DEV_4174, isFF } from '../../utils/feature-flags';
5+
import { FF_DEV_3034, FF_DEV_3873, FF_DEV_4174, isFF } from '../../utils/feature-flags';
66
import { guidGenerator } from '../../utils/unique';
77
import { isDefined } from '../../utils/utilities';
88
import './CurrentTask.styl';
@@ -53,8 +53,11 @@ export const CurrentTask = observer(({ store }) => {
5353

5454
return (
5555
<Elem name="section">
56-
<Block name="current-task" mod={{ 'with-history': historyEnabled }}>
57-
<Elem name="task-id">
56+
<Block name="current-task" mod={{ 'with-history': historyEnabled }} style={{
57+
padding:isFF(FF_DEV_3873) && 0,
58+
width:isFF(FF_DEV_3873) && 'auto',
59+
}}>
60+
<Elem name="task-id" style={{ fontSize:isFF(FF_DEV_3873) ? 12 : 14 }}>
5861
{store.task.id ?? guidGenerator()}
5962
{historyEnabled && showCounter && (
6063
<Elem name="task-count">
@@ -63,15 +66,15 @@ export const CurrentTask = observer(({ store }) => {
6366
)}
6467
</Elem>
6568
{historyEnabled && (
66-
<Elem name="history-controls">
69+
<Elem name="history-controls" mod={{ newui: isFF(FF_DEV_3873) }} >
6770
<Elem
6871
tag={Button}
6972
name="prevnext"
70-
mod={{ prev: true, disabled: !store.canGoPrevTask }}
73+
mod={{ prev: true, disabled: !store.canGoPrevTask, newui: isFF(FF_DEV_3873) }}
7174
type="link"
7275
disabled={!historyEnabled || !store.canGoPrevTask}
7376
onClick={store.prevTask}
74-
style={{ background: 'none', backgroundColor: 'none' }}
77+
style={{ background: !isFF(FF_DEV_3873) && 'none', backgroundColor: isFF(FF_DEV_3873) && 'none' }}
7578
/>
7679
<Elem
7780
tag={Button}
@@ -80,11 +83,12 @@ export const CurrentTask = observer(({ store }) => {
8083
next: true,
8184
disabled: !store.canGoNextTask && !canPostpone,
8285
postpone: !store.canGoNextTask && canPostpone,
86+
newui: isFF(FF_DEV_3873),
8387
}}
8488
type="link"
8589
disabled={!store.canGoNextTask && !canPostpone}
8690
onClick={store.canGoNextTask ? store.nextTask : store.postponeTask}
87-
style={{ background: 'none', backgroundColor: 'none' }}
91+
style={{ background: !isFF(FF_DEV_3873) && 'none', backgroundColor: isFF(FF_DEV_3873) && 'none' }}
8892
/>
8993
</Elem>
9094
)}

src/components/TopBar/CurrentTask.styl

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,20 @@
3131
display flex
3232
grid-area buttons
3333

34+
&_newui
35+
gap 8px
36+
margin-left 8px
37+
3438
&__prevnext
3539
width 32px
3640
height 32px
3741
align-self center
3842
justify-self center
3943

44+
&_newui
45+
&:hover
46+
background rgba(9, 109, 217, 0.08)
47+
4048
&::before
4149
top 50%
4250
left 50%
@@ -65,7 +73,13 @@
6573
&_hidden
6674
display none
6775

68-
&_disabled::before
69-
border 2px solid rgba(0, 0, 0, 0.3)
70-
border-bottom none
71-
border-right none
76+
&_disabled
77+
78+
&:hover
79+
background inherit
80+
81+
&::before
82+
border 2px solid rgba(0, 0, 0, 0.3)
83+
border-bottom none
84+
border-right none
85+

0 commit comments

Comments
 (0)