Make wireguard-key-view scrollable

4 files changed, 81 insertions, 50 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/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,
   }),