Merge pull request #926 from opencv/bs/cvat_ui_hints

Improved some hints

cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx

@@ -84,7 +84,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
         const { form } = this.props;
 
         return (
-            <Form.Item label='Image quality'>
+            <Form.Item label={<span>Image quality</span>}>
                 <Tooltip overlay='Defines image compression level'>
                     {form.getFieldDecorator('imageQuality', {
                         initialValue: 70,
@@ -110,7 +110,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
         const { form } = this.props;
 
         return (
-            <Form.Item label='Overlap size'>
+            <Form.Item label={<span>Overlap size</span>}>
                 <Tooltip overlay='Defines a number of intersected frames between different segments'>
                     {form.getFieldDecorator('overlapSize')(
                         <Input size='large' type='number' />,
@@ -124,7 +124,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
         const { form } = this.props;
 
         return (
-            <Form.Item label='Segment size'>
+            <Form.Item label={<span>Segment size</span>}>
                 <Tooltip overlay='Defines a number of frames in a segment'>
                     {form.getFieldDecorator('segmentSize')(
                         <Input size='large' type='number' />,
@@ -138,7 +138,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
         const { form } = this.props;
 
         return (
-            <Form.Item label='Start frame'>
+            <Form.Item label={<span>Start frame</span>}>
                 {form.getFieldDecorator('startFrame')(
                     <Input
                         size='large'
@@ -155,7 +155,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
         const { form } = this.props;
 
         return (
-            <Form.Item label='Stop frame'>
+            <Form.Item label={<span>Stop frame</span>}>
                 {form.getFieldDecorator('stopFrame')(
                     <Input
                         size='large'
@@ -172,7 +172,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
         const { form } = this.props;
 
         return (
-            <Form.Item label='Frame step'>
+            <Form.Item label={<span>Frame step</span>}>
                 {form.getFieldDecorator('frameStep')(
                     <Input
                         size='large'
@@ -210,7 +210,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
         return (
             <Form.Item
                 hasFeedback
-                label='Dataset repository URL'
+                label={<span>Dataset repository URL</span>}
                 extra='Attach a repository to store annotations there'
             >
                 {form.getFieldDecorator('repository', {
@@ -265,7 +265,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
         return (
             <Form.Item
                 hasFeedback
-                label='Issue tracker'
+                label={<span>Issue tracker</span>}
                 extra='Attach issue tracker where the task is described'
             >
                 {form.getFieldDecorator('bugTracker', {

cvat-ui/src/components/create-task-page/basic-configuration-form.tsx

@@ -46,7 +46,7 @@ class BasicConfigurationForm extends React.PureComponent<Props> {
 
         return (
             <Form onSubmit={(e: React.FormEvent): void => e.preventDefault()}>
-                <Form.Item hasFeedback label='Name'>
+                <Form.Item hasFeedback label={<span>Name</span>}>
                     { getFieldDecorator('name', {
                         rules: [{
                             required: true,

cvat-ui/src/components/labels-editor/label-form.tsx

@@ -177,23 +177,25 @@ class LabelForm extends React.PureComponent<Props, {}> {
         };
 
         return (
-            <Form.Item>
-                { form.getFieldDecorator(`values[${key}]`, {
-                    initialValue: existedValues,
-                    rules: [{
-                        required: true,
-                        message: 'Please specify values',
-                    }, {
-                        validator,
-                    }],
-                })(
-                    <Select
-                        mode='tags'
-                        dropdownMenuStyle={{ display: 'none' }}
-                        placeholder='Attribute values'
-                    />,
-                )}
-            </Form.Item>
+            <Tooltip overlay='Press enter to add a new value'>
+                <Form.Item>
+                    { form.getFieldDecorator(`values[${key}]`, {
+                        initialValue: existedValues,
+                        rules: [{
+                            required: true,
+                            message: 'Please specify values',
+                        }, {
+                            validator,
+                        }],
+                    })(
+                        <Select
+                            mode='tags'
+                            dropdownMenuStyle={{ display: 'none' }}
+                            placeholder='Attribute values'
+                        />,
+                    )}
+                </Form.Item>
+            </Tooltip>
         );
     }
 
@@ -202,16 +204,18 @@ class LabelForm extends React.PureComponent<Props, {}> {
         const { form } = this.props;
 
         return (
-            <Form.Item>
-                { form.getFieldDecorator(`values[${key}]`, {
-                    initialValue: value,
-                })(
-                    <Select>
-                        <Select.Option value='false'> False </Select.Option>
-                        <Select.Option value='true'> True </Select.Option>
-                    </Select>,
-                )}
-            </Form.Item>
+            <Tooltip overlay='Specify a default value'>
+                <Form.Item>
+                    { form.getFieldDecorator(`values[${key}]`, {
+                        initialValue: value,
+                    })(
+                        <Select>
+                            <Select.Option value='false'> False </Select.Option>
+                            <Select.Option value='true'> True </Select.Option>
+                        </Select>,
+                    )}
+                </Form.Item>
+            </Tooltip>
         );
     }