Merge pull request #8 from MathuraMG/add-pref
Add preference in toolbar
This commit is contained in:
Cassie Tarakajian
GitHub
commit
7cc1efcd94
20 changed files with 311 additions and 24 deletions
12
images/exit.svg
Normal file
12
images/exit.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Exit</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="exit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Artboard-1" fill="#D8D8D8">
|
||||
<path d="M8,5.87867966 L2.69669914,0.575378798 L0.575378798,2.69669914 L5.87867966,8 L0.575378798,13.3033009 L2.69669914,15.4246212 L8,10.1213203 L13.3033009,15.4246212 L15.4246212,13.3033009 L10.1213203,8 L15.4246212,2.69669914 L13.3033009,0.575378798 L8,5.87867966 Z" id="exit"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 817 B |
12
images/minus.svg
Normal file
12
images/minus.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Decrease Value</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Decrease value" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="16" transform="translate(0.000000, -6.000000)" fill="#D8D8D8">
|
||||
<rect id="Decrease value" x="0" y="12" width="16" height="4"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 653 B |
12
images/plus.svg
Normal file
12
images/plus.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Increase Value</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Increase Value" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="16" fill="#D8D8D8">
|
||||
<path d="M10,6 L10,0 L6,0 L6,6 L0,6 L0,10 L6,10 L6,16 L10,16 L10,10 L16,10 L16,6 L10,6 Z" id="Increase Value"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 659 B |
19
images/preferences.svg
Normal file
19
images/preferences.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>preferences</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<path d="M14.6822397,16.2117311 L15.1198278,19.0213068 C14.3844186,19.4395702 13.5928664,19.770504 12.7592794,20 L11.0818617,17.703677 C10.7282919,17.7528772 10.367116,17.7783101 10,17.7783101 C9.63288395,17.7783101 9.2717081,17.7528772 8.91813825,17.703677 L7.24072063,20 C6.40713364,19.770504 5.6155814,19.4395702 4.88017224,19.0213068 L5.31776031,16.2117311 C4.73977887,15.7753775 4.22462249,15.2602211 3.78826886,14.6822397 L0.978693166,15.1198278 C0.560429839,14.3844186 0.22949601,13.5928664 -2.84217094e-14,12.7592794 L2.29632299,11.0818617 C2.24712285,10.7282919 2.22168987,10.367116 2.22168987,10 C2.22168987,9.63288395 2.24712285,9.2717081 2.29632299,8.91813825 L-8.12791077e-15,7.24072063 C0.22949601,6.40713364 0.560429839,5.6155814 0.978693166,4.88017224 L3.78826886,5.31776031 C4.22462249,4.73977887 4.73977887,4.22462249 5.31776031,3.78826886 L4.88017224,0.978693166 C5.6155814,0.560429839 6.40713364,0.22949601 7.24072063,0 L8.91813825,2.29632299 C9.2717081,2.24712285 9.63288395,2.22168987 10,2.22168987 C10.367116,2.22168987 10.7282919,2.24712285 11.0818617,2.29632299 L12.7592794,1.98620157e-14 C13.5928664,0.22949601 14.3844186,0.560429839 15.1198278,0.978693166 L14.6822397,3.78826886 C15.2602211,4.22462249 15.7753775,4.73977887 16.2117311,5.31776031 L19.0213068,4.88017224 C19.4395702,5.6155814 19.770504,6.40713364 20,7.24072063 L17.703677,8.91813825 C17.7528772,9.2717081 17.7783101,9.63288395 17.7783101,10 C17.7783101,10.367116 17.7528772,10.7282919 17.703677,11.0818617 L20,12.7592794 C19.770504,13.5928664 19.4395702,14.3844186 19.0213068,15.1198278 L16.2117311,14.6822397 C15.7753775,15.2602211 15.2602211,15.7753775 14.6822397,16.2117311 L14.6822397,16.2117311 Z M10,13.8891551 C12.147921,13.8891551 13.8891551,12.147921 13.8891551,10 C13.8891551,7.85207897 12.147921,6.11084493 10,6.11084493 C7.85207897,6.11084493 6.11084493,7.85207897 6.11084493,10 C6.11084493,12.147921 7.85207897,13.8891551 10,13.8891551 Z" id="path-1"></path>
|
||||
</defs>
|
||||
<g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Desktop-IDE-light" fill="#ED225D">
|
||||
<g id="preferences">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<use id="Combined-Shape" fill="#white" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -3,10 +3,11 @@
|
|||
<head>
|
||||
<title>p5.js Web Editor</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
|
||||
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" class="root-app">
|
||||
</div>
|
||||
<script src="/dist/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import 'codemirror/mode/javascript/javascript';
|
|||
import 'codemirror/addon/selection/active-line'
|
||||
|
||||
class Editor extends React.Component {
|
||||
_cm: CodeMirror.Editor
|
||||
_cm: CodeMirror.Editor
|
||||
|
||||
componentDidMount() {
|
||||
this._cm = CodeMirror(this.refs.container, {
|
||||
|
|
@ -17,6 +17,7 @@ class Editor extends React.Component {
|
|||
this._cm.on('change', () => {
|
||||
this.props.updateFile("sketch.js", this._cm.getValue());
|
||||
});
|
||||
this._cm.getWrapperElement().style['font-size'] = this.props.fontSize+'px';
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
|
|
@ -24,6 +25,9 @@ class Editor extends React.Component {
|
|||
this.props.content !== this._cm.getValue()) {
|
||||
this._cm.setValue(this.props.content);
|
||||
}
|
||||
if (this.props.fontSize !== prevProps.fontSize) {
|
||||
this._cm.getWrapperElement().style['font-size'] = this.props.fontSize+'px';
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
|
|
@ -35,4 +39,4 @@ class Editor extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Editor;
|
||||
export default Editor;
|
||||
|
|
|
|||
38
shared/components/Preferences/Preferences.jsx
Normal file
38
shared/components/Preferences/Preferences.jsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react';
|
||||
|
||||
var Isvg = require('react-inlinesvg');
|
||||
var exitUrl = require('../../../images/exit.svg');
|
||||
var plusUrl = require('../../../images/plus.svg');
|
||||
var minusUrl = require('../../../images/minus.svg');
|
||||
var classNames = require('classnames');
|
||||
|
||||
class Preferences extends React.Component {
|
||||
render() {
|
||||
let preferencesContainerClass = classNames({
|
||||
"preferences": true,
|
||||
"preferences--selected": this.props.isPreferencesShowing
|
||||
});
|
||||
return (
|
||||
<div className={preferencesContainerClass} tabindex="0">
|
||||
<div className="preferences__heading">
|
||||
<h2 className="preferences__title">Preferences</h2>
|
||||
<button className="preferences__exit-button" onClick={this.props.closePreferences}>
|
||||
<Isvg src={exitUrl} alt="Exit Preferences" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="preference">
|
||||
<h3 className="preference__title">Font Size</h3>
|
||||
<button className="preference__plus-button" onClick={this.props.decreaseFont}>
|
||||
<Isvg src={minusUrl} alt="Decrease Font Size" />
|
||||
</button>
|
||||
<p className="preference__value">{this.props.fontSize}</p>
|
||||
<button className="preference__minus-button" onClick={this.props.increaseFont}>
|
||||
<Isvg src={plusUrl} alt="Increase Font Size" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Preferences;
|
||||
|
|
@ -4,6 +4,7 @@ var Isvg = require('react-inlinesvg');
|
|||
var playUrl = require('../../../images/play.svg');
|
||||
var logoUrl = require('../../../images/p5js-logo.svg');
|
||||
var stopUrl = require('../../../images/stop.svg');
|
||||
var preferencesUrl = require('../../../images/preferences.svg');
|
||||
var classNames = require('classnames');
|
||||
|
||||
class Toolbar extends React.Component {
|
||||
|
|
@ -16,6 +17,10 @@ class Toolbar extends React.Component {
|
|||
"toolbar__stop-button": true,
|
||||
"toolbar__stop-button--selected": !this.props.isPlaying
|
||||
});
|
||||
let preferencesButtonClass = classNames({
|
||||
"toolbar__preferences-button": true,
|
||||
"toolbar__preferences-button--selected": this.props.isPreferencesShowing
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="toolbar">
|
||||
|
|
@ -26,6 +31,9 @@ class Toolbar extends React.Component {
|
|||
<button className={stopButtonClass} onClick={this.props.stopSketch}>
|
||||
<Isvg src={stopUrl} alt="Stop Sketch" />
|
||||
</button>
|
||||
<button className={preferencesButtonClass} onClick={this.props.openPreferences}>
|
||||
<Isvg src={preferencesUrl} alt="Show Preferences" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import Editor from '../../components/Editor/Editor'
|
|||
import PreviewFrame from '../../components/Preview/PreviewFrame'
|
||||
import Preview from '../../components/Preview/Preview'
|
||||
import Toolbar from '../../components/Toolbar/Toolbar'
|
||||
import Preferences from '../../components/Preferences/Preferences'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import { connect } from 'react-redux'
|
||||
import * as FileActions from '../../redux/actions'
|
||||
|
|
@ -11,16 +12,26 @@ class App extends React.Component {
|
|||
render() {
|
||||
return (
|
||||
<div className="app">
|
||||
<Toolbar
|
||||
<Toolbar
|
||||
className="toolbar"
|
||||
isPlaying={this.props.ide.isPlaying}
|
||||
startSketch={this.props.startSketch}
|
||||
stopSketch={this.props.stopSketch}/>
|
||||
<Editor
|
||||
startSketch={this.props.startSketch}
|
||||
stopSketch={this.props.stopSketch}
|
||||
openPreferences={this.props.openPreferences}
|
||||
isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
|
||||
/>
|
||||
<Preferences
|
||||
isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
|
||||
closePreferences={this.props.closePreferences}
|
||||
increaseFont={this.props.increaseFont}
|
||||
decreaseFont={this.props.decreaseFont}
|
||||
fontSize={this.props.preferences.fontSize}/>
|
||||
<Editor
|
||||
content={this.props.file.content}
|
||||
updateFile={this.props.updateFile}
|
||||
fontSize={this.props.preferences.fontSize} />
|
||||
<PreviewFrame
|
||||
content={this.props.file.content}
|
||||
updateFile={this.props.updateFile} />
|
||||
<PreviewFrame
|
||||
content={this.props.file.content}
|
||||
head={
|
||||
<link type='text/css' rel='stylesheet' href='preview-styles.css' />
|
||||
}
|
||||
|
|
@ -33,7 +44,8 @@ class App extends React.Component {
|
|||
function mapStateToProps(state) {
|
||||
return {
|
||||
file: state.file,
|
||||
ide: state.ide
|
||||
ide: state.ide,
|
||||
preferences: state.preferences
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -41,4 +53,4 @@ function mapDispatchToProps(dispatch) {
|
|||
return bindActionCreators(FileActions, dispatch);
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(App);
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(App);
|
||||
|
|
|
|||
|
|
@ -24,4 +24,28 @@ export function stopSketch() {
|
|||
return {
|
||||
type: ActionTypes.STOP_SKETCH
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function openPreferences() {
|
||||
return {
|
||||
type: ActionTypes.OPEN_PREFERENCES
|
||||
}
|
||||
}
|
||||
|
||||
export function closePreferences() {
|
||||
return {
|
||||
type: ActionTypes.CLOSE_PREFERENCES
|
||||
}
|
||||
}
|
||||
|
||||
export function increaseFont() {
|
||||
return {
|
||||
type: ActionTypes.INCREASE_FONTSIZE
|
||||
}
|
||||
}
|
||||
|
||||
export function decreaseFont() {
|
||||
return {
|
||||
type: ActionTypes.DECREASE_FONTSIZE
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,4 +2,9 @@ export const CHANGE_SELECTED_FILE = 'CHANGE_SELECTED_FILE';
|
|||
export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
|
||||
|
||||
export const START_SKETCH = 'START_SKETCH';
|
||||
export const STOP_SKETCH = 'STOP_SKETCH';
|
||||
export const STOP_SKETCH = 'STOP_SKETCH';
|
||||
|
||||
export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
|
||||
export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
|
||||
export const INCREASE_FONTSIZE = 'INCREASE_FONTSIZE';
|
||||
export const DECREASE_FONTSIZE = 'DECREASE_FONTSIZE';
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import { combineReducers } from 'redux'
|
||||
import file from './files'
|
||||
import ide from './ide'
|
||||
import preferences from './preferences'
|
||||
|
||||
const rootReducer = combineReducers({
|
||||
file,
|
||||
ide
|
||||
ide,
|
||||
preferences
|
||||
})
|
||||
|
||||
export default rootReducer
|
||||
export default rootReducer
|
||||
|
|
|
|||
35
shared/redux/reducers/preferences.js
Normal file
35
shared/redux/reducers/preferences.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import * as ActionTypes from '../constants/constants';
|
||||
|
||||
const initialState = {
|
||||
isPreferencesShowing: false,
|
||||
fontSize: 18
|
||||
}
|
||||
|
||||
const preferences = (state = initialState, action) => {
|
||||
switch (action.type) {
|
||||
case ActionTypes.OPEN_PREFERENCES:
|
||||
return {
|
||||
isPreferencesShowing: true,
|
||||
fontSize: state.fontSize
|
||||
}
|
||||
case ActionTypes.CLOSE_PREFERENCES:
|
||||
return {
|
||||
isPreferencesShowing: false,
|
||||
fontSize: state.fontSize
|
||||
}
|
||||
case ActionTypes.INCREASE_FONTSIZE:
|
||||
return {
|
||||
isPreferencesShowing: state.isPreferencesShowing,
|
||||
fontSize: state.fontSize+2
|
||||
}
|
||||
case ActionTypes.DECREASE_FONTSIZE:
|
||||
return {
|
||||
isPreferencesShowing: state.isPreferencesShowing,
|
||||
fontSize: state.fontSize-2
|
||||
}
|
||||
default:
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
export default preferences;
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
%toolbar-button {
|
||||
background-color: $light-button-background-color;
|
||||
color: $light-button-color;
|
||||
%button {
|
||||
display: inline-block;
|
||||
height: #{44 / $base-font-size}rem;
|
||||
width: #{44 / $base-font-size}rem;
|
||||
|
|
@ -10,11 +8,15 @@
|
|||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
%toolbar-button {
|
||||
@extend %button;
|
||||
background-color: $light-button-background-color;
|
||||
color: $light-button-color;
|
||||
& g {
|
||||
fill: $light-toolbar-button-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $light-button-background-hover-color;
|
||||
color: $light-button-hover-color;
|
||||
|
|
@ -30,3 +32,19 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
%preferences-button {
|
||||
@extend %button;
|
||||
background-color: $light-preferences-button-background-color;
|
||||
color: $light-preferences-button-color;
|
||||
& g {
|
||||
fill: $light-preferences-button-color;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $light-preferences-button-background-color;
|
||||
color: $light-preferences-button-hover-color;
|
||||
& g {
|
||||
fill: $light-preferences-button-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
$base-font-size: 16;
|
||||
$menu-font-size: 21;
|
||||
|
||||
//colors
|
||||
$p5js-pink: #ed225d;
|
||||
|
|
@ -35,3 +36,9 @@ $dark-button-active-color: $white;
|
|||
$editor-border-color: #f4f4f4;
|
||||
$editor-selected-line-color: #f3f3f3;
|
||||
|
||||
$light-preferences-background-color: #f4f4f4;
|
||||
|
||||
$light-preferences-button-color: #8e8e8f;
|
||||
$light-preferences-button-hover-color: #333333;
|
||||
|
||||
$light-preferences-button-background-color: #e6e6e6;
|
||||
|
|
|
|||
|
|
@ -17,5 +17,5 @@
|
|||
}
|
||||
|
||||
.CodeMirror-line {
|
||||
padding-left: #{5 / $base-font-size}rem;
|
||||
}
|
||||
padding-left: #{5 / $base-font-size}rem;
|
||||
}
|
||||
|
|
|
|||
62
styles/components/_preferences.scss
Normal file
62
styles/components/_preferences.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
.preferences {
|
||||
background-color: $light-preferences-background-color;
|
||||
display: none;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
padding-bottom: #{20 / $base-font-size}rem;
|
||||
&--selected {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.preferences__exit-button {
|
||||
@extend %preferences-button;
|
||||
margin-left: auto;
|
||||
background-color: $light-preferences-background-color;
|
||||
|
||||
&:hover {
|
||||
background-color: $light-preferences-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.preference__plus-button {
|
||||
@extend %preferences-button;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.preference__minus-button {
|
||||
@extend %preferences-button;
|
||||
}
|
||||
|
||||
.preferences__heading {
|
||||
display: flex;
|
||||
flex-direction: rows;
|
||||
margin-left: #{20 / $base-font-size}rem;
|
||||
}
|
||||
.preferences__title {
|
||||
margin: 0 0;
|
||||
font-size: #{$menu-font-size}px;
|
||||
font-weight: 700;
|
||||
height: #{44 / $base-font-size}rem;
|
||||
line-height: #{44 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.preference {
|
||||
margin: 0 #{20 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.preference__title {
|
||||
margin: 0 0;
|
||||
font-size: #{$base-font-size}px;
|
||||
font-weight: 400;
|
||||
height: #{44 / $base-font-size}rem;
|
||||
line-height: #{44 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.preference__value {
|
||||
@extend %button;
|
||||
border-radius: 0%;
|
||||
border: 2px solid $light-preferences-button-color;
|
||||
line-height: #{44 / $base-font-size}rem;
|
||||
margin: 0 #{20 / $base-font-size}rem;
|
||||
}
|
||||
|
|
@ -13,6 +13,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.toolbar__preferences-button {
|
||||
@extend %toolbar-button;
|
||||
margin-left: auto;
|
||||
&--selected {
|
||||
@extend %toolbar-button--selected;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar__logo {
|
||||
margin-right: #{30 / $base-font-size}rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,4 +16,11 @@
|
|||
|
||||
.toolbar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.preferences {
|
||||
width: 22.5%;
|
||||
position: absolute;
|
||||
top: #{20 / $base-font-size}rem;
|
||||
right:#{60 / $base-font-size}rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,5 +9,6 @@
|
|||
@import 'components/p5-widget-codemirror-theme';
|
||||
@import 'components/editor';
|
||||
@import 'components/toolbar';
|
||||
@import 'components/preferences';
|
||||
|
||||
@import 'layout/ide';
|
||||
@import 'layout/ide';
|
||||
|
|
|
|||
Loading…
Reference in a new issue