Pārlūkot izejas kodu

feat(tooltips): add for video quality label and feedback button

master
Leonard Kim 8 gadus atpakaļ
vecāks
revīzija
7063f144ef

+ 1
- 1
lang/main.json Parādīt failu

446
     },
446
     },
447
     "videoStatus": {
447
     "videoStatus": {
448
         "callQuality": "Call Quality",
448
         "callQuality": "Call Quality",
449
-        "changeVideoTip": "Change your video quality from the left toolbar.",
450
         "hd": "HD",
449
         "hd": "HD",
451
         "highDefinition": "High definition",
450
         "highDefinition": "High definition",
451
+        "labelTooltip": "Current video quality",
452
         "ld": "LD",
452
         "ld": "LD",
453
         "lowDefinition": "Low definition",
453
         "lowDefinition": "Low definition",
454
         "p2pEnabled": "Peer to Peer Enabled",
454
         "p2pEnabled": "Peer to Peer Enabled",

+ 24
- 6
react/features/feedback/components/FeedbackButton.web.js Parādīt failu

1
 /* @flow */
1
 /* @flow */
2
 
2
 
3
+import Tooltip from '@atlaskit/tooltip';
3
 import React, { Component } from 'react';
4
 import React, { Component } from 'react';
4
 import { connect } from 'react-redux';
5
 import { connect } from 'react-redux';
5
 
6
 
7
+import { translate } from '../../base/i18n';
8
+
6
 import { openFeedbackDialog } from '../actions';
9
 import { openFeedbackDialog } from '../actions';
7
 
10
 
8
 /**
11
 /**
17
          *
20
          *
18
          * @type {JitsiConference}
21
          * @type {JitsiConference}
19
          */
22
          */
20
-        _conference: React.PropTypes.object
23
+        _conference: React.PropTypes.object,
24
+
25
+        /**
26
+         * Invoked to obtain translated strings.
27
+         */
28
+        t: React.PropTypes.func,
29
+
30
+        /**
31
+         * From which side of the button the tooltip should appear from.
32
+         */
33
+        tooltipPosition: React.PropTypes.string
21
     };
34
     };
22
 
35
 
23
     /**
36
     /**
41
      */
54
      */
42
     render() {
55
     render() {
43
         return (
56
         return (
44
-            <a
45
-                className = 'button icon-feedback'
46
-                id = 'feedbackButton'
47
-                onClick = { this._onClick } />
57
+            <div id = 'feedbackButton'>
58
+                <Tooltip
59
+                    description = { this.props.t('welcomepage.sendFeedback') }
60
+                    position = { this.props.tooltipPosition } >
61
+                    <a
62
+                        className = 'button icon-feedback'
63
+                        onClick = { this._onClick } />
64
+                </Tooltip>
65
+            </div>
48
         );
66
         );
49
     }
67
     }
50
 
68
 
82
     };
100
     };
83
 }
101
 }
84
 
102
 
85
-export default connect(_mapStateToProps)(FeedbackButton);
103
+export default translate(connect(_mapStateToProps)(FeedbackButton));

+ 3
- 2
react/features/toolbox/components/SecondaryToolbar.web.js Parādīt failu

101
             <Toolbar
101
             <Toolbar
102
                 className = { secondaryToolbarClassName }
102
                 className = { secondaryToolbarClassName }
103
                 toolbarButtons = { _secondaryToolbarButtons }
103
                 toolbarButtons = { _secondaryToolbarButtons }
104
-                tooltipPosition = { 'right' }>
105
-                { _callStatsID ? <FeedbackButton /> : null }
104
+                tooltipPosition = 'right'>
105
+                { _callStatsID
106
+                    ? <FeedbackButton tooltipPosition = 'right' /> : null }
106
             </Toolbar>
107
             </Toolbar>
107
         );
108
         );
108
     }
109
     }

+ 12
- 7
react/features/video-quality/components/VideoQualityLabel.web.js Parādīt failu

1
+import Tooltip from '@atlaskit/tooltip';
1
 import React, { Component } from 'react';
2
 import React, { Component } from 'react';
2
 import { connect } from 'react-redux';
3
 import { connect } from 'react-redux';
3
 
4
 
125
             _conferenceStarted,
126
             _conferenceStarted,
126
             _filmstripVisible,
127
             _filmstripVisible,
127
             _remoteVideosVisible,
128
             _remoteVideosVisible,
128
-            _resolution
129
+            _resolution,
130
+            t
129
         } = this.props;
131
         } = this.props;
130
 
132
 
131
         // FIXME The _conferenceStarted check is used to be defensive against
133
         // FIXME The _conferenceStarted check is used to be defensive against
151
             <div
153
             <div
152
                 className = { classNames }
154
                 className = { classNames }
153
                 id = 'videoResolutionLabel'>
155
                 id = 'videoResolutionLabel'>
154
-                <div
155
-                    className = 'video-quality-label-status'>
156
-                    { _audioOnly
157
-                        ? <i className = 'icon-visibility-off' />
158
-                        : this._mapResolutionToTranslation(_resolution) }
159
-                </div>
156
+                <Tooltip
157
+                    description = { t('videoStatus.labelTooltip') }
158
+                    position = { 'left' }>
159
+                    <div className = 'video-quality-label-status'>
160
+                        { _audioOnly
161
+                            ? <i className = 'icon-visibility-off' />
162
+                            : this._mapResolutionToTranslation(_resolution) }
163
+                    </div>
164
+                </Tooltip>
160
             </div>
165
             </div>
161
         );
166
         );
162
     }
167
     }

Notiek ielāde…
Atcelt
Saglabāt