Skip to content

Commit 32de1c2

Browse files
committed
drawer animation
1 parent acd6f58 commit 32de1c2

File tree

20 files changed

+63
-77
lines changed

20 files changed

+63
-77
lines changed

lib/atom/subscriptions.js

+3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ var root_1 = require('../components/root');
66
var subscriptions = null;
77
function onActivate() {
88
subscriptions = new CompositeDisposable;
9+
subscriptions.add(atom.commands.add('atom-workspace', {
10+
'cr-viewer:toggle': function () { return store_1.default.dispatch(actions_1.windowToggle()); }
11+
}));
912
atom.workspace.observeTextEditors(function (editor) {
1013
subscriptions.add(editor.onDidSave(function () {
1114
store_1.default.dispatch(actions_1.testRun());

lib/components/App.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ var react_redux_1 = require('react-redux');
2626
var index_1 = require('./index');
2727
var Routes_1 = require('./Routes');
2828
var Drawer_1 = require('material-ui/Drawer');
29-
var Hold_1 = require('./Hold');
3029
var height = atom.getSize().height;
3130
window.onresize = function () {
3231
height = atom.getSize().height;
@@ -38,7 +37,7 @@ var App = (function (_super) {
3837
}
3938
App.prototype.render = function () {
4039
var store = this.props.store;
41-
return (React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(Drawer_1.default, {width: 400, openSecondary: true, open: store.open}, React.createElement(index_1.AppMenu, __assign({}, store)), React.createElement(Routes_1.Routes, __assign({}, store)), React.createElement(index_1.Alert, __assign({}, store))), React.createElement(Hold_1.Hold, null)));
40+
return (React.createElement("section", {style: { height: height }}, React.createElement(Drawer_1.default, {width: 400, openSecondary: true, open: store.open}, React.createElement("div", {className: 'cr-bg'}, React.createElement(index_1.AppMenu, __assign({}, store)), React.createElement(Routes_1.Routes, __assign({}, store)), React.createElement(index_1.Alert, __assign({}, store))))));
4241
};
4342
App = __decorate([
4443
react_redux_1.connect(function (store) {

lib/components/AppMenu/CloseWindow.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ var CloseWindow = (function (_super) {
2424
_super.apply(this, arguments);
2525
}
2626
CloseWindow.prototype.render = function () {
27-
return (React.createElement(IconButton_1.default, {onClick: this.props.windowToggle}, React.createElement(close_1.default, null)));
27+
return (React.createElement(IconButton_1.default, {onClick: this.props.windowToggle}, React.createElement(close_1.default, {color: 'white'})));
2828
};
2929
CloseWindow = __decorate([
3030
react_redux_1.connect(null, function (dispatch) {

lib/components/AppMenu/menuIconRight.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ var React = require('react');
33
var IconButton_1 = require('material-ui/IconButton');
44
var more_vert_1 = require('material-ui/svg-icons/navigation/more-vert');
55
function menuIconRight() {
6-
return (React.createElement(IconButton_1.default, null, React.createElement(more_vert_1.default, null)));
6+
return (React.createElement(IconButton_1.default, null, React.createElement(more_vert_1.default, {color: 'white'})));
77
}
88
exports.menuIconRight = menuIconRight;

lib/components/Hold/index.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,17 @@ var React = require('react');
1717
var react_redux_1 = require('react-redux');
1818
var actions_1 = require('../../actions');
1919
var colors_1 = require('material-ui/styles/colors');
20+
var menu_1 = require('material-ui/svg-icons/navigation/menu');
2021
var styles = {
21-
backgroundColor: colors_1.cyan500,
22-
width: '20px',
23-
height: atom.getSize().height,
22+
backgroundColor: 'inherit',
2423
};
2524
var Hold = (function (_super) {
2625
__extends(Hold, _super);
2726
function Hold() {
2827
_super.apply(this, arguments);
2928
}
3029
Hold.prototype.render = function () {
31-
return React.createElement("div", {style: styles, onTouchTap: this.props.windowToggle});
30+
return (React.createElement("div", {style: styles}, React.createElement(menu_1.default, {color: colors_1.cyan500, onTouchTap: this.props.windowToggle})));
3231
};
3332
Hold = __decorate([
3433
react_redux_1.connect(null, function (dispatch) {

lib/components/Start/Welcome/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ var imagePath = path_1.join(__dirname, '../../../../', 'img', 'coderoad.jpg');
66
var styles = {
77
backgroundImage: "url(https://github.com/""%3C/span%3E%20%3Cspan%20class=pl-c1%3E+%3C/span%3E%20%3Cspan%20class=pl-s1%3EimagePath%3C/span%3E%20%3Cspan%20class=pl-c1%3E+%3C/span%3E%20%3Cspan%20class=pl-s%3E"/")",
88
backgroundRepeat: 'no-repeat',
9+
backgroundColor: 'inherit',
910
height: '350px',
1011
textAlign: 'center',
1112
marginTop: '0px',
@@ -24,4 +25,4 @@ var buttonStyles = {
2425
padding: '5px 2px',
2526
textShadow: '1px 1px 0px #000',
2627
};
27-
exports.Welcome = function () { return (React.createElement("div", {style: styles}, React.createElement("div", {style: titleStyles}, "CodeRoad"), React.createElement("div", {style: taglineStyles}, "Tutorials in your Editor"), React.createElement("br", null), React.createElement("br", null), React.createElement(index_1.RouteButton, {label: 'Start', route: 'tutorials', style: buttonStyles}))); };
28+
exports.Welcome = function () { return (React.createElement("div", {style: styles, className: 'cr-bg'}, React.createElement("div", {style: titleStyles}, "CodeRoad"), React.createElement("div", {style: taglineStyles}, "Tutorials in your Editor"), React.createElement("br", null), React.createElement("br", null), React.createElement(index_1.RouteButton, {label: 'Start', route: 'tutorials', style: buttonStyles}))); };

lib/reducers/open/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use strict";
22
var _types_1 = require('../../actions/_types');
33
function openReducer(open, action) {
4-
if (open === void 0) { open = true; }
4+
if (open === void 0) { open = false; }
55
switch (action.type) {
66
case _types_1.WINDOW_TOGGLE:
77
return !open;

menus/cr.json

-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@
44
"submenu": [{
55
"label": "CodeRoad",
66
"submenu": [{
7-
"label": "Start",
8-
"command": "cr-viewer:start"
9-
}, {
107
"label": "Toggle",
118
"command": "cr-viewer:toggle"
129
}]

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"education"
1313
],
1414
"activationCommands": {
15-
"atom-workspace": "cr-viewer:start"
15+
"atom-workspace": "cr-viewer:toggle"
1616
},
1717
"bugs": {
1818
"url": "https://github.com/coderoad/atom-coderoad"

src/atom/subscriptions.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ export function onActivate(): AtomCore.Disposable {
99
// Atom Listeners
1010
subscriptions = new CompositeDisposable;
1111

12-
// subscriptions.add(
13-
// atom.commands.add('atom-workspace', {
14-
// 'cr-viewer:toggle': store.dispatch(windowToggle)
15-
// })
16-
// );
12+
subscriptions.add(
13+
atom.commands.add('atom-workspace', {
14+
'cr-viewer:toggle': () => store.dispatch(windowToggle())
15+
})
16+
);
1717

1818
// run tests on save
1919
atom.workspace.observeTextEditors((editor: AtomCore.IEditor) => {

src/components/Alert/_alert.less

+21-20
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
@import "ui-variables";
2-
3-
.cr-alert {
4-
button {
5-
position: relative;
6-
span {
7-
position: absolute;
8-
top: -8px;
2+
#crv {
3+
.cr-alert {
4+
button {
5+
position: relative;
6+
span {
7+
position: absolute;
8+
top: -8px;
9+
}
910
}
1011
}
11-
}
12-
.cr-alert.pass button span {
13-
color: @background-color-success;
14-
}
15-
.cr-alert.fail button span {
16-
color: @background-color-error;
17-
}
18-
.cr-alert.note button span {
19-
color: @background-color-info;
20-
}
21-
.cr-alert-replay {
22-
display: inline-block;
23-
margin: 0 10px;
12+
.cr-alert.pass button span {
13+
color: @background-color-success;
14+
}
15+
.cr-alert.fail button span {
16+
color: @background-color-error;
17+
}
18+
.cr-alert.note button span {
19+
color: @background-color-info;
20+
}
21+
.cr-alert-replay {
22+
display: inline-block;
23+
margin: 0 10px;
24+
}
2425
}

src/components/App.tsx

+13-9
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import {connect} from 'react-redux';
33
import {AppMenu, Alert} from './index';
44
import {Routes} from './Routes';
55
import Drawer from 'material-ui/Drawer';
6-
import {Hold} from './Hold';
6+
// import {Hold} from './Hold';
7+
import Menu from 'material-ui/svg-icons/navigation/menu';
78

89
let height: number = atom.getSize().height;
910
window.onresize = function() {
@@ -18,16 +19,19 @@ export class App extends React.Component<{store?: CR.State}, {}> {
1819
const store = this.props.store;
1920
return (
2021
<section
21-
className='cr'
22-
key='main'
2322
style={{height}}
2423
>
25-
<Drawer width={400} openSecondary={true} open={store.open} >
26-
<AppMenu {...store} />
27-
<Routes {...store} />
28-
<Alert {...store} />
29-
</Drawer>
30-
<Hold />
24+
<Drawer
25+
width={400}
26+
openSecondary={true}
27+
open={store.open}
28+
>
29+
<div className='cr-bg'>
30+
<AppMenu {...store} />
31+
<Routes {...store} />
32+
<Alert {...store} />
33+
</div>
34+
</Drawer>
3135
</section>
3236
);
3337
}

src/components/AppMenu/CloseWindow.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export class CloseWindow extends React.Component<{
1515
render() {
1616
return (
1717
<IconButton onClick={this.props.windowToggle}>
18-
<NavigationClose />
18+
<NavigationClose color='white'/>
1919
</IconButton>
2020
);
2121
}

src/components/AppMenu/_app-menu.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.cr {
1+
#crv {
22
.cr-menu-bar {
33
a, a:visited, a:link, a:hover {
44
color: black;

src/components/AppMenu/menuIconRight.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
55
export function menuIconRight() {
66
return (
77
<IconButton>
8-
<MoreVertIcon />
8+
<MoreVertIcon color='white'/>
99
</IconButton>
1010
);
1111
}

src/components/Hold/index.tsx

-23
This file was deleted.

src/components/Start/Welcome/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const imagePath = join(
1010
const styles = {
1111
backgroundImage: `url(https://github.com/"%3Cspan%20class=pl-s1%3E%3Cspan%20class=pl-kos%3E$%7B%3C/span%3E%3Cspan%20class=pl-s1%3EimagePath%3C/span%3E%3Cspan%20class=pl-kos%3E%7D%3C/span%3E%3C/span%3E")`,
1212
backgroundRepeat: 'no-repeat',
13+
backgroundColor: 'inherit',
1314
height: '350px',
1415
textAlign: 'center',
1516
marginTop: '0px',
@@ -33,7 +34,7 @@ const buttonStyles = {
3334
};
3435

3536
export const Welcome: React.StatelessComponent<{}> = () => (
36-
<div style={styles}>
37+
<div style={styles} className='cr-bg'>
3738
<div style={titleStyles}>CodeRoad</div>
3839
<div style={taglineStyles}>Tutorials in your Editor</div>
3940
<br /><br />

src/components/index.less

+4
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,8 @@
1919
a:visited {
2020
text-decoration: none;
2121
}
22+
.cr-bg {
23+
height: 100%;
24+
background-color: @syntax-background-color;
25+
}
2226
}

src/reducers/open/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {WINDOW_TOGGLE} from '../../actions/_types';
22
import store from '../../store';
33

44
export default function openReducer(
5-
open = true, action: Action
5+
open = false, action: Action
66
): boolean {
77
switch (action.type) {
88

tsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@
121121
"src/components/AppMenu/CloseWindow.tsx",
122122
"src/components/AppMenu/index.tsx",
123123
"src/components/AppMenu/issuesLink.tsx",
124-
"src/components/AppMenu/menuIconRight.tsx",
124+
"src/components/AppMenu/MenuIconRight.tsx",
125125
"src/components/AppMenu/MenuLink/index.tsx",
126126
"src/components/AppMenu/menuRight.tsx",
127127
"src/components/AppMenu/menuRightRouteOptions.tsx",

0 commit comments

Comments
 (0)