diff options
Diffstat (limited to 'src/features/webControls/components')
-rw-r--r-- | src/features/webControls/components/WebControls.js | 59 |
1 files changed, 56 insertions, 3 deletions
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js index 03f601a17..c6331073b 100644 --- a/src/features/webControls/components/WebControls.js +++ b/src/features/webControls/components/WebControls.js | |||
@@ -3,11 +3,35 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
5 | import { Icon } from '@meetfranz/ui'; | 5 | import { Icon } from '@meetfranz/ui'; |
6 | import { defineMessages, intlShape } from 'react-intl'; | ||
6 | 7 | ||
7 | import { | 8 | import { |
8 | mdiReload, mdiArrowRight, mdiArrowLeft, mdiHomeOutline, | 9 | mdiReload, mdiArrowRight, mdiArrowLeft, mdiHomeOutline, mdiEarth, |
9 | } from '@mdi/js'; | 10 | } from '@mdi/js'; |
10 | 11 | ||
12 | const messages = defineMessages({ | ||
13 | goHome: { | ||
14 | id: 'webControls.goHome', | ||
15 | defaultMessage: '!!!Home', | ||
16 | }, | ||
17 | openInBrowser: { | ||
18 | id: 'webControls.openInBrowser', | ||
19 | defaultMessage: '!!!Open in Browser', | ||
20 | }, | ||
21 | back: { | ||
22 | id: 'webControls.back', | ||
23 | defaultMessage: '!!!Back', | ||
24 | }, | ||
25 | forward: { | ||
26 | id: 'webControls.forward', | ||
27 | defaultMessage: '!!!Forward', | ||
28 | }, | ||
29 | reload: { | ||
30 | id: 'webControls.reload', | ||
31 | defaultMessage: '!!!Reload', | ||
32 | }, | ||
33 | }); | ||
34 | |||
11 | const styles = theme => ({ | 35 | const styles = theme => ({ |
12 | root: { | 36 | root: { |
13 | background: theme.colorBackground, | 37 | background: theme.colorBackground, |
@@ -18,7 +42,7 @@ const styles = theme => ({ | |||
18 | display: 'flex', | 42 | display: 'flex', |
19 | flexDirection: 'row', | 43 | flexDirection: 'row', |
20 | alignItems: 'center', | 44 | alignItems: 'center', |
21 | padding: [0, 20], | 45 | padding: [0, 10], |
22 | 46 | ||
23 | '& + div': { | 47 | '& + div': { |
24 | height: 'calc(100% - 50px)', | 48 | height: 'calc(100% - 50px)', |
@@ -45,7 +69,7 @@ const styles = theme => ({ | |||
45 | input: { | 69 | input: { |
46 | marginBottom: 0, | 70 | marginBottom: 0, |
47 | height: 'auto', | 71 | height: 'auto', |
48 | marginLeft: 10, | 72 | margin: [0, 10], |
49 | flex: 1, | 73 | flex: 1, |
50 | border: 0, | 74 | border: 0, |
51 | padding: [4, 10], | 75 | padding: [4, 10], |
@@ -68,10 +92,15 @@ class WebControls extends Component { | |||
68 | canGoForward: PropTypes.bool.isRequired, | 92 | canGoForward: PropTypes.bool.isRequired, |
69 | goForward: PropTypes.func.isRequired, | 93 | goForward: PropTypes.func.isRequired, |
70 | reload: PropTypes.func.isRequired, | 94 | reload: PropTypes.func.isRequired, |
95 | openInBrowser: PropTypes.func.isRequired, | ||
71 | url: PropTypes.string.isRequired, | 96 | url: PropTypes.string.isRequired, |
72 | navigate: PropTypes.func.isRequired, | 97 | navigate: PropTypes.func.isRequired, |
73 | } | 98 | } |
74 | 99 | ||
100 | static contextTypes = { | ||
101 | intl: intlShape, | ||
102 | }; | ||
103 | |||
75 | static getDerivedStateFromProps(props, state) { | 104 | static getDerivedStateFromProps(props, state) { |
76 | const { url } = props; | 105 | const { url } = props; |
77 | const { editUrl } = state; | 106 | const { editUrl } = state; |
@@ -100,6 +129,7 @@ class WebControls extends Component { | |||
100 | canGoForward, | 129 | canGoForward, |
101 | goForward, | 130 | goForward, |
102 | reload, | 131 | reload, |
132 | openInBrowser, | ||
103 | url, | 133 | url, |
104 | navigate, | 134 | navigate, |
105 | } = this.props; | 135 | } = this.props; |
@@ -109,12 +139,16 @@ class WebControls extends Component { | |||
109 | editUrl, | 139 | editUrl, |
110 | } = this.state; | 140 | } = this.state; |
111 | 141 | ||
142 | const { intl } = this.context; | ||
143 | |||
112 | return ( | 144 | return ( |
113 | <div className={classes.root}> | 145 | <div className={classes.root}> |
114 | <button | 146 | <button |
115 | onClick={goHome} | 147 | onClick={goHome} |
116 | type="button" | 148 | type="button" |
117 | className={classes.button} | 149 | className={classes.button} |
150 | data-tip={intl.formatMessage(messages.goHome)} | ||
151 | data-place="bottom" | ||
118 | > | 152 | > |
119 | <Icon | 153 | <Icon |
120 | icon={mdiHomeOutline} | 154 | icon={mdiHomeOutline} |
@@ -126,6 +160,8 @@ class WebControls extends Component { | |||
126 | type="button" | 160 | type="button" |
127 | className={classes.button} | 161 | className={classes.button} |
128 | disabled={!canGoBack} | 162 | disabled={!canGoBack} |
163 | data-tip={intl.formatMessage(messages.back)} | ||
164 | data-place="bottom" | ||
129 | > | 165 | > |
130 | <Icon | 166 | <Icon |
131 | icon={mdiArrowLeft} | 167 | icon={mdiArrowLeft} |
@@ -137,6 +173,8 @@ class WebControls extends Component { | |||
137 | type="button" | 173 | type="button" |
138 | className={classes.button} | 174 | className={classes.button} |
139 | disabled={!canGoForward} | 175 | disabled={!canGoForward} |
176 | data-tip={intl.formatMessage(messages.forward)} | ||
177 | data-place="bottom" | ||
140 | > | 178 | > |
141 | <Icon | 179 | <Icon |
142 | icon={mdiArrowRight} | 180 | icon={mdiArrowRight} |
@@ -147,6 +185,8 @@ class WebControls extends Component { | |||
147 | onClick={reload} | 185 | onClick={reload} |
148 | type="button" | 186 | type="button" |
149 | className={classes.button} | 187 | className={classes.button} |
188 | data-tip={intl.formatMessage(messages.reload)} | ||
189 | data-place="bottom" | ||
150 | > | 190 | > |
151 | <Icon | 191 | <Icon |
152 | icon={mdiReload} | 192 | icon={mdiReload} |
@@ -160,6 +200,7 @@ class WebControls extends Component { | |||
160 | inputUrl: event.target.value, | 200 | inputUrl: event.target.value, |
161 | })} | 201 | })} |
162 | onFocus={(event) => { | 202 | onFocus={(event) => { |
203 | console.log('on focus event'); | ||
163 | event.target.select(); | 204 | event.target.select(); |
164 | this.setState({ | 205 | this.setState({ |
165 | editUrl: true, | 206 | editUrl: true, |
@@ -182,6 +223,18 @@ class WebControls extends Component { | |||
182 | }} | 223 | }} |
183 | ref={this.inputRef} | 224 | ref={this.inputRef} |
184 | /> | 225 | /> |
226 | <button | ||
227 | onClick={openInBrowser} | ||
228 | type="button" | ||
229 | className={classes.button} | ||
230 | data-tip={intl.formatMessage(messages.openInBrowser)} | ||
231 | data-place="bottom" | ||
232 | > | ||
233 | <Icon | ||
234 | icon={mdiEarth} | ||
235 | className={classes.icon} | ||
236 | /> | ||
237 | </button> | ||
185 | </div> | 238 | </div> |
186 | ); | 239 | ); |
187 | } | 240 | } |