diff options
| author | Oskar Nyberg <oskar@mullvad.net> | 2020-08-28 19:55:05 +0200 |
|---|---|---|
| committer | Oskar Nyberg <oskar@mullvad.net> | 2020-08-28 19:55:05 +0200 |
| commit | d2d32175fd1e8fbf04dd6d5d7ee03c7e419af23e (patch) | |
| tree | 00568f29c44b1800fd0c9b30e8aba766f855fb00 /gui/src | |
| parent | 2ae7b31424c13b451f18a09457da115b8f96af0e (diff) | |
| parent | 3ab3fa377f09646a2d1f4bdfc2e94b821ecbcc47 (diff) | |
| download | mullvadvpn-d2d32175fd1e8fbf04dd6d5d7ee03c7e419af23e.tar.xz mullvadvpn-d2d32175fd1e8fbf04dd6d5d7ee03c7e419af23e.zip | |
Merge branch 'convert-platform-window-from-reactxp' into master
Diffstat (limited to 'gui/src')
| -rw-r--r-- | gui/src/renderer/components/PlatformWindow.tsx | 58 | ||||
| -rw-r--r-- | gui/src/renderer/index.html | 2 | ||||
| -rw-r--r-- | gui/src/renderer/index.ts | 9 |
3 files changed, 25 insertions, 44 deletions
diff --git a/gui/src/renderer/components/PlatformWindow.tsx b/gui/src/renderer/components/PlatformWindow.tsx index cc10374fec..c461b647f6 100644 --- a/gui/src/renderer/components/PlatformWindow.tsx +++ b/gui/src/renderer/components/PlatformWindow.tsx @@ -1,42 +1,26 @@ -import * as React from 'react'; -import { Component, Styles, Types, View } from 'reactxp'; +import styled from 'styled-components'; -interface IProps { - arrowPosition?: number; -} +const ARROW_WIDTH = 30; -const containerStyle = Styles.createViewStyle({ flex: 1 }); +export default styled.div({}, ({ arrowPosition }: { arrowPosition?: number }) => { + let mask: string | undefined; -export default class PlatformWindow extends Component<IProps> { - public render() { - return <View style={[containerStyle, this.platformStyle()]}>{this.props.children}</View>; - } - - private platformStyle(): Types.ViewStyleRuleSet { - if (process.platform === 'darwin') { - const arrowPosition = this.props.arrowPosition; - let arrowPositionCss = '50%'; - - if (typeof arrowPosition === 'number') { - const arrowWidth = 30; - const adjustedArrowPosition = arrowPosition - arrowWidth * 0.5; - arrowPositionCss = `${adjustedArrowPosition}px`; - } + if (process.platform === 'darwin') { + const arrowPositionCss = + arrowPosition !== undefined ? `${arrowPosition - ARROW_WIDTH * 0.5}px` : '50%'; - const webkitMask = [ - `url(../../assets/images/app-triangle.svg) ${arrowPositionCss} 0% no-repeat`, - `url(../../assets/images/app-header-backdrop.svg) no-repeat`, - ]; - - return Styles.createViewStyle( - { - // @ts-ignore - WebkitMask: webkitMask.join(','), - }, - false, - ); - } else { - return undefined; - } + mask = [ + `url(../../assets/images/app-triangle.svg) ${arrowPositionCss} 0% no-repeat`, + `url(../../assets/images/app-header-backdrop.svg) no-repeat`, + ].join(','); } -} + + return { + position: 'relative', + overflow: 'hidden', + display: 'flex', + flexDirection: 'column', + flex: 1, + mask, + }; +}); diff --git a/gui/src/renderer/index.html b/gui/src/renderer/index.html index d757d23bdd..3f2da3d633 100644 --- a/gui/src/renderer/index.html +++ b/gui/src/renderer/index.html @@ -6,7 +6,7 @@ <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'"> </head> <body> - <div class="app-container"></div> + <div id="app"></div> <script>var exports = {};</script> <script src="./index.js"></script> </body> diff --git a/gui/src/renderer/index.ts b/gui/src/renderer/index.ts index aada6fd97b..906be20bfa 100644 --- a/gui/src/renderer/index.ts +++ b/gui/src/renderer/index.ts @@ -1,9 +1,6 @@ -import * as RX from 'reactxp'; +import ReactDOM from 'react-dom'; import App from './app'; const app = new App(); -const view = app.renderView(); - -RX.App.initialize(true, true); -RX.UserInterface.setMainView(view); -RX.UserInterface.useCustomScrollbars(true); +const container = document.getElementById('app'); +ReactDOM.render(app.renderView(), container); |