klee-contrib · pierr · Jun 3, 2015 · Jun 3, 2015 · Jun 3, 2015 · Jun 3, 2015
diff --git a/application/bar/index.js b/application/bar/index.js
@@ -32,9 +32,9 @@ var barMixin = {
     var className = `bar ${this.props.style.className}`;
     return (
       <div className={className} data-focus='bar'>
-        <div data-focus='bar-app-name'>{this.props.appName}</div>
-        <div data-focus='bar-summary'><this.state.summaryComponent.component {...this.state.summaryComponent.props}/></div>
-        <div data-focus='bar-user-infos'>
+        <div data-focus='bar-content-left'>{this.props.appName}</div>
+        <div data-focus='bar-content-middle'><this.state.summaryComponent.component {...this.state.summaryComponent.props}/></div>
+        <div data-focus='bar-content-right'>
           <i className="mdi-action-language"></i>
           <i className="mdi-social-notifications"></i>
           <i className="mdi-action-account-circle"></i>

diff --git a/application/index.js b/application/index.js
@@ -7,5 +7,6 @@ module.exports = {
   confirmationPopin: require('./confirmation-popin'),
   messageCenter: require('./message-center'),
   contentBar: require('./content-bar'),
-  contentActions: require('./content-actions')
+  contentActions: require('./content-actions'),
+  layout: require('./layout')
 };
diff --git a/application/layout/app-header.js b/application/layout/app-header.js
@@ -0,0 +1,21 @@
+//Needed components
+var Header = require('../header').component;
+var Cartridge = require('../cartridge').component;
+var ContentBar = require('../content-bar').component;
+var Bar = require('../bar').component;
+var ContentActions = require('../content-actions').component;
+
+module.exports = React.createClass({
+  displayName: 'AppHeader',
+  render: function renderApplicationHeader() {
+    return (
+      <Header>
+        <ContentBar>
+          <Bar appName='FOCUS'/>
+          <Cartridge />
+        </ContentBar>
+        <ContentActions />
+      </Header>
+    );
+  }
+});
diff --git a/application/layout/index.js b/application/layout/index.js
@@ -0,0 +1,26 @@
+var builder = require('focus').component.builder;
+var React = require('react');
+var AppHeader = require('./app-header');
+var stylableBehaviour = require('../../mixin/stylable');
+var contentActionsMixin = {
+  mixins: [stylableBehaviour],
+  getDefaultProps: function getDefaultLayoutProps(){
+    return {
+      AppHeader: AppHeader
+    };
+  },
+  /** @inheriteddoc */
+  render: function renderActions() {
+    return (
+      <div className={this._getStyleClassName()} data-focus='layout'>
+        <this.props.AppHeader />
+        <div data-focus='menu-left'><this.props.MenuLeft /></div>
+        <div data-focus='page-content'></div>
+        <footer data-focus='footer'>Team Focus</footer>
+        {this.props.children}
+      </div>
+    );
+  }
+};
+
+module.exports = builder(contentActionsMixin);
diff --git a/common/button/back-to-top/example/index.html b/common/button/back-to-top/example/index.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html class="no-js" lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Focus component examples</title>
+  <meta name="description" content="Example of the component.">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- Place favicon.ico in the root directory -->
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
+  <script src="https://fb.me/react-0.13.3.js"></script>
+  <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
+
+  <!-- Material degign-->
+  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material-wfont.min.css">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/material.min.css">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/css/ripples.min.css">
+  <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/material.min.js"></script>
+  <script src="//cdn.jsdelivr.net/bootstrap.material-design/0.3.0/js/ripples.min.js"></script>
+
+  <!-- Material degign-->
+
+  <script src="/focus-components/dist/js/focus.js"></script>
+  <script src="/focus-components/dist/js/focus-components.js"></script>
+  <script src="/focus-components/example/js/initFocus.js"></script>
+  <link rel="stylesheet" href="/focus-components/dist/css/focus-components.css"/>
+</head>
+<body>
+  <div className="content">
+      <h3>Demo of the go back to the top button</h3>
+      <img src="http://lorempixel.com/800/600/sports/"/>
+      <img src="http://lorempixel.com/800/600/abstract/"/>
+      <img src="http://lorempixel.com/800/600/city/"/>
+      <img src="http://lorempixel.com/800/600/technics/"/>
+      <img src="http://lorempixel.com/800/600/sports/"/>
+      <img src="http://lorempixel.com/800/600/abstract/"/>
+      <img src="http://lorempixel.com/800/600/city/"/>
+      <img src="http://lorempixel.com/800/600/technics/"/>
+  </div>
+  <div id="back-to-top-container"></div>
+  <script type="text/javascript">
+      $(document).ready(function() {$.material.init();});
+  </script>
+  <script type="text/jsx">
+  //Load dependencies.
+  Focus.components = FocusComponents;
+  var BackToTop = Focus.components.common.button.backToTop.component;
+  React.render(<BackToTop/>, document.querySelector("#back-to-top-container"));
+
+  </script>
+
+</body>
+
+</html>
diff --git a/common/button/back-to-top/index.js b/common/button/back-to-top/index.js
@@ -0,0 +1,49 @@
+var React = require('react');
+var builder = require('focus').component.builder;
+var Icon = require('../../icon').component;
+var i18nMixin = require('../../i18n/mixin');
+var stylableMixin = require('../../../mixin/stylable');
+
+function scrollTo(element, to, duration) {
+    if (duration < 0) {return; }
+    var difference = to - element.scrollTop;
+    var perTick = difference / duration * 10;
+
+    setTimeout(function() {
+        element.scrollTop = element.scrollTop + perTick;
+        if (element.scrollTop === to) {return; }
+        scrollTo(element, to, duration - 10);
+    }, 10);
+}
+
+/**
+ * Mixin button.
+ * @type {Object}
+ */
+var buttonMixin = {
+    /** inheritedDoc */
+    mixins: [i18nMixin, stylableMixin],
+    getDefaultProps: function(){
+      return {
+        icon: 'arrow-circle-up',
+        scrollTarget: 'body',
+        duration: 100
+      };
+    },
+    /**
+     * Go back to the top of the page.
+     */
+    goBackToTop: function goBackToTop(){
+      //todo: Add animation
+      scrollTo(document.querySelector(this.props.scrollTarget), 0, this.props.duration);
+      //window.document.body.scrollTop = 0;
+    },
+    /** inheritedDoc */
+    render: function renderInput() {
+      return <button className={`${this._getStyleClassName()}`} data-focus='back-to-top' onClick={this.goBackToTop}>
+        <Icon name={this.props.icon}/> this.i18n('button.backTop')
+      </button>;
+    }
+};
+
+module.exports = builder(buttonMixin);
diff --git a/common/button/back-to-top/style/back-to-top.scss b/common/button/back-to-top/style/back-to-top.scss
@@ -0,0 +1,17 @@
+[data-focus='back-to-top'] {
+  background: none;
+  margin: 0;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 70px;
+  height: 70px;
+  z-index: 100;
+  //display: none;
+  text-decoration: none;
+  color: #ffffff;
+  background-color: #026aa7;
+  i{
+    font-size: 60px;
+  }
+}
diff --git a/common/button/index.js b/common/button/index.js
@@ -1,3 +1,4 @@
 module.exports = {
-	action: require('./action')
+	action: require('./action'),
+	backToTop: require('./back-to-top')
 };
diff --git a/common/form/index.js b/common/form/index.js
@@ -138,7 +138,7 @@ var formMixin = {
   },
   /** @inheritdoc */
   render: function renderForm() {
-    console.log('state form', this.state);
+    //console.log('state form', this.state);
     if(this.props.hasForm){
       return (
         <form

diff --git a/common/list/index.js b/common/list/index.js
@@ -37,7 +37,7 @@ module.exports = React.createClass({
   },
   /** @inheritdoc */
   getInitialState: function(){
-    return { maxElements:  this.props.perPage * page};
+    return { maxElements:  this.props.perPage * this.props.page};
   },
   fetchNextPage: function fetchNextPage(page) {
   /** @inheritdoc */

diff --git a/package.json b/package.json
@@ -40,6 +40,10 @@
       "name": "header",
       "path": "application/header"
     },
+    {
+      "name": "layout",
+      "path": "application/layout"
+    },
     {
       "name": "cartridge",
       "path": "application/cartridge"
@@ -168,6 +172,10 @@
       "name": "button-action",
       "path": "common/button/action"
     },
+    {
+      "name": "button-back-to-top",
+      "path": "common/button/back-to-top"
+    },
     {
       "name": "block",
       "path": "common/block"