Merge branch 'saumya1906-issue266'

client/images/information.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<g>
+	<path d="M76.002,52.608c0,14.32-11.681,26.001-26.001,26.001c-14.4,0-26-11.681-26-26.001c0-14.4,11.6-26,26-26
+		C64.321,26.608,76.002,38.208,76.002,52.608z M54.641,39.168c0-2.48-2-4.48-4.56-4.48c-2.56,0-4.56,2-4.56,4.48
+		c0,2.56,2,4.64,4.56,4.64C52.641,43.808,54.641,41.808,54.641,39.168z M54.001,45.968h-7.76v22.481h7.76V45.968z"/>
+</g>
+</svg>

client/modules/IDE/components/Preferences.jsx

@@ -1,15 +1,14 @@
 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';
+const infoUrl = require('../../../images/information.svg');
 
 class Preferences extends React.Component {
   constructor(props) {
@@ -48,25 +47,56 @@ 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">Preferences</h2>
-          <button
-            className="preferences__exit-button"
-            onClick={this.props.closePreferences}
-            title="exit"
-            aria-label="exit preferences"
-          >
-            <InlineSVG src={exitUrl} alt="Exit Preferences" />
-          </button>
+      <section className="preferences" tabIndex="0" title="preference-menu">
+        <Tabs>
+          <TabList>
+            <div className="preference__subheadings">
+              <Tab><h4 className="preference__subheading">General Settings</h4></Tab>
+              <Tab><h4 className="preference__subheading">Sketch Settings</h4></Tab>
+              <Tab><h4 className="preference__subheading">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="high contrast theme on"
+                  name="high contrast theme"
+                  id="high-contrast-theme-on"
+                  className="preference__radio-button"
+                  value="contrast"
+                  checked={this.props.theme === 'contrast'}
+                />
+                <label htmlFor="high-contrast-theme-on" className="preference__option">High Contrast</label>
+              </div>
             </div>
-
             <div className="preference">
               <h4 className="preference__title">Text size</h4>
               <button
@@ -99,7 +129,6 @@ class Preferences extends React.Component {
                 <h6 className="preference__label">Increase</h6>
               </button>
             </div>
-
             <div className="preference">
               <h4 className="preference__title">Indentation amount</h4>
               <button
@@ -131,7 +160,6 @@ class Preferences extends React.Component {
                 <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}
@@ -142,7 +170,12 @@ class Preferences extends React.Component {
                 value="Spaces"
                 checked={!this.props.isTabIndent}
               />
-            <label htmlFor="indentation-space" className="preference__option">Spaces</label>
+              <label
+                htmlFor="indentation-space"
+                className="preference__option preference__whitespace-button"
+              >
+                Spaces
+              </label>
               <input
                 type="radio"
                 onChange={this.props.indentWithTab}
@@ -153,8 +186,7 @@ class Preferences extends React.Component {
                 value="Tabs"
                 checked={this.props.isTabIndent}
               />
-            <label htmlFor="indentation-tab" className="preference__option">Tabs</label>
-          </div>
+              <label htmlFor="indentation-tab" className="preference__option preference__whitespace-button">Tabs</label>
             </div>
             <div className="preference">
               <h4 className="preference__title">Autosave</h4>
@@ -183,44 +215,36 @@ class Preferences extends React.Component {
                 <label htmlFor="autosave-off" className="preference__option">Off</label>
               </div>
             </div>
+          </TabPanel>
+          <TabPanel>
+            {/* <div className="preference">
+              <h4 className="preference__title">Add a p5.js or an external library</h4>
+            </div> */}
             <div className="preference">
-          <h4 className="preference__title">Theme</h4>
-          <div className="preference__options">
+              <h4 className="preference__title">Security Protocol</h4>
+              <div className="preference__serve-secure">
                 <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'}
+                  id="serve-secure"
+                  type="checkbox"
+                  checked={this.props.serveSecure || false}
+                  onChange={(event) => {
+                    this.props.setServeSecure(event.target.checked);
+                  }}
                 />
-            <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>
+                <label htmlFor="serve-secure">Serve over HTTPS</label>
+                <span
+                  className="serve-secture__tooltip tooltipped tooltipped-n tooltipped-no-delay tooltipped-multiline"
+                  aria-label={'Choose HTTPS if you need to \n • access a microphone or webcam \n'
+                      + '• access an API served over HTTPS \n\n'
+                      + 'Choose HTTP if you need to \n'
+                      + '• access an API served over HTTP'}
+                >
+                  <InlineSVG src={infoUrl} className="serve-secure__icon" />
+                </span>
               </div>
             </div>
+          </TabPanel>
+          <TabPanel>
             <div className="preference">
               <h4 className="preference__title">Lint warning sound</h4>
               <div className="preference__options">
@@ -298,14 +322,14 @@ class Preferences extends React.Component {
                 <label htmlFor="sound-output-on" className="preference__option preference__canvas">Sound</label>
               </div>
             </div>
+          </TabPanel>
+        </Tabs>
       </section>
     );
   }
 }
 
 Preferences.propTypes = {
-  isVisible: PropTypes.bool.isRequired,
-  closePreferences: PropTypes.func.isRequired,
   fontSize: PropTypes.number.isRequired,
   indentationAmount: PropTypes.number.isRequired,
   setIndentation: PropTypes.func.isRequired,
@@ -324,7 +348,13 @@ Preferences.propTypes = {
   lintWarning: PropTypes.bool.isRequired,
   setLintWarning: PropTypes.func.isRequired,
   theme: PropTypes.string.isRequired,
+  serveSecure: PropTypes.bool.isRequired,
+  setServeSecure: PropTypes.func.isRequired,
   setTheme: PropTypes.func.isRequired
 };
 
+Preferences.defaultProps = {
+  currentUser: undefined
+};
+
 export default Preferences;

client/modules/IDE/pages/IDEView.jsx

@@ -246,9 +246,13 @@ class IDEView extends React.Component {
           currentUser={this.props.user.username}
           showHelpModal={this.props.showHelpModal}
         />
+        {this.props.ide.preferencesIsVisible &&
+          <Overlay
+            title="Settings"
+            ariaLabel="settings"
+            closeOverlay={this.props.closePreferences}
+          >
             <Preferences
-          isVisible={this.props.ide.preferencesIsVisible}
-          closePreferences={this.props.closePreferences}
               fontSize={this.props.preferences.fontSize}
               indentationAmount={this.props.preferences.indentationAmount}
               setIndentation={this.props.setIndentation}
@@ -268,7 +272,11 @@ class IDEView extends React.Component {
               setSoundOutput={this.props.setSoundOutput}
               theme={this.props.preferences.theme}
               setTheme={this.props.setTheme}
+              serveSecure={this.props.project.serveSecure}
+              setServeSecure={this.props.setServeSecure}
             />
+          </Overlay>
+        }
         <div className="editor-preview-container">
           <SplitPane
             split="vertical"
@@ -361,25 +369,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 (
+                        ) &&
+                          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}
                       />
-                      );
                   }
-                    return '';
-                  })()}
                 </div>
                 <PreviewFrame
                   htmlFile={this.props.htmlFile}
@@ -405,32 +411,20 @@ class IDEView extends React.Component {
             </SplitPane>
           </SplitPane>
         </div>
-        {(() => {
-          if (this.props.ide.modalIsVisible) {
-            return (
+        { this.props.ide.modalIsVisible &&
           <NewFileModal
             canUploadMedia={this.props.user.authenticated}
             closeModal={this.props.closeNewFileModal}
             createFile={this.props.createFile}
           />
-            );
         }
-          return '';
-        })()}
-        {(() => {
-          if (this.props.ide.newFolderModalVisible) {
-            return (
+        { this.props.ide.newFolderModalVisible &&
           <NewFolderModal
             closeModal={this.props.closeNewFolderModal}
             createFolder={this.props.createFolder}
           />
-            );
         }
-          return '';
-        })()}
-        {(() => { // eslint-disable-line
-          if (this.props.location.pathname.match(/sketches$/)) {
-            return (
+        { this.props.location.pathname.match(/sketches$/) &&
           <Overlay
             ariaLabel="project list"
             title="Open a Sketch"
@@ -441,12 +435,8 @@ class IDEView extends React.Component {
               user={this.props.user}
             />
           </Overlay>
-            );
         }
-        })()}
-        {(() => { // eslint-disable-line
-          if (this.props.location.pathname.match(/assets$/)) {
-            return (
+        { this.props.location.pathname.match(/assets$/) &&
           <Overlay
             title="Assets"
             ariaLabel="asset list"
@@ -457,12 +447,8 @@ class IDEView extends React.Component {
               user={this.props.user}
             />
           </Overlay>
-            );
         }
-        })()}
-        {(() => { // eslint-disable-line
-          if (this.props.location.pathname === '/about') {
-            return (
+        { this.props.location.pathname === '/about' &&
           <Overlay
             previousPath={this.props.ide.previousPath}
             title="Welcome"
@@ -470,12 +456,8 @@ class IDEView extends React.Component {
           >
             <About previousPath={this.props.ide.previousPath} />
           </Overlay>
-            );
         }
-        })()}
-        {(() => { // eslint-disable-line
-          if (this.props.ide.shareModalVisible) {
-            return (
+        { this.props.ide.shareModalVisible &&
           <Overlay
             title="Share This Sketch"
             ariaLabel="share"
@@ -487,12 +469,8 @@ class IDEView extends React.Component {
               ownerUsername={this.props.project.owner.username}
             />
           </Overlay>
-            );
         }
-        })()}
-        {(() => { // eslint-disable-line
-          if (this.props.ide.keyboardShortcutVisible) {
-            return (
+        { this.props.ide.keyboardShortcutVisible &&
           <Overlay
             title="Keyboard Shortcuts"
             ariaLabel="keyboard shortcuts"
@@ -500,12 +478,8 @@ class IDEView extends React.Component {
           >
             <KeyboardShortcutModal />
           </Overlay>
-            );
         }
-        })()}
-        {(() => { // eslint-disable-line
-          if (this.props.ide.errorType) {
-            return (
+        { this.props.ide.errorType &&
           <Overlay
             title="Error"
             ariaLabel="error"
@@ -515,21 +489,15 @@ class IDEView extends React.Component {
               type={this.props.ide.errorType}
             />
           </Overlay>
-            );
         }
-        })()}
-        {(() => { // eslint-disable-line
-          if (this.props.ide.helpType) {
-            return (
+        { this.props.ide.helpType &&
           <Overlay
             title="Serve over HTTPS"
             closeOverlay={this.props.hideHelpModal}
           >
             <HTTPSModal />
           </Overlay>
-            );
         }
-        })()}
       </div>
     );
   }

client/styles/components/_copyable-input.scss

@@ -40,7 +40,7 @@
     color: getThemifyVariable('button-hover-color');
   }
   font-family: Montserrat, sans-serif;
-  font-size: #{14 / $base-font-size}rem;
+  font-size: #{12 / $base-font-size}rem;
 }
 
 .tooltipped-n::before,

client/styles/components/_overlay.scss

@@ -29,7 +29,7 @@
 .overlay__header {
   display: flex;
   justify-content: space-between;
-  padding: #{30 / $base-font-size}rem #{20 / $base-font-size}rem #{30 / $base-font-size}rem #{20 / $base-font-size}rem;
+  padding: #{20 / $base-font-size}rem;
   flex: 1 0 auto;
 }
 

client/styles/components/_preferences.scss

@@ -1,18 +1,13 @@
 .preferences {
-	@extend %modal;
-	position: absolute;
-	top: #{51 / $base-font-size}rem;
-	right: #{29 / $base-font-size}rem;
-	width: #{288 / $base-font-size}rem;
-	display: none;
-	padding: #{14 / $base-font-size}rem #{20 / $base-font-size}rem #{2 / $base-font-size}rem  #{20 / $base-font-size}rem ;
-	&--selected {
+  width: 100%;
+  width: #{640 / $base-font-size}rem;
+  max-width: 100%;
+  min-height: #{460 / $base-font-size}rem;
+  max-height: 100%;
+  z-index: 9999;
+  padding: 0 #{20 / $base-font-size}rem #{2 / $base-font-size}rem  #{20 / $base-font-size}rem ;
   display: flex;
   flex-direction: column;
-	}
-	@include themify() {
-		background-color: getThemifyVariable('editor-gutter-color');
-	}
   outline: none;
 }
 
@@ -29,6 +24,7 @@
     width: #{32 / $base-font-size}rem;
     height: #{32 / $base-font-size}rem;
     margin-left: #{6 / $base-font-size}rem;
+    margin-right: #{10 / $base-font-size}rem;
     line-height: #{40 / $base-font-size}rem;
     & svg {
       width: #{10 / $base-font-size}rem;
@@ -36,16 +32,43 @@
   }
 }
 
+.serve__over__https {
+  text-align: center;
+  margin-left: #{9 / $base-font-size}rem;
+  font-width: #{108 / $base-font-size}rem;
+  font-height: #{15 / $base-font-size}rem;
+  font-family: Montserrat;
+  font-size: #{12 / $base-font-size}rem;
+  margin-top: #{2 / $base-font-size}rem;
+}
+
 .preferences__heading {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-	margin-bottom: #{20 / $base-font-size}rem;
   @include themify() {
     color: getThemifyVariable('heading-text-color');
   }
 }
 
+.preferences__title{
+  width: #{90 / $base-font-size}rem;
+    height: #{25 / $base-font-size}rem;
+    font-family: Montserrat;
+    font-size: #{21 / $base-font-size}rem;
+    font-weight: bold;
+    text-align: left;
+}
+
+.preference__subheadings {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: #{0.1 / $base-font-size}rem;
+  @include themify() {
+    border-bottom: 1px solid getThemifyVariable('button-border-color');
+  }
+}
+
 .preference {
   display: flex;
   flex-wrap: wrap;
@@ -87,7 +110,7 @@
   outline: none;
   width: #{44 / $base-font-size}rem;
   height: #{40 / $base-font-size}rem;
-	margin: 0 #{26 / $base-font-size}rem;
+  margin: 0 #{20 / $base-font-size}rem;
   padding: 0;
   font-size: #{16 / $base-font-size}rem;
   font-family: Inconsolata;
@@ -99,12 +122,55 @@
     &:hover {
       color: getThemifyVariable('primary-text-color');
     }
+
   }
   margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;
   font-size: #{9 / $base-font-size}rem;
   width: #{44 / $base-font-size}rem;
 }
 
+.react-tabs__tab--selected {
+  @include themify() {
+    border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
+  }
+}
+
+.react-tabs__tab--selected .preference__subheading {
+  @include themify() {
+    color: getThemifyVariable('primary-text-color');
+  }
+}
+
+.react-tabs__tab {
+  text-align: center;
+  color: black;
+  display: flex;
+  align-items: center;
+  border-bottom: #{4 / $base-font-size}rem solid transparent;
+  & + & {
+    margin-left: #{45 / $base-font-size}rem;
+  }
+}
+
+.preference__subheading {
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color');
+    &:hover, &:focus{
+      color: getThemifyVariable('primary-text-color');
+      cursor: pointer; 
+    }
+    &:focus  {
+      color: getThemifyVariable('primary-text-color');
+      cursor: pointer; 
+    }
+  }
+  font-size: #{12 / $base-font-size}rem;
+  height: #{20 / $base-font-size}rem;
+  width: 100%;
+  margin: 0;
+  padding: 0 #{5 /$base-font-size}rem;
+}
+
 .preference__vertical-list {
   display: flex;
   flex-direction: column;
@@ -112,6 +178,19 @@
   padding-left: #{25 / $base-font-size}rem;
 }
 
+.preference__add__resource {
+  font-size: #{14 / $base-font-size}rem;
+  line-height: 1.43;
+  text-align: left;
+  margin-left: #{5 / $base-font-size}rem;
+  margin-top: #{40 / $base-font-size}rem;
+  margin-bottom: #{10 / $base-font-size}rem;
+  @include themify() {
+    color: getThemifyVariable('inactive-text-color');
+    border-bottom: 1px dashed getThemifyVariable('button-border-color');
+  }
+}
+
 .preference__radio-button {
   @extend %hidden-element;
 }
@@ -119,22 +198,36 @@
 .preference__option {
   @include themify() {
     @extend %preference-option;
-		padding-right: #{44 / $base-font-size}rem;
+    margin-right: #{25 / $base-font-size}rem;
   }
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
 }
 
 .preference__option:last-child {
-	padding-right: 0;
+  margin-right: 0;
 }
 
 .preference__preview-button {
   @include themify() {
     @extend %preference-option;
+    &:hover {
+      color: getThemifyVariable('button-background-hover-color');
     }
+  }
+  margin-left: #{30 / $base-font-size}rem;
+}
+
+.preference__option.preference__whitespace-button {
+  padding-top: #{8 / $base-font-size}rem;
+  margin-right: 0;
+  margin-left: #{25 / $base-font-size}rem;
 }
 
 .preference__options {
   display: flex;
+  justify-content: center;
 }
 
 .preference__radio-button:checked + .preference__option {
@@ -151,3 +244,21 @@
 .preference__option.preference__canvas:not(:last-child) {
   padding-right: #{14 / $base-font-size}rem;
 }
+
+.preference__serve-secure {
+  display: flex;
+  align-items: center;
+}
+
+.serve-secure__icon {
+  @include icon();
+  & svg {
+    height: #{24 / $base-font-size}rem;
+    width: #{24 / $base-font-size}rem;
+  }
+}
+
+.serve-secture__tooltip:after {
+  text-align: left;
+  font-size: #{12 / $base-font-size}rem;
+}

package.json

@@ -111,6 +111,7 @@
     "react-redux": "^4.4.5",
     "react-router": "^2.6.0",
     "react-split-pane": "^0.1.44",
+    "react-tabs": "^1.1.0",
     "redux": "^3.5.2",
     "redux-devtools": "^3.3.1",
     "redux-devtools-dock-monitor": "^1.1.1",