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

Commit e45dea2

Browse files
bmartelbmartel
authored
feat: LSDV-5121: User Setting Improvements (#1420)
* feat: LSDV-5121: User Setting Improvements * update to include changed copy and tags for editorsettings * group the label related options * Update index.tsx
1 parent a370e8a commit e45dea2

File tree

6 files changed

+211
-25
lines changed

6 files changed

+211
-25
lines changed

‎src/assets/icons/close.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/icons/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export { ReactComponent as LsExpandAlt } from './expand-alt.svg';
2525
export { ReactComponent as LsCollapse } from './collapse.svg';
2626
export { ReactComponent as LsCollapseSmall } from './collapse-small.svg';
2727
export { ReactComponent as LsDate } from './date.svg';
28+
export { ReactComponent as LsClose } from './close.svg';
2829
export { ReactComponent as IconPlusCircle } from './plus-circle.svg';
2930
export { ReactComponent as IconSlow } from './slow.svg';
3031
export { ReactComponent as IconFast } from './fast.svg';

‎src/common/Toggle/Toggle.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
border-radius 12px
88
position relative
99
cursor pointer
10-
color $accent_color
10+
color var(--toggle-color, $accent_color)
1111
transition box-shadow 80ms ease
1212
background linear-gradient(0deg, rgba(#000, 0.05), rgba(#000, 0.05)), #FFFFFF
1313
box-shadow inset 0px 1px 0px rgba(#000, 0.05), inset 0px 0px 0px 1px rgba(#000, 0.05)

‎src/components/Settings/Settings.js‎

Lines changed: 76 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useMemo } from 'react';
22
import { Checkbox, Modal, Table, Tabs } from 'antd';
33
import { observer } from 'mobx-react';
44

@@ -10,7 +10,8 @@ import { triggerResizeEvent } from '../../utils/utilities';
1010

1111
import EditorSettings from '../../core/settings/editorsettings';
1212
import * as TagSettings from './TagSettings';
13-
import { useMemo } from 'react';
13+
import { LsClose } from '../../assets/icons';
14+
import Toggle from '../../common/Toggle/Toggle';
1415
import { FF_DEV_3873, isFF } from '../../utils/feature-flags';
1516

1617
const HotkeysDescription = () => {
@@ -55,21 +56,63 @@ const HotkeysDescription = () => {
5556
};
5657

5758

59+
const newUI = isFF(FF_DEV_3873) ? { newUI: true } : {};
60+
61+
const editorSettingsKeys = Object.keys(EditorSettings);
62+
63+
if (isFF(FF_DEV_3873)) {
64+
const enableTooltipsIndex = editorSettingsKeys.findIndex(key => key === 'enableTooltips');
65+
const enableLabelTooltipsIndex = editorSettingsKeys.findIndex(key => key === 'enableLabelTooltips');
66+
67+
// swap these in the array
68+
const tmp = editorSettingsKeys[enableTooltipsIndex];
69+
70+
editorSettingsKeys[enableTooltipsIndex] = editorSettingsKeys[enableLabelTooltipsIndex];
71+
editorSettingsKeys[enableLabelTooltipsIndex] = tmp;
72+
}
73+
74+
const SettingsTag = ({ children }) => {
75+
return (
76+
<Block name="settings-tag">{children}</Block>
77+
);
78+
};
5879

5980
const GeneralSettings = observer(({ store }) => {
6081
return (
61-
<Block name="settings">
62-
{Object.keys(EditorSettings).map((obj, index)=> {
82+
<Block name="settings" mod={newUI}>
83+
{editorSettingsKeys.map((obj, index) => {
6384
return (
6485
<Elem name="field" key={index}>
65-
<Checkbox
66-
key={index}
67-
checked={store.settings[obj]}
68-
onChange={store.settings[EditorSettings[obj].onChangeEvent]}
69-
>
70-
{EditorSettings[obj].description}
71-
</Checkbox>
72-
<br />
86+
{isFF(FF_DEV_3873) ? (
87+
<>
88+
<Block name="settings__label">
89+
<Elem name="title">
90+
{EditorSettings[obj].newUI.title}
91+
{EditorSettings[obj].newUI.tags?.split(',').map((tag) => (<SettingsTag key={tag}>{tag}</SettingsTag>))}
92+
</Elem>
93+
<Block name="description">
94+
{EditorSettings[obj].newUI.description}
95+
</Block>
96+
</Block>
97+
<Toggle
98+
key={index}
99+
checked={store.settings[obj]}
100+
onChange={store.settings[EditorSettings[obj].onChangeEvent]}
101+
description={EditorSettings[obj].description}
102+
/>
103+
</>
104+
) : (
105+
<>
106+
<Checkbox
107+
key={index}
108+
checked={store.settings[obj]}
109+
onChange={store.settings[EditorSettings[obj].onChangeEvent]}
110+
>
111+
{EditorSettings[obj].description}
112+
</Checkbox>
113+
<br />
114+
</>
115+
)}
73116
</Elem>
74117
);
75118
})}
@@ -79,7 +122,7 @@ const GeneralSettings = observer(({ store }) => {
79122

80123
const LayoutSettings = observer(({ store }) => {
81124
return (
82-
<Block name="settings">
125+
<Block name="settings" mod={newUI}>
83126
<Elem name="field">
84127
<Checkbox
85128
checked={store.settings.bottomSidePanel}
@@ -88,13 +131,13 @@ const LayoutSettings = observer(({ store }) => {
88131
setTimeout(triggerResizeEvent);
89132
}}
90133
>
91-
Move sidepanel to the bottom
134+
Move sidepanel to the bottom
92135
</Checkbox>
93136
</Elem>
94137

95138
<Elem name="field">
96139
<Checkbox checked={store.settings.displayLabelsByDefault} onChange={store.settings.toggleSidepanelModel}>
97-
Display Labels by default in Results panel
140+
Display Labels by default in Results panel
98141
</Checkbox>
99142
</Elem>
100143

@@ -106,7 +149,7 @@ const LayoutSettings = observer(({ store }) => {
106149
store.settings.toggleAnnotationsPanel();
107150
}}
108151
>
109-
Show Annotations panel
152+
Show Annotations panel
110153
</Checkbox>
111154
</Elem>
112155

@@ -118,7 +161,7 @@ const LayoutSettings = observer(({ store }) => {
118161
store.settings.togglePredictionsPanel();
119162
}}
120163
>
121-
Show Predictions panel
164+
Show Predictions panel
122165
</Checkbox>
123166
</Elem>
124167

@@ -149,6 +192,16 @@ if (!isFF(FF_DEV_3873)) {
149192

150193
const DEFAULT_ACTIVE = Object.keys(Settings)[0];
151194

195+
const DEFAULT_MODAL_SETTINGS = isFF(FF_DEV_3873) ? {
196+
name: 'settings-modal',
197+
title: 'Labeling Interface Settings',
198+
closeIcon: <LsClose />,
199+
} : {
200+
name: 'settings-modal-old',
201+
title: 'Settings',
202+
bodyStyle: { paddingTop: '0' },
203+
};
204+
152205
export default observer(({ store }) => {
153206
const availableSettings = useMemo(() => {
154207
const availableTags = Object.values(store.annotationStore.names.toJSON());
@@ -165,12 +218,12 @@ export default observer(({ store }) => {
165218
}, []);
166219

167220
return (
168-
<Modal
221+
<Block
222+
tag={Modal}
169223
visible={store.showingSettings}
170-
title="Settings"
171-
bodyStyle={{ paddingTop: '0' }}
172-
footer=""
173224
onCancel={store.toggleSettings}
225+
footer=""
226+
{...DEFAULT_MODAL_SETTINGS}
174227
>
175228
<Tabs defaultActiveKey={DEFAULT_ACTIVE}>
176229
{Object.entries(Settings).map(([key, { name, component }]) => (
@@ -180,10 +233,10 @@ export default observer(({ store }) => {
180233
))}
181234
{availableSettings.map((Page) => (
182235
<Tabs.TabPane tab={Page.title} key={Page.tagName}>
183-
<Page store={store}/>
236+
<Page store={store} />
184237
</Tabs.TabPane>
185238
))}
186239
</Tabs>
187-
</Modal>
240+
</Block>
188241
);
189242
});

‎src/components/Settings/Settings.styl‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,37 @@
1+
2+
$settings__title
3+
color #1F1F1F
4+
font-family Roboto
5+
font-size 16px
6+
font-weight 500
7+
line-height 24px
8+
letter-spacing 0.15px
9+
text-align left
10+
111
.settings
212
&__field + &__field
313
margin-top 10px
414

15+
.settings_newUI
16+
.settings__field
17+
display flex
18+
align-items flex-start
19+
.settings__field + .settings__field
20+
margin-top 16px
21+
.settings__label
22+
flex 1
23+
&__title
24+
@extends $settings__title
25+
align-items center
26+
display flex
27+
gap 8px
28+
&__description
29+
font-size 14px
30+
font-weight 400
31+
line-height 20px
32+
letter-spacing 0.25px
33+
text-align left
34+
535
.keys
636
&__key
737
padding 0 4px
@@ -27,3 +57,63 @@
2757
&__key-group + &__key-group
2858
margin-top 5px
2959
border-top 2px solid rgba(#000, 0.05)
60+
61+
.settings-modal
62+
--modal-button-text-color-active #40A9FF
63+
--toggle-color #1890FF
64+
--modal-border-radius 8px
65+
--modal-padding 24px
66+
67+
width 100% !important
68+
max-width 568px !important
69+
70+
:global(.ant-tabs-tab .ant-tabs-tab-btn)
71+
@extends $settings__title
72+
text-shadow none
73+
:global(.ant-modal-close)
74+
top: 28px
75+
right: var(--modal-padding)
76+
:global(.ant-modal-close-icon)
77+
display none
78+
:global(.ant-modal-close-x)
79+
height 24px !important
80+
width 24px !important
81+
line-height 24px !important
82+
color var(--modal-button-text-color-active)
83+
:global(.ant-tabs-tab)
84+
padding calc(var(--modal-padding) / 4) var(--modal-padding) !important
85+
:global(.ant-tabs-tab + .ant-tabs-tab)
86+
margin-left 0 !important
87+
:global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn)
88+
color var(--modal-button-text-color-active) !important
89+
:global(.ant-modal-content)
90+
border-radius var(--modal-border-radius) !important
91+
:global(.ant-modal-body)
92+
padding 0 var(--modal-padding) var(--modal-padding) !important
93+
:global(.ant-modal-header)
94+
border-radius: var(--modal-border-radius) var(--modal-border-radius) 0 0 !important;
95+
padding var(--modal-padding) !important
96+
border none !important
97+
:global(.ant-modal-title)
98+
color #1F1F1F
99+
font-family Roboto
100+
font-size 24px
101+
font-weight 400
102+
line-height 32px
103+
letter-spacing 0
104+
text-align left
105+
106+
.settings-tag
107+
display inline-flex
108+
align-items center
109+
justify-content center
110+
padding-inline 4px
111+
color #030852
112+
background-color #D6E4FF
113+
border-radius 2px
114+
height 20px
115+
font-size 11px
116+
font-weight 500
117+
line-height 16px
118+
letter-spacing 0.5px
119+
text-align center

‎src/core/settings/editorsettings.js‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,85 @@
11
export default {
22
'enableHotkeys': {
3+
'newUI': {
4+
'title': 'Labeling hotkeys',
5+
'description': 'Enables quick selection of labels using hotkeys',
6+
},
37
'description': 'Enable labeling hotkeys',
48
'onChangeEvent': 'toggleHotkeys',
59
'defaultValue': true,
610
},
711
'enableTooltips': {
12+
'newUI': {
13+
'title': 'Show hotkeys on tooltips',
14+
'description': 'Displays keybindings on tools and actions tooltips',
15+
},
816
'description': 'Show hotkey tooltips',
917
'onChangeEvent': 'toggleTooltips',
1018
'checked': '',
1119
'defaultValue': false,
1220
},
13-
'enableLabelTooltips':{
21+
'enableLabelTooltips': {
22+
'newUI': {
23+
'title': 'Show hotkeys on labels',
24+
'description': 'Displays keybindings on labels',
25+
},
1426
'description': 'Show labels hotkey tooltips',
1527
'onChangeEvent': 'toggleLabelTooltips',
1628
'defaultValue': true,
1729
},
1830
'showLabels': {
31+
'newUI': {
32+
'title': 'Show region labels',
33+
'description': 'Display region label names',
34+
},
1935
'description': 'Show labels inside the regions',
2036
'onChangeEvent': 'toggleShowLabels',
2137
'defaultValue': false,
2238
},
2339
'continuousLabeling': {
40+
'newUI': {
41+
'title': 'Keep label selected after creating a region',
42+
'description': 'Allows continuous region creation using the selected label',
43+
},
2444
'description': 'Keep label selected after creating a region',
2545
'onChangeEvent': 'toggleContinuousLabeling',
2646
'defaultValue': false,
2747
},
2848
'selectAfterCreate': {
49+
'newUI': {
50+
'title': 'Select region after creating it',
51+
'description': 'Automatically selects newly created regions',
52+
},
2953
'description': 'Select regions after creating',
3054
'onChangeEvent': 'toggleSelectAfterCreate',
3155
'defaultValue': false,
3256
},
3357
'showLineNumbers': {
58+
'newUI': {
59+
'tags': 'Text Tag',
60+
'title': 'Show line numbers',
61+
'description': 'Identify and reference specific lines of text in your document',
62+
},
3463
'description': 'Show line numbers for Text',
3564
'onChangeEvent': 'toggleShowLineNumbers',
3665
'defaultValue': false,
3766
},
3867
'preserveSelectedTool': {
68+
'newUI': {
69+
'tags': 'Image Tag',
70+
'title': 'Keep selected tool',
71+
'description': 'Persists the selected tool across tasks',
72+
},
3973
'description': 'Remember Selected Tool',
4074
'onChangeEvent': 'togglepreserveSelectedTool',
4175
'defaultValue': true,
4276
},
4377
'enableSmoothing': {
78+
'newUI': {
79+
'tags': 'Image Tag',
80+
'title': 'Pixel smoothing on zoom',
81+
'description': 'Smooth image pixels when zoomed in',
82+
},
4483
'description': 'Enable image smoothing when zoom',
4584
'onChangeEvent': 'toggleSmoothing',
4685
'defaultValue': true,

0 commit comments

Comments
 (0)