Implement window titles, add default tasks window

public/css/components.css

@@ -37,7 +37,7 @@
       .windowManager .fixedAreas .sidebar .window {
         position: static;
         /* FIXME: Below 19px should become 9px, once there's a way to account for the scrollbar that may be visible. */
-        margin: 0px 19px 12px 9px; }
+        margin: 4px 19px 0px 9px; }
 
 .window {
   position: fixed;
@@ -88,6 +88,7 @@
           line-height: 1; }
   .window .body {
     position: relative;
+    font-size: 14px;
     background-color: #F7F7F0;
     border: 1px solid gray;
     border-top: none; }

src/client/components/window-manager/floating-window-area.jsx

@@ -30,7 +30,7 @@ module.exports = function FloatingWindowArea({windows, onStartMove, onStartCorne
 			};
 
 			return (
-				<Window elementRef={onWindowRef.bind(null, window_.id)} key={window_.id} style={windowStyle} window={window_} resizeDirection="both" {...handlers} />
+				<Window.Window elementRef={onWindowRef.bind(null, window_.id)} key={window_.id} style={windowStyle} window={window_} resizeDirection="both" {...handlers} />
 			);
 		})
 	);

src/client/components/window-manager/sidebar.jsx

@@ -66,7 +66,7 @@ module.exports = function Sidebar({elementRef, side, windows, onMouseOver, onMou
 				};
 
 				return (
-					<Window elementRef={trackRef(window_.id)} key={window_.id} style={windowStyle} window={window_} resizeDirection="vertical" {...handlers} />
+					<Window.Window elementRef={trackRef(window_.id)} key={window_.id} style={windowStyle} window={window_} resizeDirection="vertical" {...handlers} />
 				);
 			})}
 		</div>

src/client/components/window/index.jsx

@@ -0,0 +1,6 @@
+"use strict";
+
+module.exports = {
+	Window: require("./window"),
+	Title: require("./window-title")
+};

src/client/components/window/window-title-context.js

@@ -0,0 +1,5 @@
+"use strict";
+
+const React = require("react");
+
+module.exports = React.createContext(() => {});

src/client/components/window/window-title.jsx

@@ -0,0 +1,12 @@
+"use strict";
+
+const React = require("react");
+
+const windowTitleContext = require("./window-title-context");
+
+module.exports = function WindowTitle({children}) {
+	let reporter = React.useContext(windowTitleContext);
+	reporter(children);
+
+	return null;
+};

src/client/components/window/window.jsx

@@ -4,7 +4,8 @@ const React = require("react");
 const createReactClass = require("create-react-class");
 const classnames = require("classnames");
 
-const renderIf = require("../util/render-if");
+const renderIf = require("../../util/render-if");
+const windowTitleContext = require("./window-title-context");
 
 function cancelEvent(event) {
 	/* NOTE: This is used on mousedown events for controls like the CloseButton, to ensure that a click-and-drag on a titlebar control cannot start a window drag operation. */
@@ -78,17 +79,21 @@ function Resizer({onMouseDown}) {
 }
 
 module.exports = function Window({elementRef, style, window: window_, onMouseDown, onTitleMouseDown, onClose, onResizerMouseDown}) {
+	let [windowTitle, setWindowTitle] = React.useState("");
+
 	return (
 		<div ref={elementRef} className={classnames("window", {active: window_.isActive})} style={style} onMouseDown={onMouseDown}>
-			<TitleBar title="Window Title Goes Here" onMouseDown={onTitleMouseDown} onClose={onClose} />
+			<TitleBar title={windowTitle} onMouseDown={onTitleMouseDown} onClose={onClose} />
 
-			<div className="body">
-				<div className="contents">
-					{window_.contents}
-				</div>
+			<windowTitleContext.Provider value={setWindowTitle}>
+				<div className="body">
+					<div className="contents">
+						{window_.contents}
+					</div>
 
-				{renderIf(window_.resizable, <Resizer onMouseDown={onResizerMouseDown} />)}
-			</div>
+					{renderIf(window_.resizable, <Resizer onMouseDown={onResizerMouseDown} />)}
+				</div>
+			</windowTitleContext.Provider>
 		</div>
 	);
 };

src/client/index.jsx

@@ -86,15 +86,26 @@ let App = createReactClass({
 			})
 		};
 	},
+	componentDidMount: function () {
+		this.onAction({
+			type: "open",
+			path: "/tasks",
+			options: {
+				sidebar: "right",
+				height: 380
+			}
+		});
+	},
 	onAction: function (action) {
 		if (action.type === "open") {
 			this.state.windows.add({
 				title: "New",
-				initialWidth: defaultValue(action.options.width, 400),
-				initialHeight: defaultValue(action.options.height, 300),
+				initialWidth: defaultValue(action.options.width, 300),
+				initialHeight: defaultValue(action.options.height, 220),
 				initialX: defaultValue(action.options.x, 20),
 				initialY: defaultValue(action.options.y, 100),
 				resizable: defaultValue(action.options.resizable, true),
+				sidebar: action.options.sidebar,
 				contents: <ViewManager.ViewManager router={router} initialPath={action.path} onAction={this.onAction} />
 			});
 		} else if (action.type === "notify") {

src/client/router.js

@@ -6,6 +6,8 @@ const React = require("react");
 const createRouter = require("./hybrid-router");
 const ViewManager = require("./components/view-manager");
 
+const TasksView = require("./views/tasks");
+
 function PageOne({foo}) {
 	return (
 		<div>
@@ -39,7 +41,7 @@ function SubmittedForm({data}) {
 let router = createRouter();
 
 router.get("/actions/create-new-node", (req, res) => {
-	res.open("/");
+	res.open("/node/create");
 });
 
 router.get("/node/create", (req, res) => {
@@ -64,6 +66,10 @@ router.get("/", (req, res) => {
 	});
 });
 
+router.get("/tasks", (req, res) => {
+	res.render(TasksView);
+});
+
 router.get("/page2", (req, res) => {
 	res.render(PageTwo, {
 		foo: "baz"

src/client/scss/components.scss

@@ -63,7 +63,7 @@
 			.window {
 				position: static;
 				/* FIXME: Below 19px should become 9px, once there's a way to account for the scrollbar that may be visible. */
-				margin: 0px 19px 12px 9px;
+				margin: 4px 19px 0px 9px;
 			}
 		}
 	}
@@ -147,6 +147,7 @@
 	.body {
 		position: relative;
 
+		font-size: 14px;
 		background-color: #F7F7F0;
 
 		border: 1px solid gray;

src/client/stores/windows.js

@@ -53,7 +53,8 @@ module.exports = function createWindowStore({onUpdated}) {
 				userX: 0,
 				userY: 0,
 				width: window_.initialWidth,
-				height: window_.initialHeight
+				height: window_.initialHeight,
+				sidebar: window_.sidebar
 			}));
 
 			updateWindowIndexes();

src/client/views/node/create.jsx

@@ -2,6 +2,8 @@
 
 const React = require("react");
 
+const Window = require("../../components/window");
+
 // const { Form, Field, Label, TextInput, Section } = require("../components/form");
 
 function Form(opts) {
@@ -31,19 +33,22 @@ function Section(opts) {
 
 module.exports = function CreateNode() {
 	return (
-		<Form method="post">
-			<Field required>
-				<Label>Name</Label>
-				<TextInput name="name" />
-			</Field>
-			<Field>
-				<Label>Type</Label>
-				<TextInput name="name" />
-			</Field>
-
-			<Section label="Properties">
-
-			</Section>
-		</Form>
+		<div>
+			<Window.Title>Create new node</Window.Title>
+			<Form method="post">
+				<Field required>
+					<Label>Name</Label>
+					<TextInput name="name" />
+				</Field>
+				<Field>
+					<Label>Type</Label>
+					<TextInput name="name" />
+				</Field>
+
+				<Section label="Properties">
+
+				</Section>
+			</Form>
+		</div>
 	);
 };

src/client/views/tasks.jsx

@@ -0,0 +1,14 @@
+"use strict";
+
+const React = require("react");
+
+const Window = require("../components/window");
+
+module.exports = function TasksView() {
+	return (
+		<div>
+			<Window.Title>Tasks</Window.Title>
+			Tasks go here
+		</div>
+	);
+};