[New Feature] Supporting RTL

2018-02-21 18:30:33 +07:00
parent cacb940b15
commit 014fa9ef3d
9 changed files with 95 additions and 84 deletions
--- a/README.md
+++ b/README.md
@@ -145,6 +145,7 @@ There are three main layers:
  - Add reset password, confirm password and authorizing by GitHub, Google and Facebook.
  - Add scroll auto loading for show posts and people pages.
  - Using [Firestore](https://firebase.google.com/docs/firestore/)
+  - Supportig `Right To Left`
  - Some cool stuff :)
 ## Can I connect React Social Network to other data platforms ? :bowtie:
  Your server side is on `PHP`, `Java`,`ASP.NET`, `Python`, etc. Or you are using serverless platforms such as `Google Cloud`, `AWS`, `Azure`, etc. You can connect `React Social Network` to any data platform. You only need to implement the [interfaces of core services](https://github.com/Qolzam/react-social-network/tree/next/src/core/services) like implementation of [firestoreClient](https://github.com/Qolzam/react-social-network/tree/next/src/data/firestoreClient).
@@ -203,6 +204,9 @@ We use [SemVer](http://semver.org/) for versioning. For the versions available,
  - Amir Movahedi
  - See also the list of [contributors](https://github.com/Qolzam/react-social-network/contributors) who participated in this project.

+## How To Support
+- [Contribution](https://github.com/Qolzam/react-social-network/blob/next/CONTRIBUTING.md)
+- Fork || Star
 ## License

 This project is licensed under the MIT License - see the [LICENSE](https://github.com/Qolzam/react-social-network/blob/next/LICENSE) file for details
--- a/docs/README.md
+++ b/docs/README.md
@@ -145,6 +145,7 @@ There are three main layers:
  - Add reset password, confirm password and authorizing by GitHub, Google and Facebook.
  - Add scroll auto loading for show posts and people pages.
  - Using [Firestore](https://firebase.google.com/docs/firestore/)
+  - Supportig `Right To Left`
  - Some cool stuff :)
 ## Can I connect React Social Network to other data platforms ? :bowtie:
  Your server side is on `PHP`, `Java`,`ASP.NET`, `Python`, etc. Or you are using serverless platforms such as `Google Cloud`, `AWS`, `Azure`, etc. You can connect `React Social Network` to any data platform. You only need to implement the [interfaces of core services](https://github.com/Qolzam/react-social-network/tree/next/src/core/services) like implementation of [firestoreClient](https://github.com/Qolzam/react-social-network/tree/next/src/data/firestoreClient).
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
    "firebase": "^4.6.2",
    "install": "^0.10.2",
    "inversify": "^4.6.0",
+    "jss-rtl": "^0.2.1",
    "keycode": "^2.1.9",
    "lodash": "^4.17.4",
    "material-ui": "^1.0.0-beta.34",
--- a/src/components/home/HomeComponent.tsx
+++ b/src/components/home/HomeComponent.tsx
@@ -56,7 +56,7 @@ import {
 import { IHomeComponentProps } from './IHomeComponentProps'
 import { IHomeComponentState } from './IHomeComponentState'

-const drawerWidth = 240
+const drawerWidth = 220
 const styles = (theme: any) => ({
  root: {
    width: '100%',
@@ -99,7 +99,7 @@ const styles = (theme: any) => ({
    backgroundColor: '#EEEEEE'
  },
  content: {
-    backgroundColor: 'transparent',    
+    backgroundColor: 'transparent',
    width: '100%',
    flexGrow: 1,
    padding: theme.spacing.unit * 1,
@@ -191,49 +191,49 @@ export class HomeComponent extends Component<IHomeComponentProps, IHomeComponent
  render() {
    const HR = HomeRouter as any
    const { loaded, authed, loadDataStream, mergedPosts, hasMorePosts, showSendFeedback, translate, classes, theme } = this.props
-    const {drawerOpen} = this.state
+    const { drawerOpen } = this.state
    const drawer = (
      <>

-        <NavLink to='/'>
-          <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
-            <ListItemIcon>
-              <SvgHome />
-            </ListItemIcon>
-            <ListItemText inset primary={translate!('sidebar.home')} />
-          </MenuItem>
-        </NavLink>
-        <NavLink to={`/${this.props.uid}`}>
-          <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
-            <ListItemIcon>
-              <SvgAccountCircle />
-            </ListItemIcon>
-            <ListItemText inset primary={translate!('sidebar.profile')} />
-          </MenuItem>
-        </NavLink>
-        <NavLink to='/people'>
-          <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
-            <ListItemIcon>
-              <SvgPeople />
-            </ListItemIcon>
-            <ListItemText inset primary={translate!('sidebar.people')} />
-          </MenuItem>
-        </NavLink>
-        <Divider />
-        <NavLink to='/settings'>
-          <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
-            <ListItemIcon>
-              <SvgSettings />
-            </ListItemIcon>
-            <ListItemText inset primary={translate!('sidebar.settings')} />
-          </MenuItem>
-        </NavLink>
-        <MenuItem onClick={() => showSendFeedback!()} style={{ color: 'rgb(117, 117, 117)' }}>
+      <NavLink to='/'>
+        <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
          <ListItemIcon>
-            <SvgFeedback />
+            <SvgHome />
          </ListItemIcon>
-          <ListItemText inset primary={translate!('sidebar.sendFeedback')} />
+          <ListItemText inset primary={translate!('sidebar.home')} />
        </MenuItem>
+      </NavLink>
+      <NavLink to={`/${this.props.uid}`}>
+        <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
+          <ListItemIcon>
+            <SvgAccountCircle />
+          </ListItemIcon>
+          <ListItemText inset primary={translate!('sidebar.profile')} />
+        </MenuItem>
+      </NavLink>
+      <NavLink to='/people'>
+        <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
+          <ListItemIcon>
+            <SvgPeople />
+          </ListItemIcon>
+          <ListItemText inset primary={translate!('sidebar.people')} />
+        </MenuItem>
+      </NavLink>
+      <Divider />
+      <NavLink to='/settings'>
+        <MenuItem style={{ color: 'rgb(117, 117, 117)' }}>
+          <ListItemIcon>
+            <SvgSettings />
+          </ListItemIcon>
+          <ListItemText inset primary={translate!('sidebar.settings')} />
+        </MenuItem>
+      </NavLink>
+      <MenuItem onClick={() => showSendFeedback!()} style={{ color: 'rgb(117, 117, 117)' }}>
+        <ListItemIcon>
+          <SvgFeedback />
+        </ListItemIcon>
+        <ListItemText inset primary={translate!('sidebar.sendFeedback')} />
+      </MenuItem>
      </>
    )

@@ -245,7 +245,6 @@ export class HomeComponent extends Component<IHomeComponentProps, IHomeComponent
          <Hidden mdUp>
            <Drawer
              variant='temporary'
-              anchor={anchor}
              open={this.state.drawerOpen}
              classes={{
                paper: classes.drawerPaper,
@@ -258,8 +257,8 @@ export class HomeComponent extends Component<IHomeComponentProps, IHomeComponent
              <div>
                <div className={classes.drawerHeader} />
                <MenuList style={{ color: 'rgb(117, 117, 117)', width: '210px' }}>
-                <Divider />
-                {drawer}
+                  <Divider />
+                  {drawer}
                </MenuList>
              </div>
            </Drawer>
@@ -273,8 +272,8 @@ export class HomeComponent extends Component<IHomeComponentProps, IHomeComponent
              }}
            >
              <div>
-              <MenuList className={classes.menu} style={{ color: 'rgb(117, 117, 117)', width: '210px' }}>
-                {drawer}
+                <MenuList className={classes.menu} style={{ color: 'rgb(117, 117, 117)', width: '210px' }}>
+                  {drawer}
                </MenuList>
              </div>
            </Drawer>
--- a/src/components/homeHeader/HomeHeaderComponent.tsx
+++ b/src/components/homeHeader/HomeHeaderComponent.tsx
@@ -2,6 +2,7 @@
 import React, { Component } from 'react'
 import { NavLink } from 'react-router-dom'
 import { connect } from 'react-redux'
+import classNames from 'classnames'

 // - Material UI
 import SvgDehaze from 'material-ui-icons/Dehaze'
@@ -172,7 +173,8 @@ export class HomeHeaderComponent extends Component<IHomeHeaderComponentProps, IH

  // Render app DOM component
  render () {
-    const { classes , translate} = this.props
+    const { classes , translate, theme} = this.props
+    const anchor = theme.direction === 'rtl' ? 'right' : 'left'
    return (

      <AppBar position='fixed' color='secondary'>
@@ -188,7 +190,7 @@ export class HomeHeaderComponent extends Component<IHomeHeaderComponentProps, IH
          </Typography>
          <div className='homeHeader__title-root'>
          <Hidden smDown>
-           <div className='homeHeader__title'>{this.props.title}</div> 
+           <div className={classNames({'homeHeader__title-left': anchor === 'left', 'homeHeader__title-right': anchor === 'right' })}>{this.props.title}</div> 
           </Hidden>
          </div>

@@ -271,4 +273,4 @@ const mapStateToProps = (state: any, ownProps: IHomeHeaderComponentProps) => {
 }

 // - Connect component to redux store
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(HomeHeaderComponent as any) as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(HomeHeaderComponent as any) as any)
--- a/src/components/homeHeader/IHomeHeaderComponentProps.ts
+++ b/src/components/homeHeader/IHomeHeaderComponentProps.ts
@@ -65,6 +65,11 @@ export interface IHomeHeaderComponentProps {
   * Material ui theme style
   */
  classes?: any
+    
+  /**
+   * Theme
+   */
+  theme?: any

  /**
   * Translate to locale string
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -676,9 +676,7 @@ g__input-underline::after {
 .homeHeader__title-root {
  flex: 1; }

-.homeHeader__title {
-  border-left: 1px solid #fff;
-  padding-left: 24px;
+.homeHeader__title, .homeHeader__title-right, .homeHeader__title-left {
  margin-left: 24px;
  line-height: 32px;
  font-weight: 500;
@@ -687,6 +685,14 @@ g__input-underline::after {
  -webkit-font-smoothing: antialiased;
  color: #fff; }

+.homeHeader__title-right {
+  border-right: 1px solid #fff;
+  padding-right: 24px; }
+
+.homeHeader__title-left {
+  border-left: 1px solid #fff;
+  padding-left: 24px; }
+
 .homeHeader__right {
  padding-left: 30px;
  padding-right: 30px;
--- a/src/styles/components/_homeHeader.scss
+++ b/src/styles/components/_homeHeader.scss
@@ -3,8 +3,6 @@
 }

 .homeHeader__title {
-  border-left: 1px solid #fff;
-  padding-left: 24px;
  margin-left: 24px;
  line-height: 32px;
  font-weight: 500;
@@ -14,6 +12,17 @@
  color: #fff;
 }

+.homeHeader__title-right {
+  @extend .homeHeader__title;
+  border-right: 1px solid #fff;
+  padding-right: 24px;    
+}
+.homeHeader__title-left {
+  @extend .homeHeader__title;
+  border-left: 1px solid #fff;
+  padding-left: 24px;  
+}
+
 .homeHeader__right {
  padding-left: 30px;
  padding-right: 30px;
--- a/yarn.lock
+++ b/yarn.lock
@@ -1671,7 +1671,7 @@ debug@^3.1.0:
  dependencies:
    ms "2.0.0"

-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"

@@ -3199,7 +3199,7 @@ import-local@^0.1.1:
    pkg-dir "^2.0.0"
    resolve-cwd "^2.0.0"

-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"

@@ -4050,6 +4050,12 @@ jss-props-sort@^6.0.0:
  version "6.0.0"
  resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323"

+jss-rtl@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/jss-rtl/-/jss-rtl-0.2.1.tgz#06fcde4a9369f8c6f660b700f1c68a5d7742eebb"
+  dependencies:
+    rtl-css-js "^1.7.0"
+
 jss-template@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.1.tgz#09aed9d86cc547b07f53ef355d7e1777f7da430a"
@@ -4224,10 +4230,6 @@ lodash-es@^4.17.4, lodash-es@^4.17.5, lodash-es@^4.2.1:
  version "4.17.5"
  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.5.tgz#9fc6e737b1c4d151d8f9cae2247305d552ce748f"

-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-
 lodash._baseuniq@~4.6.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -4235,28 +4237,10 @@ lodash._baseuniq@~4.6.0:
    lodash._createset "~4.0.0"
    lodash._root "~3.0.0"

-lodash._bindcallback@*:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"

-lodash._getnative@*, lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-
 lodash._reinterpolate@~3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -4309,10 +4293,6 @@ lodash.mergewith@^4.6.0:
  version "4.6.1"
  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"

-lodash.restparam@*:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-
 lodash.startswith@^4.2.1:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/lodash.startswith/-/lodash.startswith-4.2.1.tgz#c598c4adce188a27e53145731cdc6c0e7177600c"
@@ -6415,7 +6395,7 @@ readable-stream@~1.1.10:
    isarray "0.0.1"
    string_decoder "~0.10.x"

-readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0:
+readdir-scoped-modules@^1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.0.2.tgz#9fafa37d286be5d92cbaebdee030dc9b5f406747"
  dependencies:
@@ -6756,6 +6736,10 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
    hash-base "^2.0.0"
    inherits "^2.0.1"

+rtl-css-js@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.8.0.tgz#af8ccdf5944bd8d6a2657fcf2e4a4e9adf62361b"
+
 run-async@^2.2.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
@@ -6851,11 +6835,11 @@ semver-diff@^2.0.0:
  dependencies:
    semver "^5.0.3"

-"semver@2 >=2.2.1 || 3.x || 4 || 5", "semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", "semver@^2.3.0 || 3.x || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@~5.4.1:
+"semver@2 >=2.2.1 || 3.x || 4 || 5", "semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", "semver@^2.3.0 || 3.x || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@~5.4.1:
  version "5.4.1"
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"

-semver@^5.0.1, semver@^5.0.3, semver@^5.5.0:
+semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.5.0:
  version "5.5.0"
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"

@@ -7909,7 +7893,7 @@ vali-date@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/vali-date/-/vali-date-1.0.0.tgz#1b904a59609fb328ef078138420934f6b86709a6"

-validate-npm-package-license@*, validate-npm-package-license@^3.0.1:
+validate-npm-package-license@^3.0.1:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
  dependencies: