diff options
6 files changed, 112 insertions, 70 deletions
diff --git a/gui/src/renderer/components/CustomScrollbars.tsx b/gui/src/renderer/components/CustomScrollbars.tsx index aca32e5f60..87fd68fca2 100644 --- a/gui/src/renderer/components/CustomScrollbars.tsx +++ b/gui/src/renderer/components/CustomScrollbars.tsx @@ -8,6 +8,7 @@ interface IProps { trackPadding: { x: number; y: number }; onScroll?: (value: IScrollEvent) => void; style?: React.CSSProperties; + fillContainer?: boolean; children?: React.ReactNode; } @@ -173,6 +174,7 @@ export default class CustomScrollbars extends React.Component<IProps, IState> { autoHide: _autoHide, trackPadding: _trackPadding, onScroll: _onScroll, + fillContainer, children, ...otherProps } = this.props; @@ -194,7 +196,7 @@ export default class CustomScrollbars extends React.Component<IProps, IState> { /> <div className="custom-scrollbars__scrollable" - style={{ overflow: 'auto' }} + style={{ overflow: 'auto', flex: fillContainer ? '1' : undefined }} onScroll={this.onScroll} ref={this.scrollableRef}> {children} diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx index bd60d287ee..dc986b13d5 100644 --- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx +++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx @@ -9,6 +9,7 @@ import RedeemVoucherContainer from '../containers/RedeemVoucherContainer'; import { LoginState } from '../redux/account/reducers'; import * as AppButton from './AppButton'; import * as Cell from './Cell'; +import CustomScrollbars from './CustomScrollbars'; import styles, { StyledAccountTokenLabel } from './ExpiredAccountErrorViewStyles'; import ImageView from './ImageView'; import { ModalAlert, ModalAlertType } from './Modal'; @@ -60,30 +61,32 @@ export default class ExpiredAccountErrorView extends Component< public render() { return ( - <View style={styles.container}> - <View style={styles.body}>{this.renderContent()}</View> + <CustomScrollbars style={styles.scrollview} fillContainer> + <View style={styles.container}> + <View style={styles.body}>{this.renderContent()}</View> - <View style={styles.footer}> - {this.getRecoveryAction() === RecoveryAction.disconnect && ( - <AppButton.BlockingButton onPress={this.props.onDisconnect}> - <AppButton.RedButton style={styles.button}> - {messages.pgettext('connect-view', 'Disconnect')} - </AppButton.RedButton> - </AppButton.BlockingButton> - )} + <View style={styles.footer}> + {this.getRecoveryAction() === RecoveryAction.disconnect && ( + <AppButton.BlockingButton onPress={this.props.onDisconnect}> + <AppButton.RedButton style={styles.button}> + {messages.pgettext('connect-view', 'Disconnect')} + </AppButton.RedButton> + </AppButton.BlockingButton> + )} - {this.renderExternalPaymentButton()} + {this.renderExternalPaymentButton()} - <AppButton.GreenButton - disabled={this.getRecoveryAction() === RecoveryAction.disconnect} - onPress={this.onOpenRedeemVoucherAlert}> - {messages.pgettext('connect-view', 'Redeem voucher')} - </AppButton.GreenButton> - </View> + <AppButton.GreenButton + disabled={this.getRecoveryAction() === RecoveryAction.disconnect} + onPress={this.onOpenRedeemVoucherAlert}> + {messages.pgettext('connect-view', 'Redeem voucher')} + </AppButton.GreenButton> + </View> - {this.state.showRedeemVoucherAlert && this.renderRedeemVoucherAlert()} - {this.state.showBlockWhenDisconnectedAlert && this.renderBlockWhenDisconnectedAlert()} - </View> + {this.state.showRedeemVoucherAlert && this.renderRedeemVoucherAlert()} + {this.state.showBlockWhenDisconnectedAlert && this.renderBlockWhenDisconnectedAlert()} + </View> + </CustomScrollbars> ); } diff --git a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx index 15891dd230..b49ef1aa40 100644 --- a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx +++ b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx @@ -12,9 +12,17 @@ export const StyledAccountTokenLabel = styled(AccountTokenLabel)({ }); export default { + // plain CSS style + scrollview: { + flex: 1, + }, container: Styles.createViewStyle({ flex: 1, paddingTop: 24, + // ReactXP don't allow setting 'minHeight' and don't allow percentages. This will work well + // without the '@ts-ignore' when moving away from ReactXP. + // @ts-ignore + minHeight: '100%', }), body: Styles.createViewStyle({ flex: 1, diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx index da481df495..8f45f39aa4 100644 --- a/gui/src/renderer/components/NavigationBar.tsx +++ b/gui/src/renderer/components/NavigationBar.tsx @@ -189,6 +189,7 @@ export class NavigationContainer extends Component<INavigationContainerProps> { interface INavigationScrollbarsProps { onScroll?: (value: IScrollEvent) => void; style?: React.CSSProperties; + fillContainer?: boolean; children?: React.ReactNode; } @@ -216,6 +217,7 @@ class PrivateNavigationScrollbars extends Component<IPrivateNavigationScrollbars <CustomScrollbars ref={this.props.forwardedRef} style={this.props.style} + fillContainer={this.props.fillContainer} onScroll={this.onScroll}> {this.props.children} </CustomScrollbars> diff --git a/gui/src/renderer/components/WireguardKeys.tsx b/gui/src/renderer/components/WireguardKeys.tsx index 2f17ff19bc..f8b439489d 100644 --- a/gui/src/renderer/components/WireguardKeys.tsx +++ b/gui/src/renderer/components/WireguardKeys.tsx @@ -10,7 +10,14 @@ import * as AppButton from './AppButton'; import ClipboardLabel from './ClipboardLabel'; import ImageView from './ImageView'; import { Container, Layout } from './Layout'; -import { BackBarItem, NavigationBar, NavigationContainer, NavigationItems } from './NavigationBar'; +import { + BackBarItem, + NavigationBar, + NavigationContainer, + NavigationItems, + NavigationScrollbars, + TitleBarItem, +} from './NavigationBar'; import SettingsHeader, { HeaderTitle } from './SettingsHeader'; import styles from './WireguardKeysStyles'; @@ -68,62 +75,72 @@ export default class WireguardKeys extends Component<IProps, IState> { messages.pgettext('wireguard-keys-nav', 'Advanced') } </BackBarItem> + <TitleBarItem> + { + // TRANSLATORS: Title label in navigation bar + messages.pgettext('wireguard-keys-nav', 'WireGuard key') + } + </TitleBarItem> </NavigationItems> </NavigationBar> - </NavigationContainer> - <View style={styles.wgkeys__container}> - <SettingsHeader> - <HeaderTitle> - {messages.pgettext('wireguard-keys-nav', 'WireGuard key')} - </HeaderTitle> - </SettingsHeader> + <View style={styles.wgkeys__container}> + <NavigationScrollbars style={styles.wgkeys__scrollview} fillContainer> + <View style={styles.wgkeys__content}> + <SettingsHeader> + <HeaderTitle> + {messages.pgettext('wireguard-keys-nav', 'WireGuard key')} + </HeaderTitle> + </SettingsHeader> - <View style={styles.wgkeys__row}> - <Text style={styles.wgkeys__row_label}> - {messages.pgettext('wireguard-keys', 'Public key')} - </Text> + <View style={styles.wgkeys__row}> + <Text style={styles.wgkeys__row_label}> + {messages.pgettext('wireguard-keys', 'Public key')} + </Text> - <View style={styles.wgkeys__row_value}>{this.getKeyText()}</View> - </View> - <View style={styles.wgkeys__row}> - <Text style={styles.wgkeys__row_label}> - {messages.pgettext('wireguard-keys', 'Key generated')} - </Text> - <Text style={styles.wgkeys__row_value}>{this.ageOfKeyString()}</Text> - </View> + <View style={styles.wgkeys__row_value}>{this.getKeyText()}</View> + </View> + <View style={styles.wgkeys__row}> + <Text style={styles.wgkeys__row_label}> + {messages.pgettext('wireguard-keys', 'Key generated')} + </Text> + <Text style={styles.wgkeys__row_value}>{this.ageOfKeyString()}</Text> + </View> - <View style={styles.wgkeys__messages}> - {this.props.isOffline ? ( - this.offlineLabel() - ) : ( - <View style={styles.wgkeys__row}>{this.keyValidityLabel()}</View> - )} - </View> + <View style={styles.wgkeys__messages}> + {this.props.isOffline ? ( + this.offlineLabel() + ) : ( + <View style={styles.wgkeys__row}>{this.keyValidityLabel()}</View> + )} + </View> - <View style={styles.wgkeys__row}>{this.getGenerateButton()}</View> - <View style={styles.wgkeys__row}> - <AppButton.BlueButton - disabled={this.isVerifyButtonDisabled()} - onPress={this.getOnVerifyKeyCb()}> - <AppButton.Label> - {messages.pgettext('wireguard-key-view', 'Verify key')} - </AppButton.Label> - </AppButton.BlueButton> + <View style={styles.wgkeys__row}>{this.getGenerateButton()}</View> + <View style={styles.wgkeys__row}> + <AppButton.BlueButton + disabled={this.isVerifyButtonDisabled()} + onPress={this.getOnVerifyKeyCb()}> + <AppButton.Label> + {messages.pgettext('wireguard-key-view', 'Verify key')} + </AppButton.Label> + </AppButton.BlueButton> + </View> + <View style={styles.wgkeys__row}> + <AppButton.BlockingButton + disabled={this.props.isOffline} + onPress={this.props.onVisitWebsiteKey}> + <AppButton.BlueButton> + <AppButton.Label> + {messages.pgettext('wireguard-key-view', 'Manage keys')} + </AppButton.Label> + <AppButton.Icon source="icon-extLink" height={16} width={16} /> + </AppButton.BlueButton> + </AppButton.BlockingButton> + </View> + </View> + </NavigationScrollbars> </View> - <View style={styles.wgkeys__row}> - <AppButton.BlockingButton - disabled={this.props.isOffline} - onPress={this.props.onVisitWebsiteKey}> - <AppButton.BlueButton> - <AppButton.Label> - {messages.pgettext('wireguard-key-view', 'Manage keys')} - </AppButton.Label> - <AppButton.Icon source="icon-extLink" height={16} width={16} /> - </AppButton.BlueButton> - </AppButton.BlockingButton> - </View> - </View> + </NavigationContainer> </View> </Container> </Layout> diff --git a/gui/src/renderer/components/WireguardKeysStyles.tsx b/gui/src/renderer/components/WireguardKeysStyles.tsx index 7d0bd43e76..6bbd29cde5 100644 --- a/gui/src/renderer/components/WireguardKeysStyles.tsx +++ b/gui/src/renderer/components/WireguardKeysStyles.tsx @@ -10,6 +10,16 @@ export default { flexDirection: 'column', flex: 1, }), + // plain CSS style + wgkeys__scrollview: { + flex: 1, + }, + wgkeys__content: Styles.createViewStyle({ + // ReactXP don't allow setting 'minHeight' and don't allow percentages. This will work well + // without the '@ts-ignore' when moving away from ReactXP. + // @ts-ignore + minHeight: '100%', + }), wgkeys__messages: Styles.createViewStyle({ flex: 1, }), |