Added custom notification design

2024-11-30 14:54:12 +03:00 · 2019-03-07 14:35:51 +03:00 · 2019-03-07 14:35:51 +03:00 · dc43a7724a
commit dc43a7724a
parent aa05442c3d
8 changed files with 170 additions and 84 deletions
--- a/src/components/collapsibleCard/view/collapsibleCardView.js
+++ b/src/components/collapsibleCard/view/collapsibleCardView.js
@ -38,8 +38,7 @@ class CollapsibleCardView extends PureComponent {
    const { expanded } = this.state;

    if (
-      !nextProps.isExpanded
-      && isExpanded !== nextProps.isExpanded
+      isExpanded !== nextProps.isExpanded
      && expanded !== nextProps.isExpanded
    ) {
      this._toggleOnPress();
--- a/src/components/settingsItem/view/settingsItemView.js
+++ b/src/components/settingsItem/view/settingsItemView.js
@ -84,11 +84,11 @@ class SettingsItemView extends PureComponent {
  };

  render() {
-    const { title } = this.props;
+    const { title, titleStyle } = this.props;

    return (
      <View style={styles.wrapper}>
-        <Text style={styles.text}>{title}</Text>
+        <Text style={[styles.text, titleStyle]}>{title}</Text>
        {this._renderItem()}
      </View>
    );
--- a/src/config/locales/en-US.json
+++ b/src/config/locales/en-US.json
@ -57,11 +57,19 @@
  },
  "settings": {
    "settings": "Settings",
+    "general": "General",
    "currency": "Currency",
    "language": "Language",
    "server": "Server",
    "dark_theme": "Dark Theme",
    "push_notification": "Push Notification",
+    "push": {
+      "follow": "Follow",
+      "vote": "Vote",
+      "comment": "Comment",
+      "mention": "Mention",
+      "transfers": "Transfers"
+    },
    "pincode": "PIN code",
    "reset": "Reset",
    "nsfw_content": "NSFW Content",
--- a/src/globalStyles.js
+++ b/src/globalStyles.js
@ -54,10 +54,6 @@ export default EStyleSheet.create({
    backgroundColor: '$primaryLightBackground',
    flex: 1,
  },
-  settingsContainer: {
-    marginLeft: 42,
-    marginRight: 32,
-  },
  hintText: {
    color: '$iconColor',
    alignSelf: 'center',
--- a/src/screens/profile/screen/profileScreen.js
+++ b/src/screens/profile/screen/profileScreen.js
@ -1,5 +1,5 @@
 import React, { PureComponent, Fragment } from 'react';
-import { View, Text, ScrollView } from 'react-native';
+import { View, ScrollView } from 'react-native';
 import { injectIntl } from 'react-intl';

 // Components
@ -16,7 +16,6 @@ import { Posts } from '../../../components/posts';
 import { ProfileSummary } from '../../../components/profileSummary';
 import { TabBar } from '../../../components/tabBar';
 import { Wallet } from '../../../components/wallet';
-import { FormatedCurrency } from '../../../components/formatedElements';

 // Constants
 import { PROFILE_FILTERS } from '../../../constants/options/filters';
--- a/src/screens/settings/container/settingsContainer.js
+++ b/src/screens/settings/container/settingsContainer.js
@ -51,6 +51,7 @@ class SettingsContainer extends Component {
    super(props);
    this.state = {
      serverList: [],
+      isNotificationMenuOpen: props.isNotificationSettingsOpen,
    };
  }

@ -218,12 +219,13 @@ class SettingsContainer extends Component {
  };

  render() {
-    const { serverList } = this.state;
+    const { serverList, isNotificationMenuOpen } = this.state;

    return (
      <SettingsScreen
        serverList={serverList}
        handleOnChange={this._handleOnChange}
+        isNotificationMenuOpen={isNotificationMenuOpen}
        {...this.props}
      />
    );
--- a/src/screens/settings/screen/settingsScreen.js
+++ b/src/screens/settings/screen/settingsScreen.js
@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { ScrollView, View } from 'react-native';
 import { injectIntl } from 'react-intl';

@ -13,9 +13,10 @@ import NSFW from '../../../constants/options/nsfw';
 // Components
 import { BasicHeader } from '../../../components/basicHeader';
 import { SettingsItem } from '../../../components/settingsItem';
+import { CollapsibleCard } from '../../../components/collapsibleCard';

 // Styles
-import globalStyles from '../../../globalStyles';
+import styles from './settingsStyles';

 class SettingsScreen extends PureComponent {
  /* Props
@ -43,93 +44,161 @@ class SettingsScreen extends PureComponent {
      selectedLanguage,
      serverList,
      nsfw,
+      isNotificationMenuOpen,
    } = this.props;
+    console.log('isNotificationMenuOpen :', isNotificationMenuOpen);

    return (
-      <View style={globalStyles.container}>
+      <Fragment>
        <BasicHeader
          title={intl.formatMessage({
            id: 'settings.settings',
          })}
        />

-        <ScrollView style={globalStyles.settingsContainer}>
-          <SettingsItem
-            title={intl.formatMessage({
-              id: 'settings.currency',
-            })}
-            type="dropdown"
-            actionType="currency"
-            options={CURRENCY}
-            selectedOptionIndex={CURRENCY_VALUE.indexOf(selectedCurrency.currency)}
-            handleOnChange={handleOnChange}
-          />
-          <SettingsItem
-            title={intl.formatMessage({
-              id: 'settings.language',
-            })}
-            type="dropdown"
-            actionType="language"
-            options={LANGUAGE}
-            selectedOptionIndex={LANGUAGE_VALUE.indexOf(selectedLanguage)}
-            handleOnChange={handleOnChange}
-          />
-          <SettingsItem
-            title={intl.formatMessage({
-              id: 'settings.server',
-            })}
-            type="dropdown"
-            actionType="api"
-            options={serverList.map(serverName => groomingServerName(serverName))}
-            selectedOptionIndex={serverList.indexOf(selectedApi)}
-            defaultText={groomingServerName(selectedApi)}
-            handleOnChange={handleOnChange}
-          />
-          <SettingsItem
-            title={intl.formatMessage({
-              id: 'settings.nsfw_content',
-            })}
-            type="dropdown"
-            actionType="nsfw"
-            options={NSFW.map(item => intl.formatMessage({
-              id: item,
-            }))}
-            selectedOptionIndex={parseInt(nsfw, 10)}
-            handleOnChange={handleOnChange}
-          />
-          <SettingsItem
-            title={intl.formatMessage({
-              id: 'settings.dark_theme',
-            })}
-            type="toggle"
-            actionType="theme"
-            isOn={isDarkTheme}
-            handleOnChange={handleOnChange}
-          />
-          <SettingsItem
-            title={intl.formatMessage({
-              id: 'settings.push_notification',
-            })}
-            type="toggle"
-            actionType="notification"
-            isOn={isNotificationSettingsOpen}
-            handleOnChange={handleOnChange}
-          />
-          {!!isLoggedIn && (
+        <ScrollView>
+          <View style={styles.settingsCard}>
            <SettingsItem
              title={intl.formatMessage({
-                id: 'settings.pincode',
+                id: 'settings.general',
              })}
-              text={intl.formatMessage({
-                id: 'settings.reset',
+              titleStyle={styles.cardTitle}
+            />
+            <SettingsItem
+              title={intl.formatMessage({
+                id: 'settings.currency',
              })}
-              type="button"
-              actionType="pincode"
+              type="dropdown"
+              actionType="currency"
+              options={CURRENCY}
+              selectedOptionIndex={CURRENCY_VALUE.indexOf(selectedCurrency.currency)}
              handleOnChange={handleOnChange}
            />
-          )}
+            <SettingsItem
+              title={intl.formatMessage({
+                id: 'settings.language',
+              })}
+              type="dropdown"
+              actionType="language"
+              options={LANGUAGE}
+              selectedOptionIndex={LANGUAGE_VALUE.indexOf(selectedLanguage)}
+              handleOnChange={handleOnChange}
+            />
+            <SettingsItem
+              title={intl.formatMessage({
+                id: 'settings.server',
+              })}
+              type="dropdown"
+              actionType="api"
+              options={serverList.map(serverName => groomingServerName(serverName))}
+              selectedOptionIndex={serverList.indexOf(selectedApi)}
+              defaultText={groomingServerName(selectedApi)}
+              handleOnChange={handleOnChange}
+            />
+            <SettingsItem
+              title={intl.formatMessage({
+                id: 'settings.nsfw_content',
+              })}
+              type="dropdown"
+              actionType="nsfw"
+              options={NSFW.map(item => intl.formatMessage({
+                id: item,
+              }))}
+              selectedOptionIndex={parseInt(nsfw, 10)}
+              handleOnChange={handleOnChange}
+            />
+            <SettingsItem
+              title={intl.formatMessage({
+                id: 'settings.dark_theme',
+              })}
+              type="toggle"
+              actionType="theme"
+              isOn={isDarkTheme}
+              handleOnChange={handleOnChange}
+            />
+            {!!isLoggedIn && (
+              <SettingsItem
+                title={intl.formatMessage({
+                  id: 'settings.pincode',
+                })}
+                text={intl.formatMessage({
+                  id: 'settings.reset',
+                })}
+                type="button"
+                actionType="pincode"
+                handleOnChange={handleOnChange}
+              />
+            )}
+          </View>
+          <View style={styles.settingsCard}>
+            <CollapsibleCard
+              titleComponent={(
+                <SettingsItem
+                  title={intl.formatMessage({
+                    id: 'settings.push_notification',
+                  })}
+                  titleStyle={styles.cardTitle}
+                  type="toggle"
+                  actionType="notification"
+                  isOn={isNotificationSettingsOpen}
+                  handleOnChange={handleOnChange}
+                />
+)}
+              noBorder
+              fitContent
+              locked
+              isExpanded={isNotificationSettingsOpen}
+              expanded={isNotificationMenuOpen}
+            >
+              <SettingsItem
+                title={intl.formatMessage({
+                  id: 'settings.push.follow',
+                })}
+                type="toggle"
+                actionType="notification"
+                isOn={isNotificationSettingsOpen}
+                handleOnChange={handleOnChange}
+              />
+              <SettingsItem
+                title={intl.formatMessage({
+                  id: 'settings.push.vote',
+                })}
+                type="toggle"
+                actionType="notification"
+                isOn={isNotificationSettingsOpen}
+                handleOnChange={handleOnChange}
+              />
+              <SettingsItem
+                title={intl.formatMessage({
+                  id: 'settings.push.comment',
+                })}
+                type="toggle"
+                actionType="notification"
+                isOn={isNotificationSettingsOpen}
+                handleOnChange={handleOnChange}
+              />
+              <SettingsItem
+                title={intl.formatMessage({
+                  id: 'settings.push.mention',
+                })}
+                type="toggle"
+                actionType="notification"
+                isOn={isNotificationSettingsOpen}
+                handleOnChange={handleOnChange}
+              />
+              <SettingsItem
+                title={intl.formatMessage({
+                  id: 'settings.push.transfers',
+                })}
+                type="toggle"
+                actionType="notification"
+                isOn={isNotificationSettingsOpen}
+                handleOnChange={handleOnChange}
+              />
+            </CollapsibleCard>
+          </View>
        </ScrollView>
-      </View>
+      </Fragment>
    );
  }
 }
--- a/src/screens/settings/screen/settingsStyles.js
+++ b/src/screens/settings/screen/settingsStyles.js
@ -0,0 +1,13 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  settingsCard: {
+    backgroundColor: '$primaryBackgroundColor',
+    paddingLeft: 42,
+    paddingRight: 32,
+    marginVertical: 5,
+  },
+  cardTitle: {
+    color: '$primaryBlue',
+  },
+});