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 | |
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
6 files changed, 211 insertions, 9 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 | } |
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js index 1452d5a3d..cada01a6f 100644 --- a/src/features/webControls/containers/WebControlsScreen.js +++ b/src/features/webControls/containers/WebControlsScreen.js | |||
@@ -9,7 +9,6 @@ import Service from '../../../models/Service'; | |||
9 | 9 | ||
10 | const URL_EVENTS = [ | 10 | const URL_EVENTS = [ |
11 | 'load-commit', | 11 | 'load-commit', |
12 | // 'dom-ready', | ||
13 | 'will-navigate', | 12 | 'will-navigate', |
14 | 'did-navigate', | 13 | 'did-navigate', |
15 | 'did-navigate-in-page', | 14 | 'did-navigate-in-page', |
@@ -97,11 +96,20 @@ class WebControlsScreen extends Component { | |||
97 | this.url = url; | 96 | this.url = url; |
98 | } | 97 | } |
99 | 98 | ||
99 | openInBrowser() { | ||
100 | const { openExternalUrl } = this.props.actions.app; | ||
101 | |||
102 | if (!this.webview) return; | ||
103 | |||
104 | openExternalUrl({ url: this.url }); | ||
105 | } | ||
106 | |||
100 | render() { | 107 | render() { |
101 | return ( | 108 | return ( |
102 | <WebControls | 109 | <WebControls |
103 | goHome={() => this.goHome()} | 110 | goHome={() => this.goHome()} |
104 | reload={() => this.reload()} | 111 | reload={() => this.reload()} |
112 | openInBrowser={() => this.openInBrowser()} | ||
105 | canGoBack={this.canGoBack} | 113 | canGoBack={this.canGoBack} |
106 | goBack={() => this.goBack()} | 114 | goBack={() => this.goBack()} |
107 | canGoForward={this.canGoForward} | 115 | canGoForward={this.canGoForward} |
@@ -121,6 +129,9 @@ WebControlsScreen.wrappedComponent.propTypes = { | |||
121 | services: PropTypes.instanceOf(ServicesStore).isRequired, | 129 | services: PropTypes.instanceOf(ServicesStore).isRequired, |
122 | }).isRequired, | 130 | }).isRequired, |
123 | actions: PropTypes.shape({ | 131 | actions: PropTypes.shape({ |
132 | app: PropTypes.shape({ | ||
133 | openExternalUrl: PropTypes.func.isRequired, | ||
134 | }).isRequired, | ||
124 | service: PropTypes.shape({ | 135 | service: PropTypes.shape({ |
125 | reloadActive: PropTypes.func.isRequired, | 136 | reloadActive: PropTypes.func.isRequired, |
126 | }).isRequired, | 137 | }).isRequired, |
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json index 0dfe2055a..e77590a58 100644 --- a/src/i18n/locales/defaultMessages.json +++ b/src/i18n/locales/defaultMessages.json | |||
@@ -4023,6 +4023,76 @@ | |||
4023 | { | 4023 | { |
4024 | "descriptors": [ | 4024 | "descriptors": [ |
4025 | { | 4025 | { |
4026 | "defaultMessage": "!!!Home", | ||
4027 | "end": { | ||
4028 | "column": 3, | ||
4029 | "line": 17 | ||
4030 | }, | ||
4031 | "file": "src/features/webControls/components/WebControls.js", | ||
4032 | "id": "webControls.goHome", | ||
4033 | "start": { | ||
4034 | "column": 10, | ||
4035 | "line": 14 | ||
4036 | } | ||
4037 | }, | ||
4038 | { | ||
4039 | "defaultMessage": "!!!Open in Browser", | ||
4040 | "end": { | ||
4041 | "column": 3, | ||
4042 | "line": 21 | ||
4043 | }, | ||
4044 | "file": "src/features/webControls/components/WebControls.js", | ||
4045 | "id": "webControls.openInBrowser", | ||
4046 | "start": { | ||
4047 | "column": 17, | ||
4048 | "line": 18 | ||
4049 | } | ||
4050 | }, | ||
4051 | { | ||
4052 | "defaultMessage": "!!!Back", | ||
4053 | "end": { | ||
4054 | "column": 3, | ||
4055 | "line": 25 | ||
4056 | }, | ||
4057 | "file": "src/features/webControls/components/WebControls.js", | ||
4058 | "id": "webControls.back", | ||
4059 | "start": { | ||
4060 | "column": 8, | ||
4061 | "line": 22 | ||
4062 | } | ||
4063 | }, | ||
4064 | { | ||
4065 | "defaultMessage": "!!!Forward", | ||
4066 | "end": { | ||
4067 | "column": 3, | ||
4068 | "line": 29 | ||
4069 | }, | ||
4070 | "file": "src/features/webControls/components/WebControls.js", | ||
4071 | "id": "webControls.forward", | ||
4072 | "start": { | ||
4073 | "column": 11, | ||
4074 | "line": 26 | ||
4075 | } | ||
4076 | }, | ||
4077 | { | ||
4078 | "defaultMessage": "!!!Reload", | ||
4079 | "end": { | ||
4080 | "column": 3, | ||
4081 | "line": 33 | ||
4082 | }, | ||
4083 | "file": "src/features/webControls/components/WebControls.js", | ||
4084 | "id": "webControls.reload", | ||
4085 | "start": { | ||
4086 | "column": 10, | ||
4087 | "line": 30 | ||
4088 | } | ||
4089 | } | ||
4090 | ], | ||
4091 | "path": "src/features/webControls/components/WebControls.json" | ||
4092 | }, | ||
4093 | { | ||
4094 | "descriptors": [ | ||
4095 | { | ||
4026 | "defaultMessage": "!!!Create workspace", | 4096 | "defaultMessage": "!!!Create workspace", |
4027 | "end": { | 4097 | "end": { |
4028 | "column": 3, | 4098 | "column": 3, |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index dcb9d92a2..e164b64a4 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -370,6 +370,11 @@ | |||
370 | "validation.oneRequired": "At least one is required", | 370 | "validation.oneRequired": "At least one is required", |
371 | "validation.required": "{field} is required", | 371 | "validation.required": "{field} is required", |
372 | "validation.url": "{field} is not a valid URL", | 372 | "validation.url": "{field} is not a valid URL", |
373 | "webControls.back": "Back", | ||
374 | "webControls.forward": "Forward", | ||
375 | "webControls.goHome": "Home", | ||
376 | "webControls.openInBrowser": "Open in Browser", | ||
377 | "webControls.reload": "Reload", | ||
373 | "welcome.loginButton": "Login to your account", | 378 | "welcome.loginButton": "Login to your account", |
374 | "welcome.signupButton": "Create a free account", | 379 | "welcome.signupButton": "Create a free account", |
375 | "workspaceDrawer.addNewWorkspaceLabel": "Add new workspace", | 380 | "workspaceDrawer.addNewWorkspaceLabel": "Add new workspace", |
@@ -383,4 +388,4 @@ | |||
383 | "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>", | 388 | "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>", |
384 | "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings", | 389 | "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings", |
385 | "workspaces.switchingIndicator.switchingTo": "Switching to" | 390 | "workspaces.switchingIndicator.switchingTo": "Switching to" |
386 | } \ No newline at end of file | 391 | } |
diff --git a/src/i18n/messages/src/features/webControls/components/WebControls.json b/src/i18n/messages/src/features/webControls/components/WebControls.json new file mode 100644 index 000000000..969437e98 --- /dev/null +++ b/src/i18n/messages/src/features/webControls/components/WebControls.json | |||
@@ -0,0 +1,67 @@ | |||
1 | [ | ||
2 | { | ||
3 | "id": "webControls.goHome", | ||
4 | "defaultMessage": "!!!Home", | ||
5 | "file": "src/features/webControls/components/WebControls.js", | ||
6 | "start": { | ||
7 | "line": 13, | ||
8 | "column": 10 | ||
9 | }, | ||
10 | "end": { | ||
11 | "line": 16, | ||
12 | "column": 3 | ||
13 | } | ||
14 | }, | ||
15 | { | ||
16 | "id": "webControls.openInBrowser", | ||
17 | "defaultMessage": "!!!Open in Browser", | ||
18 | "file": "src/features/webControls/components/WebControls.js", | ||
19 | "start": { | ||
20 | "line": 17, | ||
21 | "column": 17 | ||
22 | }, | ||
23 | "end": { | ||
24 | "line": 20, | ||
25 | "column": 3 | ||
26 | } | ||
27 | }, | ||
28 | { | ||
29 | "id": "webControls.back", | ||
30 | "defaultMessage": "!!!Back", | ||
31 | "file": "src/features/webControls/components/WebControls.js", | ||
32 | "start": { | ||
33 | "line": 21, | ||
34 | "column": 8 | ||
35 | }, | ||
36 | "end": { | ||
37 | "line": 24, | ||
38 | "column": 3 | ||
39 | } | ||
40 | }, | ||
41 | { | ||
42 | "id": "webControls.forward", | ||
43 | "defaultMessage": "!!!Forward", | ||
44 | "file": "src/features/webControls/components/WebControls.js", | ||
45 | "start": { | ||
46 | "line": 25, | ||
47 | "column": 11 | ||
48 | }, | ||
49 | "end": { | ||
50 | "line": 28, | ||
51 | "column": 3 | ||
52 | } | ||
53 | }, | ||
54 | { | ||
55 | "id": "webControls.reload", | ||
56 | "defaultMessage": "!!!Reload", | ||
57 | "file": "src/features/webControls/components/WebControls.js", | ||
58 | "start": { | ||
59 | "line": 29, | ||
60 | "column": 10 | ||
61 | }, | ||
62 | "end": { | ||
63 | "line": 32, | ||
64 | "column": 3 | ||
65 | } | ||
66 | } | ||
67 | ] \ No newline at end of file | ||
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawerItem.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawerItem.json index 4ff190606..1b6664787 100644 --- a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawerItem.json +++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawerItem.json | |||
@@ -4,11 +4,11 @@ | |||
4 | "defaultMessage": "!!!No services added yet", | 4 | "defaultMessage": "!!!No services added yet", |
5 | "file": "src/features/workspaces/components/WorkspaceDrawerItem.js", | 5 | "file": "src/features/workspaces/components/WorkspaceDrawerItem.js", |
6 | "start": { | 6 | "start": { |
7 | "line": 12, | 7 | "line": 13, |
8 | "column": 22 | 8 | "column": 22 |
9 | }, | 9 | }, |
10 | "end": { | 10 | "end": { |
11 | "line": 15, | 11 | "line": 16, |
12 | "column": 3 | 12 | "column": 3 |
13 | } | 13 | } |
14 | }, | 14 | }, |
@@ -17,11 +17,11 @@ | |||
17 | "defaultMessage": "!!!edit", | 17 | "defaultMessage": "!!!edit", |
18 | "file": "src/features/workspaces/components/WorkspaceDrawerItem.js", | 18 | "file": "src/features/workspaces/components/WorkspaceDrawerItem.js", |
19 | "start": { | 19 | "start": { |
20 | "line": 16, | 20 | "line": 17, |
21 | "column": 19 | 21 | "column": 19 |
22 | }, | 22 | }, |
23 | "end": { | 23 | "end": { |
24 | "line": 19, | 24 | "line": 20, |
25 | "column": 3 | 25 | "column": 3 |
26 | } | 26 | } |
27 | } | 27 | } |