diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-08-10 19:04:54 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-08-10 22:34:54 +0530 |
commit | 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 (patch) | |
tree | 9f21b062f0c188f2c3ddfbb6594670982610aadf /src | |
parent | refactor: Move platform-specific logic for shortcut keys into common location. (diff) | |
download | ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.tar.gz ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.tar.zst ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.zip |
feat: follow OS reduced motion setting (#1757)
- add missing meta charset to index.html
- dont restrict scaling for user in index.html
- load animations.css conditionally based on motion preference
- load transitions conditionally in js and css based on motion preference
Co-authored-by: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>
Diffstat (limited to 'src')
31 files changed, 924 insertions, 555 deletions
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js index bd9069eb7..06ab09892 100644 --- a/src/components/auth/SetupAssistant.js +++ b/src/components/auth/SetupAssistant.js | |||
@@ -18,15 +18,16 @@ const SLACK_ID = 'slack'; | |||
18 | const messages = defineMessages({ | 18 | const messages = defineMessages({ |
19 | headline: { | 19 | headline: { |
20 | id: 'setupAssistant.headline', | 20 | id: 'setupAssistant.headline', |
21 | defaultMessage: '!!!Let\'s get started', | 21 | defaultMessage: "!!!Let's get started", |
22 | }, | 22 | }, |
23 | subHeadline: { | 23 | subHeadline: { |
24 | id: 'setupAssistant.subheadline', | 24 | id: 'setupAssistant.subheadline', |
25 | defaultMessage: '!!!Choose from our most used services and get back on top of your messaging now.', | 25 | defaultMessage: |
26 | '!!!Choose from our most used services and get back on top of your messaging now.', | ||
26 | }, | 27 | }, |
27 | submitButtonLabel: { | 28 | submitButtonLabel: { |
28 | id: 'setupAssistant.submit.label', | 29 | id: 'setupAssistant.submit.label', |
29 | defaultMessage: '!!!Let\'s go', | 30 | defaultMessage: "!!!Let's go", |
30 | }, | 31 | }, |
31 | inviteSuccessInfo: { | 32 | inviteSuccessInfo: { |
32 | id: 'invite.successInfo', | 33 | id: 'invite.successInfo', |
@@ -34,14 +35,19 @@ const messages = defineMessages({ | |||
34 | }, | 35 | }, |
35 | }); | 36 | }); |
36 | 37 | ||
37 | const styles = (theme) => ({ | 38 | let transition = 'none'; |
39 | |||
40 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
41 | transition = 'all 0.25s'; | ||
42 | } | ||
43 | |||
44 | const styles = theme => ({ | ||
38 | root: { | 45 | root: { |
39 | width: '500px !important', | 46 | width: '500px !important', |
40 | textAlign: 'center', | 47 | textAlign: 'center', |
41 | padding: 20, | 48 | padding: 20, |
42 | 49 | ||
43 | '& h1': { | 50 | '& h1': {}, |
44 | }, | ||
45 | }, | 51 | }, |
46 | servicesGrid: { | 52 | servicesGrid: { |
47 | display: 'flex', | 53 | display: 'flex', |
@@ -60,7 +66,7 @@ const styles = (theme) => ({ | |||
60 | borderRadius: theme.borderRadius, | 66 | borderRadius: theme.borderRadius, |
61 | marginBottom: 10, | 67 | marginBottom: 10, |
62 | opacity: 0.5, | 68 | opacity: 0.5, |
63 | transition: 'all 0.25s', | 69 | transition, |
64 | border: [3, 'solid', 'transparent'], | 70 | border: [3, 'solid', 'transparent'], |
65 | 71 | ||
66 | '& h2': { | 72 | '& h2': { |
@@ -70,10 +76,8 @@ const styles = (theme) => ({ | |||
70 | 76 | ||
71 | '&:hover': { | 77 | '&:hover': { |
72 | border: [3, 'solid', theme.brandPrimary], | 78 | border: [3, 'solid', theme.brandPrimary], |
73 | '& $serviceIcon': { | 79 | '& $serviceIcon': {}, |
74 | }, | ||
75 | }, | 80 | }, |
76 | |||
77 | }, | 81 | }, |
78 | selected: { | 82 | selected: { |
79 | border: [3, 'solid', theme.brandPrimary], | 83 | border: [3, 'solid', theme.brandPrimary], |
@@ -82,7 +86,7 @@ const styles = (theme) => ({ | |||
82 | }, | 86 | }, |
83 | serviceIcon: { | 87 | serviceIcon: { |
84 | width: 50, | 88 | width: 50, |
85 | transition: 'all 0.25s', | 89 | transition, |
86 | }, | 90 | }, |
87 | 91 | ||
88 | slackModalContent: { | 92 | slackModalContent: { |
@@ -125,7 +129,8 @@ const styles = (theme) => ({ | |||
125 | }, | 129 | }, |
126 | }); | 130 | }); |
127 | 131 | ||
128 | @injectSheet(styles) @observer | 132 | @injectSheet(styles) |
133 | @observer | ||
129 | class SetupAssistant extends Component { | 134 | class SetupAssistant extends Component { |
130 | static propTypes = { | 135 | static propTypes = { |
131 | classes: PropTypes.object.isRequired, | 136 | classes: PropTypes.object.isRequired, |
@@ -144,13 +149,17 @@ class SetupAssistant extends Component { | |||
144 | }; | 149 | }; |
145 | 150 | ||
146 | state = { | 151 | state = { |
147 | services: [{ | 152 | services: [ |
148 | id: 'whatsapp', | 153 | { |
149 | }, { | 154 | id: 'whatsapp', |
150 | id: 'messenger', | 155 | }, |
151 | }, { | 156 | { |
152 | id: 'gmail', | 157 | id: 'messenger', |
153 | }], | 158 | }, |
159 | { | ||
160 | id: 'gmail', | ||
161 | }, | ||
162 | ], | ||
154 | isSlackModalOpen: false, | 163 | isSlackModalOpen: false, |
155 | slackWorkspace: '', | 164 | slackWorkspace: '', |
156 | }; | 165 | }; |
@@ -158,10 +167,12 @@ class SetupAssistant extends Component { | |||
158 | slackWorkspaceHandler() { | 167 | slackWorkspaceHandler() { |
159 | const { slackWorkspace = '', services } = this.state; | 168 | const { slackWorkspace = '', services } = this.state; |
160 | 169 | ||
161 | const sanitizedWorkspace = slackWorkspace.trim().replace(/^https?:\/\//, ''); | 170 | const sanitizedWorkspace = slackWorkspace |
171 | .trim() | ||
172 | .replace(/^https?:\/\//, ''); | ||
162 | 173 | ||
163 | if (sanitizedWorkspace) { | 174 | if (sanitizedWorkspace) { |
164 | const index = services.findIndex((s) => s.id === SLACK_ID); | 175 | const index = services.findIndex(s => s.id === SLACK_ID); |
165 | 176 | ||
166 | if (index === -1) { | 177 | if (index === -1) { |
167 | const newServices = services; | 178 | const newServices = services; |
@@ -179,9 +190,17 @@ class SetupAssistant extends Component { | |||
179 | render() { | 190 | render() { |
180 | const { intl } = this.context; | 191 | const { intl } = this.context; |
181 | const { | 192 | const { |
182 | classes, isInviteSuccessful, onSubmit, services, isSettingUpServices, | 193 | classes, |
194 | isInviteSuccessful, | ||
195 | onSubmit, | ||
196 | services, | ||
197 | isSettingUpServices, | ||
183 | } = this.props; | 198 | } = this.props; |
184 | const { isSlackModalOpen, slackWorkspace, services: addedServices } = this.state; | 199 | const { |
200 | isSlackModalOpen, | ||
201 | slackWorkspace, | ||
202 | services: addedServices, | ||
203 | } = this.state; | ||
185 | 204 | ||
186 | return ( | 205 | return ( |
187 | <div className={`auth__container ${classes.root}`}> | 206 | <div className={`auth__container ${classes.root}`}> |
@@ -197,29 +216,22 @@ class SetupAssistant extends Component { | |||
197 | </Appear> | 216 | </Appear> |
198 | )} | 217 | )} |
199 | 218 | ||
200 | <img | 219 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> |
201 | src="./assets/images/logo.svg" | 220 | <h1>{intl.formatMessage(messages.headline)}</h1> |
202 | className="auth__logo" | 221 | <h2>{intl.formatMessage(messages.subHeadline)}</h2> |
203 | alt="" | ||
204 | /> | ||
205 | <h1> | ||
206 | {intl.formatMessage(messages.headline)} | ||
207 | </h1> | ||
208 | <h2> | ||
209 | {intl.formatMessage(messages.subHeadline)} | ||
210 | </h2> | ||
211 | <div className={classnames('grid', classes.servicesGrid)}> | 222 | <div className={classnames('grid', classes.servicesGrid)}> |
212 | {Object.keys(services).map((id) => { | 223 | {Object.keys(services).map(id => { |
213 | const service = services[id]; | 224 | const service = services[id]; |
214 | return ( | 225 | return ( |
215 | <button | 226 | <button |
216 | className={classnames({ | 227 | className={classnames({ |
217 | [classes.serviceContainer]: true, | 228 | [classes.serviceContainer]: true, |
218 | [classes.selected]: this.state.services.findIndex((s) => s.id === id) !== -1, | 229 | [classes.selected]: |
230 | this.state.services.findIndex(s => s.id === id) !== -1, | ||
219 | })} | 231 | })} |
220 | key={id} | 232 | key={id} |
221 | onClick={() => { | 233 | onClick={() => { |
222 | const index = this.state.services.findIndex((s) => s.id === id); | 234 | const index = this.state.services.findIndex(s => s.id === id); |
223 | if (index === -1) { | 235 | if (index === -1) { |
224 | if (id === SLACK_ID) { | 236 | if (id === SLACK_ID) { |
225 | this.setState({ isSlackModalOpen: true }); | 237 | this.setState({ isSlackModalOpen: true }); |
@@ -244,9 +256,7 @@ class SetupAssistant extends Component { | |||
244 | className={classes.serviceIcon} | 256 | className={classes.serviceIcon} |
245 | alt="" | 257 | alt="" |
246 | /> | 258 | /> |
247 | <h2> | 259 | <h2>{service.name}</h2> |
248 | {service.name} | ||
249 | </h2> | ||
250 | {id === SLACK_ID && slackWorkspace && ( | 260 | {id === SLACK_ID && slackWorkspace && ( |
251 | <Badge type="secondary" className={classes.slackBadge}> | 261 | <Badge type="secondary" className={classes.slackBadge}> |
252 | {slackWorkspace} | 262 | {slackWorkspace} |
@@ -275,22 +285,22 @@ class SetupAssistant extends Component { | |||
275 | <div className={classes.slackModalContent}> | 285 | <div className={classes.slackModalContent}> |
276 | <img src={`${CDN_URL}/recipes/dist/slack/src/icon.svg`} alt="" /> | 286 | <img src={`${CDN_URL}/recipes/dist/slack/src/icon.svg`} alt="" /> |
277 | <h1>Create your first Slack workspace</h1> | 287 | <h1>Create your first Slack workspace</h1> |
278 | <form onSubmit={(e) => { | 288 | <form |
279 | e.preventDefault(); | 289 | onSubmit={e => { |
280 | this.slackWorkspaceHandler(); | 290 | e.preventDefault(); |
281 | }} | 291 | this.slackWorkspaceHandler(); |
292 | }} | ||
282 | > | 293 | > |
283 | <Input | 294 | <Input |
284 | suffix=".slack.com" | 295 | suffix=".slack.com" |
285 | placeholder="workspace-url" | 296 | placeholder="workspace-url" |
286 | onChange={(e) => this.setState({ slackWorkspace: e.target.value })} | 297 | onChange={e => |
298 | this.setState({ slackWorkspace: e.target.value }) | ||
299 | } | ||
287 | value={slackWorkspace} | 300 | value={slackWorkspace} |
288 | /> | 301 | /> |
289 | <div className={classes.modalActionContainer}> | 302 | <div className={classes.modalActionContainer}> |
290 | <Button | 303 | <Button type="submit" label="Save" /> |
291 | type="submit" | ||
292 | label="Save" | ||
293 | /> | ||
294 | <Button | 304 | <Button |
295 | type="link" | 305 | type="link" |
296 | buttonType="secondary" | 306 | buttonType="secondary" |
@@ -305,7 +315,7 @@ class SetupAssistant extends Component { | |||
305 | <Button | 315 | <Button |
306 | type="button" | 316 | type="button" |
307 | className="auth__button" | 317 | className="auth__button" |
308 | // disabled={!atLeastOneEmailAddress} | 318 | // disabled={!atLeastOneEmailAddress} |
309 | label={intl.formatMessage(messages.submitButtonLabel)} | 319 | label={intl.formatMessage(messages.submitButtonLabel)} |
310 | onClick={() => onSubmit(this.state.services)} | 320 | onClick={() => onSubmit(this.state.services)} |
311 | busy={isSettingUpServices} | 321 | busy={isSettingUpServices} |
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 6e1d7c9a0..de962cc12 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -40,22 +40,32 @@ const messages = defineMessages({ | |||
40 | }, | 40 | }, |
41 | authRequestFailed: { | 41 | authRequestFailed: { |
42 | id: 'infobar.authRequestFailed', | 42 | id: 'infobar.authRequestFailed', |
43 | defaultMessage: '!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.', | 43 | defaultMessage: |
44 | '!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.', | ||
44 | }, | 45 | }, |
45 | }); | 46 | }); |
46 | 47 | ||
47 | const styles = (theme) => ({ | 48 | let transition = 'none'; |
49 | |||
50 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
51 | transition = 'transform 0.5s ease'; | ||
52 | } | ||
53 | |||
54 | const styles = theme => ({ | ||
48 | appContent: { | 55 | appContent: { |
49 | // width: `calc(100% + ${theme.workspaces.drawer.width}px)`, | 56 | // width: `calc(100% + ${theme.workspaces.drawer.width}px)`, |
50 | width: '100%', | 57 | width: '100%', |
51 | transition: 'transform 0.5s ease', | 58 | transition, |
52 | transform() { | 59 | transform() { |
53 | return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`; | 60 | return workspaceStore.isWorkspaceDrawerOpen |
61 | ? 'translateX(0)' | ||
62 | : `translateX(-${theme.workspaces.drawer.width}px)`; | ||
54 | }, | 63 | }, |
55 | }, | 64 | }, |
56 | }); | 65 | }); |
57 | 66 | ||
58 | @injectSheet(styles) @observer | 67 | @injectSheet(styles) |
68 | @observer | ||
59 | class AppLayout extends Component { | 69 | class AppLayout extends Component { |
60 | static propTypes = { | 70 | static propTypes = { |
61 | classes: PropTypes.object.isRequired, | 71 | classes: PropTypes.object.isRequired, |
@@ -80,7 +90,7 @@ class AppLayout extends Component { | |||
80 | 90 | ||
81 | state = { | 91 | state = { |
82 | shouldShowAppUpdateInfoBar: true, | 92 | shouldShowAppUpdateInfoBar: true, |
83 | } | 93 | }; |
84 | 94 | ||
85 | static defaultProps = { | 95 | static defaultProps = { |
86 | children: [], | 96 | children: [], |
@@ -118,42 +128,48 @@ class AppLayout extends Component { | |||
118 | return ( | 128 | return ( |
119 | <ErrorBoundary> | 129 | <ErrorBoundary> |
120 | <div className="app"> | 130 | <div className="app"> |
121 | {isWindows && !isFullScreen && <TitleBar menu={window.ferdi.menu.template} icon="assets/images/logo.svg" />} | 131 | {isWindows && !isFullScreen && ( |
132 | <TitleBar | ||
133 | menu={window.ferdi.menu.template} | ||
134 | icon="assets/images/logo.svg" | ||
135 | /> | ||
136 | )} | ||
122 | <div className={`app__content ${classes.appContent}`}> | 137 | <div className={`app__content ${classes.appContent}`}> |
123 | {workspacesDrawer} | 138 | {workspacesDrawer} |
124 | {sidebar} | 139 | {sidebar} |
125 | <div className="app__service"> | 140 | <div className="app__service"> |
126 | <WorkspaceSwitchingIndicator /> | 141 | <WorkspaceSwitchingIndicator /> |
127 | {news.length > 0 && news.map((item) => ( | 142 | {news.length > 0 && |
143 | news.map(item => ( | ||
144 | <InfoBar | ||
145 | key={item.id} | ||
146 | position="top" | ||
147 | type={item.type} | ||
148 | sticky={item.sticky} | ||
149 | onHide={() => removeNewsItem({ newsId: item.id })} | ||
150 | > | ||
151 | <span | ||
152 | dangerouslySetInnerHTML={createMarkup(item.message)} | ||
153 | onClick={event => { | ||
154 | const { target } = event; | ||
155 | if (target && target.hasAttribute('data-is-news-cta')) { | ||
156 | removeNewsItem({ newsId: item.id }); | ||
157 | } | ||
158 | }} | ||
159 | /> | ||
160 | </InfoBar> | ||
161 | ))} | ||
162 | {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( | ||
128 | <InfoBar | 163 | <InfoBar |
129 | key={item.id} | 164 | type="danger" |
130 | position="top" | 165 | ctaLabel="Try again" |
131 | type={item.type} | 166 | ctaLoading={areRequiredRequestsLoading} |
132 | sticky={item.sticky} | 167 | sticky |
133 | onHide={() => removeNewsItem({ newsId: item.id })} | 168 | onClick={retryRequiredRequests} |
134 | > | 169 | > |
135 | <span | 170 | <span className="mdi mdi-flash" /> |
136 | dangerouslySetInnerHTML={createMarkup(item.message)} | 171 | {intl.formatMessage(messages.requiredRequestsFailed)} |
137 | onClick={(event) => { | ||
138 | const { target } = event; | ||
139 | if (target && target.hasAttribute('data-is-news-cta')) { | ||
140 | removeNewsItem({ newsId: item.id }); | ||
141 | } | ||
142 | }} | ||
143 | /> | ||
144 | </InfoBar> | 172 | </InfoBar> |
145 | ))} | ||
146 | {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( | ||
147 | <InfoBar | ||
148 | type="danger" | ||
149 | ctaLabel="Try again" | ||
150 | ctaLoading={areRequiredRequestsLoading} | ||
151 | sticky | ||
152 | onClick={retryRequiredRequests} | ||
153 | > | ||
154 | <span className="mdi mdi-flash" /> | ||
155 | {intl.formatMessage(messages.requiredRequestsFailed)} | ||
156 | </InfoBar> | ||
157 | )} | 173 | )} |
158 | {authRequestFailed && ( | 174 | {authRequestFailed && ( |
159 | <InfoBar | 175 | <InfoBar |
@@ -178,7 +194,7 @@ class AppLayout extends Component { | |||
178 | {intl.formatMessage(messages.servicesUpdated)} | 194 | {intl.formatMessage(messages.servicesUpdated)} |
179 | </InfoBar> | 195 | </InfoBar> |
180 | )} | 196 | )} |
181 | { appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && ( | 197 | {appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && ( |
182 | <AppUpdateInfoBar | 198 | <AppUpdateInfoBar |
183 | nextAppReleaseVersion={nextAppReleaseVersion} | 199 | nextAppReleaseVersion={nextAppReleaseVersion} |
184 | onInstallUpdate={installAppUpdate} | 200 | onInstallUpdate={installAppUpdate} |
diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js index 0b9d3122c..343ddf8b4 100644 --- a/src/components/services/content/ConnectionLostBanner.js +++ b/src/components/services/content/ConnectionLostBanner.js | |||
@@ -5,9 +5,7 @@ import injectSheet from 'react-jss'; | |||
5 | import { Icon } from '@meetfranz/ui'; | 5 | import { Icon } from '@meetfranz/ui'; |
6 | import { intlShape, defineMessages } from 'react-intl'; | 6 | import { intlShape, defineMessages } from 'react-intl'; |
7 | 7 | ||
8 | import { | 8 | import { mdiAlert } from '@mdi/js'; |
9 | mdiAlert, | ||
10 | } from '@mdi/js'; | ||
11 | import { LIVE_API_FERDI_WEBSITE } from '../../../config'; | 9 | import { LIVE_API_FERDI_WEBSITE } from '../../../config'; |
12 | // import { Button } from '@meetfranz/forms'; | 10 | // import { Button } from '@meetfranz/forms'; |
13 | 11 | ||
@@ -26,7 +24,13 @@ const messages = defineMessages({ | |||
26 | }, | 24 | }, |
27 | }); | 25 | }); |
28 | 26 | ||
29 | const styles = (theme) => ({ | 27 | let buttonTransition = 'none'; |
28 | |||
29 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
30 | buttonTransition = 'opacity 0.25s'; | ||
31 | } | ||
32 | |||
33 | const styles = theme => ({ | ||
30 | root: { | 34 | root: { |
31 | background: theme.colorBackground, | 35 | background: theme.colorBackground, |
32 | borderRadius: theme.borderRadius, | 36 | borderRadius: theme.borderRadius, |
@@ -47,7 +51,7 @@ const styles = (theme) => ({ | |||
47 | opacity: 0.7, | 51 | opacity: 0.7, |
48 | }, | 52 | }, |
49 | button: { | 53 | button: { |
50 | transition: 'opacity 0.25s', | 54 | transition: buttonTransition, |
51 | color: theme.colorText, | 55 | color: theme.colorText, |
52 | border: [1, 'solid', theme.colorText], | 56 | border: [1, 'solid', theme.colorText], |
53 | borderRadius: theme.borderRadiusSmall, | 57 | borderRadius: theme.borderRadiusSmall, |
@@ -65,13 +69,14 @@ const styles = (theme) => ({ | |||
65 | }, | 69 | }, |
66 | }); | 70 | }); |
67 | 71 | ||
68 | @injectSheet(styles) @observer | 72 | @injectSheet(styles) |
73 | @observer | ||
69 | class ConnectionLostBanner extends Component { | 74 | class ConnectionLostBanner extends Component { |
70 | static propTypes = { | 75 | static propTypes = { |
71 | classes: PropTypes.object.isRequired, | 76 | classes: PropTypes.object.isRequired, |
72 | name: PropTypes.string.isRequired, | 77 | name: PropTypes.string.isRequired, |
73 | reload: PropTypes.func.isRequired, | 78 | reload: PropTypes.func.isRequired, |
74 | } | 79 | }; |
75 | 80 | ||
76 | static contextTypes = { | 81 | static contextTypes = { |
77 | intl: intlShape, | 82 | intl: intlShape, |
@@ -80,20 +85,13 @@ class ConnectionLostBanner extends Component { | |||
80 | inputRef = React.createRef(); | 85 | inputRef = React.createRef(); |
81 | 86 | ||
82 | render() { | 87 | render() { |
83 | const { | 88 | const { classes, name, reload } = this.props; |
84 | classes, | ||
85 | name, | ||
86 | reload, | ||
87 | } = this.props; | ||
88 | 89 | ||
89 | const { intl } = this.context; | 90 | const { intl } = this.context; |
90 | 91 | ||
91 | return ( | 92 | return ( |
92 | <div className={classes.root}> | 93 | <div className={classes.root}> |
93 | <Icon | 94 | <Icon icon={mdiAlert} className={classes.icon} /> |
94 | icon={mdiAlert} | ||
95 | className={classes.icon} | ||
96 | /> | ||
97 | <p> | 95 | <p> |
98 | {intl.formatMessage(messages.text, { name })} | 96 | {intl.formatMessage(messages.text, { name })} |
99 | <br /> | 97 | <br /> |
@@ -104,11 +102,7 @@ class ConnectionLostBanner extends Component { | |||
104 | {intl.formatMessage(messages.moreInformation)} | 102 | {intl.formatMessage(messages.moreInformation)} |
105 | </a> | 103 | </a> |
106 | </p> | 104 | </p> |
107 | <button | 105 | <button type="button" className={classes.button} onClick={reload}> |
108 | type="button" | ||
109 | className={classes.button} | ||
110 | onClick={reload} | ||
111 | > | ||
112 | {intl.formatMessage(messages.cta)} | 106 | {intl.formatMessage(messages.cta)} |
113 | </button> | 107 | </button> |
114 | </div> | 108 | </div> |
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js index ccf3333f8..023e152c7 100644 --- a/src/components/services/tabs/TabItem.js +++ b/src/components/services/tabs/TabItem.js | |||
@@ -1,6 +1,4 @@ | |||
1 | import { | 1 | import { Menu, dialog, app, getCurrentWindow } from '@electron/remote'; |
2 | Menu, dialog, app, getCurrentWindow, | ||
3 | } from '@electron/remote'; | ||
4 | import React, { Component } from 'react'; | 2 | import React, { Component } from 'react'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 3 | import { defineMessages, intlShape } from 'react-intl'; |
6 | import PropTypes from 'prop-types'; | 4 | import PropTypes from 'prop-types'; |
@@ -14,7 +12,9 @@ import { observable, autorun } from 'mobx'; | |||
14 | import ServiceModel from '../../../models/Service'; | 12 | import ServiceModel from '../../../models/Service'; |
15 | import { ctrlKey, cmdKey } from '../../../environment'; | 13 | import { ctrlKey, cmdKey } from '../../../environment'; |
16 | 14 | ||
17 | const IS_SERVICE_DEBUGGING_ENABLED = (localStorage.getItem('debug') || '').includes('Ferdi:Service'); | 15 | const IS_SERVICE_DEBUGGING_ENABLED = ( |
16 | localStorage.getItem('debug') || '' | ||
17 | ).includes('Ferdi:Service'); | ||
18 | 18 | ||
19 | const messages = defineMessages({ | 19 | const messages = defineMessages({ |
20 | reload: { | 20 | reload: { |
@@ -63,10 +63,21 @@ const messages = defineMessages({ | |||
63 | }, | 63 | }, |
64 | confirmDeleteService: { | 64 | confirmDeleteService: { |
65 | id: 'tabs.item.confirmDeleteService', | 65 | id: 'tabs.item.confirmDeleteService', |
66 | defaultMessage: '!!!Do you really want to delete the {serviceName} service?', | 66 | defaultMessage: |
67 | '!!!Do you really want to delete the {serviceName} service?', | ||
67 | }, | 68 | }, |
68 | }); | 69 | }); |
69 | 70 | ||
71 | let pollIndicatorTransition = 'none'; | ||
72 | let polledTransition = 'none'; | ||
73 | let pollAnsweredTransition = 'none'; | ||
74 | |||
75 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
76 | pollIndicatorTransition = 'background 0.5s'; | ||
77 | polledTransition = 'background 0.1s'; | ||
78 | pollAnsweredTransition = 'background 0.1s'; | ||
79 | } | ||
80 | |||
70 | const styles = { | 81 | const styles = { |
71 | pollIndicator: { | 82 | pollIndicator: { |
72 | position: 'absolute', | 83 | position: 'absolute', |
@@ -75,7 +86,7 @@ const styles = { | |||
75 | height: 10, | 86 | height: 10, |
76 | borderRadius: 5, | 87 | borderRadius: 5, |
77 | background: 'gray', | 88 | background: 'gray', |
78 | transition: 'background 0.5s', | 89 | transition: pollIndicatorTransition, |
79 | }, | 90 | }, |
80 | pollIndicatorPoll: { | 91 | pollIndicatorPoll: { |
81 | left: 2, | 92 | left: 2, |
@@ -85,18 +96,20 @@ const styles = { | |||
85 | }, | 96 | }, |
86 | polled: { | 97 | polled: { |
87 | background: 'yellow !important', | 98 | background: 'yellow !important', |
88 | transition: 'background 0.1s', | 99 | transition: polledTransition, |
89 | }, | 100 | }, |
90 | pollAnswered: { | 101 | pollAnswered: { |
91 | background: 'green !important', | 102 | background: 'green !important', |
92 | transition: 'background 0.1s', | 103 | transition: pollAnsweredTransition, |
93 | }, | 104 | }, |
94 | stale: { | 105 | stale: { |
95 | background: 'red !important', | 106 | background: 'red !important', |
96 | }, | 107 | }, |
97 | }; | 108 | }; |
98 | 109 | ||
99 | @injectSheet(styles) @observer class TabItem extends Component { | 110 | @injectSheet(styles) |
111 | @observer | ||
112 | class TabItem extends Component { | ||
100 | static propTypes = { | 113 | static propTypes = { |
101 | classes: PropTypes.object.isRequired, | 114 | classes: PropTypes.object.isRequired, |
102 | service: PropTypes.instanceOf(ServiceModel).isRequired, | 115 | service: PropTypes.instanceOf(ServiceModel).isRequired, |
@@ -131,13 +144,17 @@ const styles = { | |||
131 | if (Date.now() - service.lastPoll < ms('0.2s')) { | 144 | if (Date.now() - service.lastPoll < ms('0.2s')) { |
132 | this.isPolled = true; | 145 | this.isPolled = true; |
133 | 146 | ||
134 | setTimeout(() => { this.isPolled = false; }, ms('1s')); | 147 | setTimeout(() => { |
148 | this.isPolled = false; | ||
149 | }, ms('1s')); | ||
135 | } | 150 | } |
136 | 151 | ||
137 | if (Date.now() - service.lastPollAnswer < ms('0.2s')) { | 152 | if (Date.now() - service.lastPollAnswer < ms('0.2s')) { |
138 | this.isPollAnswered = true; | 153 | this.isPollAnswered = true; |
139 | 154 | ||
140 | setTimeout(() => { this.isPollAnswered = false; }, ms('1s')); | 155 | setTimeout(() => { |
156 | this.isPollAnswered = false; | ||
157 | }, ms('1s')); | ||
141 | } | 158 | } |
142 | }); | 159 | }); |
143 | } | 160 | } |
@@ -163,62 +180,85 @@ const styles = { | |||
163 | } = this.props; | 180 | } = this.props; |
164 | const { intl } = this.context; | 181 | const { intl } = this.context; |
165 | 182 | ||
166 | const menuTemplate = [{ | 183 | const menuTemplate = [ |
167 | label: service.name || service.recipe.name, | 184 | { |
168 | enabled: false, | 185 | label: service.name || service.recipe.name, |
169 | }, { | 186 | enabled: false, |
170 | type: 'separator', | 187 | }, |
171 | }, { | 188 | { |
172 | label: intl.formatMessage(messages.reload), | 189 | type: 'separator', |
173 | click: reload, | 190 | }, |
174 | accelerator: `${cmdKey}+R`, | 191 | { |
175 | }, { | 192 | label: intl.formatMessage(messages.reload), |
176 | label: intl.formatMessage(messages.edit), | 193 | click: reload, |
177 | click: () => openSettings({ | 194 | accelerator: `${cmdKey}+R`, |
178 | path: `services/edit/${service.id}`, | 195 | }, |
179 | }), | 196 | { |
180 | }, { | 197 | label: intl.formatMessage(messages.edit), |
181 | type: 'separator', | 198 | click: () => |
182 | }, { | 199 | openSettings({ |
183 | label: service.isNotificationEnabled | 200 | path: `services/edit/${service.id}`, |
184 | ? intl.formatMessage(messages.disableNotifications) | 201 | }), |
185 | : intl.formatMessage(messages.enableNotifications), | 202 | }, |
186 | click: () => toggleNotifications(), | 203 | { |
187 | }, { | 204 | type: 'separator', |
188 | label: service.isMuted | ||
189 | ? intl.formatMessage(messages.enableAudio) | ||
190 | : intl.formatMessage(messages.disableAudio), | ||
191 | click: () => toggleAudio(), | ||
192 | }, { | ||
193 | label: intl.formatMessage(service.isEnabled ? messages.disableService : messages.enableService), | ||
194 | click: () => (service.isEnabled ? disableService() : enableService()), | ||
195 | }, { | ||
196 | label: intl.formatMessage(service.isHibernating ? messages.wakeUpService : messages.hibernateService), | ||
197 | click: () => (service.isHibernating ? wakeUpService() : hibernateService()), | ||
198 | enabled: service.canHibernate, | ||
199 | }, { | ||
200 | type: 'separator', | ||
201 | }, { | ||
202 | label: intl.formatMessage(messages.deleteService), | ||
203 | click: () => { | ||
204 | const selection = dialog.showMessageBoxSync(app.mainWindow, { | ||
205 | type: 'question', | ||
206 | message: intl.formatMessage(messages.deleteService), | ||
207 | detail: intl.formatMessage(messages.confirmDeleteService, { serviceName: service.name || service.recipe.name }), | ||
208 | buttons: [ | ||
209 | 'Yes', | ||
210 | 'No', | ||
211 | ], | ||
212 | }); | ||
213 | if (selection === 0) { | ||
214 | deleteService(); | ||
215 | } | ||
216 | }, | 205 | }, |
217 | }]; | 206 | { |
207 | label: service.isNotificationEnabled | ||
208 | ? intl.formatMessage(messages.disableNotifications) | ||
209 | : intl.formatMessage(messages.enableNotifications), | ||
210 | click: () => toggleNotifications(), | ||
211 | }, | ||
212 | { | ||
213 | label: service.isMuted | ||
214 | ? intl.formatMessage(messages.enableAudio) | ||
215 | : intl.formatMessage(messages.disableAudio), | ||
216 | click: () => toggleAudio(), | ||
217 | }, | ||
218 | { | ||
219 | label: intl.formatMessage( | ||
220 | service.isEnabled ? messages.disableService : messages.enableService, | ||
221 | ), | ||
222 | click: () => (service.isEnabled ? disableService() : enableService()), | ||
223 | }, | ||
224 | { | ||
225 | label: intl.formatMessage( | ||
226 | service.isHibernating | ||
227 | ? messages.wakeUpService | ||
228 | : messages.hibernateService, | ||
229 | ), | ||
230 | click: () => | ||
231 | (service.isHibernating ? wakeUpService() : hibernateService()), | ||
232 | enabled: service.canHibernate, | ||
233 | }, | ||
234 | { | ||
235 | type: 'separator', | ||
236 | }, | ||
237 | { | ||
238 | label: intl.formatMessage(messages.deleteService), | ||
239 | click: () => { | ||
240 | const selection = dialog.showMessageBoxSync(app.mainWindow, { | ||
241 | type: 'question', | ||
242 | message: intl.formatMessage(messages.deleteService), | ||
243 | detail: intl.formatMessage(messages.confirmDeleteService, { | ||
244 | serviceName: service.name || service.recipe.name, | ||
245 | }), | ||
246 | buttons: ['Yes', 'No'], | ||
247 | }); | ||
248 | if (selection === 0) { | ||
249 | deleteService(); | ||
250 | } | ||
251 | }, | ||
252 | }, | ||
253 | ]; | ||
218 | const menu = Menu.buildFromTemplate(menuTemplate); | 254 | const menu = Menu.buildFromTemplate(menuTemplate); |
219 | 255 | ||
220 | let notificationBadge = null; | 256 | let notificationBadge = null; |
221 | if ((showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && service.isBadgeEnabled) { | 257 | if ( |
258 | (showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) && | ||
259 | showMessageBadgesEvenWhenMuted && | ||
260 | service.isBadgeEnabled | ||
261 | ) { | ||
222 | notificationBadge = ( | 262 | notificationBadge = ( |
223 | <span> | 263 | <span> |
224 | {service.unreadDirectMessageCount > 0 && ( | 264 | {service.unreadDirectMessageCount > 0 && ( |
@@ -226,17 +266,13 @@ const styles = { | |||
226 | {service.unreadDirectMessageCount} | 266 | {service.unreadDirectMessageCount} |
227 | </span> | 267 | </span> |
228 | )} | 268 | )} |
229 | {service.unreadIndirectMessageCount > 0 | 269 | {service.unreadIndirectMessageCount > 0 && |
230 | && service.unreadDirectMessageCount === 0 | 270 | service.unreadDirectMessageCount === 0 && |
231 | && service.isIndirectMessageBadgeEnabled && ( | 271 | service.isIndirectMessageBadgeEnabled && ( |
232 | <span className="tab-item__message-count is-indirect"> | 272 | <span className="tab-item__message-count is-indirect">•</span> |
233 | • | ||
234 | </span> | ||
235 | )} | 273 | )} |
236 | {service.isHibernating && ( | 274 | {service.isHibernating && ( |
237 | <span className="tab-item__message-count hibernating"> | 275 | <span className="tab-item__message-count hibernating">•</span> |
238 | • | ||
239 | </span> | ||
240 | )} | 276 | )} |
241 | </span> | 277 | </span> |
242 | ); | 278 | ); |
@@ -245,7 +281,8 @@ const styles = { | |||
245 | return ( | 281 | return ( |
246 | <li | 282 | <li |
247 | className={classnames({ | 283 | className={classnames({ |
248 | [classes.stale]: IS_SERVICE_DEBUGGING_ENABLED && service.lostRecipeConnection, | 284 | [classes.stale]: |
285 | IS_SERVICE_DEBUGGING_ENABLED && service.lostRecipeConnection, | ||
249 | 'tab-item': true, | 286 | 'tab-item': true, |
250 | 'is-active': service.isActive, | 287 | 'is-active': service.isActive, |
251 | 'has-custom-icon': service.hasCustomIcon, | 288 | 'has-custom-icon': service.hasCustomIcon, |
@@ -253,13 +290,11 @@ const styles = { | |||
253 | })} | 290 | })} |
254 | onClick={clickHandler} | 291 | onClick={clickHandler} |
255 | onContextMenu={() => menu.popup(getCurrentWindow())} | 292 | onContextMenu={() => menu.popup(getCurrentWindow())} |
256 | data-tip={`${service.name} ${shortcutIndex <= 9 ? `(${ctrlKey}+${shortcutIndex})` : ''}`} | 293 | data-tip={`${service.name} ${ |
294 | shortcutIndex <= 9 ? `(${ctrlKey}+${shortcutIndex})` : '' | ||
295 | }`} | ||
257 | > | 296 | > |
258 | <img | 297 | <img src={service.icon} className="tab-item__icon" alt="" /> |
259 | src={service.icon} | ||
260 | className="tab-item__icon" | ||
261 | alt="" | ||
262 | /> | ||
263 | {notificationBadge} | 298 | {notificationBadge} |
264 | {IS_SERVICE_DEBUGGING_ENABLED && ( | 299 | {IS_SERVICE_DEBUGGING_ENABLED && ( |
265 | <> | 300 | <> |
diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.js index 755a56b40..011f6282d 100644 --- a/src/components/ui/AppLoader/styles.js +++ b/src/components/ui/AppLoader/styles.js | |||
@@ -1,3 +1,9 @@ | |||
1 | let sloganTransition = 'none'; | ||
2 | |||
3 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
4 | sloganTransition = 'opacity 1s ease'; | ||
5 | } | ||
6 | |||
1 | export default { | 7 | export default { |
2 | component: { | 8 | component: { |
3 | color: '#FFF', | 9 | color: '#FFF', |
@@ -5,7 +11,7 @@ export default { | |||
5 | slogan: { | 11 | slogan: { |
6 | display: 'block', | 12 | display: 'block', |
7 | opacity: 0, | 13 | opacity: 0, |
8 | transition: 'opacity 1s ease', | 14 | transition: sloganTransition, |
9 | position: 'absolute', | 15 | position: 'absolute', |
10 | textAlign: 'center', | 16 | textAlign: 'center', |
11 | width: '100%', | 17 | width: '100%', |
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} |
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json index 99f450c23..4279ba079 100644 --- a/src/i18n/locales/defaultMessages.json +++ b/src/i18n/locales/defaultMessages.json | |||
@@ -773,7 +773,7 @@ | |||
773 | "defaultMessage": "!!!Choose from our most used services and get back on top of your messaging now.", | 773 | "defaultMessage": "!!!Choose from our most used services and get back on top of your messaging now.", |
774 | "end": { | 774 | "end": { |
775 | "column": 3, | 775 | "column": 3, |
776 | "line": 26 | 776 | "line": 27 |
777 | }, | 777 | }, |
778 | "file": "src/components/auth/SetupAssistant.js", | 778 | "file": "src/components/auth/SetupAssistant.js", |
779 | "id": "setupAssistant.subheadline", | 779 | "id": "setupAssistant.subheadline", |
@@ -786,26 +786,26 @@ | |||
786 | "defaultMessage": "!!!Let's go", | 786 | "defaultMessage": "!!!Let's go", |
787 | "end": { | 787 | "end": { |
788 | "column": 3, | 788 | "column": 3, |
789 | "line": 30 | 789 | "line": 31 |
790 | }, | 790 | }, |
791 | "file": "src/components/auth/SetupAssistant.js", | 791 | "file": "src/components/auth/SetupAssistant.js", |
792 | "id": "setupAssistant.submit.label", | 792 | "id": "setupAssistant.submit.label", |
793 | "start": { | 793 | "start": { |
794 | "column": 21, | 794 | "column": 21, |
795 | "line": 27 | 795 | "line": 28 |
796 | } | 796 | } |
797 | }, | 797 | }, |
798 | { | 798 | { |
799 | "defaultMessage": "!!!Invitations sent successfully", | 799 | "defaultMessage": "!!!Invitations sent successfully", |
800 | "end": { | 800 | "end": { |
801 | "column": 3, | 801 | "column": 3, |
802 | "line": 34 | 802 | "line": 35 |
803 | }, | 803 | }, |
804 | "file": "src/components/auth/SetupAssistant.js", | 804 | "file": "src/components/auth/SetupAssistant.js", |
805 | "id": "invite.successInfo", | 805 | "id": "invite.successInfo", |
806 | "start": { | 806 | "start": { |
807 | "column": 21, | 807 | "column": 21, |
808 | "line": 31 | 808 | "line": 32 |
809 | } | 809 | } |
810 | } | 810 | } |
811 | ], | 811 | ], |
@@ -1074,7 +1074,7 @@ | |||
1074 | "defaultMessage": "!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.", | 1074 | "defaultMessage": "!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.", |
1075 | "end": { | 1075 | "end": { |
1076 | "column": 3, | 1076 | "column": 3, |
1077 | "line": 44 | 1077 | "line": 45 |
1078 | }, | 1078 | }, |
1079 | "file": "src/components/layout/AppLayout.js", | 1079 | "file": "src/components/layout/AppLayout.js", |
1080 | "id": "infobar.authRequestFailed", | 1080 | "id": "infobar.authRequestFailed", |
@@ -1354,39 +1354,39 @@ | |||
1354 | "defaultMessage": "!!!Oh no! Ferdi lost the connection to {name}.", | 1354 | "defaultMessage": "!!!Oh no! Ferdi lost the connection to {name}.", |
1355 | "end": { | 1355 | "end": { |
1356 | "column": 3, | 1356 | "column": 3, |
1357 | "line": 18 | 1357 | "line": 16 |
1358 | }, | 1358 | }, |
1359 | "file": "src/components/services/content/ConnectionLostBanner.js", | 1359 | "file": "src/components/services/content/ConnectionLostBanner.js", |
1360 | "id": "connectionLostBanner.message", | 1360 | "id": "connectionLostBanner.message", |
1361 | "start": { | 1361 | "start": { |
1362 | "column": 8, | 1362 | "column": 8, |
1363 | "line": 15 | 1363 | "line": 13 |
1364 | } | 1364 | } |
1365 | }, | 1365 | }, |
1366 | { | 1366 | { |
1367 | "defaultMessage": "!!!What happened?", | 1367 | "defaultMessage": "!!!What happened?", |
1368 | "end": { | 1368 | "end": { |
1369 | "column": 3, | 1369 | "column": 3, |
1370 | "line": 22 | 1370 | "line": 20 |
1371 | }, | 1371 | }, |
1372 | "file": "src/components/services/content/ConnectionLostBanner.js", | 1372 | "file": "src/components/services/content/ConnectionLostBanner.js", |
1373 | "id": "connectionLostBanner.informationLink", | 1373 | "id": "connectionLostBanner.informationLink", |
1374 | "start": { | 1374 | "start": { |
1375 | "column": 19, | 1375 | "column": 19, |
1376 | "line": 19 | 1376 | "line": 17 |
1377 | } | 1377 | } |
1378 | }, | 1378 | }, |
1379 | { | 1379 | { |
1380 | "defaultMessage": "!!!Reload Service", | 1380 | "defaultMessage": "!!!Reload Service", |
1381 | "end": { | 1381 | "end": { |
1382 | "column": 3, | 1382 | "column": 3, |
1383 | "line": 26 | 1383 | "line": 24 |
1384 | }, | 1384 | }, |
1385 | "file": "src/components/services/content/ConnectionLostBanner.js", | 1385 | "file": "src/components/services/content/ConnectionLostBanner.js", |
1386 | "id": "connectionLostBanner.cta", | 1386 | "id": "connectionLostBanner.cta", |
1387 | "start": { | 1387 | "start": { |
1388 | "column": 7, | 1388 | "column": 7, |
1389 | "line": 23 | 1389 | "line": 21 |
1390 | } | 1390 | } |
1391 | } | 1391 | } |
1392 | ], | 1392 | ], |
@@ -1839,7 +1839,7 @@ | |||
1839 | "defaultMessage": "!!!Do you really want to delete the {serviceName} service?", | 1839 | "defaultMessage": "!!!Do you really want to delete the {serviceName} service?", |
1840 | "end": { | 1840 | "end": { |
1841 | "column": 3, | 1841 | "column": 3, |
1842 | "line": 67 | 1842 | "line": 68 |
1843 | }, | 1843 | }, |
1844 | "file": "src/components/services/tabs/TabItem.js", | 1844 | "file": "src/components/services/tabs/TabItem.js", |
1845 | "id": "tabs.item.confirmDeleteService", | 1845 | "id": "tabs.item.confirmDeleteService", |
@@ -5299,65 +5299,65 @@ | |||
5299 | "defaultMessage": "!!!Home", | 5299 | "defaultMessage": "!!!Home", |
5300 | "end": { | 5300 | "end": { |
5301 | "column": 3, | 5301 | "column": 3, |
5302 | "line": 16 | 5302 | "line": 20 |
5303 | }, | 5303 | }, |
5304 | "file": "src/features/webControls/components/WebControls.js", | 5304 | "file": "src/features/webControls/components/WebControls.js", |
5305 | "id": "webControls.goHome", | 5305 | "id": "webControls.goHome", |
5306 | "start": { | 5306 | "start": { |
5307 | "column": 10, | 5307 | "column": 10, |
5308 | "line": 13 | 5308 | "line": 17 |
5309 | } | 5309 | } |
5310 | }, | 5310 | }, |
5311 | { | 5311 | { |
5312 | "defaultMessage": "!!!Open in Browser", | 5312 | "defaultMessage": "!!!Open in Browser", |
5313 | "end": { | 5313 | "end": { |
5314 | "column": 3, | 5314 | "column": 3, |
5315 | "line": 20 | 5315 | "line": 24 |
5316 | }, | 5316 | }, |
5317 | "file": "src/features/webControls/components/WebControls.js", | 5317 | "file": "src/features/webControls/components/WebControls.js", |
5318 | "id": "webControls.openInBrowser", | 5318 | "id": "webControls.openInBrowser", |
5319 | "start": { | 5319 | "start": { |
5320 | "column": 17, | 5320 | "column": 17, |
5321 | "line": 17 | 5321 | "line": 21 |
5322 | } | 5322 | } |
5323 | }, | 5323 | }, |
5324 | { | 5324 | { |
5325 | "defaultMessage": "!!!Back", | 5325 | "defaultMessage": "!!!Back", |
5326 | "end": { | 5326 | "end": { |
5327 | "column": 3, | 5327 | "column": 3, |
5328 | "line": 24 | 5328 | "line": 28 |
5329 | }, | 5329 | }, |
5330 | "file": "src/features/webControls/components/WebControls.js", | 5330 | "file": "src/features/webControls/components/WebControls.js", |
5331 | "id": "webControls.back", | 5331 | "id": "webControls.back", |
5332 | "start": { | 5332 | "start": { |
5333 | "column": 8, | 5333 | "column": 8, |
5334 | "line": 21 | 5334 | "line": 25 |
5335 | } | 5335 | } |
5336 | }, | 5336 | }, |
5337 | { | 5337 | { |
5338 | "defaultMessage": "!!!Forward", | 5338 | "defaultMessage": "!!!Forward", |
5339 | "end": { | 5339 | "end": { |
5340 | "column": 3, | 5340 | "column": 3, |
5341 | "line": 28 | 5341 | "line": 32 |
5342 | }, | 5342 | }, |
5343 | "file": "src/features/webControls/components/WebControls.js", | 5343 | "file": "src/features/webControls/components/WebControls.js", |
5344 | "id": "webControls.forward", | 5344 | "id": "webControls.forward", |
5345 | "start": { | 5345 | "start": { |
5346 | "column": 11, | 5346 | "column": 11, |
5347 | "line": 25 | 5347 | "line": 29 |
5348 | } | 5348 | } |
5349 | }, | 5349 | }, |
5350 | { | 5350 | { |
5351 | "defaultMessage": "!!!Reload", | 5351 | "defaultMessage": "!!!Reload", |
5352 | "end": { | 5352 | "end": { |
5353 | "column": 3, | 5353 | "column": 3, |
5354 | "line": 32 | 5354 | "line": 36 |
5355 | }, | 5355 | }, |
5356 | "file": "src/features/webControls/components/WebControls.js", | 5356 | "file": "src/features/webControls/components/WebControls.js", |
5357 | "id": "webControls.reload", | 5357 | "id": "webControls.reload", |
5358 | "start": { | 5358 | "start": { |
5359 | "column": 10, | 5359 | "column": 10, |
5360 | "line": 29 | 5360 | "line": 33 |
5361 | } | 5361 | } |
5362 | } | 5362 | } |
5363 | ], | 5363 | ], |
diff --git a/src/i18n/messages/src/components/auth/SetupAssistant.json b/src/i18n/messages/src/components/auth/SetupAssistant.json index 03593cfbc..f950228b7 100644 --- a/src/i18n/messages/src/components/auth/SetupAssistant.json +++ b/src/i18n/messages/src/components/auth/SetupAssistant.json | |||
@@ -21,7 +21,7 @@ | |||
21 | "column": 15 | 21 | "column": 15 |
22 | }, | 22 | }, |
23 | "end": { | 23 | "end": { |
24 | "line": 26, | 24 | "line": 27, |
25 | "column": 3 | 25 | "column": 3 |
26 | } | 26 | } |
27 | }, | 27 | }, |
@@ -30,11 +30,11 @@ | |||
30 | "defaultMessage": "!!!Let's go", | 30 | "defaultMessage": "!!!Let's go", |
31 | "file": "src/components/auth/SetupAssistant.js", | 31 | "file": "src/components/auth/SetupAssistant.js", |
32 | "start": { | 32 | "start": { |
33 | "line": 27, | 33 | "line": 28, |
34 | "column": 21 | 34 | "column": 21 |
35 | }, | 35 | }, |
36 | "end": { | 36 | "end": { |
37 | "line": 30, | 37 | "line": 31, |
38 | "column": 3 | 38 | "column": 3 |
39 | } | 39 | } |
40 | }, | 40 | }, |
@@ -43,11 +43,11 @@ | |||
43 | "defaultMessage": "!!!Invitations sent successfully", | 43 | "defaultMessage": "!!!Invitations sent successfully", |
44 | "file": "src/components/auth/SetupAssistant.js", | 44 | "file": "src/components/auth/SetupAssistant.js", |
45 | "start": { | 45 | "start": { |
46 | "line": 31, | 46 | "line": 32, |
47 | "column": 21 | 47 | "column": 21 |
48 | }, | 48 | }, |
49 | "end": { | 49 | "end": { |
50 | "line": 34, | 50 | "line": 35, |
51 | "column": 3 | 51 | "column": 3 |
52 | } | 52 | } |
53 | } | 53 | } |
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json index d14c30077..e3f5658b2 100644 --- a/src/i18n/messages/src/components/layout/AppLayout.json +++ b/src/i18n/messages/src/components/layout/AppLayout.json | |||
@@ -47,7 +47,7 @@ | |||
47 | "column": 21 | 47 | "column": 21 |
48 | }, | 48 | }, |
49 | "end": { | 49 | "end": { |
50 | "line": 44, | 50 | "line": 45, |
51 | "column": 3 | 51 | "column": 3 |
52 | } | 52 | } |
53 | } | 53 | } |
diff --git a/src/i18n/messages/src/components/services/content/ConnectionLostBanner.json b/src/i18n/messages/src/components/services/content/ConnectionLostBanner.json index bcfb6ab94..6805b4d67 100644 --- a/src/i18n/messages/src/components/services/content/ConnectionLostBanner.json +++ b/src/i18n/messages/src/components/services/content/ConnectionLostBanner.json | |||
@@ -4,11 +4,11 @@ | |||
4 | "defaultMessage": "!!!Oh no! Ferdi lost the connection to {name}.", | 4 | "defaultMessage": "!!!Oh no! Ferdi lost the connection to {name}.", |
5 | "file": "src/components/services/content/ConnectionLostBanner.js", | 5 | "file": "src/components/services/content/ConnectionLostBanner.js", |
6 | "start": { | 6 | "start": { |
7 | "line": 15, | 7 | "line": 13, |
8 | "column": 8 | 8 | "column": 8 |
9 | }, | 9 | }, |
10 | "end": { | 10 | "end": { |
11 | "line": 18, | 11 | "line": 16, |
12 | "column": 3 | 12 | "column": 3 |
13 | } | 13 | } |
14 | }, | 14 | }, |
@@ -17,11 +17,11 @@ | |||
17 | "defaultMessage": "!!!What happened?", | 17 | "defaultMessage": "!!!What happened?", |
18 | "file": "src/components/services/content/ConnectionLostBanner.js", | 18 | "file": "src/components/services/content/ConnectionLostBanner.js", |
19 | "start": { | 19 | "start": { |
20 | "line": 19, | 20 | "line": 17, |
21 | "column": 19 | 21 | "column": 19 |
22 | }, | 22 | }, |
23 | "end": { | 23 | "end": { |
24 | "line": 22, | 24 | "line": 20, |
25 | "column": 3 | 25 | "column": 3 |
26 | } | 26 | } |
27 | }, | 27 | }, |
@@ -30,11 +30,11 @@ | |||
30 | "defaultMessage": "!!!Reload Service", | 30 | "defaultMessage": "!!!Reload Service", |
31 | "file": "src/components/services/content/ConnectionLostBanner.js", | 31 | "file": "src/components/services/content/ConnectionLostBanner.js", |
32 | "start": { | 32 | "start": { |
33 | "line": 23, | 33 | "line": 21, |
34 | "column": 7 | 34 | "column": 7 |
35 | }, | 35 | }, |
36 | "end": { | 36 | "end": { |
37 | "line": 26, | 37 | "line": 24, |
38 | "column": 3 | 38 | "column": 3 |
39 | } | 39 | } |
40 | } | 40 | } |
diff --git a/src/i18n/messages/src/components/services/tabs/TabItem.json b/src/i18n/messages/src/components/services/tabs/TabItem.json index 6d4d5f6fd..60cfde52d 100644 --- a/src/i18n/messages/src/components/services/tabs/TabItem.json +++ b/src/i18n/messages/src/components/services/tabs/TabItem.json | |||
@@ -151,7 +151,7 @@ | |||
151 | "column": 24 | 151 | "column": 24 |
152 | }, | 152 | }, |
153 | "end": { | 153 | "end": { |
154 | "line": 67, | 154 | "line": 68, |
155 | "column": 3 | 155 | "column": 3 |
156 | } | 156 | } |
157 | } | 157 | } |
diff --git a/src/i18n/messages/src/features/webControls/components/WebControls.json b/src/i18n/messages/src/features/webControls/components/WebControls.json index 969437e98..7676ec0b1 100644 --- a/src/i18n/messages/src/features/webControls/components/WebControls.json +++ b/src/i18n/messages/src/features/webControls/components/WebControls.json | |||
@@ -4,11 +4,11 @@ | |||
4 | "defaultMessage": "!!!Home", | 4 | "defaultMessage": "!!!Home", |
5 | "file": "src/features/webControls/components/WebControls.js", | 5 | "file": "src/features/webControls/components/WebControls.js", |
6 | "start": { | 6 | "start": { |
7 | "line": 13, | 7 | "line": 17, |
8 | "column": 10 | 8 | "column": 10 |
9 | }, | 9 | }, |
10 | "end": { | 10 | "end": { |
11 | "line": 16, | 11 | "line": 20, |
12 | "column": 3 | 12 | "column": 3 |
13 | } | 13 | } |
14 | }, | 14 | }, |
@@ -17,11 +17,11 @@ | |||
17 | "defaultMessage": "!!!Open in Browser", | 17 | "defaultMessage": "!!!Open in Browser", |
18 | "file": "src/features/webControls/components/WebControls.js", | 18 | "file": "src/features/webControls/components/WebControls.js", |
19 | "start": { | 19 | "start": { |
20 | "line": 17, | 20 | "line": 21, |
21 | "column": 17 | 21 | "column": 17 |
22 | }, | 22 | }, |
23 | "end": { | 23 | "end": { |
24 | "line": 20, | 24 | "line": 24, |
25 | "column": 3 | 25 | "column": 3 |
26 | } | 26 | } |
27 | }, | 27 | }, |
@@ -30,11 +30,11 @@ | |||
30 | "defaultMessage": "!!!Back", | 30 | "defaultMessage": "!!!Back", |
31 | "file": "src/features/webControls/components/WebControls.js", | 31 | "file": "src/features/webControls/components/WebControls.js", |
32 | "start": { | 32 | "start": { |
33 | "line": 21, | 33 | "line": 25, |
34 | "column": 8 | 34 | "column": 8 |
35 | }, | 35 | }, |
36 | "end": { | 36 | "end": { |
37 | "line": 24, | 37 | "line": 28, |
38 | "column": 3 | 38 | "column": 3 |
39 | } | 39 | } |
40 | }, | 40 | }, |
@@ -43,11 +43,11 @@ | |||
43 | "defaultMessage": "!!!Forward", | 43 | "defaultMessage": "!!!Forward", |
44 | "file": "src/features/webControls/components/WebControls.js", | 44 | "file": "src/features/webControls/components/WebControls.js", |
45 | "start": { | 45 | "start": { |
46 | "line": 25, | 46 | "line": 29, |
47 | "column": 11 | 47 | "column": 11 |
48 | }, | 48 | }, |
49 | "end": { | 49 | "end": { |
50 | "line": 28, | 50 | "line": 32, |
51 | "column": 3 | 51 | "column": 3 |
52 | } | 52 | } |
53 | }, | 53 | }, |
@@ -56,11 +56,11 @@ | |||
56 | "defaultMessage": "!!!Reload", | 56 | "defaultMessage": "!!!Reload", |
57 | "file": "src/features/webControls/components/WebControls.js", | 57 | "file": "src/features/webControls/components/WebControls.js", |
58 | "start": { | 58 | "start": { |
59 | "line": 29, | 59 | "line": 33, |
60 | "column": 10 | 60 | "column": 10 |
61 | }, | 61 | }, |
62 | "end": { | 62 | "end": { |
63 | "line": 32, | 63 | "line": 36, |
64 | "column": 3 | 64 | "column": 3 |
65 | } | 65 | } |
66 | } | 66 | } |
diff --git a/src/index.html b/src/index.html index 6b67cc248..929aec3ad 100644 --- a/src/index.html +++ b/src/index.html | |||
@@ -1,60 +1,84 @@ | |||
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <html lang="en"> | 2 | <html lang="en"> |
3 | <head> | 3 | <head> |
4 | <title>Ferdi</title> | 4 | <title>Ferdi</title> |
5 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | 5 | <meta charset="UTF-8" /> |
6 | <link rel="stylesheet" type="text/css" href="./styles/main.css" /> | 6 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
7 | <script type="text/javascript" src="./app.js"></script> | 7 | <link rel="stylesheet" type="text/css" href="./styles/main.css" /> |
8 | </head> | 8 | <link |
9 | <body> | 9 | rel="stylesheet" |
10 | <div class="window-draggable"></div> | 10 | type="text/css" |
11 | <div class="dev-warning">DEV MODE</div> | 11 | href="./styles/animations.css" |
12 | <div id="root"></div> | 12 | media="(prefers-reduced-motion: no-preference)" |
13 | <div id="portalContainer"></div> | 13 | /> |
14 | <script> | 14 | <script type="text/javascript" src="./app.js"></script> |
15 | document.querySelector('body').classList.add(process.env.OS_PLATFORM ? process.env.OS_PLATFORM : process.platform); | 15 | </head> |
16 | <body> | ||
17 | <div class="window-draggable"></div> | ||
18 | <div class="dev-warning">DEV MODE</div> | ||
19 | <div id="root"></div> | ||
20 | <div id="portalContainer"></div> | ||
21 | <script> | ||
22 | document | ||
23 | .querySelector('body') | ||
24 | .classList.add( | ||
25 | process.env.OS_PLATFORM ? process.env.OS_PLATFORM : process.platform, | ||
26 | ); | ||
16 | 27 | ||
17 | require('./sentry') | 28 | require('./sentry'); |
18 | const { isDevMode } = require('./environment'); | 29 | const { isDevMode } = require('./environment'); |
19 | if (isDevMode) { | 30 | if (isDevMode) { |
20 | const debugging = require('debug'); | 31 | const debugging = require('debug'); |
21 | debugging.enable(process.env.DEBUG); | 32 | debugging.enable(process.env.DEBUG); |
22 | 33 | ||
23 | const debug = debugging('Index'); | 34 | const debug = debugging('Index'); |
24 | 35 | ||
25 | document.querySelector('body').classList.add('isDevMode'); | 36 | document.querySelector('body').classList.add('isDevMode'); |
26 | 37 | ||
27 | (function() { | 38 | (function () { |
28 | const lrHost = 'http://localhost:35729'; | 39 | const lrHost = 'http://localhost:35729'; |
29 | const s = document.createElement('script'); | 40 | const s = document.createElement('script'); |
30 | s.async = true; | 41 | s.async = true; |
31 | s.setAttribute('src', lrHost + '/livereload.js'); | 42 | s.setAttribute('src', lrHost + '/livereload.js'); |
32 | document.body.appendChild(s); | 43 | document.body.appendChild(s); |
33 | 44 | ||
34 | s.onload = () => { | 45 | s.onload = () => { |
35 | debug('livereload loaded'); | 46 | debug('livereload loaded'); |
36 | const originalReloadBehaviour = window._onLiveReloadFileChanged; | 47 | const originalReloadBehaviour = window._onLiveReloadFileChanged; |
37 | 48 | ||
38 | window._onLiveReloadFileChanged = (file) => { | 49 | window._onLiveReloadFileChanged = file => { |
39 | const isTodoPreloadPath = file.path.includes('/build/features/todos/preload.js'); | 50 | const isTodoPreloadPath = file.path.includes( |
40 | if (!file.path.includes('/build/webview/') && !file.path.includes('/build/index.js') && !file.path.includes('/build/electron/') && !isTodoPreloadPath) { | 51 | '/build/features/todos/preload.js', |
41 | originalReloadBehaviour(file); | 52 | ); |
42 | } else { | 53 | if ( |
43 | if (isTodoPreloadPath) { | 54 | !file.path.includes('/build/webview/') && |
44 | debug('Livereload: Reloading all webviews'); | 55 | !file.path.includes('/build/index.js') && |
45 | const webview = document.querySelector('webview[partition="persist:todos"]'); | 56 | !file.path.includes('/build/electron/') && |
46 | if (webview) webview.reload(); | 57 | !isTodoPreloadPath |
47 | } else if (file.path.includes('/build/webview/')) { | 58 | ) { |
48 | debug('Livereload: Reloading all webviews'); | 59 | originalReloadBehaviour(file); |
49 | const webviews = document.querySelectorAll('webview').forEach(webview => webview.reload()); | ||
50 | } else { | 60 | } else { |
51 | debug('Livereload: skip reload as only main process files have changed'); | 61 | if (isTodoPreloadPath) { |
62 | debug('Livereload: Reloading all webviews'); | ||
63 | const webview = document.querySelector( | ||
64 | 'webview[partition="persist:todos"]', | ||
65 | ); | ||
66 | if (webview) webview.reload(); | ||
67 | } else if (file.path.includes('/build/webview/')) { | ||
68 | debug('Livereload: Reloading all webviews'); | ||
69 | const webviews = document | ||
70 | .querySelectorAll('webview') | ||
71 | .forEach(webview => webview.reload()); | ||
72 | } else { | ||
73 | debug( | ||
74 | 'Livereload: skip reload as only main process files have changed', | ||
75 | ); | ||
76 | } | ||
52 | } | 77 | } |
53 | } | 78 | }; |
54 | } | 79 | }; |
55 | } | 80 | })(); |
56 | })(); | 81 | } |
57 | } | 82 | </script> |
58 | </script> | 83 | </body> |
59 | </body> | ||
60 | </html> | 84 | </html> |
diff --git a/src/internal-server/public/css/main.css b/src/internal-server/public/css/main.css index a1c5653d7..b20b67922 100644 --- a/src/internal-server/public/css/main.css +++ b/src/internal-server/public/css/main.css | |||
@@ -4,7 +4,8 @@ input { | |||
4 | padding: 0.5rem; | 4 | padding: 0.5rem; |
5 | } | 5 | } |
6 | 6 | ||
7 | button, .button { | 7 | button, |
8 | .button { | ||
8 | display: flex; | 9 | display: flex; |
9 | overflow: hidden; | 10 | overflow: hidden; |
10 | padding: 12px 12px; | 11 | padding: 12px 12px; |
@@ -14,7 +15,9 @@ button, .button { | |||
14 | -moz-user-select: none; | 15 | -moz-user-select: none; |
15 | -ms-user-select: none; | 16 | -ms-user-select: none; |
16 | user-select: none; | 17 | user-select: none; |
17 | transition: all 150ms linear; | 18 | @media (prefers-reduced-motion: no-preference) { |
19 | transition: all 150ms linear; | ||
20 | } | ||
18 | text-align: center; | 21 | text-align: center; |
19 | white-space: nowrap; | 22 | white-space: nowrap; |
20 | text-decoration: none !important; | 23 | text-decoration: none !important; |
@@ -33,7 +36,7 @@ button, .button { | |||
33 | align-items: center; | 36 | align-items: center; |
34 | flex: 0 0 160px; | 37 | flex: 0 0 160px; |
35 | box-shadow: 2px 5px 10px #e4e4e4; | 38 | box-shadow: 2px 5px 10px #e4e4e4; |
36 | color: #FFFFFF; | 39 | color: #ffffff; |
37 | background: #161616; | 40 | background: #161616; |
38 | } | 41 | } |
39 | 42 | ||
@@ -66,4 +69,4 @@ button, .button { | |||
66 | 69 | ||
67 | td { | 70 | td { |
68 | word-break: break-all; | 71 | word-break: break-all; |
69 | } \ No newline at end of file | 72 | } |
diff --git a/src/styles/button.scss b/src/styles/button.scss index d18b683d5..86b3501f0 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss | |||
@@ -4,29 +4,45 @@ | |||
4 | background: $theme-brand-primary; | 4 | background: $theme-brand-primary; |
5 | color: $dark-theme-text-color; | 5 | color: $dark-theme-text-color; |
6 | 6 | ||
7 | &:hover { background: darken($theme-brand-primary, 5%); } | 7 | &:hover { |
8 | &:active { background: lighten($theme-brand-primary, 5%); } | 8 | background: darken($theme-brand-primary, 5%); |
9 | } | ||
10 | &:active { | ||
11 | background: lighten($theme-brand-primary, 5%); | ||
12 | } | ||
9 | 13 | ||
10 | &.franz-form__button--secondary { | 14 | &.franz-form__button--secondary { |
11 | background: $dark-theme-gray-dark; | 15 | background: $dark-theme-gray-dark; |
12 | color: $dark-theme-text-color; | 16 | color: $dark-theme-text-color; |
13 | 17 | ||
14 | &:hover { background: lighten($dark-theme-gray-dark, 10%); } | 18 | &:hover { |
15 | &:active { background: lighten($dark-theme-gray-dark, 20%); } | 19 | background: lighten($dark-theme-gray-dark, 10%); |
20 | } | ||
21 | &:active { | ||
22 | background: lighten($dark-theme-gray-dark, 20%); | ||
23 | } | ||
16 | } | 24 | } |
17 | 25 | ||
18 | &.franz-form__button--danger { | 26 | &.franz-form__button--danger { |
19 | background: $theme-brand-danger; | 27 | background: $theme-brand-danger; |
20 | 28 | ||
21 | &:hover { background: darken($theme-brand-danger, 5%); } | 29 | &:hover { |
22 | &:active { background: lighten($theme-brand-danger, 5%); } | 30 | background: darken($theme-brand-danger, 5%); |
31 | } | ||
32 | &:active { | ||
33 | background: lighten($theme-brand-danger, 5%); | ||
34 | } | ||
23 | } | 35 | } |
24 | 36 | ||
25 | &.franz-form__button--warning { | 37 | &.franz-form__button--warning { |
26 | background: $theme-brand-warning; | 38 | background: $theme-brand-warning; |
27 | 39 | ||
28 | &:hover { background: darken($theme-brand-warning, 5%); } | 40 | &:hover { |
29 | &:active { background: lighten($theme-brand-warning, 5%); } | 41 | background: darken($theme-brand-warning, 5%); |
42 | } | ||
43 | &:active { | ||
44 | background: lighten($theme-brand-warning, 5%); | ||
45 | } | ||
30 | } | 46 | } |
31 | 47 | ||
32 | &.franz-form__button--inverted { | 48 | &.franz-form__button--inverted { |
@@ -39,27 +55,35 @@ | |||
39 | } | 55 | } |
40 | } | 56 | } |
41 | 57 | ||
42 | &:disabled { opacity: .5; } | 58 | &:disabled { |
59 | opacity: 0.5; | ||
60 | } | ||
43 | } | 61 | } |
44 | 62 | ||
45 | .franz-form__button { | 63 | .franz-form__button { |
46 | background: $theme-brand-primary; | 64 | background: $theme-brand-primary; |
47 | border-radius: 3px; | 65 | border-radius: 3px; |
48 | display: block; | 66 | display: block; |
49 | color: #FFF; | 67 | color: #fff; |
50 | padding: 10px 20px; | 68 | padding: 10px 20px; |
51 | position: relative; | 69 | position: relative; |
52 | transition: background .5s; | 70 | @media (prefers-reduced-motion: no-preference) { |
71 | transition: background 0.5s; | ||
72 | } | ||
53 | text-align: center; | 73 | text-align: center; |
54 | 74 | ||
55 | &:hover { background: darken($theme-brand-primary, 5%) } | 75 | &:hover { |
76 | background: darken($theme-brand-primary, 5%); | ||
77 | } | ||
56 | 78 | ||
57 | &:active { | 79 | &:active { |
58 | background: lighten($theme-brand-primary, 5%); | 80 | background: lighten($theme-brand-primary, 5%); |
59 | transition: none; | 81 | transition: none; |
60 | } | 82 | } |
61 | 83 | ||
62 | &:disabled { opacity: .2; } | 84 | &:disabled { |
85 | opacity: 0.2; | ||
86 | } | ||
63 | 87 | ||
64 | &.franz-form__button--large { | 88 | &.franz-form__button--large { |
65 | width: 100%; | 89 | width: 100%; |
@@ -70,22 +94,34 @@ | |||
70 | background: $theme-gray-lighter; | 94 | background: $theme-gray-lighter; |
71 | color: $theme-gray; | 95 | color: $theme-gray; |
72 | 96 | ||
73 | &:hover { background: darken($theme-gray-lighter, 5%); } | 97 | &:hover { |
74 | &:active { background: lighten($theme-gray-lighter, 5%); } | 98 | background: darken($theme-gray-lighter, 5%); |
99 | } | ||
100 | &:active { | ||
101 | background: lighten($theme-gray-lighter, 5%); | ||
102 | } | ||
75 | } | 103 | } |
76 | 104 | ||
77 | &.franz-form__button--danger { | 105 | &.franz-form__button--danger { |
78 | background: $theme-brand-danger; | 106 | background: $theme-brand-danger; |
79 | 107 | ||
80 | &:hover { background: darken($theme-brand-danger, 5%); } | 108 | &:hover { |
81 | &:active { background: lighten($theme-brand-danger, 5%); } | 109 | background: darken($theme-brand-danger, 5%); |
110 | } | ||
111 | &:active { | ||
112 | background: lighten($theme-brand-danger, 5%); | ||
113 | } | ||
82 | } | 114 | } |
83 | 115 | ||
84 | &.franz-form__button--warning { | 116 | &.franz-form__button--warning { |
85 | background: $theme-brand-warning; | 117 | background: $theme-brand-warning; |
86 | 118 | ||
87 | &:hover { background: darken($theme-brand-warning, 5%); } | 119 | &:hover { |
88 | &:active { background: lighten($theme-brand-warning, 5%); } | 120 | background: darken($theme-brand-warning, 5%); |
121 | } | ||
122 | &:active { | ||
123 | background: lighten($theme-brand-warning, 5%); | ||
124 | } | ||
89 | } | 125 | } |
90 | 126 | ||
91 | &.franz-form__button--inverted { | 127 | &.franz-form__button--inverted { |
@@ -93,11 +129,12 @@ | |||
93 | border: 2px solid $theme-brand-primary; | 129 | border: 2px solid $theme-brand-primary; |
94 | color: $theme-brand-primary; | 130 | color: $theme-brand-primary; |
95 | padding: 10px 20px; | 131 | padding: 10px 20px; |
96 | transition: background .5s, color .5s; | 132 | @media (prefers-reduced-motion: no-preference) { |
97 | 133 | transition: background 0.5s, color 0.5s; | |
134 | } | ||
98 | &:hover { | 135 | &:hover { |
99 | background: darken($theme-brand-primary, 5%); | 136 | background: darken($theme-brand-primary, 5%); |
100 | color: #FFF; | 137 | color: #fff; |
101 | } | 138 | } |
102 | } | 139 | } |
103 | 140 | ||
@@ -122,20 +159,20 @@ | |||
122 | z-index: 9998; | 159 | z-index: 9998; |
123 | list-style: none; | 160 | list-style: none; |
124 | background: $theme-brand-primary; | 161 | background: $theme-brand-primary; |
125 | 162 | ||
126 | position: absolute; | 163 | position: absolute; |
127 | bottom: 20px; | 164 | bottom: 20px; |
128 | right: 20px; | 165 | right: 20px; |
129 | 166 | ||
130 | cursor: pointer; | 167 | cursor: pointer; |
131 | 168 | ||
132 | display: flex; | 169 | display: flex; |
133 | justify-content: center; | 170 | justify-content: center; |
134 | align-items: center; | 171 | align-items: center; |
135 | 172 | ||
136 | a { | 173 | a { |
137 | font-size: 30px; | 174 | font-size: 30px; |
138 | color: #FFFFFF; | 175 | color: #ffffff; |
139 | cursor: pointer; | 176 | cursor: pointer; |
140 | } | 177 | } |
141 | } | 178 | } |
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss index 03befedcb..41bd2c251 100644 --- a/src/styles/content-tabs.scss +++ b/src/styles/content-tabs.scss | |||
@@ -9,7 +9,7 @@ | |||
9 | .content-tabs__tabs { | 9 | .content-tabs__tabs { |
10 | .content-tabs__item { | 10 | .content-tabs__item { |
11 | background: $dark-theme-gray; | 11 | background: $dark-theme-gray; |
12 | color: #FFF; | 12 | color: #fff; |
13 | border: 0; | 13 | border: 0; |
14 | } | 14 | } |
15 | } | 15 | } |
@@ -24,19 +24,26 @@ | |||
24 | overflow: hidden; | 24 | overflow: hidden; |
25 | 25 | ||
26 | .content-tabs__item { | 26 | .content-tabs__item { |
27 | background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%)); | 27 | background: linear-gradient( |
28 | $theme-gray-lightest 80%, | ||
29 | darken($theme-gray-lightest, 3%) | ||
30 | ); | ||
28 | border-right: 1px solid $theme-gray-lighter; | 31 | border-right: 1px solid $theme-gray-lighter; |
29 | color: $theme-gray-dark; | 32 | color: $theme-gray-dark; |
30 | flex: 1; | 33 | flex: 1; |
31 | padding: 10px; | 34 | padding: 10px; |
32 | transition: background $theme-transition-time; | 35 | @media (prefers-reduced-motion: no-preference) { |
36 | transition: background $theme-transition-time; | ||
37 | } | ||
33 | 38 | ||
34 | &:last-of-type { border-right: 0; } | 39 | &:last-of-type { |
40 | border-right: 0; | ||
41 | } | ||
35 | 42 | ||
36 | &.is-active { | 43 | &.is-active { |
37 | background: $theme-brand-primary; | 44 | background: $theme-brand-primary; |
38 | box-shadow: none; | 45 | box-shadow: none; |
39 | color: #FFF; | 46 | color: #fff; |
40 | } | 47 | } |
41 | } | 48 | } |
42 | } | 49 | } |
@@ -51,10 +58,16 @@ | |||
51 | display: none; | 58 | display: none; |
52 | top: 0; | 59 | top: 0; |
53 | 60 | ||
54 | &.is-active { display: block; } | 61 | &.is-active { |
62 | display: block; | ||
63 | } | ||
55 | } | 64 | } |
56 | 65 | ||
57 | .franz-form__input-wrapper { background: #FFF; } | 66 | .franz-form__input-wrapper { |
58 | .franz-form__field:last-of-type { margin-bottom: 0; } | 67 | background: #fff; |
68 | } | ||
69 | .franz-form__field:last-of-type { | ||
70 | margin-bottom: 0; | ||
71 | } | ||
59 | } | 72 | } |
60 | } | 73 | } |
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss index 432332b49..1b2c99945 100644 --- a/src/styles/fonts.scss +++ b/src/styles/fonts.scss | |||
@@ -5,6 +5,7 @@ | |||
5 | src: url('../assets/fonts/OpenSans-Light.ttf'); | 5 | src: url('../assets/fonts/OpenSans-Light.ttf'); |
6 | font-weight: 300; | 6 | font-weight: 300; |
7 | font-style: normal; | 7 | font-style: normal; |
8 | display: swap; | ||
8 | } | 9 | } |
9 | 10 | ||
10 | @font-face { | 11 | @font-face { |
@@ -12,6 +13,7 @@ | |||
12 | src: url('../assets/fonts/OpenSans-Regular.ttf'); | 13 | src: url('../assets/fonts/OpenSans-Regular.ttf'); |
13 | font-weight: normal; | 14 | font-weight: normal; |
14 | font-style: normal; | 15 | font-style: normal; |
16 | display: swap; | ||
15 | } | 17 | } |
16 | 18 | ||
17 | @font-face { | 19 | @font-face { |
@@ -19,6 +21,7 @@ | |||
19 | src: url('../assets/fonts/OpenSans-Bold.ttf'); | 21 | src: url('../assets/fonts/OpenSans-Bold.ttf'); |
20 | font-weight: bold; | 22 | font-weight: bold; |
21 | font-style: normal; | 23 | font-style: normal; |
24 | display: swap; | ||
22 | } | 25 | } |
23 | 26 | ||
24 | @font-face { | 27 | @font-face { |
@@ -26,6 +29,7 @@ | |||
26 | src: url('../assets/fonts/OpenSans-BoldItalic.ttf'); | 29 | src: url('../assets/fonts/OpenSans-BoldItalic.ttf'); |
27 | font-weight: bold; | 30 | font-weight: bold; |
28 | font-style: italic; | 31 | font-style: italic; |
32 | display: swap; | ||
29 | } | 33 | } |
30 | 34 | ||
31 | @font-face { | 35 | @font-face { |
@@ -33,6 +37,7 @@ | |||
33 | src: url('../assets/fonts/OpenSans-ExtraBold.ttf'); | 37 | src: url('../assets/fonts/OpenSans-ExtraBold.ttf'); |
34 | font-weight: 800; | 38 | font-weight: 800; |
35 | font-style: normal; | 39 | font-style: normal; |
40 | display: swap; | ||
36 | } | 41 | } |
37 | 42 | ||
38 | @font-face { | 43 | @font-face { |
@@ -40,4 +45,5 @@ | |||
40 | src: url('../assets/fonts/OpenSans-ExtraBoldItalic.ttf'); | 45 | src: url('../assets/fonts/OpenSans-ExtraBoldItalic.ttf'); |
41 | font-weight: 800; | 46 | font-weight: 800; |
42 | font-style: italic; | 47 | font-style: italic; |
48 | display: swap; | ||
43 | } | 49 | } |
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss index 31300c227..b5f6d5cd4 100644 --- a/src/styles/image-upload.scss +++ b/src/styles/image-upload.scss | |||
@@ -5,17 +5,23 @@ | |||
5 | color: $dark-theme-gray-lighter; | 5 | color: $dark-theme-gray-lighter; |
6 | 6 | ||
7 | &__action { | 7 | &__action { |
8 | &-background { background: rgba($dark-theme-black, .7); } | 8 | &-background { |
9 | background: rgba($dark-theme-black, 0.7); | ||
10 | } | ||
9 | 11 | ||
10 | button { | 12 | button { |
11 | color: $dark-theme-gray-lightest; | 13 | color: $dark-theme-gray-lightest; |
12 | 14 | ||
13 | .mdi { color: $dark-theme-gray-lightest; } | 15 | .mdi { |
16 | color: $dark-theme-gray-lightest; | ||
17 | } | ||
14 | } | 18 | } |
15 | } | 19 | } |
16 | } | 20 | } |
17 | 21 | ||
18 | .image-upload-wrapper .mdi { color: $dark-theme-gray-light; } | 22 | .image-upload-wrapper .mdi { |
23 | color: $dark-theme-gray-light; | ||
24 | } | ||
19 | } | 25 | } |
20 | 26 | ||
21 | .image-upload { | 27 | .image-upload { |
@@ -49,11 +55,13 @@ | |||
49 | justify-content: center; | 55 | justify-content: center; |
50 | opacity: 0; | 56 | opacity: 0; |
51 | position: relative; | 57 | position: relative; |
52 | transition: opacity .5s; | 58 | @media (prefers-reduced-motion: no-preference) { |
59 | transition: opacity 0.5s; | ||
60 | } | ||
53 | z-index: 10; | 61 | z-index: 10; |
54 | 62 | ||
55 | &-background { | 63 | &-background { |
56 | background: rgba($theme-gray, .7); | 64 | background: rgba($theme-gray, 0.7); |
57 | bottom: 0; | 65 | bottom: 0; |
58 | left: 0; | 66 | left: 0; |
59 | position: absolute; | 67 | position: absolute; |
@@ -63,11 +71,13 @@ | |||
63 | } | 71 | } |
64 | 72 | ||
65 | button { | 73 | button { |
66 | color: #FFF; | 74 | color: #fff; |
67 | position: relative; | 75 | position: relative; |
68 | z-index: 100; | 76 | z-index: 100; |
69 | 77 | ||
70 | .mdi { color: #FFF; } | 78 | .mdi { |
79 | color: #fff; | ||
80 | } | ||
71 | } | 81 | } |
72 | } | 82 | } |
73 | 83 | ||
@@ -83,7 +93,9 @@ | |||
83 | 93 | ||
84 | &__dropzone, | 94 | &__dropzone, |
85 | button { | 95 | button { |
86 | .mdi { margin-bottom: 5px; } | 96 | .mdi { |
97 | margin-bottom: 5px; | ||
98 | } | ||
87 | 99 | ||
88 | p { | 100 | p { |
89 | font-size: 10px; | 101 | font-size: 10px; |
@@ -91,7 +103,9 @@ | |||
91 | } | 103 | } |
92 | } | 104 | } |
93 | 105 | ||
94 | &:hover .image-upload__action { opacity: 1; } | 106 | &:hover .image-upload__action { |
107 | opacity: 1; | ||
108 | } | ||
95 | } | 109 | } |
96 | 110 | ||
97 | .image-upload-wrapper .mdi { | 111 | .image-upload-wrapper .mdi { |
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index acbd65ad1..49e041022 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -1,6 +1,8 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | html { overflow: hidden; } | 3 | html { |
4 | overflow: hidden; | ||
5 | } | ||
4 | 6 | ||
5 | @keyframes pulse-danger { | 7 | @keyframes pulse-danger { |
6 | 0% { | 8 | 0% { |
@@ -21,7 +23,7 @@ html { overflow: hidden; } | |||
21 | 23 | ||
22 | &::after { | 24 | &::after { |
23 | box-shadow: inset 0 0 5px 0 $dark-theme-black, | 25 | box-shadow: inset 0 0 5px 0 $dark-theme-black, |
24 | inset 0 0 2px 0 rgba(0, 0, 0, 0.4); | 26 | inset 0 0 2px 0 rgba(0, 0, 0, 0.4); |
25 | } | 27 | } |
26 | 28 | ||
27 | .sidebar__add-service { | 29 | .sidebar__add-service { |
@@ -48,12 +50,12 @@ html { overflow: hidden; } | |||
48 | filter: grayscale(1); | 50 | filter: grayscale(1); |
49 | } | 51 | } |
50 | 52 | ||
51 | .update-available { | 53 | .update-available { |
52 | align-items: center; | 54 | align-items: center; |
53 | background: $theme-brand-danger; | 55 | background: $theme-brand-danger; |
54 | border-radius: 20px; | 56 | border-radius: 20px; |
55 | bottom: 5px; | 57 | bottom: 5px; |
56 | color: #FFF; | 58 | color: #fff; |
57 | display: flex; | 59 | display: flex; |
58 | justify-content: center; | 60 | justify-content: center; |
59 | padding: 0px 5px; | 61 | padding: 0px 5px; |
@@ -71,7 +73,9 @@ html { overflow: hidden; } | |||
71 | } | 73 | } |
72 | } | 74 | } |
73 | 75 | ||
74 | .app-loader .app-loader__title { color: $dark-theme-gray-lightest; } | 76 | .app-loader .app-loader__title { |
77 | color: $dark-theme-gray-lightest; | ||
78 | } | ||
75 | } | 79 | } |
76 | 80 | ||
77 | body.win32:not(.isFullScreen) .app .app__content { | 81 | body.win32:not(.isFullScreen) .app .app__content { |
@@ -96,7 +100,9 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
96 | } | 100 | } |
97 | } | 101 | } |
98 | 102 | ||
99 | .electron-app-title-bar { z-index: 99999999; } | 103 | .electron-app-title-bar { |
104 | z-index: 99999999; | ||
105 | } | ||
100 | 106 | ||
101 | .window-draggable { | 107 | .window-draggable { |
102 | height: 22px; | 108 | height: 22px; |
@@ -109,7 +115,9 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
109 | -webkit-app-region: drag; | 115 | -webkit-app-region: drag; |
110 | } | 116 | } |
111 | 117 | ||
112 | .darwin .sidebar { padding-top: 23px; } | 118 | .darwin .sidebar { |
119 | padding-top: 23px; | ||
120 | } | ||
113 | 121 | ||
114 | .sidebar { | 122 | .sidebar { |
115 | position: relative; | 123 | position: relative; |
@@ -133,8 +141,8 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
133 | z-index: 1000; | 141 | z-index: 1000; |
134 | pointer-events: none; | 142 | pointer-events: none; |
135 | clip-path: inset(10px 0 10px 10px); | 143 | clip-path: inset(10px 0 10px 10px); |
136 | box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, .12), | 144 | box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.12), |
137 | inset 0 0 2px 0 rgba(0, 0, 0, 0.24); | 145 | inset 0 0 2px 0 rgba(0, 0, 0, 0.24); |
138 | } | 146 | } |
139 | 147 | ||
140 | .sidebar__add-service { | 148 | .sidebar__add-service { |
@@ -154,16 +162,25 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
154 | width: $theme-sidebar-width; | 162 | width: $theme-sidebar-width; |
155 | 163 | ||
156 | &:hover, | 164 | &:hover, |
157 | &:active { color: lighten($theme-gray-light, 10%); } | 165 | &:active { |
158 | &.is-muted, &.is-active { color: $theme-brand-primary; } | 166 | color: lighten($theme-gray-light, 10%); |
159 | &--new-service { padding-bottom: 6px; } | 167 | } |
168 | &.is-muted, | ||
169 | &.is-active { | ||
170 | color: $theme-brand-primary; | ||
171 | } | ||
172 | &--new-service { | ||
173 | padding-bottom: 6px; | ||
174 | } | ||
160 | } | 175 | } |
161 | 176 | ||
162 | & > div { | 177 | & > div { |
163 | display: flex; | 178 | display: flex; |
164 | overflow-y: scroll; | 179 | overflow-y: scroll; |
165 | 180 | ||
166 | &::-webkit-scrollbar { display: none; } | 181 | &::-webkit-scrollbar { |
182 | display: none; | ||
183 | } | ||
167 | } | 184 | } |
168 | } | 185 | } |
169 | 186 | ||
@@ -171,8 +188,12 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
171 | display: flex; | 188 | display: flex; |
172 | flex-direction: row; | 189 | flex-direction: row; |
173 | 190 | ||
174 | & > * { margin-right: 20px; } | 191 | & > * { |
175 | & :last-child { margin-right: 0; } | 192 | margin-right: 20px; |
193 | } | ||
194 | & :last-child { | ||
195 | margin-right: 0; | ||
196 | } | ||
176 | } | 197 | } |
177 | 198 | ||
178 | .app-loader { | 199 | .app-loader { |
@@ -181,19 +202,23 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
181 | justify-content: center; | 202 | justify-content: center; |
182 | 203 | ||
183 | .app-loader__title { | 204 | .app-loader__title { |
184 | color: #FFF; | 205 | color: #fff; |
185 | font-size: 40px; | 206 | font-size: 40px; |
186 | } | 207 | } |
187 | 208 | ||
188 | & > span { height: auto; } | 209 | & > span { |
210 | height: auto; | ||
211 | } | ||
189 | } | 212 | } |
190 | 213 | ||
191 | .dev-warning { display: none; } | 214 | .dev-warning { |
215 | display: none; | ||
216 | } | ||
192 | 217 | ||
193 | .isDevMode .dev-warning { | 218 | .isDevMode .dev-warning { |
194 | border-radius: 3px; | 219 | border-radius: 3px; |
195 | background: $theme-brand-warning; | 220 | background: $theme-brand-warning; |
196 | color: #FFF; | 221 | color: #fff; |
197 | display: block; | 222 | display: block; |
198 | font-size: 8px; | 223 | font-size: 8px; |
199 | height: auto; | 224 | height: auto; |
@@ -201,12 +226,15 @@ body.win32:not(.isFullScreen) .app .app__content { | |||
201 | position: fixed; | 226 | position: fixed; |
202 | left: 9px; | 227 | left: 9px; |
203 | bottom: 0px; | 228 | bottom: 0px; |
204 | transition: opacity .5s ease; | 229 | @media (prefers-reduced-motion: no-preference) { |
230 | transition: opacity 0.5s ease; | ||
231 | } | ||
205 | width: auto; | 232 | width: auto; |
206 | z-index: 999999999; | 233 | z-index: 999999999; |
207 | pointer-events: none; | 234 | pointer-events: none; |
208 | } | 235 | } |
209 | 236 | ||
210 | a, button { | 237 | a, |
238 | button { | ||
211 | cursor: pointer; | 239 | cursor: pointer; |
212 | } | 240 | } |
diff --git a/src/styles/main.scss b/src/styles/main.scss index 4cc996785..b0815e086 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss | |||
@@ -22,7 +22,6 @@ $mdi-font-path: '../node_modules/@mdi/font/fonts'; | |||
22 | @import './tooltip.scss'; | 22 | @import './tooltip.scss'; |
23 | @import './info-bar.scss'; | 23 | @import './info-bar.scss'; |
24 | @import './status-bar-target-url.scss'; | 24 | @import './status-bar-target-url.scss'; |
25 | @import './animations.scss'; | ||
26 | @import './infobox.scss'; | 25 | @import './infobox.scss'; |
27 | @import './badge.scss'; | 26 | @import './badge.scss'; |
28 | @import './content-tabs.scss'; | 27 | @import './content-tabs.scss'; |
diff --git a/src/styles/radio.scss b/src/styles/radio.scss index b1e148ca0..e8297408d 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss | |||
@@ -11,9 +11,10 @@ | |||
11 | } | 11 | } |
12 | } | 12 | } |
13 | 13 | ||
14 | |||
15 | .franz-form { | 14 | .franz-form { |
16 | .franz-form__radio-wrapper { display: flex; } | 15 | .franz-form__radio-wrapper { |
16 | display: flex; | ||
17 | } | ||
17 | 18 | ||
18 | .franz-form__radio { | 19 | .franz-form__radio { |
19 | border: 2px solid $theme-gray-lighter; | 20 | border: 2px solid $theme-gray-lighter; |
@@ -24,18 +25,24 @@ | |||
24 | margin-right: 20px; | 25 | margin-right: 20px; |
25 | padding: 11px; | 26 | padding: 11px; |
26 | text-align: center; | 27 | text-align: center; |
27 | transition: background $theme-transition-time; | 28 | @media (prefers-reduced-motion: no-preference) { |
29 | transition: background $theme-transition-time; | ||
30 | } | ||
28 | 31 | ||
29 | &:last-of-type { margin-right: 0; } | 32 | &:last-of-type { |
33 | margin-right: 0; | ||
34 | } | ||
30 | 35 | ||
31 | &.is-selected { | 36 | &.is-selected { |
32 | background: #FFF; | 37 | background: #fff; |
33 | border-width: 2px; | 38 | border-width: 2px; |
34 | border-style: solid; | 39 | border-style: solid; |
35 | border-color: $theme-brand-primary; | 40 | border-color: $theme-brand-primary; |
36 | color: $theme-brand-primary; | 41 | color: $theme-brand-primary; |
37 | } | 42 | } |
38 | 43 | ||
39 | input { display: none; } | 44 | input { |
45 | display: none; | ||
46 | } | ||
40 | } | 47 | } |
41 | } | 48 | } |
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss index 5bdc60a57..37c2febf6 100644 --- a/src/styles/recipes.scss +++ b/src/styles/recipes.scss | |||
@@ -4,7 +4,9 @@ | |||
4 | background-color: $dark-theme-gray-dark; | 4 | background-color: $dark-theme-gray-dark; |
5 | color: $dark-theme-text-color; | 5 | color: $dark-theme-text-color; |
6 | 6 | ||
7 | &:hover { background-color: $dark-theme-gray; } | 7 | &:hover { |
8 | background-color: $dark-theme-gray; | ||
9 | } | ||
8 | } | 10 | } |
9 | 11 | ||
10 | .recipes { | 12 | .recipes { |
@@ -17,7 +19,7 @@ | |||
17 | 19 | ||
18 | &.recipes__list--disabled { | 20 | &.recipes__list--disabled { |
19 | filter: grayscale(100%); | 21 | filter: grayscale(100%); |
20 | opacity: .3; | 22 | opacity: 0.3; |
21 | pointer-events: none; | 23 | pointer-events: none; |
22 | } | 24 | } |
23 | } | 25 | } |
@@ -26,16 +28,20 @@ | |||
26 | height: auto; | 28 | height: auto; |
27 | margin-bottom: 35px; | 29 | margin-bottom: 35px; |
28 | 30 | ||
29 | .badge { margin-right: 10px; } | 31 | .badge { |
32 | margin-right: 10px; | ||
33 | } | ||
30 | 34 | ||
31 | &.recipes__navigation--disabled { | 35 | &.recipes__navigation--disabled { |
32 | filter: grayscale(100%); | 36 | filter: grayscale(100%); |
33 | opacity: .3; | 37 | opacity: 0.3; |
34 | pointer-events: none; | 38 | pointer-events: none; |
35 | } | 39 | } |
36 | } | 40 | } |
37 | 41 | ||
38 | &__service-request { float: right; } | 42 | &__service-request { |
43 | float: right; | ||
44 | } | ||
39 | } | 45 | } |
40 | 46 | ||
41 | .recipe-teaser { | 47 | .recipe-teaser { |
@@ -45,24 +51,32 @@ | |||
45 | margin: 0 20px 20px 0; | 51 | margin: 0 20px 20px 0; |
46 | overflow: hidden; | 52 | overflow: hidden; |
47 | position: relative; | 53 | position: relative; |
48 | transition: background $theme-transition-time; | 54 | @media (prefers-reduced-motion: no-preference) { |
55 | transition: background $theme-transition-time; | ||
56 | } | ||
49 | width: calc(25% - 20px); | 57 | width: calc(25% - 20px); |
50 | 58 | ||
51 | &:hover { background-color: $theme-gray-lighter; } | 59 | &:hover { |
60 | background-color: $theme-gray-lighter; | ||
61 | } | ||
52 | 62 | ||
53 | .recipe-teaser__icon { | 63 | .recipe-teaser__icon { |
54 | margin-bottom: 10px; | 64 | margin-bottom: 10px; |
55 | width: 50px; | 65 | width: 50px; |
56 | } | 66 | } |
57 | 67 | ||
58 | .recipe-teaser__label { display: block; } | 68 | .recipe-teaser__label { |
69 | display: block; | ||
70 | } | ||
59 | 71 | ||
60 | h2 { z-index: 10; } | 72 | h2 { |
73 | z-index: 10; | ||
74 | } | ||
61 | 75 | ||
62 | &__dev-badge { | 76 | &__dev-badge { |
63 | background: $theme-brand-warning; | 77 | background: $theme-brand-warning; |
64 | box-shadow: 0 0 4px rgba(black, .2); | 78 | box-shadow: 0 0 4px rgba(black, 0.2); |
65 | color: #FFF; | 79 | color: #fff; |
66 | font-size: 10px; | 80 | font-size: 10px; |
67 | position: absolute; | 81 | position: absolute; |
68 | right: -13px; | 82 | right: -13px; |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 5d4e81a4f..501f97b98 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -1,63 +1,85 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | %headline { | 3 | %headline { |
4 | color: #FFF; | 4 | color: #fff; |
5 | font-size: 20px; | 5 | font-size: 20px; |
6 | font-weight: 400; | 6 | font-weight: 400; |
7 | letter-spacing: -1px; | 7 | letter-spacing: -1px; |
8 | 8 | ||
9 | a { color: #FFF } | 9 | a { |
10 | color: #fff; | ||
11 | } | ||
10 | } | 12 | } |
11 | 13 | ||
12 | %headline__dark { | 14 | %headline__dark { |
13 | color: #FFF; | 15 | color: #fff; |
14 | font-size: 20px; | 16 | font-size: 20px; |
15 | font-weight: 400; | 17 | font-weight: 400; |
16 | letter-spacing: -1px; | 18 | letter-spacing: -1px; |
17 | 19 | ||
18 | a { color: #FFF } | 20 | a { |
21 | color: #fff; | ||
22 | } | ||
19 | } | 23 | } |
20 | 24 | ||
21 | .theme__dark { | 25 | .theme__dark { |
22 | .settings-wrapper { background: rgba($dark-theme-black, .8); } | 26 | .settings-wrapper { |
27 | background: rgba($dark-theme-black, 0.8); | ||
28 | } | ||
23 | 29 | ||
24 | .settings { | 30 | .settings { |
25 | .settings__header { | 31 | .settings__header { |
26 | .mdi { color: #FFF } | 32 | .mdi { |
33 | color: #fff; | ||
34 | } | ||
27 | } | 35 | } |
28 | 36 | ||
29 | .settings__main { | 37 | .settings__main { |
30 | background: $dark-theme-gray-darkest; | 38 | background: $dark-theme-gray-darkest; |
31 | } | 39 | } |
32 | 40 | ||
33 | .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; } | 41 | .settings__body::-webkit-scrollbar-thumb { |
42 | background: $dark-theme-gray; | ||
43 | } | ||
34 | 44 | ||
35 | .settings__close { | 45 | .settings__close { |
36 | color: #FFF; | 46 | color: #fff; |
37 | } | 47 | } |
38 | 48 | ||
39 | &__settings-group h3 { color: $dark-theme-gray-lightest; } | 49 | &__settings-group h3 { |
50 | color: $dark-theme-gray-lightest; | ||
51 | } | ||
40 | 52 | ||
41 | .settings__message { | 53 | .settings__message { |
42 | border-top: 1px solid $theme-gray-lighter; | 54 | border-top: 1px solid $theme-gray-lighter; |
43 | color: $dark-theme-gray-lightest; | 55 | color: $dark-theme-gray-lightest; |
44 | 56 | ||
45 | .mdi { color: $dark-theme-gray-lightest; } | 57 | .mdi { |
58 | color: $dark-theme-gray-lightest; | ||
59 | } | ||
46 | } | 60 | } |
47 | 61 | ||
48 | .settings__help { color: $dark-theme-gray-lightest; } | 62 | .settings__help { |
63 | color: $dark-theme-gray-lightest; | ||
64 | } | ||
49 | 65 | ||
50 | .settings__controls { | 66 | .settings__controls { |
51 | background: $dark-theme-gray-darker; | 67 | background: $dark-theme-gray-darker; |
52 | 68 | ||
53 | .franz-form__button.franz-form__button--secondary { background: $theme-gray-light; } | 69 | .franz-form__button.franz-form__button--secondary { |
70 | background: $theme-gray-light; | ||
71 | } | ||
54 | } | 72 | } |
55 | 73 | ||
56 | .account { | 74 | .account { |
57 | .account__box { background: $dark-theme-gray-darker; } | 75 | .account__box { |
76 | background: $dark-theme-gray-darker; | ||
77 | } | ||
58 | } | 78 | } |
59 | 79 | ||
60 | .legal { color: $theme-gray-light; } | 80 | .legal { |
81 | color: $theme-gray-light; | ||
82 | } | ||
61 | } | 83 | } |
62 | 84 | ||
63 | .settings-navigation { | 85 | .settings-navigation { |
@@ -69,7 +91,7 @@ | |||
69 | border-bottom: 1px solid darken($dark-theme-gray-darker, 3%); | 91 | border-bottom: 1px solid darken($dark-theme-gray-darker, 3%); |
70 | 92 | ||
71 | &:last-child { | 93 | &:last-child { |
72 | border: 0, | 94 | border: 0; |
73 | } | 95 | } |
74 | 96 | ||
75 | .badge { | 97 | .badge { |
@@ -87,7 +109,7 @@ | |||
87 | } | 109 | } |
88 | 110 | ||
89 | &.is-disabled { | 111 | &.is-disabled { |
90 | filter: grayscale(100%) opacity(.2); | 112 | filter: grayscale(100%) opacity(0.2); |
91 | } | 113 | } |
92 | 114 | ||
93 | &.is-active { | 115 | &.is-active { |
@@ -101,13 +123,15 @@ | |||
101 | } | 123 | } |
102 | } | 124 | } |
103 | 125 | ||
104 | .settings-navigation__action-badge { background: $theme-brand-danger; } | 126 | .settings-navigation__action-badge { |
127 | background: $theme-brand-danger; | ||
128 | } | ||
105 | } | 129 | } |
106 | } | 130 | } |
107 | 131 | ||
108 | .settings-wrapper { | 132 | .settings-wrapper { |
109 | align-items: center; | 133 | align-items: center; |
110 | background: rgba(black, .5); | 134 | background: rgba(black, 0.5); |
111 | display: flex; | 135 | display: flex; |
112 | height: 100%; | 136 | height: 100%; |
113 | left: 0; | 137 | left: 0; |
@@ -129,7 +153,7 @@ | |||
129 | 153 | ||
130 | .settings { | 154 | .settings { |
131 | border-radius: $theme-border-radius; | 155 | border-radius: $theme-border-radius; |
132 | box-shadow: 0 20px 50px rgba($dark-theme-black, .5); | 156 | box-shadow: 0 20px 50px rgba($dark-theme-black, 0.5); |
133 | display: flex; | 157 | display: flex; |
134 | height: 100%; | 158 | height: 100%; |
135 | max-height: 720px; | 159 | max-height: 720px; |
@@ -147,7 +171,7 @@ | |||
147 | height: auto; | 171 | height: auto; |
148 | border-radius: 0 $theme-border-radius $theme-border-radius 0; | 172 | border-radius: 0 $theme-border-radius $theme-border-radius 0; |
149 | overflow: hidden; | 173 | overflow: hidden; |
150 | background: #FFF; | 174 | background: #fff; |
151 | } | 175 | } |
152 | 176 | ||
153 | .settings__header { | 177 | .settings__header { |
@@ -157,7 +181,7 @@ | |||
157 | height: 50px; | 181 | height: 50px; |
158 | padding: 0 40px; | 182 | padding: 0 40px; |
159 | width: calc(100% - 60px); | 183 | width: calc(100% - 60px); |
160 | color: #FFF; | 184 | color: #fff; |
161 | 185 | ||
162 | h1 { | 186 | h1 { |
163 | @extend %headline; | 187 | @extend %headline; |
@@ -177,11 +201,13 @@ | |||
177 | transform: skew(15deg) rotate(2deg); | 201 | transform: skew(15deg) rotate(2deg); |
178 | } | 202 | } |
179 | 203 | ||
180 | .mdi { color: $theme-gray-light; } | 204 | .mdi { |
205 | color: $theme-gray-light; | ||
206 | } | ||
181 | } | 207 | } |
182 | 208 | ||
183 | .settings_titles { | 209 | .settings_titles { |
184 | display:inline-block; | 210 | display: inline-block; |
185 | } | 211 | } |
186 | 212 | ||
187 | .settings__body { | 213 | .settings__body { |
@@ -190,9 +216,13 @@ | |||
190 | overflow-y: scroll; | 216 | overflow-y: scroll; |
191 | padding: 25px 15px 15px 25px; | 217 | padding: 25px 15px 15px 25px; |
192 | 218 | ||
193 | .badge { margin-right: 10px; } | 219 | .badge { |
220 | margin-right: 10px; | ||
221 | } | ||
194 | 222 | ||
195 | &::-webkit-scrollbar { width: 8px; } | 223 | &::-webkit-scrollbar { |
224 | width: 8px; | ||
225 | } | ||
196 | 226 | ||
197 | /* Track */ | 227 | /* Track */ |
198 | &::-webkit-scrollbar-track { | 228 | &::-webkit-scrollbar-track { |
@@ -208,9 +238,16 @@ | |||
208 | -webkit-border-radius: 10px; | 238 | -webkit-border-radius: 10px; |
209 | } | 239 | } |
210 | 240 | ||
211 | &::-webkit-scrollbar-thumb:window-inactive { background: none; } | 241 | &::-webkit-scrollbar-thumb:window-inactive { |
212 | .service-flex-grid { display: flex; } | 242 | background: none; |
213 | .service-name,.user-agent { flex: 1px; } | 243 | } |
244 | .service-flex-grid { | ||
245 | display: flex; | ||
246 | } | ||
247 | .service-name, | ||
248 | .user-agent { | ||
249 | flex: 1px; | ||
250 | } | ||
214 | 251 | ||
215 | .service-icon { | 252 | .service-icon { |
216 | float: right; | 253 | float: right; |
@@ -232,20 +269,28 @@ | |||
232 | .settings__close { | 269 | .settings__close { |
233 | background: $theme-brand-primary; | 270 | background: $theme-brand-primary; |
234 | // border-left: 1px solid darken($theme-brand-primary, 8%); | 271 | // border-left: 1px solid darken($theme-brand-primary, 8%); |
235 | color: #FFF; | 272 | color: #fff; |
236 | font-size: 20px; | 273 | font-size: 20px; |
237 | height: 50px; | 274 | height: 50px; |
238 | padding: 0 20px; | 275 | padding: 0 20px; |
239 | position: absolute; | 276 | position: absolute; |
240 | right: 0; | 277 | right: 0; |
241 | transition: background $theme-transition-time; | 278 | @media (prefers-reduced-motion: no-preference) { |
279 | transition: background $theme-transition-time; | ||
280 | } | ||
242 | cursor: pointer; | 281 | cursor: pointer; |
243 | 282 | ||
244 | &::before { cursor: pointer; } | 283 | &::before { |
245 | &:hover { background: darken($theme-brand-primary, 5%); } | 284 | cursor: pointer; |
285 | } | ||
286 | &:hover { | ||
287 | background: darken($theme-brand-primary, 5%); | ||
288 | } | ||
246 | } | 289 | } |
247 | 290 | ||
248 | .search-input { margin-bottom: 30px; } | 291 | .search-input { |
292 | margin-bottom: 30px; | ||
293 | } | ||
249 | 294 | ||
250 | &__options { | 295 | &__options { |
251 | flex: 1; | 296 | flex: 1; |
@@ -258,10 +303,12 @@ | |||
258 | h3 { | 303 | h3 { |
259 | color: $theme-gray-light; | 304 | color: $theme-gray-light; |
260 | font-weight: bold; | 305 | font-weight: bold; |
261 | letter-spacing: -.1px; | 306 | letter-spacing: -0.1px; |
262 | margin: 25px 0 15px; | 307 | margin: 25px 0 15px; |
263 | 308 | ||
264 | &:first-of-type { margin-top: 0; } | 309 | &:first-of-type { |
310 | margin-top: 0; | ||
311 | } | ||
265 | 312 | ||
266 | .badge { | 313 | .badge { |
267 | font-weight: normal; | 314 | font-weight: normal; |
@@ -302,14 +349,20 @@ | |||
302 | padding: 10px 20px; | 349 | padding: 10px 20px; |
303 | 350 | ||
304 | .franz-form__button { | 351 | .franz-form__button { |
305 | &[type='submit'] { margin-left: auto; } | 352 | &[type='submit'] { |
306 | &.franz-form__button--secondary { background: $theme-gray-light; } | 353 | margin-left: auto; |
354 | } | ||
355 | &.franz-form__button--secondary { | ||
356 | background: $theme-gray-light; | ||
357 | } | ||
307 | } | 358 | } |
308 | } | 359 | } |
309 | 360 | ||
310 | .settings__delete-button { right: 0; } | 361 | .settings__delete-button { |
362 | right: 0; | ||
363 | } | ||
311 | .settings__open-recipe-file-button { | 364 | .settings__open-recipe-file-button { |
312 | cursor:pointer; | 365 | cursor: pointer; |
313 | margin-right: 10px; | 366 | margin-right: 10px; |
314 | } | 367 | } |
315 | .settings__open-recipe-file-container { | 368 | .settings__open-recipe-file-container { |
@@ -330,7 +383,9 @@ | |||
330 | margin-bottom: 1em; | 383 | margin-bottom: 1em; |
331 | } | 384 | } |
332 | 385 | ||
333 | a.button { margin-top: 40px; } | 386 | a.button { |
387 | margin-top: 40px; | ||
388 | } | ||
334 | } | 389 | } |
335 | 390 | ||
336 | .account { | 391 | .account { |
@@ -343,8 +398,12 @@ | |||
343 | margin-bottom: 40px; | 398 | margin-bottom: 40px; |
344 | padding: 20px; | 399 | padding: 20px; |
345 | 400 | ||
346 | &.account__box--flex { display: flex; } | 401 | &.account__box--flex { |
347 | &.account__box--last { margin-bottom: 0; } | 402 | display: flex; |
403 | } | ||
404 | &.account__box--last { | ||
405 | margin-bottom: 0; | ||
406 | } | ||
348 | 407 | ||
349 | .auth__button { | 408 | .auth__button { |
350 | margin-top: 10px; | 409 | margin-top: 10px; |
@@ -360,16 +419,24 @@ | |||
360 | .account__info { | 419 | .account__info { |
361 | flex: 1; | 420 | flex: 1; |
362 | 421 | ||
363 | h2 { margin-bottom: 5px; } | 422 | h2 { |
364 | .badge { margin-top: 5px; } | 423 | margin-bottom: 5px; |
365 | .username { margin-right: 10 } | 424 | } |
425 | .badge { | ||
426 | margin-top: 5px; | ||
427 | } | ||
428 | .username { | ||
429 | margin-right: 10; | ||
430 | } | ||
366 | } | 431 | } |
367 | 432 | ||
368 | .account__subscription { | 433 | .account__subscription { |
369 | align-items: center; | 434 | align-items: center; |
370 | display: flex; | 435 | display: flex; |
371 | 436 | ||
372 | .badge { margin-left: 10px; } | 437 | .badge { |
438 | margin-left: 10px; | ||
439 | } | ||
373 | } | 440 | } |
374 | 441 | ||
375 | .manage-user-links { | 442 | .manage-user-links { |
@@ -378,10 +445,18 @@ | |||
378 | justify-content: space-between; | 445 | justify-content: space-between; |
379 | } | 446 | } |
380 | 447 | ||
381 | .account__subscription-button { margin-left: auto; } | 448 | .account__subscription-button { |
382 | .franz-form__button { white-space: nowrap; } | 449 | margin-left: auto; |
383 | div { height: auto; } | 450 | } |
384 | [data-type="franz-button"] div { height: 20px } | 451 | .franz-form__button { |
452 | white-space: nowrap; | ||
453 | } | ||
454 | div { | ||
455 | height: auto; | ||
456 | } | ||
457 | [data-type='franz-button'] div { | ||
458 | height: 20px; | ||
459 | } | ||
385 | 460 | ||
386 | .invoices { | 461 | .invoices { |
387 | width: 100%; | 462 | width: 100%; |
@@ -399,7 +474,9 @@ | |||
399 | .invoices__action { | 474 | .invoices__action { |
400 | text-align: right; | 475 | text-align: right; |
401 | 476 | ||
402 | button { color: $theme-brand-primary; } | 477 | button { |
478 | color: $theme-brand-primary; | ||
479 | } | ||
403 | } | 480 | } |
404 | } | 481 | } |
405 | } | 482 | } |
@@ -409,7 +486,9 @@ | |||
409 | font-size: 40px; | 486 | font-size: 40px; |
410 | margin-bottom: 20px; | 487 | margin-bottom: 20px; |
411 | 488 | ||
412 | img { width: 40px; } | 489 | img { |
490 | width: 40px; | ||
491 | } | ||
413 | } | 492 | } |
414 | 493 | ||
415 | .content-tabs { | 494 | .content-tabs { |
@@ -432,8 +511,8 @@ | |||
432 | width: 240px; | 511 | width: 240px; |
433 | height: 100%; | 512 | height: 100%; |
434 | align-self: center; | 513 | align-self: center; |
435 | border-top-left-radius: $theme-border-radius;; | 514 | border-top-left-radius: $theme-border-radius; |
436 | border-bottom-left-radius: $theme-border-radius;; | 515 | border-bottom-left-radius: $theme-border-radius; |
437 | overflow: hidden; | 516 | overflow: hidden; |
438 | 517 | ||
439 | .settings-navigation__link { | 518 | .settings-navigation__link { |
@@ -445,12 +524,15 @@ | |||
445 | height: 51px; | 524 | height: 51px; |
446 | padding: 0 20px; | 525 | padding: 0 20px; |
447 | text-decoration: none; | 526 | text-decoration: none; |
448 | transition: background $theme-transition-time, color $theme-transition-time; | 527 | @media (prefers-reduced-motion: no-preference) { |
528 | transition: background $theme-transition-time, | ||
529 | color $theme-transition-time; | ||
530 | } | ||
449 | border-bottom: 1px solid darken($theme-gray-lightest, 3%); | 531 | border-bottom: 1px solid darken($theme-gray-lightest, 3%); |
450 | 532 | ||
451 | .badge { | 533 | .badge { |
452 | background: $theme-gray-light; | 534 | background: $theme-gray-light; |
453 | color: #FFF; | 535 | color: #fff; |
454 | } | 536 | } |
455 | 537 | ||
456 | &:hover { | 538 | &:hover { |
@@ -458,26 +540,31 @@ | |||
458 | 540 | ||
459 | .badge { | 541 | .badge { |
460 | background: $theme-gray-light; | 542 | background: $theme-gray-light; |
461 | color: #FFF; | 543 | color: #fff; |
462 | } | 544 | } |
463 | } | 545 | } |
464 | 546 | ||
465 | &.is-active { | 547 | &.is-active { |
466 | background: $theme-brand-primary; | 548 | background: $theme-brand-primary; |
467 | color: #FFF; | 549 | color: #fff; |
468 | 550 | ||
469 | .badge { | 551 | .badge { |
470 | background: #FFF; | 552 | background: #fff; |
471 | color: $theme-brand-primary; | 553 | color: $theme-brand-primary; |
472 | } | 554 | } |
473 | } | 555 | } |
474 | } | 556 | } |
475 | 557 | ||
476 | .settings-navigation__expander { flex: 1; } | 558 | .settings-navigation__expander { |
559 | flex: 1; | ||
560 | } | ||
477 | 561 | ||
478 | .badge { | 562 | .badge { |
479 | display: initial; | 563 | display: initial; |
480 | transition: background $theme-transition-time, color $theme-transition-time; | 564 | @media (prefers-reduced-motion: no-preference) { |
565 | transition: background $theme-transition-time, | ||
566 | color $theme-transition-time; | ||
567 | } | ||
481 | } | 568 | } |
482 | 569 | ||
483 | .settings-navigation__action-badge { | 570 | .settings-navigation__action-badge { |
@@ -491,5 +578,7 @@ | |||
491 | } | 578 | } |
492 | 579 | ||
493 | .settings__support-badges { | 580 | .settings__support-badges { |
494 | a { margin-right: 10px } | 581 | a { |
582 | margin-right: 10px; | ||
583 | } | ||
495 | } | 584 | } |
diff --git a/src/styles/slider.scss b/src/styles/slider.scss index 8bb771586..85b31660f 100644 --- a/src/styles/slider.scss +++ b/src/styles/slider.scss | |||
@@ -3,43 +3,44 @@ | |||
3 | .theme__dark .franz-form .franz-form__slider-wrapper .slider { | 3 | .theme__dark .franz-form .franz-form__slider-wrapper .slider { |
4 | border: 1px solid $dark-theme-gray; | 4 | border: 1px solid $dark-theme-gray; |
5 | background: $dark-theme-gray; | 5 | background: $dark-theme-gray; |
6 | |||
7 | } | 6 | } |
8 | 7 | ||
9 | |||
10 | .franz-form { | 8 | .franz-form { |
11 | .franz-form__slider-wrapper { | 9 | .franz-form__slider-wrapper { |
12 | display: flex; | 10 | display: flex; |
13 | flex-direction: row; | 11 | flex-direction: row; |
14 | 12 | ||
15 | .franz-form__label { margin-left: 20px; } | 13 | .franz-form__label { |
14 | margin-left: 20px; | ||
15 | } | ||
16 | 16 | ||
17 | .slider-container { | 17 | .slider-container { |
18 | width: 100%; /* Width of the outside container */ | 18 | width: 100%; /* Width of the outside container */ |
19 | } | 19 | } |
20 | 20 | ||
21 | /* The slider itself */ | 21 | /* The slider itself */ |
22 | .slider { | 22 | .slider { |
23 | -webkit-appearance: none; | 23 | -webkit-appearance: none; |
24 | width: 100%; | 24 | width: 100%; |
25 | height: 14px; | 25 | height: 14px; |
26 | border-radius: $theme-border-radius; | 26 | border-radius: $theme-border-radius; |
27 | background: $theme-gray-lighter; | 27 | background: $theme-gray-lighter; |
28 | outline: none; | 28 | outline: none; |
29 | opacity: 1.0; | 29 | opacity: 1; |
30 | -webkit-transition: .2s; | 30 | @media (prefers-reduced-motion: no-preference) { |
31 | transition: opacity .2s; | 31 | transition: opacity 0.2s; |
32 | } | ||
32 | } | 33 | } |
33 | 34 | ||
34 | .slider::-webkit-slider-thumb { | 35 | .slider::-webkit-slider-thumb { |
35 | -webkit-appearance: none; | 36 | -webkit-appearance: none; |
36 | appearance: none; | 37 | appearance: none; |
37 | width: 14px; | 38 | width: 14px; |
38 | height: 14px; | 39 | height: 14px; |
39 | border-radius: 50%; | 40 | border-radius: 50%; |
40 | background: $theme-brand-primary; | 41 | background: $theme-brand-primary; |
41 | box-shadow: 0 1px 4px rgba(0, 0, 0, .3); | 42 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); |
42 | cursor: pointer; | 43 | cursor: pointer; |
43 | } | 44 | } |
44 | } | 45 | } |
45 | } | 46 | } |
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index 31a239387..df10da77c 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -4,11 +4,17 @@ | |||
4 | &.is-active { | 4 | &.is-active { |
5 | background: $dark-theme-gray; | 5 | background: $dark-theme-gray; |
6 | 6 | ||
7 | .tab-item__icon { margin-left: -4px; } | 7 | .tab-item__icon { |
8 | margin-left: -4px; | ||
9 | } | ||
8 | } | 10 | } |
9 | 11 | ||
10 | &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(.2); } | 12 | &.is-disabled .tab-item__icon { |
11 | .tab-item__icon { width: 34px; } | 13 | filter: grayscale(100%) opacity(0.2); |
14 | } | ||
15 | .tab-item__icon { | ||
16 | width: 34px; | ||
17 | } | ||
12 | } | 18 | } |
13 | 19 | ||
14 | .tabs { | 20 | .tabs { |
@@ -29,22 +35,34 @@ | |||
29 | justify-content: center; | 35 | justify-content: center; |
30 | min-height: 50px; | 36 | min-height: 50px; |
31 | position: relative; | 37 | position: relative; |
32 | transition: background $theme-transition-time; | 38 | @media (prefers-reduced-motion: no-preference) { |
39 | transition: background $theme-transition-time; | ||
40 | } | ||
33 | width: $theme-sidebar-width; | 41 | width: $theme-sidebar-width; |
34 | 42 | ||
35 | &.is-active { | 43 | &.is-active { |
36 | background: change-color($theme-brand-primary, | 44 | background: change-color( |
37 | $lightness: min(lightness($theme-brand-primary) * 1.35, 100)); | 45 | $theme-brand-primary, |
46 | $lightness: min(lightness($theme-brand-primary) * 1.35, 100) | ||
47 | ); | ||
38 | border-left-width: 4px; | 48 | border-left-width: 4px; |
39 | border-left-style: solid; | 49 | border-left-style: solid; |
40 | color: $theme-brand-primary; | 50 | color: $theme-brand-primary; |
41 | 51 | ||
42 | .tab-item__icon { margin-left: -4px; } | 52 | .tab-item__icon { |
53 | margin-left: -4px; | ||
54 | } | ||
43 | } | 55 | } |
44 | 56 | ||
45 | &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(0.2); } | 57 | &.is-disabled .tab-item__icon { |
46 | &.has-custom-icon .tab-item__icon { border-radius: $theme-border-radius; } | 58 | filter: grayscale(100%) opacity(0.2); |
47 | &:active .tab-item__icon { opacity: .7; } | 59 | } |
60 | &.has-custom-icon .tab-item__icon { | ||
61 | border-radius: $theme-border-radius; | ||
62 | } | ||
63 | &:active .tab-item__icon { | ||
64 | opacity: 0.7; | ||
65 | } | ||
48 | 66 | ||
49 | .tab-item__icon { | 67 | .tab-item__icon { |
50 | height: auto; | 68 | height: auto; |
@@ -56,7 +74,7 @@ | |||
56 | background: $theme-brand-danger; | 74 | background: $theme-brand-danger; |
57 | border-radius: 20px; | 75 | border-radius: 20px; |
58 | bottom: 8px; | 76 | bottom: 8px; |
59 | color: #FFF; | 77 | color: #fff; |
60 | display: flex; | 78 | display: flex; |
61 | font-size: 11px; | 79 | font-size: 11px; |
62 | justify-content: center; | 80 | justify-content: center; |
@@ -66,13 +84,13 @@ | |||
66 | position: absolute; | 84 | position: absolute; |
67 | right: 8px; | 85 | right: 8px; |
68 | 86 | ||
69 | &.is-indirect { | 87 | &.is-indirect { |
70 | padding-top: 0; | 88 | padding-top: 0; |
71 | background: #0088cc; | 89 | background: #0088cc; |
72 | } | 90 | } |
73 | &.hibernating { | 91 | &.hibernating { |
74 | padding-top: 0; | 92 | padding-top: 0; |
75 | background: $theme-gray; | 93 | background: $theme-gray; |
76 | font-size: 0px; | 94 | font-size: 0px; |
77 | min-height: 10px; | 95 | min-height: 10px; |
78 | min-width: 10px; | 96 | min-width: 10px; |
@@ -96,11 +114,13 @@ | |||
96 | right: 8px; | 114 | right: 8px; |
97 | width: 17px; | 115 | width: 17px; |
98 | 116 | ||
99 | &.is-indirect { | 117 | &.is-indirect { |
100 | padding-top: 0; | 118 | padding-top: 0; |
101 | background: #0088cc; | 119 | background: #0088cc; |
102 | } | 120 | } |
103 | } | 121 | } |
104 | 122 | ||
105 | &.is-reordering { z-index: 99999; } | 123 | &.is-reordering { |
124 | z-index: 99999; | ||
125 | } | ||
106 | } | 126 | } |
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss index 5cd9e4526..ed4c0d11b 100644 --- a/src/styles/toggle.scss +++ b/src/styles/toggle.scss | |||
@@ -39,7 +39,9 @@ $toggle-button-size: 22px; | |||
39 | left: 1px; | 39 | left: 1px; |
40 | top: 1px; | 40 | top: 1px; |
41 | position: absolute; | 41 | position: absolute; |
42 | transition: all 0.5s; | 42 | @media (prefers-reduced-motion: no-preference) { |
43 | transition: all 0.5s; | ||
44 | } | ||
43 | width: $toggle-size - 2; | 45 | width: $toggle-size - 2; |
44 | } | 46 | } |
45 | 47 | ||
diff --git a/src/styles/type.scss b/src/styles/type.scss index 37ec0bcca..234c4d5c4 100644 --- a/src/styles/type.scss +++ b/src/styles/type.scss | |||
@@ -2,9 +2,15 @@ | |||
2 | @import './mixins.scss'; | 2 | @import './mixins.scss'; |
3 | 3 | ||
4 | .theme__dark { | 4 | .theme__dark { |
5 | a { color: $dark-theme-gray-smoke; } | 5 | a { |
6 | .label { color: $dark-theme-gray-lightest; } | 6 | color: $dark-theme-gray-smoke; |
7 | .footnote { color: $dark-theme-gray-lightest; } | 7 | } |
8 | .label { | ||
9 | color: $dark-theme-gray-lightest; | ||
10 | } | ||
11 | .footnote { | ||
12 | color: $dark-theme-gray-lightest; | ||
13 | } | ||
8 | } | 14 | } |
9 | 15 | ||
10 | h1 { | 16 | h1 { |
@@ -21,36 +27,45 @@ h2 { | |||
21 | margin-bottom: 25px; | 27 | margin-bottom: 25px; |
22 | margin-top: 5px; | 28 | margin-top: 5px; |
23 | 29 | ||
24 | &:first-of-type { margin-top: 0; } | 30 | &:first-of-type { |
31 | margin-top: 0; | ||
32 | } | ||
25 | } | 33 | } |
26 | 34 | ||
27 | p { | 35 | p { |
28 | margin-bottom: 10px; | 36 | margin-bottom: 10px; |
29 | line-height: 1.7rem; | 37 | line-height: 1.7rem; |
30 | 38 | ||
31 | &:last-of-type { margin-bottom: 0; } | 39 | &:last-of-type { |
40 | margin-bottom: 0; | ||
41 | } | ||
32 | } | 42 | } |
33 | 43 | ||
34 | strong { font-weight: bold; } | 44 | strong { |
45 | font-weight: bold; | ||
46 | } | ||
35 | 47 | ||
36 | a, button { | 48 | a, |
49 | button { | ||
37 | color: $theme-text-color; | 50 | color: $theme-text-color; |
38 | text-decoration: none; | 51 | text-decoration: none; |
39 | 52 | ||
40 | &.button { | 53 | &.button { |
41 | background: $theme-brand-primary; | 54 | background: $theme-brand-primary; |
42 | color: #FFF; | 55 | color: #fff; |
43 | border-radius: 3px; | 56 | border-radius: 3px; |
44 | display: inline-block; | 57 | display: inline-block; |
45 | padding: 10px 20px; | 58 | padding: 10px 20px; |
46 | position: relative; | 59 | position: relative; |
47 | text-align: center; | 60 | text-align: center; |
48 | transition: background .5s, color .5s; | 61 | @media (prefers-reduced-motion: no-preference) { |
62 | transition: background 0.5s, color 0.5s; | ||
63 | } | ||
49 | cursor: pointer; | 64 | cursor: pointer; |
50 | 65 | ||
51 | &:hover { | 66 | &:hover { |
52 | background: darken($theme-brand-primary, 10%); | 67 | background: darken($theme-brand-primary, 10%); |
53 | color: #FFF; | 68 | color: #fff; |
54 | } | 69 | } |
55 | } | 70 | } |
56 | 71 | ||
@@ -60,14 +75,19 @@ a, button { | |||
60 | } | 75 | } |
61 | } | 76 | } |
62 | 77 | ||
63 | .error-message, .error-message:last-of-type { | 78 | .error-message, |
79 | .error-message:last-of-type { | ||
64 | color: $theme-brand-danger; | 80 | color: $theme-brand-danger; |
65 | margin: 10px 0; | 81 | margin: 10px 0; |
66 | } | 82 | } |
67 | 83 | ||
68 | .center { text-align: center; } | 84 | .center { |
85 | text-align: center; | ||
86 | } | ||
69 | 87 | ||
70 | .label { @include formLabel(); } | 88 | .label { |
89 | @include formLabel(); | ||
90 | } | ||
71 | 91 | ||
72 | .footnote { | 92 | .footnote { |
73 | color: $theme-gray-light; | 93 | color: $theme-gray-light; |
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss index c1f85391e..7202fe148 100644 --- a/src/styles/welcome.scss +++ b/src/styles/welcome.scss | |||
@@ -1,24 +1,26 @@ | |||
1 | .auth .welcome { | 1 | .auth .welcome { |
2 | height: auto; | 2 | height: auto; |
3 | 3 | ||
4 | &__content { | 4 | &__content { |
5 | align-items: center; | 5 | align-items: center; |
6 | color: #FFF; | 6 | color: #fff; |
7 | display: flex; | 7 | display: flex; |
8 | justify-content: center; | 8 | justify-content: center; |
9 | height: auto; | 9 | height: auto; |
10 | } | 10 | } |
11 | 11 | ||
12 | &__logo { width: 100px; } | 12 | &__logo { |
13 | width: 100px; | ||
14 | } | ||
13 | 15 | ||
14 | &__text { | 16 | &__text { |
15 | border-left: 1px solid #FFF; | 17 | border-left: 1px solid #fff; |
16 | margin-left: 40px; | 18 | margin-left: 40px; |
17 | padding-left: 40px; | 19 | padding-left: 40px; |
18 | 20 | ||
19 | h1 { | 21 | h1 { |
20 | font-size: 60px; | 22 | font-size: 60px; |
21 | letter-spacing: -.4rem; | 23 | letter-spacing: -0.4rem; |
22 | margin-bottom: 5px; | 24 | margin-bottom: 5px; |
23 | } | 25 | } |
24 | 26 | ||
@@ -42,33 +44,35 @@ | |||
42 | text-align: center; | 44 | text-align: center; |
43 | height: auto; | 45 | height: auto; |
44 | 46 | ||
45 | .button:first-of-type { margin-right: 25px; } | 47 | .button:first-of-type { |
48 | margin-right: 25px; | ||
49 | } | ||
46 | } | 50 | } |
47 | 51 | ||
48 | .button { | 52 | .button { |
49 | border-color: #FFF; | 53 | border-color: #fff; |
50 | color: #FFF; | 54 | color: #fff; |
51 | cursor: pointer; | 55 | cursor: pointer; |
52 | 56 | ||
53 | &:hover { | 57 | &:hover { |
54 | background: #FFF; | 58 | background: #fff; |
55 | color: $theme-brand-primary; | 59 | color: $theme-brand-primary; |
56 | } | 60 | } |
57 | 61 | ||
58 | &__inverted { | 62 | &__inverted { |
59 | background: #FFF; | 63 | background: #fff; |
60 | color: $theme-brand-primary; | 64 | color: $theme-brand-primary; |
61 | } | 65 | } |
62 | 66 | ||
63 | &__inverted:hover { | 67 | &__inverted:hover { |
64 | background: none; | 68 | background: none; |
65 | color: #FFF; | 69 | color: #fff; |
66 | } | 70 | } |
67 | } | 71 | } |
68 | 72 | ||
69 | &__featured-services { | 73 | &__featured-services { |
70 | align-items: center; | 74 | align-items: center; |
71 | background: #FFF; | 75 | background: #fff; |
72 | border-radius: 6px; | 76 | border-radius: 6px; |
73 | display: flex; | 77 | display: flex; |
74 | flex-wrap: wrap; | 78 | flex-wrap: wrap; |
@@ -82,9 +86,13 @@ | |||
82 | &__featured-service { | 86 | &__featured-service { |
83 | margin: 0 10px 15px; | 87 | margin: 0 10px 15px; |
84 | height: 35px; | 88 | height: 35px; |
85 | transition: .5s filter, .5s opacity; | 89 | @media (prefers-reduced-motion: no-preference) { |
90 | transition: 0.5s filter, 0.5s opacity; | ||
91 | } | ||
86 | width: 35px; | 92 | width: 35px; |
87 | 93 | ||
88 | img { width: 35px; } | 94 | img { |
95 | width: 35px; | ||
96 | } | ||
89 | } | 97 | } |
90 | } | 98 | } |
diff --git a/src/webview/screenshare.js b/src/webview/screenshare.js index ab548a625..e7e43c04e 100644 --- a/src/webview/screenshare.js +++ b/src/webview/screenshare.js | |||
@@ -3,17 +3,23 @@ import { desktopCapturer } from 'electron'; | |||
3 | const CANCEL_ID = 'desktop-capturer-selection__cancel'; | 3 | const CANCEL_ID = 'desktop-capturer-selection__cancel'; |
4 | 4 | ||
5 | export async function getDisplayMediaSelector() { | 5 | export async function getDisplayMediaSelector() { |
6 | const sources = await desktopCapturer.getSources({ types: ['screen', 'window'] }); | 6 | const sources = await desktopCapturer.getSources({ |
7 | types: ['screen', 'window'], | ||
8 | }); | ||
7 | return `<div class="desktop-capturer-selection__scroller"> | 9 | return `<div class="desktop-capturer-selection__scroller"> |
8 | <ul class="desktop-capturer-selection__list"> | 10 | <ul class="desktop-capturer-selection__list"> |
9 | ${sources.map(({ id, name, thumbnail }) => ` | 11 | ${sources |
12 | .map( | ||
13 | ({ id, name, thumbnail }) => ` | ||
10 | <li class="desktop-capturer-selection__item"> | 14 | <li class="desktop-capturer-selection__item"> |
11 | <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}"> | 15 | <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}"> |
12 | <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" /> | 16 | <img class="desktop-capturer-selection__thumbnail" src="${thumbnail.toDataURL()}" /> |
13 | <span class="desktop-capturer-selection__name">${name}</span> | 17 | <span class="desktop-capturer-selection__name">${name}</span> |
14 | </button> | 18 | </button> |
15 | </li> | 19 | </li> |
16 | `).join('')} | 20 | `, |
21 | ) | ||
22 | .join('')} | ||
17 | <li class="desktop-capturer-selection__item"> | 23 | <li class="desktop-capturer-selection__item"> |
18 | <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel"> | 24 | <button class="desktop-capturer-selection__btn" data-id="${CANCEL_ID}" title="Cancel"> |
19 | <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span> | 25 | <span class="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">Cancel</span> |
@@ -67,7 +73,9 @@ export const screenShareCss = ` | |||
67 | padding: 4px; | 73 | padding: 4px; |
68 | background: #252626; | 74 | background: #252626; |
69 | text-align: left; | 75 | text-align: left; |
70 | transition: background-color .15s, box-shadow .15s, color .15s; | 76 | @media (prefers-reduced-motion: no-preference) { |
77 | transition: background-color .15s, box-shadow .15s, color .15s; | ||
78 | } | ||
71 | color: #dedede; | 79 | color: #dedede; |
72 | } | 80 | } |
73 | .desktop-capturer-selection__btn:hover, | 81 | .desktop-capturer-selection__btn:hover, |