From ca80308bc2e5f491db9026e02f806355f4b075b1 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Tue, 14 Nov 2017 15:27:00 -0500 Subject: [PATCH] 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; }