Feature/fileupload workflow

codepulse/src/main/resources/toserve/common/common.css

@@ -393,4 +393,35 @@ a.to-login:hover { border-bottom-style: solid; }
 }
 
 /* unsupported browser alert */
-.unsupported-browser { margin-bottom: 0; }
+.unsupported-browser { margin-bottom: 0; }
+
+/************\
+| Button Bar |
+\************/
+
+.button-bar {
+	font-size: 0;
+	display: inline;
+}
+
+.button-bar .item {
+	font-size: small;
+	display: inline-block;
+
+	padding: 4px 12px;
+	color: #000;
+	border: 1px solid #AAA;
+}
+
+.button-bar .item:not(:first-child){
+	border-left: none;
+}
+
+.button-bar .item.button {
+	cursor: pointer;
+	background-color: #AAA;
+}
+
+.button-bar .item.button:hover {
+	background-color: #CCC;
+}

codepulse/src/main/resources/toserve/pages/traces/common.js → codepulse/src/main/resources/toserve/common/common.js

@@ -24,4 +24,19 @@
 Bacon.Observable.prototype.noLazy = function(){
 	this.onValue(function(){})
 	return this
+}
+
+Bacon.Model = function(initial){
+	var value = initial
+	var changes = new Bacon.Bus()
+	var prop = changes.toProperty(value).noLazy()
+
+	this.get = function(){ return value }
+	this.set = function(v){
+		value = v
+		changes.push(value)
+	}
+
+	this.__defineGetter__('changes', function(){ return changes })
+	this.__defineGetter__('property', function(){ return prop })
 }

codepulse/src/main/resources/toserve/common/desktop.css

@@ -32,6 +32,16 @@
 	padding-bottom: 25px;
 }
 
+.header-push {
+	height: 60px;
+	min-height: 60px;
+}
+
+.footer-push {
+	height: 25px;
+	min-height: 25px;
+}
+
 #footer .half {
 	padding: 2px 5px;
 	width: 50%;

codepulse/src/main/resources/toserve/pages/TraceInputForm/TraceInputForm.css

@@ -0,0 +1,203 @@
+/*******************\
+| High Level Layout |
+\*******************/
+
+trace-input-form .form-field {
+	margin-bottom: 1em;
+}
+
+#trace-input-form .input-area {
+	width: 61.8%;
+	float: left;
+}
+
+#trace-input-form .feedback-area {
+	width: 38.2%;
+	float: left;
+	padding-left: 1em;
+	box-sizing: border-box;
+}
+
+.align-right {
+	text-align: right;
+}
+
+
+#trace-input-form .input-label {
+	font-size: large;
+	font-weight: bold;
+	margin-bottom: 3px;
+}
+
+#trace-input-form input[type=text] {
+	margin-bottom: 0;
+}
+
+#trace-input-form .input-help {
+	padding-left: 22px;
+	position: relative;
+	margin-top: 5px;
+	color: gray;
+	font-size: 90%;
+}
+
+#trace-input-form .input-help i:first-child {
+	position: absolute;
+	left: 0;
+}
+
+#new-analysis-form:not(.active),
+#new-import-form:not(.active) { 
+	display: none; 
+}
+
+/***********\
+| Form Tabs |
+\***********/
+
+#trace-input-form ul.form-tabs-list {
+	list-style: none;
+	margin: 0 0 20px 0;
+	border-bottom: 2px solid steelblue;
+}
+
+#trace-input-form .form-tab {
+	display: inline-block;
+	box-sizing: border-box;
+	padding: 5px 10px;
+	background-color: lightgray;
+	cursor: pointer;
+	position: relative;
+}
+
+#trace-input-form .form-tab a {
+	/* overriding bootstrap styles*/
+	text-decoration: none;
+	color: #323232;
+}
+
+#trace-input-form .form-tab.active {
+	background-color: steelblue;
+}
+
+#trace-input-form .form-tab.active a {
+	color: white;
+}
+
+/***************\
+| Feedback Area |
+\***************/
+
+#trace-input-form .feedback-area .feedback {
+	color: steelblue;
+}
+#trace-input-form .feedback-area .feedback:before {
+	font-family: FontAwesome;
+	margin-right: 3px;
+	content: "\f075"; /* fa-comment */
+}
+
+#trace-input-form .feedback-area .feedback.error {
+	color: crimson;
+}
+#trace-input-form .feedback-area .feedback.error:before {
+	content: "\f06a"; /* fa-exclamation-circle */
+}
+
+#trace-input-form .feedback-area .feedback.warning {
+	color: goldenrod;
+}
+#trace-input-form .feedback-area .feedback.warning:before {
+	content: "\f071"; /* fa-exclamation-triangle */
+}
+
+/*********************\
+| File Input Elements |
+\*********************/
+
+.file-input-button {
+	position: relative;
+	overflow: hidden;
+	background-color: lightgray;
+	font-size: 14px;
+	text-align: center;
+}
+
+.file-input-button input[type=file] {
+	position: absolute;
+	opacity: 0;
+	right: 0;
+	top: 0;
+	font-size: 200px;
+	direction: ltr;
+	cursor: pointer;
+	height: 100%;
+}
+
+.file-input-area .file-input-button {
+	float: left;
+	width: 100px;
+	box-sizing: border-box;
+	height: 72px;
+}
+
+.file-input-area .file-input-button .prompt {
+	margin-top: 12px;
+}
+
+.file-input-area .file-or-msg {
+	width: 50px;
+	text-align: center;
+	font-weight: bold;
+	float: left;
+	line-height: 72px;
+}
+
+.file-input-area .file-dropzone {
+	float: left;
+	width: calc(100% - 150px);
+	color: gray;
+	box-sizing: border-box;
+	padding: .5em;
+	text-align: center;
+	height: 72px;
+}
+
+.file-input-area .file-dropzone.in {
+	background-color: lightgray;
+}
+
+.file-input-area .file-dropzone.hover {
+	background-color: lightgreen;
+}
+
+.file-input-area .file-dropzone .dropzone-msg {
+	border: 2px dashed;
+	padding: 1em;
+	border-radius: .5em;
+}
+
+.file-input-area .file-dropzone .dropzone-msg:before {
+	content: 'Drag a file here';
+}
+.file-input-area .file-dropzone.in .dropzone-msg:before {
+	content: 'Drop it here!';
+}
+
+/*********************\
+| File Input Feedback |
+\*********************/
+
+#trace-input-form .file-input-result {
+	margin-top: 5px;
+	font-size: small;
+	color: gray;
+}
+
+#trace-input-form .file-input-result .file-input-name {
+	font-weight: bold;
+}
+
+.filetype {
+	font-family: monospace;
+}