Spiced up the upload file feedback in the trace input form.

Now when you pick a file, the browse/drag widgetry is hidden and the filename display is more emphasized. You can remove the file by clicking the 'x' button (or by canceling the form)

Author: dylemma

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/TraceInputForm/TraceInputForm.css

@@ -58,7 +58,7 @@ trace-input-form .form-field {
 #trace-input-form ul.form-tabs-list {
 	list-style: none;
 	margin: 0 0 20px 0;
-	border-bottom: 1px solid lightgray;
+	border-bottom: 2px solid steelblue;
 }
 
 #trace-input-form .form-tab {
@@ -84,15 +84,6 @@ trace-input-form .form-field {
 	color: white;
 }
 
-#trace-input-form .form-tab.active:after {
-	content: '';
-	position: absolute;
-	top: 100%;
-	left: calc(50% - 4px);
-	border: 8px solid transparent;
-	border-top-color: steelblue;
-}
-
 /***************\
 | Feedback Area |
 \***************/
@@ -203,9 +194,8 @@ trace-input-form .form-field {
 	color: gray;
 }
 
-#trace-input-form .file-input-result span {
+#trace-input-form .file-input-result .file-input-name {
 	font-weight: bold;
-	color: darkgreen;
 }
 
 .filetype {

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

@@ -36,8 +36,10 @@ $(document).ready(function(){
 		 */
 		var fileInput = $form.find('[name=file-input]'),
 			nameInput = $form.find('[name=name-input]'),
+			fileInputArea = $form.find('.file-input-area'),
 			fileChoiceLabel = $form.find('[name=file-input-choice-label]'),
 			fileChoiceOriginalText = fileChoiceLabel.text(),
+			fileClearButton = $form.find('.file-input-clear'),
 			fileDropzone = $form.find('.file-dropzone'),
 			cancelButton = $form.find('[name=cancel-button]'),
 			submitButton = $form.find('[name=submit-button]'),
@@ -105,8 +107,12 @@ $(document).ready(function(){
 
 		traceFileName.onValue(function(filename){
 			fileChoiceLabel.text(filename || fileChoiceOriginalText)
+			fileClearButton[filename ? 'show' : 'hide']()
+			fileInputArea[filename ? 'slideUp' : 'slideDown']('fast')
 		})
 
+		fileClearButton.click(function(){ traceFile.set(null) })
+
 		traceFileName.onValue(function(filename){
 			if(filename && !traceName.get() && !nameOptional){
 				traceName.set(filename)

codepulse/src/main/webapp/templates-hidden/TraceInputForm.html

@@ -59,9 +59,14 @@
 
 				<div class="file-input-result">
 					The new analysis will be created from
-					<span name="file-input-choice-label">
-						the file you choose or drag
-					</span>
+					<div class="button-bar">
+						<div class="file-input-name item" name="file-input-choice-label">
+							the file you choose or drag
+						</div>
+						<div class="file-input-clear button item" title="Don't use this file">
+							<i class="fa fa-times-circle"></i>
+						</div>
+					</div>
 				</div>
 
 				<div class="input-help">
@@ -120,9 +125,14 @@
 
 				<div class="file-input-result">
 					The trace will be imported from
-					<span name="file-input-choice-label">
-						the file you choose or drag
-					</span>
+					<div class="btn-group">
+						<div class="file-input-name" name="file-input-choice-label">
+							the file you choose or drag
+						</div>
+						<div class="file-input-clear" title="Don't use this file">
+							<i class="fa fa-times-circle"></i>
+						</div>
+					</div>
 				</div>
 
 				<div class="input-help">