summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/assets/css/style.css1
-rw-r--r--app/components/Preferences.css91
-rw-r--r--app/components/Preferences.js68
-rw-r--r--app/components/PreferencesStyles.js103
-rw-r--r--app/containers/PreferencesPage.js7
5 files changed, 145 insertions, 125 deletions
diff --git a/app/assets/css/style.css b/app/assets/css/style.css
index f5e792e798..d3da3124a0 100644
--- a/app/assets/css/style.css
+++ b/app/assets/css/style.css
@@ -10,7 +10,6 @@
@import '../../components/CustomScrollbars.css';
@import '../../components/Login.css';
@import '../../components/Connect.css';
-@import '../../components/Preferences.css';
@import '../../components/AdvancedSettings.css';
@import '../../components/Account.css';
@import '../../components/Support.css';
diff --git a/app/components/Preferences.css b/app/components/Preferences.css
deleted file mode 100644
index c081e739af..0000000000
--- a/app/components/Preferences.css
+++ /dev/null
@@ -1,91 +0,0 @@
-.preferences {
- background: #192E45;
- height: 100%;
-}
-
-.preferences__container {
- display: flex;
- flex-direction: column;
- height: 100%;
-}
-
-.preferences__header {
- flex: 0 0 auto;
- padding: 40px 24px 24px;
- position: relative; /* anchor for close button */
-}
-
-.preferences__close {
- position: absolute;
- display: flex;
- align-items: center;
- border: 0;
- padding: 0;
- margin: 0;
- top: 24px;
- left: 12px;
- z-index: 1; /* part of .preferences__container covers the button */
-}
-
-.preferences__close-icon {
- opacity: 0.6;
- margin-right: 8px;
-}
-
-.preferences__close-title {
- font-family: "Open Sans";
- font-size: 13px;
- font-weight: 600;
- color: rgba(255, 255, 255, 0.6);
-}
-
-.preferences__title {
- font-family: DINPro;
- font-size: 32px;
- font-weight: 900;
- line-height: 40px;
- color: #FFFFFF;
-}
-
-.preferences__content {
- flex: 1 1 auto;
- display: flex;
- flex-direction: column;
-}
-
-.preferences__cell {
- background-color:rgba(41,71,115,1);
- display: flex;
- flex-direction: row;
- align-items: center;
-}
-
-.preferences__cell + .preferences__cell {
- margin-top: 1px;
-}
-
-.preferences__cell-label {
- padding: 15px 12px 15px 24px;
- flex: 1 0 auto;
- font-family: DINPro;
- font-size: 20px;
- font-weight: 900;
- line-height: 26px;
- letter-spacing: -0.2px;
- color: #FFFFFF;
-}
-
-.preferences__cell-accessory {
- flex: 0 0 auto;
- margin-right: 12px;
-}
-
-.preferences__cell-footer {
- padding: 8px 24px 24px;
- font-family: "Open Sans";
- font-size: 13px;
- font-weight: 600;
- line-height: 20px;
- letter-spacing: -0.2px;
- color: rgba(255,255,255,0.8);
-} \ No newline at end of file
diff --git a/app/components/Preferences.js b/app/components/Preferences.js
index 76fbb11111..f0b65d4a06 100644
--- a/app/components/Preferences.js
+++ b/app/components/Preferences.js
@@ -1,49 +1,55 @@
// @flow
-import React, { Component } from 'react';
+import React from 'react';
+import { Component, Text, Button, View } from 'reactxp';
import { Layout, Container, Header } from './Layout';
-
+import Img from './Img';
import Switch from './Switch';
+import styles from './PreferencesStyles';
-import type { SettingsReduxState } from '../redux/settings/reducers';
-
-export type onChangeLanSharingProps = {
- settings: SettingsReduxState;
- onChangeLanSharing: (boolean) => void;
+export type PreferencesProps = {
+ allowLan: boolean;
+ onChangeAllowLan: (boolean) => void;
onClose: () => void;
};
export default class Preferences extends Component {
- props: onChangeLanSharingProps;
+ props: PreferencesProps;
- render(): React.Element<*> {
+ render() {
return (
<Layout>
<Header hidden={ true } style={ 'defaultDark' } />
<Container>
- <div className="preferences">
- <div className="preferences__close" onClick={ this.props.onClose }>
- <img className="preferences__close-icon" src="./assets/images/icon-back.svg" />
- <span className="preferences__close-title">Settings</span>
- </div>
- <div className="preferences__container">
+ <View style={ styles.preferences }>
+ <Button style={ styles.preferences__close } cursor='default' onPress={ this.props.onClose } testName='closeButton'>
+ <View style={ styles.preferences__close_content }>
+ <Img style={ styles.preferences__close_icon } source="icon-back" />
+ <Text style={ styles.preferences__close_title }>Settings</Text>
+ </View>
+ </Button>
+ <View style={ styles.preferences__container }>
- <div className="preferences__header">
- <h2 className="preferences__title">Preferences</h2>
- </div>
+ <View style={ styles.preferences__header }>
+ <Text style={ styles.preferences__title }>Preferences</Text>
+ </View>
- <div className="preferences__content">
- <div className="preferences__cell">
- <div className="preferences__cell-label">Local network sharing</div>
- <div className="preferences__cell-accessory">
- <Switch isOn={ this.props.settings.allowLan } onChange={ this.props.onChangeLanSharing } />
- </div>
- </div>
- <div className="preferences__cell-footer">
- { 'Allows access to other devices on the same network for sharing, printing etc.' }
- </div>
- </div>
- </div>
- </div>
+ <View style={ styles.preferences__content }>
+ <View style={ styles.preferences__cell }>
+ <View style={ styles.preferences__cell_label_container }>
+ <Text style={ styles.preferences__cell_label }>Local network sharing</Text>
+ </View>
+ <View style={ styles.preferences__cell_accessory }>
+ <Switch isOn={ this.props.allowLan } onChange={ this.props.onChangeAllowLan } />
+ </View>
+ </View>
+ <View style={ styles.preferences__cell_footer }>
+ <Text style={ styles.preferences__cell_footer_label }>
+ { 'Allows access to other devices on the same network for sharing, printing etc.' }
+ </Text>
+ </View>
+ </View>
+ </View>
+ </View>
</Container>
</Layout>
);
diff --git a/app/components/PreferencesStyles.js b/app/components/PreferencesStyles.js
new file mode 100644
index 0000000000..64d900b09a
--- /dev/null
+++ b/app/components/PreferencesStyles.js
@@ -0,0 +1,103 @@
+// @flow
+
+import { createViewStyles, createTextStyles } from '../lib/styles';
+
+export default {
+ ...createViewStyles({
+ preferences: {
+ background: '#192E45',
+ height: '100%',
+ },
+ preferences__container: {
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100%',
+ },
+ preferences__header: {
+ flexGrow: 0,
+ flexShrink: 0,
+ flexBasis: 'auto',
+ paddingTop: 40,
+ paddingRight: 24,
+ paddingLeft: 24,
+ paddingBottom: 24,
+ position: 'relative' /* anchor for close button */
+ },
+ preferences__close: {
+ position: 'absolute',
+ top: 0,
+ left: 12,
+ borderWidth: 0,
+ padding: 0,
+ margin: 0,
+ zIndex: 1, /* part of .preferences__container covers the button */
+ cursor: 'default',
+ },
+ preferences__close_content: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ preferences__close_icon: {
+ opacity: 0.6,
+ marginRight: 8,
+ },
+ preferences__content: {
+ flexDirection: 'column',
+ flexGrow: 1,
+ flexShrink: 1,
+ flexBasis: 'auto',
+ },
+ preferences__cell: {
+ backgroundColor: 'rgba(41,71,115,1)',
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ preferences__cell_accessory: {
+ marginRight: 12,
+ },
+ preferences__cell_footer: {
+ paddingTop: 8,
+ paddingRight: 24,
+ paddingBottom: 24,
+ paddingLeft: 24,
+ },
+ preferences__cell_label_container: {
+ paddingTop: 15,
+ paddingRight: 12,
+ paddingBottom: 15,
+ paddingLeft: 24,
+ flexGrow: 1,
+ },
+ }),
+ ...createTextStyles({
+ preferences__close_title: {
+ fontFamily: 'Open Sans',
+ fontSize: 13,
+ fontWeight: 600,
+ color: 'rgba(255, 255, 255, 0.6)',
+ },
+ preferences__title: {
+ fontFamily: 'DINPro',
+ fontSize: 32,
+ fontWeight: 900,
+ lineHeight: 40,
+ color: '#fff',
+ },
+ preferences__cell_label: {
+ fontFamily: 'DINPro',
+ fontSize: 20,
+ fontWeight: 900,
+ lineHeight: 26,
+ letterSpacing: -0.2,
+ color: '#fff',
+ },
+ preferences__cell_footer_label: {
+ fontFamily: 'Open Sans',
+ fontSize: 13,
+ fontWeight: 600,
+ lineHeight: 20,
+ letterSpacing: -0.2,
+ color: 'rgba(255,255,255,0.8)'
+ }
+ })
+}; \ No newline at end of file
diff --git a/app/containers/PreferencesPage.js b/app/containers/PreferencesPage.js
index b6bc60350d..793848d35b 100644
--- a/app/containers/PreferencesPage.js
+++ b/app/containers/PreferencesPage.js
@@ -8,13 +8,16 @@ import Preferences from '../components/Preferences';
import type { ReduxState, ReduxDispatch } from '../redux/store';
import type { SharedRouteProps } from '../routes';
-const mapStateToProps = (state: ReduxState) => state;
+const mapStateToProps = (state: ReduxState) => ({
+ allowLan: state.settings.allowLan
+});
+
const mapDispatchToProps = (dispatch: ReduxDispatch, props: SharedRouteProps) => {
const { backend } = props;
const { push: pushHistory } = bindActionCreators({ push }, dispatch);
return {
onClose: () => pushHistory('/settings'),
- onChangeLanSharing: (allowLan) => {
+ onChangeAllowLan: (allowLan) => {
backend.setAllowLan(allowLan);
},
};
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.