From 6f068b5503e8514dccfe98c2a6718cdc58cab2a7 Mon Sep 17 00:00:00 2001 From: saumya1906 Date: Wed, 9 Aug 2017 21:58:28 +0530 Subject: [PATCH 01/15] Issue 266 --- client/modules/IDE/components/Preferences.jsx | 160 +++++++++--------- client/styles/components/_preferences.scss | 85 +++++++++- 2 files changed, 165 insertions(+), 80 deletions(-) diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx index 24203322..02e0e770 100644 --- a/client/modules/IDE/components/Preferences.jsx +++ b/client/modules/IDE/components/Preferences.jsx @@ -18,6 +18,7 @@ class Preferences extends React.Component { this.handleUpdateFont = this.handleUpdateFont.bind(this); this.handleUpdateIndentation = this.handleUpdateIndentation.bind(this); this.handleLintWarning = this.handleLintWarning.bind(this); +// this.handleTab = this.handleTab.bind(this); } handleUpdateFont(event) { @@ -46,6 +47,10 @@ class Preferences extends React.Component { this.props.setLintWarning(value); } + // handleTab(event, TabName) { + // this.props.openTab(event, TabName); + // } + render() { const beep = new Audio(beepUrl); const preferencesContainerClass = classNames({ @@ -56,7 +61,7 @@ class Preferences extends React.Component { return (
-

Preferences

+

Settings

- +
+

General Settings

+

Sketch Settings

+

Accessibility

+
+
+

Theme

+
+ 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'} + /> + + 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'} + /> + + 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'} + /> + +
+

Text size

-

Indentation amount

-
-

Theme

-
- 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'} - /> - - 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'} - /> - - 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'} - /> - -
-
-
-

Lint warning sound

-
- 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} - /> - - 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} - /> - - -
-

Accessible text-based canvas

Used with screen reader
-
Sound
+
+

Lint warning sound

+
+ 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} + /> + + 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} + /> + + +
+
); } @@ -323,6 +330,7 @@ Preferences.propTypes = { setSoundOutput: PropTypes.func.isRequired, lintWarning: PropTypes.bool.isRequired, setLintWarning: PropTypes.func.isRequired, +// openTab: PropTypes.func.isRequired, theme: PropTypes.string.isRequired, setTheme: PropTypes.func.isRequired }; diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index d45adebb..3cd73225 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -1,10 +1,15 @@ .preferences { @extend %modal; position: absolute; - top: #{51 / $base-font-size}rem; - right: #{29 / $base-font-size}rem; - width: #{288 / $base-font-size}rem; + 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; + 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; @@ -40,12 +45,31 @@ display: flex; flex-direction: row; justify-content: space-between; - margin-bottom: #{20 / $base-font-size}rem; + marhin-left: #{19 / $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: #{7 / $base-font-size}rem; + @include themify() { + border-bottom: 1px solid getThemifyVariable('button-border-color'); + } +} + + .preference { display: flex; flex-wrap: wrap; @@ -105,6 +129,59 @@ width: #{44 / $base-font-size}rem; } +.preference__subheading1 { + @include themify() { + color: getThemifyVariable('inactive-text-color'); + &:hover { + color: getThemifyVariable('primary-text-color'); + border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color'); + } + } + font-size: #{12 / $base-font-size}rem; + height: #{25 / $base-font-size}rem; + text-align: left; + margin-top: #{30 / $base-font-size}rem; + margin-left: #{5 / $base-font-size}rem; + margin-bottom: #{0.1 / $base-font-size}rem; + font-family: Montserrat; + width: #{100 / $base-font-size}rem; +} + +.preference__subheading2 { + @include themify() { + color: getThemifyVariable('inactive-text-color'); + &:hover { + color: getThemifyVariable('primary-text-color'); + border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color'); + } + } + font-size: #{12 / $base-font-size}rem; + height: #{25 / $base-font-size}rem; + text-align: left; + margin-top: #{30 / $base-font-size}rem; + margin-left: #{46 / $base-font-size}rem; + margin-bottom: #{0.1 / $base-font-size}rem; + font-family: Montserrat; +} + +.preference__subheading3 { + @include themify() { + color: getThemifyVariable('inactive-text-color'); + &:hover { + color: getThemifyVariable('primary-text-color'); + border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color'); + } + } + font-size: #{12 / $base-font-size}rem; + height: #{25 / $base-font-size}rem; + text-align: left; + margin-top: #{30 / $base-font-size}rem; + margin-left: #{48 / $base-font-size}rem; + margin-bottom: #{0.1 / $base-font-size}rem; + width: #{78 / $base-font-size}rem; + font-family: Montserrat; +} + .preference__vertical-list { display: flex; flex-direction: column; From 6b6ff7ca222c861551f4f38a4a2381a168e7681b Mon Sep 17 00:00:00 2001 From: saumya1906 Date: Wed, 9 Aug 2017 23:04:59 +0530 Subject: [PATCH 02/15] 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 { -
-

General Settings

-

Sketch Settings

-

Accessibility

-
-
-

Theme

-
- 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'} - /> - - 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'} - /> - - 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'} - /> - -
-
-
-

Text size

- - { this.fontSizeInput = element; }} - onClick={() => { - this.fontSizeInput.select(); - }} - > - - -
-
-

Indentation amount

- - { this.indentationInput = element; }} - onClick={() => { - this.indentationInput.select(); - }} - > - - -
- - - - -
-
-
-

Autosave

-
- this.props.setAutosave(true)} - aria-label="autosave on" - name="autosave" - id="autosave-on" - className="preference__radio-button" - value="On" - checked={this.props.autosave} - /> - - this.props.setAutosave(false)} - aria-label="autosave off" - name="autosave" - id="autosave-off" - className="preference__radio-button" - value="Off" - checked={!this.props.autosave} - /> - -
-
-
-

Accessible text-based canvas

-
Used with screen reader
-
- { - this.props.setTextOutput(event.target.checked); - }} - aria-label="text output on" - name="text output" - id="text-output-on" - value="On" - checked={(this.props.textOutput)} - /> - - { - this.props.setGridOutput(event.target.checked); - }} - aria-label="table output on" - name="table output" - id="table-output-on" - value="On" - checked={(this.props.gridOutput)} - /> - - { - this.props.setSoundOutput(event.target.checked); - }} - aria-label="sound output on" - name="sound output" - id="sound-output-on" - value="On" - checked={(this.props.soundOutput)} - /> - -
-
-
-

Lint warning sound

-
- 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} - /> - - 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} - /> - - -
-
+ + +
+

General Settings

 +

Sketch Settings

+

Accessibility

 +
+ + +
+

Theme

+
+ 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'} + /> + + 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'} + /> + + 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'} + /> + +
+
+
+

Text size

+ + { this.fontSizeInput = element; }} + onClick={() => { + this.fontSizeInput.select(); + }} + > + + +
+
+

Indentation amount

+ + { this.indentationInput = element; }} + onClick={() => { + this.indentationInput.select(); + }} + > + + +
+ + + + +
+
+
+

Autosave

+
+ this.props.setAutosave(true)} + aria-label="autosave on" + name="autosave" + id="autosave-on" + className="preference__radio-button" + value="On" + checked={this.props.autosave} + /> + + this.props.setAutosave(false)} + aria-label="autosave off" + name="autosave" + id="autosave-off" + className="preference__radio-button" + value="Off" + checked={!this.props.autosave} + /> + +
+
+ + +
+

Accessible text-based canvas

+
Used with screen reader
+
+ { + this.props.setTextOutput(event.target.checked); + }} + aria-label="text output on" + name="text output" + id="text-output-on" + value="On" + checked={(this.props.textOutput)} + /> + + { + this.props.setGridOutput(event.target.checked); + }} + aria-label="table output on" + name="table output" + id="table-output-on" + value="On" + checked={(this.props.gridOutput)} + /> + + { + this.props.setSoundOutput(event.target.checked); + }} + aria-label="sound output on" + name="sound output" + id="sound-output-on" + value="On" + checked={(this.props.soundOutput)} + /> + +
+
+
+

Lint warning sound

+
+ 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} + /> + + 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} + /> + + +
+
+ + ); } 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'); } From 67dd614651f07e8729c3fe98fec6ede80c5f4eac Mon Sep 17 00:00:00 2001 From: saumya1906 Date: Wed, 16 Aug 2017 23:53:13 +0530 Subject: [PATCH 03/15] Issue 266: Sketch Settings design --- client/modules/IDE/components/Preferences.jsx | 15 ++- client/styles/components/_preferences.scss | 93 +++++++++++-------- 2 files changed, 65 insertions(+), 43 deletions(-) diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx index d2771b2b..93e7602f 100644 --- a/client/modules/IDE/components/Preferences.jsx +++ b/client/modules/IDE/components/Preferences.jsx @@ -75,9 +75,9 @@ class Preferences extends React.Component {
-

General Settings

 -

Sketch Settings

-

Accessibility

 +

General Settings

 +

Sketch Settings

 +

Accessibility
@@ -235,6 +235,15 @@ class Preferences extends React.Component { + +

+
+

Add a p5.js or an external library

+

Add a script library resource field

+

Security Protocol

+

Serve over HTTPS

+
+

Accessible text-based canvas

diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index b2571646..077a4156 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -45,7 +45,6 @@ display: flex; flex-direction: row; justify-content: space-between; - marhin-left: #{19 / $base-font-size}rem; @include themify() { color: getThemifyVariable('heading-text-color'); } @@ -69,7 +68,6 @@ } } - .preference { display: flex; flex-wrap: wrap; @@ -129,7 +127,7 @@ width: #{44 / $base-font-size}rem; } -.preference__subheading1 { +.preference__subheading { @include themify() { color: getThemifyVariable('inactive-text-color'); &:hover { @@ -139,47 +137,12 @@ } font-size: #{12 / $base-font-size}rem; height: #{25 / $base-font-size}rem; - text-align: left; 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; font-family: Montserrat; - width: #{100 / $base-font-size}rem; -} - -.preference__subheading2 { - @include themify() { - color: getThemifyVariable('inactive-text-color'); - &:hover { - color: getThemifyVariable('primary-text-color'); - border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color'); - } - } - font-size: #{12 / $base-font-size}rem; - height: #{25 / $base-font-size}rem; - text-align: left; - margin-top: #{30 / $base-font-size}rem; - margin-left: #{46 / $base-font-size}rem; - margin-bottom: #{0.1 / $base-font-size}rem; - font-family: Montserrat; -} - -.preference__subheading3 { - @include themify() { - color: getThemifyVariable('inactive-text-color'); - &:hover { - color: getThemifyVariable('primary-text-color'); - border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color'); - } - } - font-size: #{12 / $base-font-size}rem; - height: #{25 / $base-font-size}rem; - text-align: left; - margin-top: #{30 / $base-font-size}rem; - margin-left: #{48 / $base-font-size}rem; - margin-bottom: #{0.1 / $base-font-size}rem; - width: #{78 / $base-font-size}rem; - font-family: Montserrat; + width: #{98 / $base-font-size}rem; } .preference__vertical-list { @@ -189,6 +152,22 @@ padding-left: #{25 / $base-font-size}rem; } +.preference__sketch1{ + width: #{601 / $base-font-size}rem; + height: #{100 / $base-font-size}rem; + font-family: Montserrat; + 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; } @@ -228,3 +207,37 @@ .preference__option.preference__canvas:not(:last-child) { padding-right: #{14 / $base-font-size}rem; } + +/*.tooltip { + display: inline-block; +} + +/* Tooltip text */ +/*.tooltip .tooltiptext { + margin-top: #{0 / $base-font-size}rem; + margin-bottom: #{50 / $base-font-size}rem; + margin-left: #{130 / $base-font-size}rem; + visibility: hidden; + width: 120px; + height: 120px; + border-color: $p5js-pink transparent transparent $p5js-pink; + padding: 5px 0; + border-radius: 5px; + webkit-border-radius: 20px; + moz-border-radius: 20px; + text-align: center; + color: $white; + background-color: $p5js-pink; + vertical-align: top; + /* Position the tooltip text - see examples below! */ +/* content: ' '; + position: absolute; + left: #{15 / $base-font-size}rem; + -webkit-margin-before: 0em; + -webkit-margin-after: 0em; +} + +/* Show the tooltip text when you mouse over the tooltip container */ +/*.tooltip:hover .tooltiptext { + visibility: visible; +}*//*/*/ \ No newline at end of file From 147128ed40f3207780ad31c1db89d6bc5cfd0549 Mon Sep 17 00:00:00 2001 From: saumya1906 Date: Thu, 17 Aug 2017 18:21:00 +0530 Subject: [PATCH 04/15] Issue 266: More Design Changes --- client/modules/IDE/components/Preferences.jsx | 97 +++++++------------ client/styles/components/_preferences.scss | 12 +++ 2 files changed, 49 insertions(+), 60 deletions(-) diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx index 93e7602f..41f5827c 100644 --- a/client/modules/IDE/components/Preferences.jsx +++ b/client/modules/IDE/components/Preferences.jsx @@ -106,17 +106,6 @@ class Preferences extends React.Component { checked={this.props.theme === 'dark'} /> - 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'} - /> -
@@ -182,30 +171,28 @@ class Preferences extends React.Component {
Increase
-
- - - - -
+ + + +

Autosave

@@ -250,41 +237,38 @@ class Preferences extends React.Component {
Used with screen reader
{ this.props.setTextOutput(event.target.checked); }} aria-label="text output on" name="text output" id="text-output-on" + className="preference__radio-button" value="On" checked={(this.props.textOutput)} /> - + { this.props.setGridOutput(event.target.checked); }} aria-label="table output on" name="table output" id="table-output-on" + className="preference__radio-button" value="On" checked={(this.props.gridOutput)} /> - - { - this.props.setSoundOutput(event.target.checked); - }} - aria-label="sound output on" - name="sound output" - id="sound-output-on" - value="On" - checked={(this.props.soundOutput)} - /> - + +
@@ -312,13 +296,6 @@ class Preferences extends React.Component { checked={!this.props.lintWarning} /> -
@@ -342,10 +319,10 @@ Preferences.propTypes = { setAutosave: PropTypes.func.isRequired, textOutput: PropTypes.bool.isRequired, gridOutput: PropTypes.bool.isRequired, - soundOutput: PropTypes.bool.isRequired, + // soundOutput: PropTypes.bool.isRequired, setTextOutput: PropTypes.func.isRequired, setGridOutput: PropTypes.func.isRequired, - setSoundOutput: PropTypes.func.isRequired, + // setSoundOutput: PropTypes.func.isRequired, lintWarning: PropTypes.bool.isRequired, setLintWarning: PropTypes.func.isRequired, // openTab: PropTypes.func.isRequired, diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index 077a4156..6107c420 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -34,6 +34,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; @@ -177,6 +178,12 @@ @extend %preference-option; padding-right: #{44 / $base-font-size}rem; } + display: flex; + flex-wrap: wrap; + flex-direction: row; + margin-top: #{10 / $base-font-size}rem; + width: #{50 / $base-font-size}rem; + margin-left: #{5 / $base-font-size}rem; } .preference__option:last-child { @@ -186,7 +193,12 @@ .preference__preview-button { @include themify() { @extend %preference-option; + &:hover { + color: getThemifyVariable('button-background-hover-color'); + } } + margin-top: #{7 / $base-font-size}rem; + margin-left: #{30 / $base-font-size}rem; } .preference__options { From ad802ebeecf390de213c1aa1215d04d8c255788e Mon Sep 17 00:00:00 2001 From: saumya1906 Date: Mon, 28 Aug 2017 21:06:26 +0530 Subject: [PATCH 05/15] Issue 266: Added react-tabs to package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index fb3338c9..afebb2c6 100644 --- a/package.json +++ b/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", From f14e74de5517d48a31600138269c986566921082 Mon Sep 17 00:00:00 2001 From: saumya1906 Date: Tue, 29 Aug 2017 00:35:01 +0530 Subject: [PATCH 06/15] Issue 266: Removed prefixing --- client/styles/components/_preferences.scss | 33 ---------------------- 1 file changed, 33 deletions(-) diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index 6107c420..13ccca40 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -220,36 +220,3 @@ padding-right: #{14 / $base-font-size}rem; } -/*.tooltip { - display: inline-block; -} - -/* Tooltip text */ -/*.tooltip .tooltiptext { - margin-top: #{0 / $base-font-size}rem; - margin-bottom: #{50 / $base-font-size}rem; - margin-left: #{130 / $base-font-size}rem; - visibility: hidden; - width: 120px; - height: 120px; - border-color: $p5js-pink transparent transparent $p5js-pink; - padding: 5px 0; - border-radius: 5px; - webkit-border-radius: 20px; - moz-border-radius: 20px; - text-align: center; - color: $white; - background-color: $p5js-pink; - vertical-align: top; - /* Position the tooltip text - see examples below! */ -/* content: ' '; - position: absolute; - left: #{15 / $base-font-size}rem; - -webkit-margin-before: 0em; - -webkit-margin-after: 0em; -} - -/* Show the tooltip text when you mouse over the tooltip container */ -/*.tooltip:hover .tooltiptext { - visibility: visible; -}*//*/*/ \ No newline at end of file From 9ae27faf55297af05cffaddacc5ff5e726ae543e Mon Sep 17 00:00:00 2001 From: saumya1906 Date: Tue, 29 Aug 2017 00:43:41 +0530 Subject: [PATCH 07/15] Issue 266: Changed class name --- client/modules/IDE/components/Preferences.jsx | 2 +- client/styles/components/_preferences.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx index 41f5827c..29a77581 100644 --- a/client/modules/IDE/components/Preferences.jsx +++ b/client/modules/IDE/components/Preferences.jsx @@ -226,7 +226,7 @@ class Preferences extends React.Component {

Add a p5.js or an external library

-

Add a script library resource field

+

Add a script library resource field

Security Protocol

Serve over HTTPS

diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index 13ccca40..f9d886ef 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -153,7 +153,7 @@ padding-left: #{25 / $base-font-size}rem; } -.preference__sketch1{ +.preference__add__resource { width: #{601 / $base-font-size}rem; height: #{100 / $base-font-size}rem; font-family: Montserrat; From 9c655122b29c82255cf5b394b8cbe79933cbcf90 Mon Sep 17 00:00:00 2001 From: saumya1906 Date: Fri, 22 Sep 2017 19:06:25 +0530 Subject: [PATCH 08/15] Adjusted tabs and added serve over https checkbox --- client/modules/IDE/components/Preferences.jsx | 28 +++++++++++- client/styles/components/_preferences.scss | 44 +++++++++++++++++-- 2 files changed, 68 insertions(+), 4 deletions(-) diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx index 29a77581..be3a829c 100644 --- a/client/modules/IDE/components/Preferences.jsx +++ b/client/modules/IDE/components/Preferences.jsx @@ -228,7 +228,21 @@ class Preferences extends React.Component {

Add a p5.js or an external library

Add a script library resource field

Security Protocol

-

Serve over HTTPS

+ { + this.props.currentUser == null ? + null : +
+ { + this.props.setServeSecure(event.target.checked); + }} + /> +
+ } +

Serve over HTTPS

@@ -327,7 +341,19 @@ Preferences.propTypes = { setLintWarning: PropTypes.func.isRequired, // openTab: PropTypes.func.isRequired, theme: PropTypes.string.isRequired, + setServeSecure: PropTypes.func.isRequired, + currentUser: PropTypes.string, + project: PropTypes.shape({ + name: PropTypes.string.isRequired, + isEditingName: PropTypes.bool, + id: PropTypes.string, + serveSecure: PropTypes.bool, + }).isRequired, setTheme: PropTypes.func.isRequired }; +Preferences.defaultProps = { + currentUser: undefined +}; + export default Preferences; diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index f9d886ef..101ac54b 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -42,6 +42,16 @@ } } +.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; @@ -122,18 +132,43 @@ &: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() { + /*color: getThemifyVariable('primary-text-color');*/ + border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color'); + color: pink; + } +} + +.react-tabs__tab--selected .preference__subheading { + @include themify() { + color: black !important; + } +} + +.react-tabs__tab { + width: #{110 / $base-font-size}rem; + text-align: center; + color: black; +} + .preference__subheading { @include themify() { color: getThemifyVariable('inactive-text-color'); - &:hover { + &:hover, &:focus{ color: getThemifyVariable('primary-text-color'); - border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color'); + cursor: pointer; + } + &:focus { + color: getThemifyVariable('primary-text-color'); + cursor: pointer; } } font-size: #{12 / $base-font-size}rem; @@ -142,8 +177,9 @@ 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: #{98 / $base-font-size}rem; + width: #{110 / $base-font-size}rem; } .preference__vertical-list { @@ -220,3 +256,5 @@ padding-right: #{14 / $base-font-size}rem; } + + From 9f9b09b99d0259ca64a6b104a91b7d911d950259 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Mon, 13 Nov 2017 14:44:23 -0500 Subject: [PATCH 09/15] clean up ideview page --- client/modules/IDE/pages/IDEView.jsx | 213 +++++++++++---------------- 1 file changed, 87 insertions(+), 126 deletions(-) diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index 1f6cbc75..4c03c581 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -3,7 +3,6 @@ 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'; @@ -406,131 +405,93 @@ class IDEView extends React.Component { - {(() => { - if (this.props.ide.modalIsVisible) { - return ( - - ); - } - return ''; - })()} - {(() => { - if (this.props.ide.newFolderModalVisible) { - return ( - - ); - } - return ''; - })()} - {(() => { // eslint-disable-line - if (this.props.location.pathname.match(/sketches$/)) { - return ( - - - - ); - } - })()} - {(() => { // eslint-disable-line - if (this.props.location.pathname.match(/assets$/)) { - return ( - - - - ); - } - })()} - {(() => { // eslint-disable-line - if (this.props.location.pathname === '/about') { - return ( - - - - ); - } - })()} - {(() => { // eslint-disable-line - if (this.props.ide.shareModalVisible) { - return ( - - - - ); - } - })()} - {(() => { // eslint-disable-line - if (this.props.ide.keyboardShortcutVisible) { - return ( - - - - ); - } - })()} - {(() => { // eslint-disable-line - if (this.props.ide.errorType) { - return ( - - - - ); - } - })()} - {(() => { // eslint-disable-line - if (this.props.ide.helpType) { - return ( - - - - ); - } - })()} + { this.props.ide.modalIsVisible && + + } + { this.props.ide.newFolderModalVisible && + + } + { this.props.location.pathname.match(/sketches$/) && + + + + } + { this.props.location.pathname.match(/assets$/) && + + + + } + { this.props.location.pathname === '/about' && + + + + } + { this.props.ide.shareModalVisible && + + + + } + { this.props.ide.keyboardShortcutVisible && + + + + } + { this.props.ide.errorType && + + + + } + { this.props.ide.helpType && + + + + } ); } From 9587d019085ec6cfd2cfc8bd7b6b4161b397b752 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Mon, 13 Nov 2017 19:09:08 -0500 Subject: [PATCH 10/15] 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 ( -
-
-

Settings

- -
+
@@ -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} /> - + {this.props.ide.preferencesIsVisible && + + + + }
{ this.overlay = element; }}>
- {(() => { - if ( + {( ( (this.props.preferences.textOutput || - this.props.preferences.gridOutput || - this.props.preferences.soundOutput - ) && this.props.ide.isPlaying - ) || this.props.ide.isAccessibleOutputPlaying) { - return ( - - ); - } - return ''; - })()} + this.props.preferences.gridOutput || + this.props.preferences.soundOutput + ) && + this.props.ide.isPlaying + ) || + this.props.ide.isAccessibleOutputPlaying + ) && + + }
Date: Tue, 14 Nov 2017 15:27:00 -0500 Subject: [PATCH 11/15] continue to fix preferences styles --- client/images/information.svg | 11 + client/modules/IDE/components/Preferences.jsx | 61 ++-- client/modules/IDE/pages/IDEView.jsx | 2 + client/styles/components/_copyable-input.scss | 2 +- client/styles/components/_overlay.scss | 2 +- client/styles/components/_preferences.scss | 342 +++++++++--------- 6 files changed, 230 insertions(+), 190 deletions(-) create mode 100644 client/images/information.svg diff --git a/client/images/information.svg b/client/images/information.svg new file mode 100644 index 00000000..e3642f56 --- /dev/null +++ b/client/images/information.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx index a15a6832..eaafe147 100644 --- a/client/modules/IDE/components/Preferences.jsx +++ b/client/modules/IDE/components/Preferences.jsx @@ -8,6 +8,7 @@ import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; const plusUrl = require('../../../images/plus.svg'); const minusUrl = require('../../../images/minus.svg'); const beepUrl = require('../../../sounds/audioAlert.mp3'); +const infoUrl = require('../../../images/information.svg'); class Preferences extends React.Component { constructor(props) { @@ -88,6 +89,17 @@ class Preferences extends React.Component { checked={this.props.theme === 'dark'} /> + 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'} + /> +
@@ -205,26 +217,31 @@ class Preferences extends React.Component {
-

-
+ {/*

Add a p5.js or an external library

-

Add a script library resource field

+
*/} +

Security Protocol

- { - this.props.currentUser == null ? - null : -
- { - this.props.setServeSecure(event.target.checked); - }} - /> -
- } -

Serve over HTTPS

+
+ { + this.props.setServeSecure(event.target.checked); + }} + /> + + + + +
@@ -321,14 +338,8 @@ Preferences.propTypes = { setLintWarning: PropTypes.func.isRequired, // openTab: PropTypes.func.isRequired, theme: PropTypes.string.isRequired, + serveSecure: PropTypes.bool.isRequired, setServeSecure: PropTypes.func.isRequired, - currentUser: PropTypes.string, - project: PropTypes.shape({ - name: PropTypes.string.isRequired, - isEditingName: PropTypes.bool, - id: PropTypes.string, - serveSecure: PropTypes.bool, - }).isRequired, setTheme: PropTypes.func.isRequired }; diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index 0794765d..a9dac23c 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -272,6 +272,8 @@ 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} /> } diff --git a/client/styles/components/_copyable-input.scss b/client/styles/components/_copyable-input.scss index f19bfe61..35b36db7 100644 --- a/client/styles/components/_copyable-input.scss +++ b/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, diff --git a/client/styles/components/_overlay.scss b/client/styles/components/_overlay.scss index de02a35f..6932b4ae 100644 --- a/client/styles/components/_overlay.scss +++ b/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; } diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index 96b9340c..15daab85 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -1,59 +1,59 @@ .preferences { - 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 ; - display: flex; - flex-direction: column; - @include themify() { - background-color: getThemifyVariable('editor-gutter-color'); - } - outline: none; + width: 100%; + min-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; + outline: none; } .preferences__exit-button { - @include icon(); - padding-top: #{5 / $base-font-size}rem; - margin-right: #{-6 / $base-font-size}rem; + @include icon(); + padding-top: #{5 / $base-font-size}rem; + margin-right: #{-6 / $base-font-size}rem; } .preference__minus-button, .preference__plus-button { - @include themify() { - @extend %preferences-button; - 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; - } - } + @include themify() { + @extend %preferences-button; + 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; + } + } } .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; + 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; - @include themify() { - color: getThemifyVariable('heading-text-color'); - } + display: flex; + flex-direction: row; + justify-content: space-between; + @include themify() { + color: getThemifyVariable('heading-text-color'); + } } .preferences__title{ - width: #{90 / $base-font-size}rem; - height: #{25 / $base-font-size}rem; + 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; @@ -61,188 +61,204 @@ } .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'); - } + 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; - padding-bottom: #{12 / $base-font-size}rem; - & + & { - @include themify() { - border-top: 1px dashed getThemifyVariable('button-border-color'); - } - } + display: flex; + flex-wrap: wrap; + padding-bottom: #{12 / $base-font-size}rem; + & + & { + @include themify() { + border-top: 1px dashed getThemifyVariable('button-border-color'); + } + } } .preference__title { - width: 100%; - font-size: #{16 / $base-font-size}rem; - margin-top: #{13 / $base-font-size}rem; - margin-bottom: #{7 / $base-font-size}rem; - @include themify() { - color: getThemifyVariable('heading-text-color'); - } + width: 100%; + font-size: #{16 / $base-font-size}rem; + margin-top: #{13 / $base-font-size}rem; + margin-bottom: #{7 / $base-font-size}rem; + @include themify() { + color: getThemifyVariable('heading-text-color'); + } } .preference__subtitle { - @include themify() { - color: getThemifyVariable('inactive-text-color'); - } - width: 100%; - margin-bottom: #{10 / $base-font-size}rem; - margin-top: 0; + @include themify() { + color: getThemifyVariable('inactive-text-color'); + } + width: 100%; + margin-bottom: #{10 / $base-font-size}rem; + margin-top: 0; } .preference__value { - @include themify() { - border: #{1 / $base-font-size}rem solid getThemifyVariable('button-border-color'); - background-color: getThemifyVariable('button-background-color'); - color: getThemifyVariable('input-text-color'); - } - text-align: center; - border-radius: 0%; - outline: none; - width: #{44 / $base-font-size}rem; - height: #{40 / $base-font-size}rem; - margin: 0 #{26 / $base-font-size}rem; - padding: 0; - font-size: #{16 / $base-font-size}rem; - font-family: Inconsolata; + @include themify() { + border: #{1 / $base-font-size}rem solid getThemifyVariable('button-border-color'); + background-color: getThemifyVariable('button-background-color'); + color: getThemifyVariable('input-text-color'); + } + text-align: center; + border-radius: 0%; + outline: none; + width: #{44 / $base-font-size}rem; + height: #{40 / $base-font-size}rem; + margin: 0 #{26 / $base-font-size}rem; + padding: 0; + font-size: #{16 / $base-font-size}rem; + font-family: Inconsolata; } .preference__label { - @include themify() { - color: getThemifyVariable('inactive-text-color'); - &:hover { - color: getThemifyVariable('primary-text-color'); - } + @include themify() { + color: getThemifyVariable('inactive-text-color'); + &: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; + } + 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() { - /*color: getThemifyVariable('primary-text-color');*/ - border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color'); - color: pink; - } + @include themify() { + border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color'); + } } .react-tabs__tab--selected .preference__subheading { - @include themify() { - color: black !important; - } + @include themify() { + color: getThemifyVariable('primary-text-color'); + } } .react-tabs__tab { - width: #{110 / $base-font-size}rem; - text-align: center; - color: black; + 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: #{25 / $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: 100%; + @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; + font-family: Montserrat; + width: 100%; + margin: 0; + padding: 0 #{5 /$base-font-size}rem; } .preference__vertical-list { - display: flex; - flex-direction: column; - width: #{44 / $base-font-size}rem; - padding-left: #{25 / $base-font-size}rem; + display: flex; + flex-direction: column; + width: #{44 / $base-font-size}rem; + padding-left: #{25 / $base-font-size}rem; } .preference__add__resource { - width: #{601 / $base-font-size}rem; - height: #{100 / $base-font-size}rem; - font-family: Montserrat; - 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'); - } + font-family: Montserrat; + 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; + @extend %hidden-element; } .preference__option { - @include themify() { - @extend %preference-option; - padding-right: #{44 / $base-font-size}rem; - } - display: flex; - flex-wrap: wrap; - flex-direction: row; - margin-top: #{10 / $base-font-size}rem; - width: #{50 / $base-font-size}rem; - margin-left: #{5 / $base-font-size}rem; + @include themify() { + @extend %preference-option; + padding-right: #{25 / $base-font-size}rem; + } + display: flex; + flex-wrap: wrap; + flex-direction: row; + margin-top: #{10 / $base-font-size}rem; + margin-left: #{5 / $base-font-size}rem; } .preference__option:last-child { - padding-right: 0; + padding-right: 0; } .preference__preview-button { - @include themify() { - @extend %preference-option; - &:hover { - color: getThemifyVariable('button-background-hover-color'); - } - } - margin-top: #{7 / $base-font-size}rem; - margin-left: #{30 / $base-font-size}rem; + @include themify() { + @extend %preference-option; + &:hover { + color: getThemifyVariable('button-background-hover-color'); + } + } + margin-top: #{7 / $base-font-size}rem; + margin-left: #{30 / $base-font-size}rem; } .preference__options { - display: flex; + display: flex; } .preference__radio-button:checked + .preference__option { - @include themify() { - //for some reason this won't work for getThemifyVariable - color: map-get($theme-map, 'primary-text-color'); - } + @include themify() { + //for some reason this won't work for getThemifyVariable + color: map-get($theme-map, 'primary-text-color'); + } } .preference--hidden { - @extend %hidden-element; + @extend %hidden-element; } .preference__option.preference__canvas:not(:last-child) { - padding-right: #{14 / $base-font-size}rem; + 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; } From c99c867021ae922e6a1afbaf53f3ba8d9105be91 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Tue, 14 Nov 2017 16:27:42 -0500 Subject: [PATCH 12/15] almost finished with preferences styling --- client/modules/IDE/components/Preferences.jsx | 98 ++++++++++--------- client/styles/components/_preferences.scss | 15 ++- 2 files changed, 60 insertions(+), 53 deletions(-) diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx index eaafe147..7e01f4bd 100644 --- a/client/modules/IDE/components/Preferences.jsx +++ b/client/modules/IDE/components/Preferences.jsx @@ -175,7 +175,7 @@ class Preferences extends React.Component { value="Spaces" checked={!this.props.isTabIndent} /> - + - +

Autosave

@@ -245,45 +245,6 @@ class Preferences extends React.Component {
-
-

Accessible text-based canvas

-
Used with screen reader
-
- { - this.props.setTextOutput(event.target.checked); - }} - aria-label="text output on" - name="text output" - id="text-output-on" - className="preference__radio-button" - value="On" - checked={(this.props.textOutput)} - /> - - { - this.props.setGridOutput(event.target.checked); - }} - aria-label="table output on" - name="table output" - id="table-output-on" - className="preference__radio-button" - value="On" - checked={(this.props.gridOutput)} - /> - - -
-

Lint warning sound

@@ -309,6 +270,56 @@ class Preferences extends React.Component { checked={!this.props.lintWarning} /> + +
+
+
+

Accessible text-based canvas

+
Used with screen reader
+ +
+ { + this.props.setTextOutput(event.target.checked); + }} + aria-label="text output on" + name="text output" + id="text-output-on" + value="On" + checked={(this.props.textOutput)} + /> + + { + this.props.setGridOutput(event.target.checked); + }} + aria-label="table output on" + name="table output" + id="table-output-on" + value="On" + checked={(this.props.gridOutput)} + /> + + { + this.props.setSoundOutput(event.target.checked); + }} + aria-label="sound output on" + name="sound output" + id="sound-output-on" + value="On" + checked={(this.props.soundOutput)} + /> +
@@ -330,13 +341,12 @@ Preferences.propTypes = { setAutosave: PropTypes.func.isRequired, textOutput: PropTypes.bool.isRequired, gridOutput: PropTypes.bool.isRequired, - // soundOutput: PropTypes.bool.isRequired, + soundOutput: PropTypes.bool.isRequired, setTextOutput: PropTypes.func.isRequired, setGridOutput: PropTypes.func.isRequired, - // setSoundOutput: PropTypes.func.isRequired, + setSoundOutput: PropTypes.func.isRequired, lintWarning: PropTypes.bool.isRequired, setLintWarning: PropTypes.func.isRequired, -// openTab: PropTypes.func.isRequired, theme: PropTypes.string.isRequired, serveSecure: PropTypes.bool.isRequired, setServeSecure: PropTypes.func.isRequired, diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index 15daab85..2ae052fd 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -1,6 +1,6 @@ .preferences { width: 100%; - min-width: #{640 / $base-font-size}rem; + width: #{640 / $base-font-size}rem; max-width: 100%; min-height: #{460 / $base-font-size}rem; max-height: 100%; @@ -166,7 +166,6 @@ } font-size: #{12 / $base-font-size}rem; height: #{20 / $base-font-size}rem; - font-family: Montserrat; width: 100%; margin: 0; padding: 0 #{5 /$base-font-size}rem; @@ -180,7 +179,6 @@ } .preference__add__resource { - font-family: Montserrat; font-size: #{14 / $base-font-size}rem; line-height: 1.43; text-align: left; @@ -205,8 +203,6 @@ display: flex; flex-wrap: wrap; flex-direction: row; - margin-top: #{10 / $base-font-size}rem; - margin-left: #{5 / $base-font-size}rem; } .preference__option:last-child { @@ -220,12 +216,16 @@ color: getThemifyVariable('button-background-hover-color'); } } - margin-top: #{7 / $base-font-size}rem; margin-left: #{30 / $base-font-size}rem; } +.preference__option.preference__whitespace-button { + padding-top: #{8 / $base-font-size}rem; +} + .preference__options { display: flex; + justify-content: center; } .preference__radio-button:checked + .preference__option { @@ -260,6 +260,3 @@ text-align: left; font-size: #{12 / $base-font-size}rem; } - - - From 5278328c1ed0cbf8a81f489fa5ef4b89934bea50 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Tue, 14 Nov 2017 17:00:17 -0500 Subject: [PATCH 13/15] small fix to settings styles --- client/styles/components/_preferences.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index 2ae052fd..3f77e40a 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -110,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; @@ -198,7 +198,7 @@ .preference__option { @include themify() { @extend %preference-option; - padding-right: #{25 / $base-font-size}rem; + margin-right: #{25 / $base-font-size}rem; } display: flex; flex-wrap: wrap; @@ -206,7 +206,7 @@ } .preference__option:last-child { - padding-right: 0; + margin-right: 0; } .preference__preview-button { @@ -221,6 +221,8 @@ .preference__option.preference__whitespace-button { padding-top: #{8 / $base-font-size}rem; + margin-right: 0; + margin-left: #{25 / $base-font-size}rem; } .preference__options { From 929404a03703b84b2a93d923be84dc9c97b0c8fa Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Tue, 14 Nov 2017 17:03:16 -0500 Subject: [PATCH 14/15] fix lint warning --- client/modules/IDE/components/Preferences.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx index 7e01f4bd..b7b4612c 100644 --- a/client/modules/IDE/components/Preferences.jsx +++ b/client/modules/IDE/components/Preferences.jsx @@ -175,7 +175,12 @@ class Preferences extends React.Component { value="Spaces" checked={!this.props.isTabIndent} /> - + Date: Tue, 14 Nov 2017 17:03:55 -0500 Subject: [PATCH 15/15] remove commented out code --- client/modules/IDE/components/Preferences.jsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx index b7b4612c..a55c63cf 100644 --- a/client/modules/IDE/components/Preferences.jsx +++ b/client/modules/IDE/components/Preferences.jsx @@ -17,7 +17,6 @@ class Preferences extends React.Component { this.handleUpdateFont = this.handleUpdateFont.bind(this); this.handleUpdateIndentation = this.handleUpdateIndentation.bind(this); this.handleLintWarning = this.handleLintWarning.bind(this); -// this.handleTab = this.handleTab.bind(this); } handleUpdateFont(event) { @@ -46,10 +45,6 @@ class Preferences extends React.Component { this.props.setLintWarning(value); } - // handleTab(event, TabName) { - // this.props.openTab(event, TabName); - // } - render() { const beep = new Audio(beepUrl);