Display module title in timetable cell (#709)

* Add option to display module titles in timetable cells

* Use btn-outline-secondary when title button is disabled

* Use text icon for title button

* Fix first theme colour not displaying on timetable

* Hide title button in vertical mode

Author: shanwpf

www/src/js/actions/theme.js

@@ -24,3 +24,11 @@ export function toggleTimetableOrientation(): FSA {
     payload: null,
   };
 }
+
+export const TOGGLE_TITLE_DISPLAY: string = 'TOGGLE_TITLE_DISPLAY';
+export function toggleTitleDisplay(): FSA {
+  return {
+    type: TOGGLE_TITLE_DISPLAY,
+    payload: null,
+  };
+}

www/src/js/reducers/index.test.js

@@ -32,6 +32,7 @@ const exportData: ExportData = {
   theme: {
     id: 'google',
     timetableOrientation: VERTICAL,
+    showTitle: true,
   },
   settings: {
     mode: 'DARK',
@@ -78,5 +79,6 @@ test('reducers should set export data state', () => {
   expect(state.theme).toEqual({
     id: 'google',
     timetableOrientation: VERTICAL,
+    showTitle: true,
   });
 });

www/src/js/reducers/theme.js

@@ -4,7 +4,12 @@ import type { ColorMapping, ThemeState } from 'types/reducers';
 import type { Theme } from 'types/settings';
 
 import { SET_EXPORTED_DATA } from 'actions/export';
-import { SELECT_THEME, CYCLE_THEME, TOGGLE_TIMETABLE_ORIENTATION } from 'actions/theme';
+import {
+  SELECT_THEME,
+  CYCLE_THEME,
+  TOGGLE_TIMETABLE_ORIENTATION,
+  TOGGLE_TITLE_DISPLAY,
+} from 'actions/theme';
 import themes from 'data/themes.json';
 import { VERTICAL, HORIZONTAL } from 'types/reducers';
 
@@ -14,6 +19,7 @@ export const defaultThemeState: ThemeState = {
   id: 'eighties',
   colors: defaultColorsState,
   timetableOrientation: HORIZONTAL,
+  showTitle: false,
 };
 export const themeIds = themes.map((obj: Theme) => obj.id);
 
@@ -39,6 +45,11 @@ function theme(state: ThemeState = defaultThemeState, action: FSA): ThemeState {
       };
     case SET_EXPORTED_DATA:
       return action.payload.theme;
+    case TOGGLE_TITLE_DISPLAY:
+      return {
+        ...state,
+        showTitle: !state.showTitle,
+      };
     default:
       return state;
   }

www/src/js/types/reducers.js

@@ -73,6 +73,7 @@ export const HORIZONTAL: TimetableOrientation = 'HORIZONTAL';
 export type ThemeState = {
   +id: string,
   +timetableOrientation: TimetableOrientation,
+  +showTitle: boolean,
 };
 
 /* settings */

www/src/js/views/components/icons/index.js

@@ -31,6 +31,7 @@ import Search from 'react-feather/dist/icons/search';
 import Sidebar from 'react-feather/dist/icons/sidebar';
 import Twitter from 'react-feather/dist/icons/twitter';
 import Trash2 from 'react-feather/dist/icons/trash-2';
+import Type from 'react-feather/dist/icons/type';
 
 export {
   AlertTriangle,
@@ -64,4 +65,5 @@ export {
   Sidebar,
   Twitter,
   Trash2,
+  Type,
 };

www/src/js/views/timetable/Timetable.jsx

@@ -21,6 +21,7 @@ type Props = {
   lessons: TimetableArrangement,
   isVerticalOrientation: boolean,
   isScrolledHorizontally: boolean,
+  showTitle: boolean,
   onModifyCell: Function,
 };
 
@@ -31,6 +32,7 @@ class Timetable extends PureComponent<Props> {
   static defaultProps = {
     isVerticalOrientation: false,
     isScrolledHorizontally: false,
+    showTitle: false,
     onModifyCell: noop,
   };
 
@@ -93,6 +95,7 @@ class Timetable extends PureComponent<Props> {
                 endingIndex={endingIndex}
                 onModifyCell={this.props.onModifyCell}
                 verticalMode={this.props.isVerticalOrientation}
+                showTitle={this.props.showTitle}
                 dayLessonRows={this.props.lessons[day] || [[]]}
                 isScrolledHorizontally={this.props.isScrolledHorizontally}
                 isCurrentDay={index === currentDayIndex}

www/src/js/views/timetable/TimetableActions.jsx

@@ -1,9 +1,10 @@
 // @flow
 import type { Semester } from 'types/modules';
 import type { SemTimetableConfig } from 'types/timetables';
+import classnames from 'classnames';
 
 import React from 'react';
-import { Sidebar } from 'views/components/icons';
+import { Sidebar, Type } from 'views/components/icons';
 import ShareTimetable from './ShareTimetable';
 import ExportMenu from './ExportMenu';
 
@@ -13,11 +14,14 @@ type Props = {
   semester: Semester,
   timetable: SemTimetableConfig,
   isVerticalOrientation: boolean,
+  showTitle: boolean,
   toggleTimetableOrientation: Function,
+  toggleTitleDisplay: Function,
 };
 
 function TimetableActions(props: Props) {
-  const { isVerticalOrientation } = props;
+  const { isVerticalOrientation, showTitle } = props;
+
   return (
     <div
       className="btn-toolbar justify-content-between"
@@ -27,12 +31,22 @@ function TimetableActions(props: Props) {
       <div className={styles.leftButtonGroup} role="group" aria-label="Timetable manipulation">
         <button
           type="button"
-          className="btn btn-outline-primary btn-svg"
+          className={classnames(styles.orientationBtn, 'btn btn-outline-primary btn-svg')}
           onClick={props.toggleTimetableOrientation}
         >
           <Sidebar className={styles.sidebarIcon} />
           {isVerticalOrientation ? 'Horizontal Mode' : 'Vertical Mode'}
         </button>
+
+        <button
+          type="button"
+          className={classnames(styles.titleBtn, 'btn-outline-primary btn btn-svg')}
+          onClick={props.toggleTitleDisplay}
+          disabled={isVerticalOrientation}
+        >
+          <Type className={styles.titleIcon} />
+          {showTitle ? 'Hide Titles' : 'Show Titles'}
+        </button>
       </div>
 
       <div className={styles.rightButtonGroup} role="group" aria-label="Timetable exporting">

www/src/js/views/timetable/TimetableActions.scss

@@ -9,6 +9,22 @@
   }
 }
 
+.titleIcon {
+  composes: svg svg-small from global;
+}
+
+.orientationBtn {
+  @include vertical-mode {
+    flex: 1;
+  }
+}
+
+.titleBtn {
+  @include vertical-mode {
+    display: none;
+  }
+}
+
 .leftButtonGroup,
 .rightButtonGroup {
   display: flex;
@@ -42,12 +58,9 @@
 }
 
 @mixin layout-2 {
+  .rightButtonGroup,
   .leftButtonGroup {
-    width: 33%;
-  }
-
-  .rightButtonGroup {
-    width: 66%;
+    width: 100%;
   }
 }
 
@@ -61,13 +74,17 @@
 }
 
 .leftButtonGroup {
-  :global(.btn) {
-    width: 100%;
+  justify-content: space-between;
+  min-width: 19rem;
+
+  > * {
+    width: calc(50% - 0.25rem);
   }
 }
 
 :global(.verticalMode) {
-  .rightButtonGroup {
+  .rightButtonGroup,
+  .leftButtonGroup {
     min-width: 0;
   }
 

www/src/js/views/timetable/TimetableCell.jsx

@@ -12,11 +12,16 @@ type Props = {
   lesson: Lesson,
   style: Object,
   isScrolledHorizontally: boolean,
+  showTitle: boolean,
   onModifyCell?: Function,
 };
 
 function TimetableCell(props: Props) {
   const lesson = props.lesson;
+  const moduleName = props.showTitle
+    ? `${lesson.ModuleCode} ${lesson.ModuleTitle}`
+    : lesson.ModuleCode;
+
   return (
     <button
       // $FlowFixMe When object spread type actually works
@@ -39,7 +44,7 @@ function TimetableCell(props: Props) {
       style={props.style}
     >
       <div className={styles.cellContainer}>
-        <div className={styles.moduleCode}>{lesson.ModuleCode}</div>
+        <div className={styles.moduleName}>{moduleName}</div>
         <div>
           {LESSON_TYPE_ABBREV[lesson.LessonType]} [{lesson.ClassNo}]
         </div>

www/src/js/views/timetable/TimetableCell.scss

@@ -69,7 +69,7 @@ $cell-border-radius: 6px;
   z-index: $timetable-selected-cell-scrolled-z-index;
 }
 
-.moduleCode {
+.moduleName {
   font-weight: 600;
   font-size: $font-size-xs;
 }