diff options
Diffstat (limited to 'src/features')
3 files changed, 75 insertions, 60 deletions
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js index 1cdd14e55..417ebb0b0 100644 --- a/src/features/webControls/components/WebControls.js +++ b/src/features/webControls/components/WebControls.js | |||
@@ -6,7 +6,11 @@ import { Icon } from '@meetfranz/ui'; | |||
6 | import { defineMessages, intlShape } from 'react-intl'; | 6 | import { defineMessages, intlShape } from 'react-intl'; |
7 | 7 | ||
8 | import { | 8 | import { |
9 | mdiReload, mdiArrowRight, mdiArrowLeft, mdiHomeOutline, mdiEarth, | 9 | mdiReload, |
10 | mdiArrowRight, | ||
11 | mdiArrowLeft, | ||
12 | mdiHomeOutline, | ||
13 | mdiEarth, | ||
10 | } from '@mdi/js'; | 14 | } from '@mdi/js'; |
11 | 15 | ||
12 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
@@ -32,7 +36,13 @@ const messages = defineMessages({ | |||
32 | }, | 36 | }, |
33 | }); | 37 | }); |
34 | 38 | ||
35 | const styles = (theme) => ({ | 39 | let buttonTransition = 'none'; |
40 | |||
41 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
42 | buttonTransition = 'opacity 0.25s'; | ||
43 | } | ||
44 | |||
45 | const styles = theme => ({ | ||
36 | root: { | 46 | root: { |
37 | background: theme.colorBackground, | 47 | background: theme.colorBackground, |
38 | position: 'relative', | 48 | position: 'relative', |
@@ -51,7 +61,7 @@ const styles = (theme) => ({ | |||
51 | button: { | 61 | button: { |
52 | width: 30, | 62 | width: 30, |
53 | height: 50, | 63 | height: 50, |
54 | transition: 'opacity 0.25s', | 64 | transition: buttonTransition, |
55 | 65 | ||
56 | '&:hover': { | 66 | '&:hover': { |
57 | opacity: 0.8, | 67 | opacity: 0.8, |
@@ -83,7 +93,8 @@ const styles = (theme) => ({ | |||
83 | }, | 93 | }, |
84 | }); | 94 | }); |
85 | 95 | ||
86 | @injectSheet(styles) @observer | 96 | @injectSheet(styles) |
97 | @observer | ||
87 | class WebControls extends Component { | 98 | class WebControls extends Component { |
88 | static propTypes = { | 99 | static propTypes = { |
89 | classes: PropTypes.object.isRequired, | 100 | classes: PropTypes.object.isRequired, |
@@ -96,7 +107,7 @@ class WebControls extends Component { | |||
96 | openInBrowser: PropTypes.func.isRequired, | 107 | openInBrowser: PropTypes.func.isRequired, |
97 | url: PropTypes.string.isRequired, | 108 | url: PropTypes.string.isRequired, |
98 | navigate: PropTypes.func.isRequired, | 109 | navigate: PropTypes.func.isRequired, |
99 | } | 110 | }; |
100 | 111 | ||
101 | static contextTypes = { | 112 | static contextTypes = { |
102 | intl: intlShape, | 113 | intl: intlShape, |
@@ -119,7 +130,7 @@ class WebControls extends Component { | |||
119 | state = { | 130 | state = { |
120 | inputUrl: '', | 131 | inputUrl: '', |
121 | editUrl: false, | 132 | editUrl: false, |
122 | } | 133 | }; |
123 | 134 | ||
124 | render() { | 135 | render() { |
125 | const { | 136 | const { |
@@ -135,10 +146,7 @@ class WebControls extends Component { | |||
135 | navigate, | 146 | navigate, |
136 | } = this.props; | 147 | } = this.props; |
137 | 148 | ||
138 | const { | 149 | const { inputUrl, editUrl } = this.state; |
139 | inputUrl, | ||
140 | editUrl, | ||
141 | } = this.state; | ||
142 | 150 | ||
143 | const { intl } = this.context; | 151 | const { intl } = this.context; |
144 | 152 | ||
@@ -151,10 +159,7 @@ class WebControls extends Component { | |||
151 | data-tip={intl.formatMessage(messages.goHome)} | 159 | data-tip={intl.formatMessage(messages.goHome)} |
152 | data-place="bottom" | 160 | data-place="bottom" |
153 | > | 161 | > |
154 | <Icon | 162 | <Icon icon={mdiHomeOutline} className={classes.icon} /> |
155 | icon={mdiHomeOutline} | ||
156 | className={classes.icon} | ||
157 | /> | ||
158 | </button> | 163 | </button> |
159 | <button | 164 | <button |
160 | onClick={goBack} | 165 | onClick={goBack} |
@@ -164,10 +169,7 @@ class WebControls extends Component { | |||
164 | data-tip={intl.formatMessage(messages.back)} | 169 | data-tip={intl.formatMessage(messages.back)} |
165 | data-place="bottom" | 170 | data-place="bottom" |
166 | > | 171 | > |
167 | <Icon | 172 | <Icon icon={mdiArrowLeft} className={classes.icon} /> |
168 | icon={mdiArrowLeft} | ||
169 | className={classes.icon} | ||
170 | /> | ||
171 | </button> | 173 | </button> |
172 | <button | 174 | <button |
173 | onClick={goForward} | 175 | onClick={goForward} |
@@ -177,10 +179,7 @@ class WebControls extends Component { | |||
177 | data-tip={intl.formatMessage(messages.forward)} | 179 | data-tip={intl.formatMessage(messages.forward)} |
178 | data-place="bottom" | 180 | data-place="bottom" |
179 | > | 181 | > |
180 | <Icon | 182 | <Icon icon={mdiArrowRight} className={classes.icon} /> |
181 | icon={mdiArrowRight} | ||
182 | className={classes.icon} | ||
183 | /> | ||
184 | </button> | 183 | </button> |
185 | <button | 184 | <button |
186 | onClick={reload} | 185 | onClick={reload} |
@@ -189,25 +188,24 @@ class WebControls extends Component { | |||
189 | data-tip={intl.formatMessage(messages.reload)} | 188 | data-tip={intl.formatMessage(messages.reload)} |
190 | data-place="bottom" | 189 | data-place="bottom" |
191 | > | 190 | > |
192 | <Icon | 191 | <Icon icon={mdiReload} className={classes.icon} /> |
193 | icon={mdiReload} | ||
194 | className={classes.icon} | ||
195 | /> | ||
196 | </button> | 192 | </button> |
197 | <input | 193 | <input |
198 | value={editUrl ? inputUrl : url} | 194 | value={editUrl ? inputUrl : url} |
199 | className={classes.input} | 195 | className={classes.input} |
200 | onChange={(event) => this.setState({ | 196 | onChange={event => |
201 | inputUrl: event.target.value, | 197 | this.setState({ |
202 | })} | 198 | inputUrl: event.target.value, |
203 | onFocus={(event) => { | 199 | }) |
200 | } | ||
201 | onFocus={event => { | ||
204 | console.log('on focus event'); | 202 | console.log('on focus event'); |
205 | event.target.select(); | 203 | event.target.select(); |
206 | this.setState({ | 204 | this.setState({ |
207 | editUrl: true, | 205 | editUrl: true, |
208 | }); | 206 | }); |
209 | }} | 207 | }} |
210 | onKeyDown={(event) => { | 208 | onKeyDown={event => { |
211 | if (event.key === 'Enter') { | 209 | if (event.key === 'Enter') { |
212 | this.setState({ | 210 | this.setState({ |
213 | editUrl: false, | 211 | editUrl: false, |
@@ -231,10 +229,7 @@ class WebControls extends Component { | |||
231 | data-tip={intl.formatMessage(messages.openInBrowser)} | 229 | data-tip={intl.formatMessage(messages.openInBrowser)} |
232 | data-place="bottom" | 230 | data-place="bottom" |
233 | > | 231 | > |
234 | <Icon | 232 | <Icon icon={mdiEarth} className={classes.icon} /> |
235 | icon={mdiEarth} | ||
236 | className={classes.icon} | ||
237 | /> | ||
238 | </button> | 233 | </button> |
239 | </div> | 234 | </div> |
240 | ); | 235 | ); |
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js index 0294f69fc..c3f9fcb19 100644 --- a/src/features/workspaces/components/WorkspaceDrawerItem.js +++ b/src/features/workspaces/components/WorkspaceDrawerItem.js | |||
@@ -18,12 +18,18 @@ const messages = defineMessages({ | |||
18 | }, | 18 | }, |
19 | }); | 19 | }); |
20 | 20 | ||
21 | const styles = (theme) => ({ | 21 | let itemTransition = 'none'; |
22 | |||
23 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
24 | itemTransition = 'background-color 300ms ease-out'; | ||
25 | } | ||
26 | |||
27 | const styles = theme => ({ | ||
22 | item: { | 28 | item: { |
23 | height: '67px', | 29 | height: '67px', |
24 | padding: `15px ${theme.workspaces.drawer.padding}px`, | 30 | padding: `15px ${theme.workspaces.drawer.padding}px`, |
25 | borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`, | 31 | borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`, |
26 | transition: 'background-color 300ms ease-out', | 32 | transition: itemTransition, |
27 | '&:first-child': { | 33 | '&:first-child': { |
28 | borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`, | 34 | borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`, |
29 | }, | 35 | }, |
@@ -59,7 +65,8 @@ const styles = (theme) => ({ | |||
59 | }, | 65 | }, |
60 | }); | 66 | }); |
61 | 67 | ||
62 | @injectSheet(styles) @observer | 68 | @injectSheet(styles) |
69 | @observer | ||
63 | class WorkspaceDrawerItem extends Component { | 70 | class WorkspaceDrawerItem extends Component { |
64 | static propTypes = { | 71 | static propTypes = { |
65 | classes: PropTypes.object.isRequired, | 72 | classes: PropTypes.object.isRequired, |
@@ -91,15 +98,19 @@ class WorkspaceDrawerItem extends Component { | |||
91 | } = this.props; | 98 | } = this.props; |
92 | const { intl } = this.context; | 99 | const { intl } = this.context; |
93 | 100 | ||
94 | const contextMenuTemplate = [{ | 101 | const contextMenuTemplate = [ |
95 | label: name, | 102 | { |
96 | enabled: false, | 103 | label: name, |
97 | }, { | 104 | enabled: false, |
98 | type: 'separator', | 105 | }, |
99 | }, { | 106 | { |
100 | label: intl.formatMessage(messages.contextMenuEdit), | 107 | type: 'separator', |
101 | click: onContextMenuEditClick, | 108 | }, |
102 | }]; | 109 | { |
110 | label: intl.formatMessage(messages.contextMenuEdit), | ||
111 | click: onContextMenuEditClick, | ||
112 | }, | ||
113 | ]; | ||
103 | 114 | ||
104 | const contextMenu = Menu.buildFromTemplate(contextMenuTemplate); | 115 | const contextMenu = Menu.buildFromTemplate(contextMenuTemplate); |
105 | 116 | ||
@@ -110,10 +121,12 @@ class WorkspaceDrawerItem extends Component { | |||
110 | isActive ? classes.isActiveItem : null, | 121 | isActive ? classes.isActiveItem : null, |
111 | ])} | 122 | ])} |
112 | onClick={onClick} | 123 | onClick={onClick} |
113 | onContextMenu={() => ( | 124 | onContextMenu={() => |
114 | onContextMenuEditClick && contextMenu.popup(getCurrentWindow()) | 125 | onContextMenuEditClick && contextMenu.popup(getCurrentWindow()) |
115 | )} | 126 | } |
116 | data-tip={`${shortcutIndex <= 9 ? `(${ctrlKey}+${altKey}+${shortcutIndex})` : ''}`} | 127 | data-tip={`${ |
128 | shortcutIndex <= 9 ? `(${ctrlKey}+${altKey}+${shortcutIndex})` : '' | ||
129 | }`} | ||
117 | > | 130 | > |
118 | <span | 131 | <span |
119 | className={classnames([ | 132 | className={classnames([ |
@@ -129,7 +142,9 @@ class WorkspaceDrawerItem extends Component { | |||
129 | isActive ? classes.activeServices : null, | 142 | isActive ? classes.activeServices : null, |
130 | ])} | 143 | ])} |
131 | > | 144 | > |
132 | {services.length ? services.join(', ') : intl.formatMessage(messages.noServicesAddedYet)} | 145 | {services.length |
146 | ? services.join(', ') | ||
147 | : intl.formatMessage(messages.noServicesAddedYet)} | ||
133 | </span> | 148 | </span> |
134 | </div> | 149 | </div> |
135 | ); | 150 | ); |
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js index b46959e91..613075c4a 100644 --- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js | |||
@@ -15,12 +15,18 @@ const messages = defineMessages({ | |||
15 | }, | 15 | }, |
16 | }); | 16 | }); |
17 | 17 | ||
18 | const styles = (theme) => ({ | 18 | let wrapperTransition = 'none'; |
19 | |||
20 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
21 | wrapperTransition = 'width 0.5s ease'; | ||
22 | } | ||
23 | |||
24 | const styles = theme => ({ | ||
19 | wrapper: { | 25 | wrapper: { |
20 | display: 'flex', | 26 | display: 'flex', |
21 | alignItems: 'flex-start', | 27 | alignItems: 'flex-start', |
22 | position: 'absolute', | 28 | position: 'absolute', |
23 | transition: 'width 0.5s ease', | 29 | transition: wrapperTransition, |
24 | width: `calc(100% - ${theme.workspaces.drawer.width}px)`, | 30 | width: `calc(100% - ${theme.workspaces.drawer.width}px)`, |
25 | marginTop: '20px', | 31 | marginTop: '20px', |
26 | }, | 32 | }, |
@@ -47,7 +53,8 @@ const styles = (theme) => ({ | |||
47 | }, | 53 | }, |
48 | }); | 54 | }); |
49 | 55 | ||
50 | @injectSheet(styles) @observer | 56 | @injectSheet(styles) |
57 | @observer | ||
51 | class WorkspaceSwitchingIndicator extends Component { | 58 | class WorkspaceSwitchingIndicator extends Component { |
52 | static propTypes = { | 59 | static propTypes = { |
53 | classes: PropTypes.object.isRequired, | 60 | classes: PropTypes.object.isRequired, |
@@ -63,13 +70,11 @@ class WorkspaceSwitchingIndicator extends Component { | |||
63 | const { intl } = this.context; | 70 | const { intl } = this.context; |
64 | const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; | 71 | const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; |
65 | if (!isSwitchingWorkspace) return null; | 72 | if (!isSwitchingWorkspace) return null; |
66 | const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services'; | 73 | const nextWorkspaceName = nextWorkspace |
74 | ? nextWorkspace.name | ||
75 | : 'All services'; | ||
67 | return ( | 76 | return ( |
68 | <div | 77 | <div className={classnames([classes.wrapper])}> |
69 | className={classnames([ | ||
70 | classes.wrapper, | ||
71 | ])} | ||
72 | > | ||
73 | <div className={classes.component}> | 78 | <div className={classes.component}> |
74 | <Loader | 79 | <Loader |
75 | className={classes.spinner} | 80 | className={classes.spinner} |