page component style improvements

Author: ShMcK

lib/components/Page/Hints/index.js

@@ -11,5 +11,7 @@ exports.Hints = function (_a) {
         return null;
     }
     var hint = hints[hintPosition];
-    return (React.createElement(Card_1.Card, {className: 'cr-task-hints'}, React.createElement(Card_1.CardHeader, {title: 'Hints', avatar: React.createElement(help_1.default, null), actAsExpander: true, showExpandableButton: true}), React.createElement(Card_1.CardText, {className: 'cr-task-hint', expandable: true}, React.createElement(index_1.Markdown, null, hint)), React.createElement(Card_1.CardActions, {expandable: true, className: 'cr-task-hints-actions'}, React.createElement(HintButton_1.HintButton, {type: 'prev', label: 'Previous', hintPosition: hintPosition, hintsLength: hints.length}), React.createElement(HintButton_1.HintButton, {type: 'next', label: 'Next', hintPosition: hintPosition, hintsLength: hints.length}))));
+    return (React.createElement(Card_1.Card, {className: 'cr-task-hints'}, React.createElement(Card_1.CardHeader, {title: 'Hints', avatar: React.createElement(help_1.default, null), actAsExpander: true, showExpandableButton: true}), React.createElement(Card_1.CardText, {className: 'cr-task-hint', expandable: true}, React.createElement(index_1.Markdown, null, hint)), hints.length > 1
+        ? React.createElement(Card_1.CardActions, {expandable: true, className: 'cr-task-hints-actions'}, React.createElement(HintButton_1.HintButton, {type: 'prev', label: 'Previous', hintPosition: hintPosition, hintsLength: hints.length}), React.createElement(HintButton_1.HintButton, {type: 'next', label: 'Next', hintPosition: hintPosition, hintsLength: hints.length}))
+        : null));
 };

lib/components/Page/Tasks/Task.js

@@ -8,7 +8,7 @@ function getStatus(index, taskPosition, testRun) {
         case index < taskPosition:
             return colors_1.lightGreen200;
         case testRun:
-            return colors_1.orange500;
+            return colors_1.orange200;
         default:
             return 'inherit';
     }

lib/components/Progress/ProgressPage.js

@@ -16,9 +16,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 var React = require('react');
 var react_redux_1 = require('react-redux');
 var actions_1 = require('../../actions');
-var classnames = require('classnames');
 var List_1 = require('material-ui/List');
 var progressIcon_1 = require('./progressIcon');
+var colors_1 = require('material-ui/styles/colors');
 var ProgressPage = (function (_super) {
     __extends(ProgressPage, _super);
     function ProgressPage() {
@@ -29,26 +29,19 @@ var ProgressPage = (function (_super) {
         var earlierChapter = chapterIndex < position.chapter;
         var currentChapter = chapterIndex === position.chapter;
         var earlierOrCurrentPage = pageIndex <= position.page;
-        if (isActive || earlierChapter ||
-            (currentChapter && earlierOrCurrentPage)) {
-            return true;
-        }
-        else {
-            return null;
-        }
+        return isActive || earlierChapter ||
+            (currentChapter && earlierOrCurrentPage);
     };
     ProgressPage.prototype.render = function () {
         var _a = this.props, page = _a.page, position = _a.position, chapterIndex = _a.chapterIndex, pageIndex = _a.pageIndex, selectPage = _a.selectPage;
         var isActive = chapterIndex === position.chapter && pageIndex === position.page;
-        return (React.createElement(List_1.ListItem, {className: classnames({
-            'page': true,
-            'page-isDisabled': !this.canActivate(isActive)
-        }), primaryText: (pageIndex + 1) + ". " + page.title, secondaryText: page.description, leftIcon: progressIcon_1.progressIcon(page.completed, isActive), onClick: this.canActivate(isActive)
+        var canActivate = this.canActivate(isActive);
+        return (React.createElement(List_1.ListItem, {className: 'page', style: !canActivate ? { color: colors_1.grey400 } : {}, primaryText: (pageIndex + 1) + ". " + page.title, secondaryText: canActivate ? page.description : '', leftIcon: progressIcon_1.progressIcon(page.completed, isActive), onClick: canActivate
             ? selectPage.bind(this, {
                 chapter: chapterIndex,
                 page: pageIndex
             })
-            : null}));
+            : function () { return; }}));
     };
     ;
     ProgressPage = __decorate([

src/components/Page/Hints/index.tsx

@@ -26,23 +26,26 @@ export const Hints: React.StatelessComponent<{
       >
         <Markdown>{hint}</Markdown>
       </CardText>
-      <CardActions
-        expandable={true}
-        className='cr-task-hints-actions'
-      >
-        <HintButton
-          type='prev'
-          label='Previous'
-          hintPosition={hintPosition}
-          hintsLength={hints.length}
-        />
-        <HintButton
-          type='next'
-          label='Next'
-          hintPosition={hintPosition}
-          hintsLength={hints.length}
-        />
-      </CardActions>
+      {hints.length > 1
+        ? <CardActions
+          expandable={true}
+          className='cr-task-hints-actions'
+        >
+          <HintButton
+            type='prev'
+            label='Previous'
+            hintPosition={hintPosition}
+            hintsLength={hints.length}
+          />
+          <HintButton
+            type='next'
+            label='Next'
+            hintPosition={hintPosition}
+            hintsLength={hints.length}
+          />
+        </CardActions>
+        : null
+      }
     </Card>
     );
 };

src/components/Page/Tasks/Task.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {Markdown} from '../../index';
 // import {TaskCheckbox} from './TaskCheckbox';
 import {ListItem} from 'material-ui/List';
-import {lightGreen200, orange500} from 'material-ui/styles/colors';
+import {lightGreen200, orange200} from 'material-ui/styles/colors';
 
 function getStatus(
   index: number, taskPosition: number, testRun: boolean
@@ -11,7 +11,7 @@ function getStatus(
     case index < taskPosition:
       return lightGreen200;
     case testRun:
-      return orange500;
+      return orange200;
     default:
       return 'inherit';
   }

src/components/Progress/ProgressPage.tsx

@@ -4,6 +4,7 @@ import {pageSet, setRoute, testsLoad} from '../../actions';
 import * as classnames from 'classnames';
 import {ListItem} from 'material-ui/List';
 import {progressIcon} from './progressIcon';
+import {grey400} from 'material-ui/styles/colors';
 
 @connect(null, (dispatch) => {
   return {
@@ -22,32 +23,27 @@ export class ProgressPage extends React.Component<{
     const earlierChapter = chapterIndex < position.chapter;
     const currentChapter = chapterIndex === position.chapter;
     const earlierOrCurrentPage = pageIndex <= position.page;
-    if (isActive || earlierChapter ||
-      (currentChapter && earlierOrCurrentPage)) {
-      return true;
-    } else {
-      return null;
-    }
+    return isActive || earlierChapter ||
+      (currentChapter && earlierOrCurrentPage);
   }
   render() {
     const {page, position, chapterIndex, pageIndex, selectPage} = this.props;
     const isActive = chapterIndex === position.chapter && pageIndex === position.page;
+    const canActivate = this.canActivate(isActive);
     return (
       <ListItem
-        className={classnames({
-          'page': true,
-          'page-isDisabled': !this.canActivate(isActive)
-        })}
+        className='page'
+        style={!canActivate ? {color: grey400} : {}}
         primaryText={`${pageIndex + 1}. ${page.title}`}
-        secondaryText={page.description}
+        secondaryText={canActivate ? page.description : ''}
         leftIcon={progressIcon(page.completed, isActive)}
         onClick={
-          this.canActivate(isActive)
+          canActivate
             ? selectPage.bind(this, {
               chapter: chapterIndex,
               page: pageIndex
             })
-            : null
+            : function () { return; }
           }
       />
     );

src/components/progress/_progress.less

@@ -13,12 +13,8 @@
       padding-left: 15px;
       margin-top: 0;
     }
-    .page .page-isDisabled {
-      color: rgba(0, 0, 0, 0.5);
-      background: white;
-      &:hover {
-        background: white;
-      }
+    .page.page-isDisabled {
+      color: #E0E0E0 !important;
     }
   }
 }