r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Merge branch 'saumya1906-issue266'

Browse source
This commit is contained in:
Cassie Tarakajian 2017-11-14 17:18:44 -05:00
commit f6b42e0c41
7 changed files with 639 additions and 518 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
client/images/information.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 828 B

148
client/modules/IDE/components/Preferences.jsx
View file

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

82
client/modules/IDE/pages/IDEView.jsx
View file

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

2
client/styles/components/_copyable-input.scss
View file

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

2
client/styles/components/_overlay.scss
View file

@ -29,7 +29,7 @@
.overlay__header { .overlay__header {
display: flex; display: flex;
justify-content: space-between; 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; flex: 1 0 auto;
} }

143
client/styles/components/_preferences.scss
View file

@ -1,18 +1,13 @@
.preferences { .preferences {
@extend %modal; width: 100%;
position: absolute; width: #{640 / $base-font-size}rem;
top: #{51 / $base-font-size}rem; max-width: 100%;
right: #{29 / $base-font-size}rem; min-height: #{460 / $base-font-size}rem;
width: #{288 / $base-font-size}rem; max-height: 100%;
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 ; padding: 0 #{20 / $base-font-size}rem #{2 / $base-font-size}rem #{20 / $base-font-size}rem ;
&--selected {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
@include themify() {
background-color: getThemifyVariable('editor-gutter-color');
}
outline: none; outline: none;
} }
@ -29,6 +24,7 @@
width: #{32 / $base-font-size}rem; width: #{32 / $base-font-size}rem;
height: #{32 / $base-font-size}rem; height: #{32 / $base-font-size}rem;
margin-left: #{6 / $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; line-height: #{40 / $base-font-size}rem;
& svg { & svg {
width: #{10 / $base-font-size}rem; 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 { .preferences__heading {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-bottom: #{20 / $base-font-size}rem;
@include themify() { @include themify() {
color: getThemifyVariable('heading-text-color'); 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 { .preference {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -87,7 +110,7 @@
outline: none; outline: none;
width: #{44 / $base-font-size}rem; width: #{44 / $base-font-size}rem;
height: #{40 / $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; padding: 0;
font-size: #{16 / $base-font-size}rem; font-size: #{16 / $base-font-size}rem;
font-family: Inconsolata; font-family: Inconsolata;
@ -99,12 +122,55 @@
&:hover { &:hover {
color: getThemifyVariable('primary-text-color'); color: getThemifyVariable('primary-text-color');
} }
} }
margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem; margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;
font-size: #{9 / $base-font-size}rem; font-size: #{9 / $base-font-size}rem;
width: #{44 / $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 { .preference__vertical-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -112,6 +178,19 @@
padding-left: #{25 / $base-font-size}rem; 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 { .preference__radio-button {
@extend %hidden-element; @extend %hidden-element;
} }
@ -119,22 +198,36 @@
.preference__option { .preference__option {
@include themify() { @include themify() {
@extend %preference-option; @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 { .preference__option:last-child {
padding-right: 0; margin-right: 0;
} }
.preference__preview-button { .preference__preview-button {
@include themify() { @include themify() {
@extend %preference-option; @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 { .preference__options {
display: flex; display: flex;
justify-content: center;
} }
.preference__radio-button:checked + .preference__option { .preference__radio-button:checked + .preference__option {
@ -151,3 +244,21 @@
.preference__option.preference__canvas:not(:last-child) { .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;
}

1
package.json
View file

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