Skip to content

Commit acd6f58

Browse files
ShMcKShMcK
committed
open/close from drawer, Hold component outline
1 parent b062460 commit acd6f58

36 files changed

+269
-104
lines changed

‎lib/actions/_types.js

+1
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,4 @@ exports.TESTS_LOAD = 'TESTS_LOAD';
1919
exports.TUTORIAL_SET = 'TUTORIAL_SET';
2020
exports.TUTORIAL_UPDATE = 'TUTORIAL_UPDATE';
2121
exports.TUTORIALS_FIND = 'TUTORIALS_FIND';
22+
exports.WINDOW_TOGGLE = 'WINDOW_TOGGLE';

‎lib/actions/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,5 @@ var tutorial_1 = require('./tutorial');
2727
exports.tutorialsFind = tutorial_1.tutorialsFind;
2828
exports.tutorialSet = tutorial_1.tutorialSet;
2929
exports.tutorialUpdate = tutorial_1.tutorialUpdate;
30+
var window_1 = require('./window');
31+
exports.windowToggle = window_1.windowToggle;

‎lib/actions/window.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
"use strict";
2+
var _types_1 = require('./_types');
3+
function windowToggle() {
4+
return { type: _types_1.WINDOW_TOGGLE };
5+
}
6+
exports.windowToggle = windowToggle;

‎lib/atom/main.js

-3
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,6 @@ var Main = (function () {
2929
}
3030
subscriptions_1.onDeactivate();
3131
};
32-
Main.prototype.toggle = function () {
33-
root_1.Root.toggle();
34-
};
3532
return Main;
3633
}());
3734
;

‎lib/atom/subscriptions.js

-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ 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': root_1.Root.toggle,
11-
}));
129
atom.workspace.observeTextEditors(function (editor) {
1310
subscriptions.add(editor.onDidSave(function () {
1411
store_1.default.dispatch(actions_1.testRun());

‎lib/components/App.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ var React = require('react');
2525
var react_redux_1 = require('react-redux');
2626
var index_1 = require('./index');
2727
var Routes_1 = require('./Routes');
28+
var Drawer_1 = require('material-ui/Drawer');
29+
var Hold_1 = require('./Hold');
2830
var height = atom.getSize().height;
2931
window.onresize = function () {
3032
height = atom.getSize().height;
@@ -36,7 +38,7 @@ var App = (function (_super) {
3638
}
3739
App.prototype.render = function () {
3840
var store = this.props.store;
39-
return (React.createElement("section", {className: 'cr', key: 'main', style: { height: height }}, React.createElement(index_1.AppMenu, __assign({}, store)), React.createElement(Routes_1.Routes, __assign({}, store)), React.createElement(index_1.Alert, __assign({}, 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)));
4042
};
4143
App = __decorate([
4244
react_redux_1.connect(function (store) {

‎lib/components/AppMenu/CloseWindow.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
"use strict";
2+
var __extends = (this && this.__extends) || function (d, b) {
3+
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
4+
function __() { this.constructor = d; }
5+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
6+
};
7+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
11+
return c > 3 && r && Object.defineProperty(target, key, r), r;
12+
};
13+
var __metadata = (this && this.__metadata) || function (k, v) {
14+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15+
};
16+
var React = require('react');
17+
var react_redux_1 = require('react-redux');
18+
var actions_1 = require('../../actions');
19+
var IconButton_1 = require('material-ui/IconButton');
20+
var close_1 = require('material-ui/svg-icons/navigation/close');
21+
var CloseWindow = (function (_super) {
22+
__extends(CloseWindow, _super);
23+
function CloseWindow() {
24+
_super.apply(this, arguments);
25+
}
26+
CloseWindow.prototype.render = function () {
27+
return (React.createElement(IconButton_1.default, {onClick: this.props.windowToggle}, React.createElement(close_1.default, null)));
28+
};
29+
CloseWindow = __decorate([
30+
react_redux_1.connect(null, function (dispatch) {
31+
return {
32+
windowToggle: function () { return dispatch(actions_1.windowToggle()); }
33+
};
34+
}),
35+
__metadata('design:paramtypes', [])
36+
], CloseWindow);
37+
return CloseWindow;
38+
}(React.Component));
39+
exports.CloseWindow = CloseWindow;

‎lib/components/AppMenu/Quit/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
1515
};
1616
var React = require('react');
1717
var react_redux_1 = require('react-redux');
18-
var root_1 = require('../../root');
18+
var actions_1 = require('../../../actions');
1919
var subscriptions_1 = require('../../../atom/subscriptions');
2020
var MenuItem_1 = require('material-ui/MenuItem');
2121
var styles = {
@@ -34,7 +34,7 @@ var Quit = (function (_super) {
3434
react_redux_1.connect(null, function (dispatch) {
3535
return {
3636
quit: function () {
37-
root_1.Root.toggle();
37+
dispatch(actions_1.windowToggle());
3838
subscriptions_1.onDeactivate();
3939
}
4040
};

‎lib/components/AppMenu/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
"use strict";
22
var React = require('react');
33
var AppBar_1 = require('material-ui/AppBar');
4-
var menuIconLeft_1 = require('./menuIconLeft');
4+
var CloseWindow_1 = require('./CloseWindow');
55
var menuRight_1 = require('./menuRight');
66
var styles = {
77
zIndex: '1 !important'
88
};
99
exports.AppMenu = function (_a) {
1010
var route = _a.route;
11-
return (React.createElement(AppBar_1.default, {title: 'CodeRoad', className: 'cr-menu-bar', styles: styles, iconElementLeft: menuIconLeft_1.menuIconLeft(), iconElementRight: menuRight_1.menuRight(route)}));
11+
return (React.createElement(AppBar_1.default, {title: 'CodeRoad', className: 'cr-menu-bar', styles: styles, iconElementLeft: React.createElement(CloseWindow_1.CloseWindow, null), iconElementRight: menuRight_1.menuRight(route)}));
1212
};

‎lib/components/Hold.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
"use strict";
2+
var __extends = (this && this.__extends) || function (d, b) {
3+
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
4+
function __() { this.constructor = d; }
5+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
6+
};
7+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
11+
return c > 3 && r && Object.defineProperty(target, key, r), r;
12+
};
13+
var __metadata = (this && this.__metadata) || function (k, v) {
14+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15+
};
16+
var React = require('react');
17+
var react_redux_1 = require('react-redux');
18+
var actions_1 = require('../actions');
19+
var colors_1 = require('material-ui/styles/colors');
20+
var styles = {
21+
backgroundColor: colors_1.cyan500,
22+
width: '20px',
23+
height: atom.getSize().height,
24+
};
25+
var Hold = (function (_super) {
26+
__extends(Hold, _super);
27+
function Hold() {
28+
_super.apply(this, arguments);
29+
}
30+
Hold.prototype.render = function () {
31+
return React.createElement("div", {style: styles, onTouchTap: this.props.windowToggle});
32+
};
33+
Hold = __decorate([
34+
react_redux_1.connect(null, function (dispatch) {
35+
return {
36+
windowToggle: function () { return dispatch(actions_1.windowToggle()); }
37+
};
38+
}),
39+
__metadata('design:paramtypes', [])
40+
], Hold);
41+
return Hold;
42+
}(React.Component));
43+
exports.Hold = Hold;

‎lib/components/Hold/index.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
"use strict";
2+
var __extends = (this && this.__extends) || function (d, b) {
3+
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
4+
function __() { this.constructor = d; }
5+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
6+
};
7+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
11+
return c > 3 && r && Object.defineProperty(target, key, r), r;
12+
};
13+
var __metadata = (this && this.__metadata) || function (k, v) {
14+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15+
};
16+
var React = require('react');
17+
var react_redux_1 = require('react-redux');
18+
var actions_1 = require('../../actions');
19+
var colors_1 = require('material-ui/styles/colors');
20+
var styles = {
21+
backgroundColor: colors_1.cyan500,
22+
width: '20px',
23+
height: atom.getSize().height,
24+
};
25+
var Hold = (function (_super) {
26+
__extends(Hold, _super);
27+
function Hold() {
28+
_super.apply(this, arguments);
29+
}
30+
Hold.prototype.render = function () {
31+
return React.createElement("div", {style: styles, onTouchTap: this.props.windowToggle});
32+
};
33+
Hold = __decorate([
34+
react_redux_1.connect(null, function (dispatch) {
35+
return {
36+
windowToggle: function () { return dispatch(actions_1.windowToggle()); }
37+
};
38+
}),
39+
__metadata('design:paramtypes', [])
40+
], Hold);
41+
return Hold;
42+
}(React.Component));
43+
exports.Hold = Hold;

‎lib/components/root.js

-2
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@ exports.Root = {
66
init: function () {
77
_this.root = document.createElement('div');
88
_this.root.setAttribute('id', 'crv');
9-
_this.root.hidden = true;
109
return _this.root;
1110
},
12-
toggle: function () { return _this.root.hidden = !_this.root.hidden; },
1311
unmount: function () { return ReactDOM.unmountComponentAtNode(_this.root); }
1412
};

‎lib/reducers/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ var checks_1 = require('./checks');
55
var dir_1 = require('./dir');
66
var editor_actions_1 = require('./editor-actions');
77
var hint_position_1 = require('./hint-position');
8+
var open_1 = require('./open');
89
var package_json_1 = require('./package-json');
910
var page_1 = require('./page');
1011
var page_position_1 = require('./page-position');
@@ -18,7 +19,7 @@ var tutorial_1 = require('./tutorial');
1819
var tutorials_1 = require('./tutorials');
1920
Object.defineProperty(exports, "__esModule", { value: true });
2021
exports.default = redux_1.combineReducers({
21-
alert: alert_1.default, checks: checks_1.default, dir: dir_1.default, editorActions: editor_actions_1.default, hintPosition: hint_position_1.default, page: page_1.default,
22+
alert: alert_1.default, checks: checks_1.default, dir: dir_1.default, editorActions: editor_actions_1.default, hintPosition: hint_position_1.default, open: open_1.default, page: page_1.default,
2223
packageJson: package_json_1.default, pagePosition: page_position_1.default, progress: progress_1.default, route: route_1.default, taskPosition: task_position_1.default,
2324
taskTests: task_tests_1.default, tasks: tasks_1.default, testRun: test_run_1.default, tutorial: tutorial_1.default, tutorials: tutorials_1.default,
2425
});

‎lib/reducers/open/index.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
"use strict";
2+
var _types_1 = require('../../actions/_types');
3+
function openReducer(open, action) {
4+
if (open === void 0) { open = true; }
5+
switch (action.type) {
6+
case _types_1.WINDOW_TOGGLE:
7+
return !open;
8+
default:
9+
return open;
10+
}
11+
}
12+
Object.defineProperty(exports, "__esModule", { value: true });
13+
exports.default = openReducer;

‎menus/cr.json

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

‎package.json

+1-5
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"education"
1313
],
1414
"activationCommands": {
15-
"atom-workspace": "cr-viewer:toggle"
15+
"atom-workspace": "cr-viewer:start"
1616
},
1717
"bugs": {
1818
"url": "https://github.com/coderoad/atom-coderoad"
@@ -48,10 +48,6 @@
4848
"redux": "3.5.2"
4949
},
5050
"scripts": {
51-
"test": "ava src/**/*.spec.js",
5251
"compile": "tsc"
53-
},
54-
"devDependencies": {
55-
"ava": "^0.14.0"
5652
}
5753
}

‎src/actions/_types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@ export const TESTS_LOAD = 'TESTS_LOAD';
1818
export const TUTORIAL_SET = 'TUTORIAL_SET';
1919
export const TUTORIAL_UPDATE = 'TUTORIAL_UPDATE';
2020
export const TUTORIALS_FIND = 'TUTORIALS_FIND';
21+
export const WINDOW_TOGGLE = 'WINDOW_TOGGLE';

‎src/actions/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ export {
1212
export {
1313
tutorialsFind, tutorialSet, tutorialUpdate
1414
} from './tutorial';
15+
export {windowToggle} from './window';

‎src/actions/window.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import {WINDOW_TOGGLE} from './_types';
2+
3+
export function windowToggle() {
4+
return { type: WINDOW_TOGGLE };
5+
}

‎src/atom/main.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ class Main {
1111
root: HTMLElement;
1212
statusBarTile: StatusBar.IStatusBarView;
1313
constructor() {
14-
loadPolyfills(); // remove with later version of Chrome
14+
loadPolyfills(); // remove with Chrome 50
1515
store.dispatch(setupVerify());
1616
this.root = Root.init();
1717
}
@@ -37,8 +37,5 @@ class Main {
3737
// remove subscriptions & unmount react app
3838
onDeactivate();
3939
}
40-
toggle(): void {
41-
Root.toggle();
42-
}
4340
};
4441
export = new Main();

‎src/atom/subscriptions.ts

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
const CompositeDisposable = require('atom').CompositeDisposable;
22
import store from '../store';
3-
import {testRun, alertReplay} from '../actions';
3+
import {testRun, alertReplay, windowToggle} from '../actions';
44
import {Root} from '../components/root';
55

66
let subscriptions = null;
77

88
export function onActivate(): AtomCore.Disposable {
9+
// Atom Listeners
910
subscriptions = new CompositeDisposable;
10-
/**
11-
* Atom Listeners
12-
*/
13-
subscriptions.add(
14-
atom.commands.add('atom-workspace', {
15-
'cr-viewer:toggle': Root.toggle,
16-
}));
11+
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) => {
2020
subscriptions.add(
2121
editor.onDidSave(() => {
22-
store.dispatch(testRun());
22+
store.dispatch(testRun());
2323
}));
2424
});
2525
/**
@@ -34,7 +34,7 @@ export function onActivate(): AtomCore.Disposable {
3434
}
3535
}),
3636
})
37-
);
37+
);
3838
return subscriptions;
3939
}
4040

@@ -54,5 +54,5 @@ export function addToStatusBar(statusBar) {
5454
replay.textContent = '▲';
5555
replay.onclick = () => store.dispatch(alertReplay());
5656
// consume with "atom status bar"
57-
return statusBar.addLeftTile({item: replay, priority: 100});
57+
return statusBar.addLeftTile({ item: replay, priority: 100 });
5858
}

‎src/components/App.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import * as React from 'react';
22
import {connect} from 'react-redux';
33
import {AppMenu, Alert} from './index';
44
import {Routes} from './Routes';
5+
import Drawer from 'material-ui/Drawer';
6+
import {Hold} from './Hold';
57

68
let height: number = atom.getSize().height;
79
window.onresize = function() {
@@ -20,10 +22,13 @@ export class App extends React.Component<{store?: CR.State}, {}> {
2022
key='main'
2123
style={{height}}
2224
>
25+
<Drawer width={400} openSecondary={true} open={store.open} >
2326
<AppMenu {...store} />
2427
<Routes {...store} />
2528
<Alert {...store} />
26-
</section>
29+
</Drawer>
30+
<Hold />
31+
</section>
2732
);
2833
}
2934
};

0 commit comments

Comments
 (0)