diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-10-03 17:14:20 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-10-03 17:14:20 +0200 |
commit | 13b853a5c61ba089df20da72ab07ae2f84999ea4 (patch) | |
tree | 9ad92e6e077dfd6d7e91dfe4e4fdeb6d3f73a660 /src/features/webControls/components/WebControls.js | |
parent | fix(Service): Fix external link handling (diff) | |
download | ferdium-app-13b853a5c61ba089df20da72ab07ae2f84999ea4.tar.gz ferdium-app-13b853a5c61ba089df20da72ab07ae2f84999ea4.tar.zst ferdium-app-13b853a5c61ba089df20da72ab07ae2f84999ea4.zip |
Add open in browser & tooltips
Diffstat (limited to 'src/features/webControls/components/WebControls.js')
-rw-r--r-- | src/features/webControls/components/WebControls.js | 55 |
1 files changed, 52 insertions, 3 deletions
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js index 03f601a17..a39fcfe0e 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,15 @@ 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)} | ||
118 | > | 151 | > |
119 | <Icon | 152 | <Icon |
120 | icon={mdiHomeOutline} | 153 | icon={mdiHomeOutline} |
@@ -126,6 +159,7 @@ class WebControls extends Component { | |||
126 | type="button" | 159 | type="button" |
127 | className={classes.button} | 160 | className={classes.button} |
128 | disabled={!canGoBack} | 161 | disabled={!canGoBack} |
162 | data-tip={intl.formatMessage(messages.back)} | ||
129 | > | 163 | > |
130 | <Icon | 164 | <Icon |
131 | icon={mdiArrowLeft} | 165 | icon={mdiArrowLeft} |
@@ -137,6 +171,7 @@ class WebControls extends Component { | |||
137 | type="button" | 171 | type="button" |
138 | className={classes.button} | 172 | className={classes.button} |
139 | disabled={!canGoForward} | 173 | disabled={!canGoForward} |
174 | data-tip={intl.formatMessage(messages.forward)} | ||
140 | > | 175 | > |
141 | <Icon | 176 | <Icon |
142 | icon={mdiArrowRight} | 177 | icon={mdiArrowRight} |
@@ -147,6 +182,7 @@ class WebControls extends Component { | |||
147 | onClick={reload} | 182 | onClick={reload} |
148 | type="button" | 183 | type="button" |
149 | className={classes.button} | 184 | className={classes.button} |
185 | data-tip={intl.formatMessage(messages.reload)} | ||
150 | > | 186 | > |
151 | <Icon | 187 | <Icon |
152 | icon={mdiReload} | 188 | icon={mdiReload} |
@@ -182,6 +218,19 @@ class WebControls extends Component { | |||
182 | }} | 218 | }} |
183 | ref={this.inputRef} | 219 | ref={this.inputRef} |
184 | /> | 220 | /> |
221 | <button | ||
222 | onClick={openInBrowser} | ||
223 | type="button" | ||
224 | className={classes.button} | ||
225 | data-tip={intl.formatMessage(messages.openInBrowser)} | ||
226 | data-place="left" | ||
227 | > | ||
228 | <Icon | ||
229 | icon={mdiEarth} | ||
230 | className={classes.icon} | ||
231 | /> | ||
232 | </button> | ||
233 | {/* <ReactTooltip place="bottom" type="dark" effect="solid" /> */} | ||
185 | </div> | 234 | </div> |
186 | ); | 235 | ); |
187 | } | 236 | } |