From 6b6ff7ca222c861551f4f38a4a2381a168e7681b Mon Sep 17 00:00:00 2001
From: saumya1906 <saumya15172@iiitd.ac.in>
Date: Wed, 9 Aug 2017 23:04:59 +0530
Subject: [PATCH] Issue 266: Tabs added

---
 client/modules/IDE/components/Preferences.jsx | 477 +++++++++---------
 client/modules/IDE/pages/IDEView.jsx          |   1 +
 client/styles/components/_preferences.scss    |   2 +-
 3 files changed, 245 insertions(+), 235 deletions(-)

diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx
index 02e0e770..d2771b2b 100644
--- a/client/modules/IDE/components/Preferences.jsx
+++ b/client/modules/IDE/components/Preferences.jsx
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 // import { bindActionCreators } from 'redux';
 // import { connect } from 'react-redux';
 // import * as PreferencesActions from '../actions/preferences';
@@ -71,240 +72,248 @@ class Preferences extends React.Component {
             <InlineSVG src={exitUrl} alt="Exit Preferences" />
           </button>
         </div>
-        <div className="preference__subheadings">
-          <h4 className="preference__subheading1">General Settings</h4>
-          <h4 className="preference__subheading2">Sketch Settings</h4>
-          <h4 className="preference__subheading2">Accessibility</h4>
-        </div>
-        <div className="preference">
-          <h4 className="preference__title">Theme</h4>
-          <div className="preference__options">
-            <input
-              type="radio"
-              onChange={() => this.props.setTheme('light')}
-              aria-label="light theme on"
-              name="light theme"
-              id="light-theme-on"
-              className="preference__radio-button"
-              value="light"
-              checked={this.props.theme === 'light'}
-            />
-            <label htmlFor="light-theme-on" className="preference__option">Light</label>
-            <input
-              type="radio"
-              onChange={() => this.props.setTheme('dark')}
-              aria-label="dark theme on"
-              name="dark theme"
-              id="dark-theme-on"
-              className="preference__radio-button"
-              value="dark"
-              checked={this.props.theme === 'dark'}
-            />
-            <label htmlFor="dark-theme-on" className="preference__option">Dark</label>
-            <input
-              type="radio"
-              onChange={() => this.props.setTheme('contrast')}
-              aria-label="contrast theme on"
-              name="contrast theme"
-              id="contrast-theme-on"
-              className="preference__radio-button"
-              value="contrast"
-              checked={this.props.theme === 'contrast'}
-            />
-            <label htmlFor="contrast-theme-on" className="preference__option">High contrast</label>
-          </div>
-        </div>
-        <div className="preference">
-          <h4 className="preference__title">Text size</h4>
-          <button
-            className="preference__minus-button"
-            onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
-            aria-label="decrease font size"
-          >
-            <InlineSVG src={minusUrl} alt="Decrease Font Size" />
-            <h6 className="preference__label">Decrease</h6>
-          </button>
-          <input
-            className="preference__value"
-            aria-live="polite"
-            aria-atomic="true"
-            role="status"
-            value={this.props.fontSize}
-            onChange={this.handleUpdateFont}
-            ref={(element) => { this.fontSizeInput = element; }}
-            onClick={() => {
-              this.fontSizeInput.select();
-            }}
-          >
-          </input>
-          <button
-            className="preference__plus-button"
-            onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
-            aria-label="increase font size"
-          >
-            <InlineSVG src={plusUrl} alt="Increase Font Size" />
-            <h6 className="preference__label">Increase</h6>
-          </button>
-        </div>
-        <div className="preference">
-          <h4 className="preference__title">Indentation amount</h4>
-          <button
-            className="preference__minus-button"
-            onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
-            aria-label="decrease indentation amount"
-          >
-            <InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
-            <h6 className="preference__label">Decrease</h6>
-          </button>
-          <input
-            className="preference__value"
-            aria-live="polite"
-            aria-atomic="true"
-            role="status"
-            value={this.props.indentationAmount}
-            onChange={this.handleUpdateIndentation}
-            ref={(element) => { this.indentationInput = element; }}
-            onClick={() => {
-              this.indentationInput.select();
-            }}
-          >
-          </input>
-          <button
-            className="preference__plus-button"
-            onClick={() => this.props.setIndentation(this.props.indentationAmount + 2)}
-            aria-label="increase indentation amount"
-          >
-            <InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
-            <h6 className="preference__label">Increase</h6>
-          </button>
-          <div className="preference__vertical-list">
-            <input
-              type="radio"
-              onChange={this.props.indentWithSpace}
-              aria-label="indentation with space"
-              name="indentation"
-              id="indentation-space"
-              className="preference__radio-button"
-              value="Spaces"
-              checked={!this.props.isTabIndent}
-            />
-            <label htmlFor="indentation-space" className="preference__option">Spaces</label>
-            <input
-              type="radio"
-              onChange={this.props.indentWithTab}
-              aria-label="indentation with tab"
-              name="indentation"
-              id="indentation-tab"
-              className="preference__radio-button"
-              value="Tabs"
-              checked={this.props.isTabIndent}
-            />
-            <label htmlFor="indentation-tab" className="preference__option">Tabs</label>
-          </div>
-        </div>
-        <div className="preference">
-          <h4 className="preference__title">Autosave</h4>
-          <div className="preference__options">
-            <input
-              type="radio"
-              onChange={() => this.props.setAutosave(true)}
-              aria-label="autosave on"
-              name="autosave"
-              id="autosave-on"
-              className="preference__radio-button"
-              value="On"
-              checked={this.props.autosave}
-            />
-            <label htmlFor="autosave-on" className="preference__option">On</label>
-            <input
-              type="radio"
-              onChange={() => this.props.setAutosave(false)}
-              aria-label="autosave off"
-              name="autosave"
-              id="autosave-off"
-              className="preference__radio-button"
-              value="Off"
-              checked={!this.props.autosave}
-            />
-            <label htmlFor="autosave-off" className="preference__option">Off</label>
-          </div>
-        </div>
-        <div className="preference">
-          <h4 className="preference__title">Accessible text-based canvas</h4>
-          <h6 className="preference__subtitle">Used with screen reader</h6>
-          <div className="preference__options">
-            <input
-              type="checkbox"
-              onChange={(event) => {
-                this.props.setTextOutput(event.target.checked);
-              }}
-              aria-label="text output on"
-              name="text output"
-              id="text-output-on"
-              value="On"
-              checked={(this.props.textOutput)}
-            />
-            <label htmlFor="text-output-on" className="preference__option preference__canvas">Plain-text</label>
-            <input
-              type="checkbox"
-              onChange={(event) => {
-                this.props.setGridOutput(event.target.checked);
-              }}
-              aria-label="table output on"
-              name="table output"
-              id="table-output-on"
-              value="On"
-              checked={(this.props.gridOutput)}
-            />
-            <label htmlFor="table-output-on" className="preference__option preference__canvas">Table-text</label>
-            <input
-              type="checkbox"
-              onChange={(event) => {
-                this.props.setSoundOutput(event.target.checked);
-              }}
-              aria-label="sound output on"
-              name="sound output"
-              id="sound-output-on"
-              value="On"
-              checked={(this.props.soundOutput)}
-            />
-            <label htmlFor="sound-output-on" className="preference__option preference__canvas">Sound</label>
-          </div>
-        </div>
-        <div className="preference">
-          <h4 className="preference__title">Lint warning sound</h4>
-          <div className="preference__options">
-            <input
-              type="radio"
-              onChange={() => this.props.setLintWarning(true)}
-              aria-label="lint warning on"
-              name="lint warning"
-              id="lint-warning-on"
-              className="preference__radio-button"
-              value="On"
-              checked={this.props.lintWarning}
-            />
-            <label htmlFor="lint-warning-on" className="preference__option">On</label>
-            <input
-              type="radio"
-              onChange={() => this.props.setLintWarning(false)}
-              aria-label="lint warning off"
-              name="lint warning"
-              id="lint-warning-off"
-              className="preference__radio-button"
-              value="Off"
-              checked={!this.props.lintWarning}
-            />
-            <label htmlFor="lint-warning-off" className="preference__option">Off</label>
-            <button
-              className="preference__preview-button"
-              onClick={() => beep.play()}
-              aria-label="preview sound"
-            >
-              Preview sound
-            </button>
-          </div>
-        </div>
+        <Tabs>
+          <TabList>
+            <div className="preference__subheadings">
+              <Tab><h4 className="preference__subheading1">General Settings</h4></Tab>
+              <h4 className="preference__subheading2">Sketch Settings</h4>
+              <Tab><h4 className="preference__subheading2">Accessibility</h4></Tab>
+            </div>
+          </TabList>
+          <TabPanel>
+            <div className="preference">
+              <h4 className="preference__title">Theme</h4>
+              <div className="preference__options">
+                <input
+                  type="radio"
+                  onChange={() => this.props.setTheme('light')}
+                  aria-label="light theme on"
+                  name="light theme"
+                  id="light-theme-on"
+                  className="preference__radio-button"
+                  value="light"
+                  checked={this.props.theme === 'light'}
+                />
+                <label htmlFor="light-theme-on" className="preference__option">Light</label>
+                <input
+                  type="radio"
+                  onChange={() => this.props.setTheme('dark')}
+                  aria-label="dark theme on"
+                  name="dark theme"
+                  id="dark-theme-on"
+                  className="preference__radio-button"
+                  value="dark"
+                  checked={this.props.theme === 'dark'}
+                />
+                <label htmlFor="dark-theme-on" className="preference__option">Dark</label>
+                <input
+                  type="radio"
+                  onChange={() => this.props.setTheme('contrast')}
+                  aria-label="contrast theme on"
+                  name="contrast theme"
+                  id="contrast-theme-on"
+                  className="preference__radio-button"
+                  value="contrast"
+                  checked={this.props.theme === 'contrast'}
+                />
+                <label htmlFor="contrast-theme-on" className="preference__option">High contrast</label>
+              </div>
+            </div>
+            <div className="preference">
+              <h4 className="preference__title">Text size</h4>
+              <button
+                className="preference__minus-button"
+                onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
+                aria-label="decrease font size"
+              >
+                <InlineSVG src={minusUrl} alt="Decrease Font Size" />
+                <h6 className="preference__label">Decrease</h6>
+              </button>
+              <input
+                className="preference__value"
+                aria-live="polite"
+                aria-atomic="true"
+                role="status"
+                value={this.props.fontSize}
+                onChange={this.handleUpdateFont}
+                ref={(element) => { this.fontSizeInput = element; }}
+                onClick={() => {
+                  this.fontSizeInput.select();
+                }}
+              >
+              </input>
+              <button
+                className="preference__plus-button"
+                onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
+                aria-label="increase font size"
+              >
+                <InlineSVG src={plusUrl} alt="Increase Font Size" />
+                <h6 className="preference__label">Increase</h6>
+              </button>
+            </div>
+            <div className="preference">
+              <h4 className="preference__title">Indentation amount</h4>
+              <button
+                className="preference__minus-button"
+                onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
+                aria-label="decrease indentation amount"
+              >
+                <InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
+                <h6 className="preference__label">Decrease</h6>
+              </button>
+              <input
+                className="preference__value"
+                aria-live="polite"
+                aria-atomic="true"
+                role="status"
+                value={this.props.indentationAmount}
+                onChange={this.handleUpdateIndentation}
+                ref={(element) => { this.indentationInput = element; }}
+                onClick={() => {
+                  this.indentationInput.select();
+                }}
+              >
+              </input>
+              <button
+                className="preference__plus-button"
+                onClick={() => this.props.setIndentation(this.props.indentationAmount + 2)}
+                aria-label="increase indentation amount"
+              >
+                <InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
+                <h6 className="preference__label">Increase</h6>
+              </button>
+              <div className="preference__vertical-list">
+                <input
+                  type="radio"
+                  onChange={this.props.indentWithSpace}
+                  aria-label="indentation with space"
+                  name="indentation"
+                  id="indentation-space"
+                  className="preference__radio-button"
+                  value="Spaces"
+                  checked={!this.props.isTabIndent}
+                />
+                <label htmlFor="indentation-space" className="preference__option">Spaces</label>
+                <input
+                  type="radio"
+                  onChange={this.props.indentWithTab}
+                  aria-label="indentation with tab"
+                  name="indentation"
+                  id="indentation-tab"
+                  className="preference__radio-button"
+                  value="Tabs"
+                  checked={this.props.isTabIndent}
+                />
+                <label htmlFor="indentation-tab" className="preference__option">Tabs</label>
+              </div>
+            </div>
+            <div className="preference">
+              <h4 className="preference__title">Autosave</h4>
+              <div className="preference__options">
+                <input
+                  type="radio"
+                  onChange={() => this.props.setAutosave(true)}
+                  aria-label="autosave on"
+                  name="autosave"
+                  id="autosave-on"
+                  className="preference__radio-button"
+                  value="On"
+                  checked={this.props.autosave}
+                />
+                <label htmlFor="autosave-on" className="preference__option">On</label>
+                <input
+                  type="radio"
+                  onChange={() => this.props.setAutosave(false)}
+                  aria-label="autosave off"
+                  name="autosave"
+                  id="autosave-off"
+                  className="preference__radio-button"
+                  value="Off"
+                  checked={!this.props.autosave}
+                />
+                <label htmlFor="autosave-off" className="preference__option">Off</label>
+              </div>
+            </div>
+          </TabPanel>
+          <TabPanel>
+            <div className="preference">
+              <h4 className="preference__title">Accessible text-based canvas</h4>
+              <h6 className="preference__subtitle">Used with screen reader</h6>
+              <div className="preference__options">
+                <input
+                  type="checkbox"
+                  onChange={(event) => {
+                    this.props.setTextOutput(event.target.checked);
+                  }}
+                  aria-label="text output on"
+                  name="text output"
+                  id="text-output-on"
+                  value="On"
+                  checked={(this.props.textOutput)}
+                />
+                <label htmlFor="text-output-on" className="preference__option preference__canvas">Plain-text</label>
+                <input
+                  type="checkbox"
+                  onChange={(event) => {
+                    this.props.setGridOutput(event.target.checked);
+                  }}
+                  aria-label="table output on"
+                  name="table output"
+                  id="table-output-on"
+                  value="On"
+                  checked={(this.props.gridOutput)}
+                />
+                <label htmlFor="table-output-on" className="preference__option preference__canvas">Table-text</label>
+                <input
+                  type="checkbox"
+                  onChange={(event) => {
+                    this.props.setSoundOutput(event.target.checked);
+                  }}
+                  aria-label="sound output on"
+                  name="sound output"
+                  id="sound-output-on"
+                  value="On"
+                  checked={(this.props.soundOutput)}
+                />
+                <label htmlFor="sound-output-on" className="preference__option preference__canvas">Sound</label>
+              </div>
+            </div>
+            <div className="preference">
+              <h4 className="preference__title">Lint warning sound</h4>
+              <div className="preference__options">
+                <input
+                  type="radio"
+                  onChange={() => this.props.setLintWarning(true)}
+                  aria-label="lint warning on"
+                  name="lint warning"
+                  id="lint-warning-on"
+                  className="preference__radio-button"
+                  value="On"
+                  checked={this.props.lintWarning}
+                />
+                <label htmlFor="lint-warning-on" className="preference__option">On</label>
+                <input
+                  type="radio"
+                  onChange={() => this.props.setLintWarning(false)}
+                  aria-label="lint warning off"
+                  name="lint warning"
+                  id="lint-warning-off"
+                  className="preference__radio-button"
+                  value="Off"
+                  checked={!this.props.lintWarning}
+                />
+                <label htmlFor="lint-warning-off" className="preference__option">Off</label>
+                <button
+                  className="preference__preview-button"
+                  onClick={() => beep.play()}
+                  aria-label="preview sound"
+                >
+                  Preview sound
+                </button>
+              </div>
+            </div>
+          </TabPanel>
+        </Tabs>
       </section>
     );
   }
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 3d5baa71..1f6cbc75 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -3,6 +3,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { Helmet } from 'react-helmet';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import SplitPane from 'react-split-pane';
 import Editor from '../components/Editor';
 import Sidebar from '../components/Sidebar';
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 3cd73225..b2571646 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -63,7 +63,7 @@
 .preference__subheadings {
 	display: flex;
 	flex-wrap: wrap;
-	padding-bottom: #{7 / $base-font-size}rem;
+	padding-bottom: #{0.1 / $base-font-size}rem;
 	@include themify() {
 	border-bottom: 1px solid getThemifyVariable('button-border-color');
 	}