19 admim editor

.babelrc

@@ -2,7 +2,7 @@
   "presets": ["es2015", "react", "stage-0"],
   "plugins": [
     ["react-intl", {
-        "messagesDir": "./"
+        "messagesDir": "./translations"
     }]
   ]
 }

.eslintignore

@@ -1,5 +1,7 @@
 node_modules
 webpack.*
 index.js
+translator.js
 dev.js
 .public
+translation-*.js

.gitignore

@@ -3,3 +3,4 @@ node_modules
 elm-stuff
 *.log
 *.DS_Store
+translations

generate-translations.js

@@ -0,0 +1,41 @@
+var glob = require("glob");
+var fs = require('fs');
+var object = require('lodash/fp/object');
+
+var availableTranslations = ['ru'];
+
+var fileHeader = "module.exports = ";
+
+glob("translations/**/*.json", function (er, files) {
+  var messagesResult = {};
+  files.map(function(file) {
+    var messagesArray = require('./'+file);
+    messagesArray.map(function(message) {
+      messagesResult[message.id] = message.defaultMessage;
+    });
+  });
+  writeTranslation('default', fileHeader + JSON.stringify(messagesResult, null, "\t"));
+  availableTranslations.map(function(translation) {
+    var fileName = './src/translation-'+translation+'.js';
+    fs.stat(fileName, function(err, stat) {
+        if(err == null) {
+            var availableTranslation = require(fileName);
+            writeTranslation(translation, fileHeader + JSON.stringify(object.merge(messagesResult, availableTranslation), null, "\t"));
+        } else if(err.code == 'ENOENT') {
+            writeTranslation(translation, fileHeader + JSON.stringify(messagesResult, null, "\t"));
+        } else {
+            console.log('Some other error: ', err.code);
+        }
+    });
+  })
+
+});
+
+function writeTranslation(translation, content) {
+  fs.writeFile("./src/translation-"+translation+".js", content, function(err) {
+    if(err) {
+        return console.log(err);
+    }
+    console.log("The "+translation+" translation file was created successfully.");
+  });
+}

lib/ui/Input/Input.jsx

@@ -12,6 +12,7 @@ class Input extends Component {
     type: PropTypes.string.isRequired,
     placeholder: PropTypes.string,
     value: PropTypes.string,
+    focus: PropTypes.bool,
     lg: PropTypes.bool,
     sm: PropTypes.bool,
     inline: PropTypes.bool,

lib/ui/Switch/Switch.jsx

@@ -19,18 +19,12 @@ class Switch extends Component {
     name: '',
   }
 
-  state = {
-    active: this.props.active,
-  }
-
   toggle = () => {
-    this.props.onChange(this.props.name, !this.state.active);
-    this.setState({active: !this.state.active});
+    this.props.onChange(this.props.name, !this.props.active);
   }
 
   render() {
-    const { active } = this.state;
-    const { label } = this.props;
+    const { label, active } = this.props;
 
     const styleNames = cx({
       switcher: true,

lib/ui/Switch/Switch.sass

@@ -4,6 +4,7 @@
   display: inline-block
 
 .switcher
+  cursor: pointer
   vertical-align: middle
   display: inline-block
   position: relative
@@ -20,16 +21,20 @@
     width: calc($h)
     height: @width
     border-radius: 50%
-    background: $gray-light
+    background: $gray
     box-shadow: 0 0 2px -1px rgba(30,30,30,.25)
     left: calc($component-border-width + 1px)
     top: calc($component-border-width + 1px)
     transition: all .25s
     right: auto
 
+  &:hover
+    border-color: $gray
+    background-color: $gray-lighter
+
   &.active
-    border-color: $brand-success
-    background: $brand-success
+    border-color: $brand-success !important
+    background: $brand-success !important
 
     .round
       left: calc($h * 1.2 - $component-border-width - 3px)

lib/ui/styles/variables.sass

@@ -3,9 +3,9 @@
 $gray-darkest:           #263238
 $gray-darker:            #3A3F51
 $gray-dark:              #58666e
-$gray:                   #E4EAEC
-$gray-light:             #D4D6D8
-$gray-lighter:           #f9f9f9
+$gray:                   #D4D6D8
+$gray-light:             #E4EAEC
+$gray-lighter:           #f5f5f5
 
 $brand-primary:         #677AE4
 $brand-success:         #46BE8A

package.json

@@ -33,12 +33,15 @@
     "cookies-js": "^1.2.2",
     "css-loader": "^0.23.1",
     "express": "^4.13.4",
+    "glob": "^7.0.3",
     "history": "^2.0.1",
     "jsonwebtoken": "^5.7.0",
+    "lodash": "^4.11.1",
     "lost": "^6.7.2",
     "moment": "^2.12.0",
     "mongoose": "^4.4.10",
     "morgan": "^1.7.0",
+    "object-hash": "^1.1.2",
     "postcss-alias": "^0.2.2",
     "postcss-autoreset": "^1.1.5",
     "postcss-center": "^1.0.0",
@@ -52,10 +55,12 @@
     "postcss-reporter": "^1.3.3",
     "postcss-size": "^1.0.0",
     "precss": "^1.4.0",
-    "react": "^0.14.8",
+    "react": "^15.0.1",
+    "react-addons-css-transition-group": "^15.0.1",
     "react-css-modules": "^3.7.6",
-    "react-dom": "^0.14.8",
+    "react-dom": "^15.0.1",
     "react-intl": "^2.0.0-rc-1",
+    "react-motion": "^0.4.2",
     "react-router": "^2.0.1",
     "style-loader": "^0.13.1",
     "sugarss": "^0.1.2",

src/admin/components/Admin/Admin.jsx

@@ -1,7 +1,9 @@
 import React, { Component, PropTypes } from 'react';
 import cookies from 'cookies-js';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
 import Navbar from '../Navbar/Navbar';
+import styles from './Admin.sass';
 
 export default class Admin  extends Component {
 
@@ -19,6 +21,7 @@ export default class Admin  extends Component {
 
   static propTypes = {
     children: PropTypes.any.isRequired,
+    location: PropTypes.any.isRequired,
   }
 
   getChildContext() {
@@ -61,7 +64,16 @@ export default class Admin  extends Component {
       <div>
         <Navbar />
         <section>
-          {this.props.children}
+          <ReactCSSTransitionGroup
+            component="div"
+            transitionName={styles}
+            transitionEnterTimeout={500}
+            transitionLeaveTimeout={500}
+          >
+            {React.cloneElement(this.props.children, {
+              key: this.props.location.pathname,
+            })}
+        </ReactCSSTransitionGroup>
         </section>
       </div>
     );

src/admin/components/Admin/Admin.sass

@@ -0,0 +1,14 @@
+.enter
+  opacity: 0.01
+  transform: translateY(100px)
+  transition: all .25s ease
+
+.enter.enterActive
+  opacity: 1
+  transform: translateY(0)
+
+.leave
+  opacity: 0
+
+.leave.leaveActive
+  opacity: 0