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

a lot of dark theme fixes

Browse source
This commit is contained in:
Cassie Tarakajian 2016-09-21 18:52:44 -04:00
parent feeffb0fae
commit c55e1f5de4
11 changed files with 205 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
client/modules/IDE/pages/IDEView.js
View file

@ -27,7 +27,6 @@ import SplitPane from 'react-split-pane';
import Overlay from '../../App/components/Overlay';
import SketchList from '../components/SketchList';
import About from '../components/About';
import classNames from 'classnames';
class IDEView extends React.Component {
constructor(props) {
@ -62,6 +61,8 @@ class IDEView extends React.Component {
this.props.router.setRouteLeaveHook(this.props.route, () => this.warnIfUnsavedChanges());
window.onbeforeunload = () => this.warnIfUnsavedChanges();
document.body.className = this.props.preferences.theme;
}
componentWillUpdate(nextProps) {
@ -76,6 +77,10 @@ class IDEView extends React.Component {
if (nextProps.params.project_id && !this.props.params.project_id) {
this.props.getProject(nextProps.params.project_id);
}
if (nextProps.preferences.theme !== this.props.preferences.theme) {
document.body.className = nextProps.preferences.theme;
}
}
componentDidUpdate(prevProps) {
@ -157,14 +162,8 @@ class IDEView extends React.Component {
}
render() {
let ideClass = classNames({
ide: true,
light: this.props.preferences.theme === 'light',
dark: this.props.preferences.theme === 'dark',
});
return (
<div className={ideClass}>
<div className="ide-content">
<div className="ide">
{this.props.toast.isVisible && <Toast />}
<Nav
user={this.props.user}
@ -315,7 +314,6 @@ class IDEView extends React.Component {
</SplitPane>
</SplitPane>
</div>
</div>
{(() => {
if (this.props.ide.modalIsVisible) {
return (

4
client/styles/abstracts/_variables.scss
View file

@ -29,6 +29,8 @@ $themes: (
console-background-color: #eee,
console-header-background-color: #d6d6d6,
ide-border-color: #f4f4f4,
editor-gutter-color: #f7f7f7,
file-selected-color: #f4f4f4,
),
dark: (
primary-text-color: $white,
@ -54,6 +56,8 @@ $themes: (
console-header-background-color: #3f3f3f,
console-header-color: #b5b5b5,
ide-border-color: #949494,
editor-gutter-color: #363636,
file-selected-color: #404040,
)
);

3
client/styles/base/_base.scss
View file

@ -39,6 +39,9 @@ input {
// border-radius: 2px;
border: 1px solid $input-border-color;
padding: #{10 / $base-font-size}rem;
@include themify() {
color: $primary-text-color;
}
}
input[type="submit"] {

3
client/styles/components/_console.scss
View file

@ -1,7 +1,10 @@
.preview-console {
@include themify() {
background: getThemifyVariable('console-background-color');
border-color: getThemifyVariable('ide-border-color');
}
border-left: 1px solid;
border-right: 1px solid;
width: 100%;
height: 100%;
z-index: 1000;

8
client/styles/components/_editor.scss
View file

@ -60,11 +60,19 @@
background-color: getThemifyVariable('modal-background-color');
border: 1px solid getThemifyVariable('modal-border-color');
box-shadow: 0 12px 12px getThemifyVariable('shadow-color');
color: getThemifyVariable('primary-text-color');
}
border-radius: 2px;
font-family: 'Avenir Next', Montserrat, sans-serif;
}
.CodeMirror-gutters {
@include themify() {
background-color: getThemifyVariable('editor-gutter-color');
border-color: getThemifyVariable('ide-border-color');
}
}
.editor__options-button {
@include themify() {
@extend %icon;

42
client/styles/components/_p5-dark-codemirror-theme.scss
View file

@ -10,16 +10,20 @@
//light gray: #f4f4f4
//dark gray: #b5b5b5
$p5-dark-lightbrown: #A67F59;
$p5-dark-brown: #6C4D13;
$p5-dark-black: #333;
$p5-dark-blue: #0F9DD7;
$p5-dark-pink: #D9328F;
$p5-dark-gray: #999999;
$p5-dark-darkblue: #318094;
$p5-dark-white: #FFFFFF;
$p5-dark-gray: #A0A0A0;
$p5-dark-lightblue: #00A1D3;
$p5-dark-darkblue: #2D7BB6;
$p5-dark-white: #FDFDFD;
$p5-dark-orange: #EE9900;
$p5-dark-lightgray: #E0D7D1;
$p5-dark-darkgray: #666666;
$p5-dark-lightgray: #f4f4f4;
$p5-dark-darkgray: #b5b5b5;
$p5-dark-gutter: #f4f4f4;
$p5-dark-number: #b5b5b5;
$p5-dark-selected: rgba(45, 123, 182, 25);
$p5-dark-activeline: rgb(207, 207, 207);
@ -33,15 +37,15 @@ $p5-dark-activeline: rgb(207, 207, 207);
}
.cm-s-p5-dark .cm-def {
color: $p5-dark-blue;
color: $p5-dark-darkblue;
}
.cm-s-p5-dark .cm-string {
color: $p5-dark-blue;
color: $p5-dark-lightblue;
}
.cm-s-p5-dark .cm-string-2 {
color: $p5-dark-pink;
color: $p5-dark-orange;
}
.cm-s-p5-dark .cm-number {
@ -53,7 +57,7 @@ $p5-dark-activeline: rgb(207, 207, 207);
}
.cm-s-p5-dark .cm-variable {
color: $p5-dark-blue;
color: $p5-dark-lightblue;
}
.cm-s-p5-dark .cm-variable-2 {
@ -69,11 +73,11 @@ $p5-dark-activeline: rgb(207, 207, 207);
}
.cm-s-p5-dark .cm-operator {
color: $p5-dark-white;
color: $p5-dark-lightbrown;
}
.cm-s-p5-dark .cm-linenumber {
color: $p5-dark-darkgray;
color: $p5-dark-number;
}
.cm-s-p5-dark .CodeMirror-selected {
@ -81,12 +85,12 @@ $p5-dark-activeline: rgb(207, 207, 207);
}
.cm-s-p5-dark .CodeMirror-activeline-background {
background-color: #F3F3F3;
background-color: #404040;
}
.cm-s-p5-dark .CodeMirror-activeline-gutter {
background-color: #ECECEC;
border-right: 1px solid #ddd;
background-color: #454545;
border-right: 1px solid #949494;
}
.cm-s-p5-dark .cm-error {
@ -99,17 +103,17 @@ $p5-dark-activeline: rgb(207, 207, 207);
}
.cm-s-p5-dark .cm-qualifier {
color: $p5-dark-blue;
color: $p5-dark-lightblue;
}
.cm-s-p5-dark .cm-tag {
color: $p5-dark-brown;
color: $p5-dark-pink;
}
.cm-s-p5-dark .cm-builtin {
color: $p5-dark-blue;
color: $p5-dark-lightblue;
}
.cm-s-p5-dark .cm-attribute {
color: $p5-dark-darkblue;
color: $p5-dark-lightblue;
}

1
client/styles/components/_p5-light-codemirror-theme.scss
View file

@ -13,7 +13,6 @@
$p5-light-lightbrown: #A67F59;
$p5-light-brown: #704F21;
$p5-light-black: #333;
$p5-light-blue: #0F9DD7;
$p5-light-pink: #D9328F;
$p5-light-gray: #A0A0A0;
$p5-light-lightblue: #00A1D3;

10
client/styles/components/_resizer.scss
View file

@ -1,10 +1,12 @@
.Resizer {
@include themify() {
background: getThemifyVariable('ide-border-color');
}
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: $ide-border-color;
opacity: .2;
z-index: 1;
opacity: 0.02;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
@ -16,7 +18,7 @@
// }
.Resizer.horizontal {
height: 11px;
height: 10px;
margin: -5px 0;
border-top: 5px solid rgba(255, 255, 255, 0);
border-bottom: 5px solid rgba(255, 255, 255, 0);
@ -30,7 +32,7 @@
}
.Resizer.vertical {
width: 11px;
width: 10px;
margin: 0 -5px;
border-left: 5px solid rgba(255, 255, 255, 0);
border-right: 5px solid rgba(255, 255, 255, 0);

10
client/styles/components/_sidebar.scss
View file

@ -77,10 +77,9 @@
.file-item__content {
display: flex;
position: relative;
padding: #{8 / $base-font-size}rem 0;
.sidebar__file-item--selected > & {
@include themify() {
background-color: map-get($theme-map, 'ide-border-color');
background-color: map-get($theme-map, 'file-selected-color');
}
}
.sidebar--contracted & {
@ -89,6 +88,7 @@
}
.sidebar__file-item-name {
padding: #{8 / $base-font-size}rem 0;
.sidebar__file-item--editing & {
display: none;
}
@ -97,6 +97,7 @@
.sidebar__file-item-show-options {
@include themify() {
@extend %icon;
padding: #{8 / $base-font-size}rem 0;
}
display: none;
position: absolute;
@ -128,8 +129,7 @@
display: none;
padding: 0;
border: 0;
background-color: transparent;
max-width: 90%;
width: calc(100% - #{100 / $base-font-size}rem);
.sidebar__file-item--editing & {
display: inline-block;
}
@ -170,6 +170,7 @@
}
.sidebar__folder-icon {
padding: #{8 / $base-font-size}rem 0;
margin-right: #{5 / $base-font-size}rem;
& g {
@include themify() {
@ -179,6 +180,7 @@
}
.sidebar__file-item-icon {
padding: #{8 / $base-font-size}rem 0;
margin-right: #{5 / $base-font-size}rem;
& g {
@include themify() {

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

@ -27,8 +27,10 @@
.toolbar__preferences-button {
@include themify() {
@extend %toolbar-button;
line-height: #{50 / $base-font-size}rem;
&--selected {
@extend %toolbar-button--selected;
line-height: #{50 / $base-font-size}rem;
}
}
line-height: #{50 / $base-font-size}rem;

5
client/styles/layout/_ide.scss
View file

@ -1,9 +1,4 @@
.ide {
height: 100%;
width: 100%;
}
.ide-content {
display: flex;
flex-direction: column;
height: 100%;