package.json editor

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 .DS_Store
 .nide
+.idea
+*~

client/css/codemirror/codemirror.css

@@ -0,0 +1,168 @@
+.CodeMirror {
+  line-height: 1em;
+  font-family: monospace;
+
+  /* Necessary so the scrollbar can be absolutely positioned within the wrapper on Lion. */
+  position: relative;
+  /* This prevents unwanted scrollbars from showing up on the body and wrapper in IE. */
+  overflow: hidden;
+}
+
+.CodeMirror-scroll {
+  overflow-x: auto;
+  overflow-y: hidden;
+  height: 300px;
+  /* This is needed to prevent an IE[67] bug where the scrolled content
+     is visible outside of the scrolling box. */
+  position: relative;
+  outline: none;
+}
+
+/* Vertical scrollbar */
+.CodeMirror-scrollbar {
+  float: right;
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  /* This corrects for the 1px gap introduced to the left of the scrollbar
+     by the rule for .CodeMirror-scrollbar-inner. */
+  margin-left: -1px;
+}
+.CodeMirror-scrollbar-inner {
+  /* This needs to have a nonzero width in order for the scrollbar to appear
+     in Firefox and IE9. */
+  width: 1px;
+}
+.CodeMirror-scrollbar.cm-sb-overlap {
+  /* Ensure that the scrollbar appears in Lion, and that it overlaps the content
+     rather than sitting to the right of it. */
+  position: absolute;
+  z-index: 1;
+  float: none;
+  right: 0;
+  min-width: 12px;
+}
+.CodeMirror-scrollbar.cm-sb-nonoverlap {
+  min-width: 12px;
+}
+.CodeMirror-scrollbar.cm-sb-ie7 {
+  min-width: 18px;
+}
+
+.CodeMirror-gutter {
+  position: absolute; left: 0; top: 0;
+  z-index: 10;
+  background-color: #f7f7f7;
+  border-right: 1px solid #eee;
+  min-width: 2em;
+  height: 100%;
+}
+.CodeMirror-gutter-text {
+  color: #aaa;
+  text-align: right;
+  padding: .4em .2em .4em .4em;
+  white-space: pre !important;
+}
+.CodeMirror-lines {
+  padding: .4em;
+  white-space: pre;
+  cursor: text;
+}
+.CodeMirror-lines * {
+  /* Necessary for throw-scrolling to decelerate properly on Safari. */
+  pointer-events: none;
+}
+
+.CodeMirror pre {
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  -o-border-radius: 0;
+  border-radius: 0;
+  border-width: 0; margin: 0; padding: 0; background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0; margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+}
+
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+.CodeMirror-wrap .CodeMirror-scroll {
+  overflow-x: hidden;
+}
+
+.CodeMirror textarea {
+  outline: none !important;
+}
+
+.CodeMirror pre.CodeMirror-cursor {
+  z-index: 10;
+  position: absolute;
+  visibility: hidden;
+  border-left: 1px solid black;
+  border-right: none;
+  width: 0;
+}
+.cm-keymap-fat-cursor pre.CodeMirror-cursor {
+  width: auto;
+  border: 0;
+  background: transparent;
+  background: rgba(0, 200, 0, .4);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600c800, endColorstr=#4c00c800);
+}
+/* Kludge to turn off filter in ie9+, which also accepts rgba */
+.cm-keymap-fat-cursor pre.CodeMirror-cursor:not(#nonsense_id) {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+.CodeMirror pre.CodeMirror-cursor.CodeMirror-overwrite {}
+.CodeMirror-focused pre.CodeMirror-cursor {
+  visibility: visible;
+}
+
+div.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused div.CodeMirror-selected { background: #d7d4f0; }
+
+.CodeMirror-searching {
+  background: #ffa;
+  background: rgba(255, 255, 0, .4);
+}
+
+/* Default theme */
+
+.cm-s-default span.cm-keyword {color: #708;}
+.cm-s-default span.cm-atom {color: #219;}
+.cm-s-default span.cm-number {color: #164;}
+.cm-s-default span.cm-def {color: #00f;}
+.cm-s-default span.cm-variable {color: black;}
+.cm-s-default span.cm-variable-2 {color: #05a;}
+.cm-s-default span.cm-variable-3 {color: #085;}
+.cm-s-default span.cm-property {color: black;}
+.cm-s-default span.cm-operator {color: black;}
+.cm-s-default span.cm-comment {color: #a50;}
+.cm-s-default span.cm-string {color: #a11;}
+.cm-s-default span.cm-string-2 {color: #f50;}
+.cm-s-default span.cm-meta {color: #555;}
+.cm-s-default span.cm-error {color: #f00;}
+.cm-s-default span.cm-qualifier {color: #555;}
+.cm-s-default span.cm-builtin {color: #30a;}
+.cm-s-default span.cm-bracket {color: #cc7;}
+.cm-s-default span.cm-tag {color: #170;}
+.cm-s-default span.cm-attribute {color: #00c;}
+.cm-s-default span.cm-header {color: blue;}
+.cm-s-default span.cm-quote {color: #090;}
+.cm-s-default span.cm-hr {color: #999;}
+.cm-s-default span.cm-link {color: #00c;}
+
+span.cm-header, span.cm-strong {font-weight: bold;}
+span.cm-em {font-style: italic;}
+span.cm-emstrong {font-style: italic; font-weight: bold;}
+span.cm-link {text-decoration: underline;}
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}

client/css/codemirror/simple-hint.css

@@ -0,0 +1,16 @@
+.CodeMirror-completions {
+  position: absolute;
+  z-index: 1000;
+  overflow: hidden;
+  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+}
+.CodeMirror-completions select {
+  background: #fafafa;
+  outline: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font-family: monospace;
+}

client/css/package-json.css

@@ -0,0 +1,34 @@
+
+
+form#packageJSON {
+	padding: 5px;
+	width: 55%;
+}
+
+form#packageJSON fieldset {
+	background-color: #FFF;
+	border: solid 1px #000000;
+	margin-bottom: 10px;
+}
+
+form#packageJSON fieldset input {
+	background-color: #EEE;
+}
+
+form#packageJSON div.formRow {
+	display: table-row;
+}
+
+form#packageJSON label.formCell {
+	display: table-cell;
+	padding: 0 1em;
+	font-size: 13px;
+	line-height: 20px;
+}
+
+#hint-content {
+	position: absolute;
+	top: 75px;
+	right: 10px;
+	width: 40%;
+}

client/css/style.css

@@ -317,6 +317,17 @@ body {
 	color: rgb(180,0,0)
 }
 
+#content .package-json-editor {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background: url('../img/noise.png') no-repeat 90% 90% #eee;
+	padding: 8px;
+	overflow: auto;
+}
+
 #content .documentation-viewer {
 	width: 100%;
 	height: 100%;
@@ -437,6 +448,7 @@ body {
 	-moz-user-select: none;
 	cursor: default;
 	display: none;
+	z-index: 100;
 }
 
 .popup-menu li {
@@ -488,12 +500,6 @@ body {
 	color: white;
 }
 
-#gear-menu-popup {
-	bottom: 25px;
-	left: 225px;
-	z-index: 100;
-}
-
 .right {
 	float: right;
 	position: relative;
@@ -506,7 +512,8 @@ body {
     left: 0; top: 0; right: 0; bottom: 0;
     background: #000;
     opacity: .3;
-    z-index: 900
+    z-index: 900;
+	visibility: hidden;
 }
 
 .dialog {

client/dialog.html

@@ -1,7 +1,6 @@
-<div id="dialog-overlay"></div>
 <div class="dialog">
-    <h1 class="dialog-title"></h1>
-    <a  class="dialog-close" href="#close">&times;</a>
-    <div class="dialog-content">
-    </div>
+	<h1 class="dialog-title"></h1>
+	<a  class="dialog-close" href="#close">&times;</a>
+	<div class="dialog-content">
+	</div>
 </div>

client/html/coderunner_menu.html

@@ -0,0 +1,5 @@
+<ul id="coderun-menu-popup" class="popup-menu">
+  <li><span id="run-node">Node</span></li>
+  <li class="separator"><hr>
+  <li><span id="coderun-settings">Settings</span>
+</ul>

client/html/coderunner_settings.html

@@ -0,0 +1,3 @@
+<div class="coderunner-settings">
+	<label for="show-line-numbers-selection">Show Line Numbers: <select id="show-line-numbers-selection" name="show-line-numbers"><option value="true">Yes</option><option value="false">No</option> </select> </label>
+</div>

client/html/gear_menu.html

@@ -0,0 +1,6 @@
+<ul id="gear-menu-popup" class="popup-menu">
+	<li><span id="project-refresh"><img src="img/refresh.png"> Refresh</span>
+	<li class="checkbox"><input type="checkbox" id="show-hidden"><label for="show-hidden">Show Hidden Files</label>
+	<li class="separator"><hr>
+	<li><span id="preference-settings">Preferences</span>
+</ul>

client/html/preferences.html

@@ -0,0 +1,7 @@
+<div class="preferences">
+	<label for="theme-selection">Editor Theme : <select id="theme-selection" name="editor-theme"></select></label>
+	<br/>
+	<label for="indent-unit-input">Spaces per Indent: <input id="indent-unit-input" name="indent-unit" type="text" maxlength="3"/></label>
+	<br />
+	<label for="show-line-numbers-selection">Show Line Numbers: <select id="show-line-numbers-selection" name="show-line-numbers"><option value="true">Yes</option><option value="false">No</option> </select> </label>
+</div>