From 9587d019085ec6cfd2cfc8bd7b6b4161b397b752 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Mon, 13 Nov 2017 19:09:08 -0500
Subject: [PATCH] start to add preferences styling

---
 client/modules/IDE/components/Preferences.jsx | 22 +----
 client/modules/IDE/pages/IDEView.jsx          | 84 ++++++++++---------
 client/styles/components/_preferences.scss    | 21 ++---
 3 files changed, 50 insertions(+), 77 deletions(-)

diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx
index be3a829c..a15a6832 100644
--- a/client/modules/IDE/components/Preferences.jsx
+++ b/client/modules/IDE/components/Preferences.jsx
@@ -1,16 +1,13 @@
 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';
 
-const exitUrl = require('../../../images/exit.svg');
 const plusUrl = require('../../../images/plus.svg');
 const minusUrl = require('../../../images/minus.svg');
 const beepUrl = require('../../../sounds/audioAlert.mp3');
-// import { debounce } from 'lodash';
 
 class Preferences extends React.Component {
   constructor(props) {
@@ -54,24 +51,9 @@ class Preferences extends React.Component {
 
   render() {
     const beep = new Audio(beepUrl);
-    const preferencesContainerClass = classNames({
-      'preferences': true,
-      'preferences--selected': this.props.isVisible
-    });
 
     return (
-      <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
-        <div className="preferences__heading">
-          <h2 className="preferences__title">Settings</h2>
-          <button
-            className="preferences__exit-button"
-            onClick={this.props.closePreferences}
-            title="exit"
-            aria-label="exit preferences"
-          >
-            <InlineSVG src={exitUrl} alt="Exit Preferences" />
-          </button>
-        </div>
+      <section className="preferences" tabIndex="0" title="preference-menu">
         <Tabs>
           <TabList>
             <div className="preference__subheadings">
@@ -320,8 +302,6 @@ class Preferences extends React.Component {
 }
 
 Preferences.propTypes = {
-  isVisible: PropTypes.bool.isRequired,
-  closePreferences: PropTypes.func.isRequired,
   fontSize: PropTypes.number.isRequired,
   indentationAmount: PropTypes.number.isRequired,
   setIndentation: PropTypes.func.isRequired,
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 4c03c581..0794765d 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -246,29 +246,35 @@ class IDEView extends React.Component {
           currentUser={this.props.user.username}
           showHelpModal={this.props.showHelpModal}
         />
-        <Preferences
-          isVisible={this.props.ide.preferencesIsVisible}
-          closePreferences={this.props.closePreferences}
-          fontSize={this.props.preferences.fontSize}
-          indentationAmount={this.props.preferences.indentationAmount}
-          setIndentation={this.props.setIndentation}
-          indentWithSpace={this.props.indentWithSpace}
-          indentWithTab={this.props.indentWithTab}
-          isTabIndent={this.props.preferences.isTabIndent}
-          setFontSize={this.props.setFontSize}
-          autosave={this.props.preferences.autosave}
-          setAutosave={this.props.setAutosave}
-          lintWarning={this.props.preferences.lintWarning}
-          setLintWarning={this.props.setLintWarning}
-          textOutput={this.props.preferences.textOutput}
-          gridOutput={this.props.preferences.gridOutput}
-          soundOutput={this.props.preferences.soundOutput}
-          setTextOutput={this.props.setTextOutput}
-          setGridOutput={this.props.setGridOutput}
-          setSoundOutput={this.props.setSoundOutput}
-          theme={this.props.preferences.theme}
-          setTheme={this.props.setTheme}
-        />
+        {this.props.ide.preferencesIsVisible &&
+          <Overlay
+            title="Settings"
+            ariaLabel="settings"
+            closeOverlay={this.props.closePreferences}
+          >
+            <Preferences
+              fontSize={this.props.preferences.fontSize}
+              indentationAmount={this.props.preferences.indentationAmount}
+              setIndentation={this.props.setIndentation}
+              indentWithSpace={this.props.indentWithSpace}
+              indentWithTab={this.props.indentWithTab}
+              isTabIndent={this.props.preferences.isTabIndent}
+              setFontSize={this.props.setFontSize}
+              autosave={this.props.preferences.autosave}
+              setAutosave={this.props.setAutosave}
+              lintWarning={this.props.preferences.lintWarning}
+              setLintWarning={this.props.setLintWarning}
+              textOutput={this.props.preferences.textOutput}
+              gridOutput={this.props.preferences.gridOutput}
+              soundOutput={this.props.preferences.soundOutput}
+              setTextOutput={this.props.setTextOutput}
+              setGridOutput={this.props.setGridOutput}
+              setSoundOutput={this.props.setSoundOutput}
+              theme={this.props.preferences.theme}
+              setTheme={this.props.setTheme}
+            />
+          </Overlay>
+        }
         <div className="editor-preview-container">
           <SplitPane
             split="vertical"
@@ -361,25 +367,23 @@ class IDEView extends React.Component {
                 <div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}>
                 </div>
                 <div>
-                  {(() => {
-                    if (
+                  {(
                       (
                         (this.props.preferences.textOutput ||
-                         this.props.preferences.gridOutput ||
-                         this.props.preferences.soundOutput
-                        ) && this.props.ide.isPlaying
-                      ) || this.props.ide.isAccessibleOutputPlaying) {
-                      return (
-                        <AccessibleOutput
-                          isPlaying={this.props.ide.isPlaying}
-                          previewIsRefreshing={this.props.ide.previewIsRefreshing}
-                          textOutput={this.props.preferences.textOutput}
-                          gridOutput={this.props.preferences.gridOutput}
-                        />
-                      );
-                    }
-                    return '';
-                  })()}
+                          this.props.preferences.gridOutput ||
+                          this.props.preferences.soundOutput
+                        ) &&
+                          this.props.ide.isPlaying
+                      ) ||
+                        this.props.ide.isAccessibleOutputPlaying
+                    ) &&
+                      <AccessibleOutput
+                        isPlaying={this.props.ide.isPlaying}
+                        previewIsRefreshing={this.props.ide.previewIsRefreshing}
+                        textOutput={this.props.preferences.textOutput}
+                        gridOutput={this.props.preferences.gridOutput}
+                      />
+                  }
                 </div>
                 <PreviewFrame
                   htmlFile={this.props.htmlFile}
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 101ac54b..96b9340c 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -1,20 +1,10 @@
 .preferences {
-	@extend %modal;
-	position: absolute;
-	top: #{113 / $base-font-size}rem;
-	right: #{192 / $base-font-size}rem;
-	width: #{640 / $base-font-size}rem;
-	height: #{540 / $base-font-size}rem;
-	bottom: #{371 / $base-font-size}rem;
-	margin-bottom: #{100 / $base-font-size}rem;
-	margin-right: #{100 / $base-font-size}rem;
-	display: none;
+	width: 100%;
+	max-width: #{640 / $base-font-size}rem;
 	z-index: 9999;
 	padding: #{14 / $base-font-size}rem #{20 / $base-font-size}rem #{2 / $base-font-size}rem  #{20 / $base-font-size}rem ;
-	&--selected {
-		display: flex;
-		flex-direction: column;
-	}
+	display: flex;
+	flex-direction: column;
 	@include themify() {
 		background-color: getThemifyVariable('editor-gutter-color');
 	}
@@ -173,13 +163,12 @@
 	}
 	font-size: #{12 / $base-font-size}rem;
 	height: #{25 / $base-font-size}rem;
-	margin-top: #{30 / $base-font-size}rem;
 	margin-left: #{5 / $base-font-size}rem;
 	margin-bottom: #{0.1 / $base-font-size}rem;
 	margin-right: #{60 / $base-font-size}rem;
 	padding-right: #{10 / $base-font-size}rem;
 	font-family: Montserrat;
-	width: #{110 / $base-font-size}rem;
+	width: 100%;
 }
 
 .preference__vertical-list {