onPageComplete component

Author: ShMcK

lib/components/Page/PageComplete/index.js

@@ -1,10 +1,20 @@
 "use strict";
 var React = require('react');
-var List_1 = require('material-ui/List');
+var Card_1 = require('material-ui/Card');
 var index_1 = require('../../index');
+var colors_1 = require('material-ui/styles/colors');
+var styles = {
+    backgroundColor: colors_1.cyan500,
+    position: 'fixed',
+    bottom: '20px',
+    padding: '10px 15px 30px',
+    right: '0px',
+    margin: '0',
+    width: '400px',
+};
 exports.PageComplete = function (_a) {
     var page = _a.page;
     return (React.createElement("div", {className: 'cr-page-onComplete'}, page.completed && page.onPageComplete
-        ? React.createElement(List_1.ListItem, {key: 'page-complete'}, React.createElement(index_1.Markdown, null, page.onPageComplete))
+        ? React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, null, page.onPageComplete)))
         : null));
 };

lib/components/Page/ProgressBar.js

@@ -1,8 +1,14 @@
 "use strict";
 var React = require('react');
 var LinearProgress_1 = require('material-ui/LinearProgress');
+var style = {
+    height: '10px'
+};
 exports.ProgressBar = function (_a) {
-    var taskPosition = _a.taskPosition, taskCount = _a.taskCount;
+    var taskPosition = _a.taskPosition, taskCount = _a.taskCount, completed = _a.completed;
     var progress = (taskPosition / taskCount) * 100;
-    return (React.createElement(LinearProgress_1.default, {mode: 'determinate', value: progress, style: { height: '10px' }}));
+    if (completed) {
+        return null;
+    }
+    return (React.createElement(LinearProgress_1.default, {mode: 'determinate', value: progress, style: style}));
 };

lib/components/Page/index.js

@@ -37,7 +37,7 @@ var Page = (function (_super) {
         var task = taskPosition <= tasks.length ? tasks[taskPosition] : null;
         var allComplete = taskPosition >= tasks.length;
         console.log('page', page);
-        return (React.createElement("section", {className: 'cr-page'}, React.createElement(PageContent_1.PageContent, __assign({}, this.props)), React.createElement(Tasks_1.Tasks, __assign({}, this.props, {completed: page.completed})), React.createElement("div", {className: 'listEnd', ref: 'listEnd'}), React.createElement(PageComplete_1.PageComplete, __assign({}, this.props)), React.createElement(Hints_1.Hints, {task: task, hintPosition: hintPosition}), React.createElement(PageToolbar_1.PageToolbar, __assign({}, this.props), React.createElement(ProgressBar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length}))));
+        return (React.createElement("section", {className: 'cr-page'}, React.createElement(PageContent_1.PageContent, __assign({}, this.props)), React.createElement(Tasks_1.Tasks, __assign({}, this.props, {completed: page.completed})), React.createElement("div", {className: 'listEnd', ref: 'listEnd'}), React.createElement(PageComplete_1.PageComplete, __assign({}, this.props)), React.createElement(Hints_1.Hints, {task: task, hintPosition: hintPosition}), React.createElement(PageToolbar_1.PageToolbar, __assign({}, this.props), React.createElement(ProgressBar_1.ProgressBar, {taskPosition: taskPosition, taskCount: tasks.length, completed: page.completed}))));
     };
     return Page;
 }(React.Component));

src/components/Page/PageComplete/_page-complete.less

@@ -1,15 +1,28 @@
 import * as React from 'react';
-import {ListItem} from 'material-ui/List';
+import {Card, CardText} from 'material-ui/Card';
 import {Markdown} from '../../index';
+import {cyan500} from 'material-ui/styles/colors';
+
+const styles = {
+  backgroundColor: cyan500,
+  position: 'fixed',
+  bottom: '20px',
+  padding: '10px 15px 30px',
+  right: '0px',
+  margin: '0',
+  width: '400px',
+};
 
 export const PageComplete: React.StatelessComponent<{
   page: CR.Page
 }> = ({page}) => (
   <div className='cr-page-onComplete'>
     {page.completed && page.onPageComplete
-        ? <ListItem key='page-complete'>
-            <Markdown>{page.onPageComplete}</Markdown>
-          </ListItem>
+        ? <Card style={styles}>
+            <CardText>
+                <Markdown>{page.onPageComplete}</Markdown>
+            </CardText>
+          </Card>
         : null
     }
   </div>

src/components/Page/PageComplete/index.tsx

@@ -1,15 +1,22 @@
 import * as React from 'react';
 import LinearProgress from 'material-ui/LinearProgress';
 
+const style = {
+  height: '10px'
+};
+
 export const ProgressBar: React.StatelessComponent<{
-  taskPosition: number, taskCount: number
-}> = ({taskPosition, taskCount}) => {
+  taskPosition: number, taskCount: number, completed: boolean
+}> = ({taskPosition, taskCount, completed}) => {
   const progress: number = (taskPosition / taskCount) * 100;
+  if (completed) {
+    return null;
+  }
   return (
     <LinearProgress
       mode='determinate'
       value={progress}
-      style={{height: '10px'}}
+      style={style}
     />
   );
 };

src/components/Page/ProgressBar.tsx

@@ -34,13 +34,23 @@ render() {
     <section className='cr-page'>
       <PageContent {...this.props} />
 
-      <Tasks {...this.props} completed={page.completed}/>
-      <div className='listEnd' ref='listEnd' />
+      <Tasks
+        {...this.props}
+        completed={page.completed}
+      />
 
+      <div className='listEnd' ref='listEnd' />
       <PageComplete {...this.props} />
-      <Hints task={task} hintPosition={hintPosition} />
+      <Hints
+        task={task}
+        hintPosition={hintPosition}
+      />
       <PageToolbar {...this.props}>
-        <ProgressBar taskPosition={taskPosition} taskCount={tasks.length}/>
+        <ProgressBar
+          taskPosition={taskPosition}
+          taskCount={tasks.length}
+          completed={page.completed}
+        />
       </PageToolbar>
     </section>
     );

src/components/Page/index.tsx

@@ -1,7 +1,6 @@
 @import 'Tasks/_tasks';
 @import 'Chapter/_chapter';
 @import 'PageToolbar/_toolbar';
-@import 'PageComplete/_page-complete';
 @import 'Hints/_hints';
 
 .cr-page {