Fixed #1016 File Upload UI and minor slick grid styling

frappe/public/css/bootstrap.css

@@ -2537,7 +2537,7 @@ output {
   color: #555;
   background-color: #fff;
   background-image: none;
-  border: 1px solid #ccc;
+  border: 1px solid #d1d8dd;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
           box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
@@ -3779,8 +3779,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   line-height: 1;
   color: #555;
   text-align: center;
-  background-color: #eee;
-  border: 1px solid #ccc;
+  background-color: #f0f4f7;
+  border: 1px solid #d1d8dd;
   border-radius: 4px;
 }
 .input-group-addon.input-sm {

frappe/public/css/desk.css

@@ -394,3 +394,21 @@ a.badge-hover:active .badge {
 .footnote-area {
   border-top: 1px solid #d1d8dd;
 }
+.file-upload .input-group-addon {
+  color: #8d99a6;
+  font-size: 12px;
+}
+.file-upload .file-upload-or {
+  font-size: 12px;
+  margin: 0px 7px;
+}
+.file-upload .uploaded-filename,
+.file-upload .web-link-wrapper,
+.file-upload .input-upload,
+.file-upload .input-link {
+  display: inline-block;
+  vertical-align: middle;
+}
+.file-upload .uploaded-filename-display {
+  max-width: 194px;
+}

frappe/public/css/slickgrid.css

@@ -25,10 +25,13 @@
   width: 100%;
   min-height: 20px;
 }
-.slick-cell {
+.slick-cell,
+.slick-headerrow-column {
   font-size: 12px;
-  border-color: #d1d8dd !important;
+  border-color: transparent #d1d8dd #d1d8dd transparent !important;
+  border-style: solid;
   color: inherit !important;
+  margin-top: -1px;
 }
 .slick-header-column,
 .slick-header-columns {

frappe/public/js/frappe/ui/upload.html

@@ -1,13 +1,21 @@
 <div class="file-upload">
-    <div class="checkbox" style="margin-top: 0px;">
-        <label class="text-muted">
-            <input type="checkbox" class="attach-as-link"> {%= __("Attach as a web link") %}</label>
-    </div>
-    <div class="input-upload">
-        <input style="margin: 7px 0px;" type="file" name="filedata" />
-    </div>
-    <div class="input-link hide">
-	    <input class="form-control" style="max-width: 300px;" type="text" name="file_url" />
-    	<p class="text-muted">{%= (opts.sample_url || "e.g. http://example.com/somefile.png") %}</p>
-    </div>
+		<div class="input-upload">
+			<input class="input-upload-file hidden" type="file" name="filedata" />
+			<button class="btn btn-default btn-sm btn-browse">{%= __("Browse") %}</button>
+		</div>
+		<div class="uploaded-filename hidden" style="width: calc(100% - 67px);"></div>
+		<div class="web-link-wrapper" style="width: calc(100% - 67px);">
+			<span class="text-muted file-upload-or">{%= __("or") %}</span>
+			<div class="input-link" style="width: calc(100% - 30px);">
+				<div class="input-group">
+					<div class="input-group-addon">
+						<span class="hidden-xs">{%= __("Web Link") %}</span>
+						<i class="icon-link visible-xs"></i>
+					</div>
+					<input class="form-control" type="text" name="file_url"
+						placeholder="{%= (opts.sample_url || "e.g. http://example.com/somefile.png") %}"/>
+				</div>
+			</div>
+		</div>
+	</div>
 </div>

frappe/public/js/frappe/upload.js

@@ -6,14 +6,41 @@ frappe.upload = {
 	make: function(opts) {
 		if(!opts.args) opts.args = {};
 		var $upload = $(frappe.render_template("upload", {opts:opts})).appendTo(opts.parent);
+		var $file_input = $upload.find(".input-upload-file");
 
-		$upload.find(".attach-as-link").click(function() {
-			var as_link = $(this).prop("checked");
+		// bind pseudo browse button
+		$upload.find(".btn-browse").on("click",
+			function() { $file_input.click(); });
 
-			$upload.find(".input-link").toggleClass("hide", !as_link);
-			$upload.find(".input-upload").toggleClass("hide", as_link);
+		$file_input.on("change", function() {
+			if (this.files.length > 0) {
+				$upload.find(".web-link-wrapper").addClass("hidden");
+
+				var $uploaded_file_display = $(repl('<div class="btn-group" role="group">\
+					<button type="button" class="btn btn-default btn-sm \
+						text-ellipsis uploaded-filename-display">%(filename)s\
+					</button>\
+					<button type="button" class="btn btn-default btn-sm uploaded-file-remove">\
+						&times;</button>\
+				</div>', {filename: this.files[0].name}))
+				.appendTo($upload.find(".uploaded-filename").removeClass("hidden").empty());
+
+				$uploaded_file_display.find(".uploaded-filename-display").on("click", function() {
+					$file_input.click();
+				});
+
+				$uploaded_file_display.find(".uploaded-file-remove").on("click", function() {
+					$file_input.val("");
+					$file_input.trigger("change");
+				});
+
+			} else {
+				$upload.find(".uploaded-filename").addClass("hidden")
+				$upload.find(".web-link-wrapper").removeClass("hidden");
+			}
 		});
 
+
 		if(!opts.btn) {
 			opts.btn = $('<button class="btn btn-default btn-sm">' + __("Attach")
 				+ '</div>').appendTo($upload);
@@ -33,7 +60,7 @@ frappe.upload = {
 
 			var fileobj = $upload.find(":file").get(0).files[0];
 			frappe.upload.upload_file(fileobj, opts.args, opts);
-		})
+		});
 	},
 	upload_file: function(fileobj, args, opts) {
 		if(!fileobj && !args.file_url) {

frappe/public/less/desk.less

@@ -454,3 +454,27 @@ a.badge-hover& {
 .footnote-area {
 	border-top: 1px solid @border-color;
 }
+
+.file-upload {
+	.input-group-addon {
+		color: @text-muted;
+		font-size: 12px;
+	}
+
+	.file-upload-or {
+		font-size: 12px;
+		margin: 0px 7px;
+	}
+
+	.uploaded-filename,
+	.web-link-wrapper,
+	.input-upload,
+	.input-link {
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	.uploaded-filename-display {
+		max-width: 194px;
+	}
+}

frappe/public/less/slickgrid.less

@@ -30,10 +30,13 @@
 	min-height: 20px;
 }
 
-.slick-cell {
+.slick-cell,
+.slick-headerrow-column {
 	font-size: 12px;
-	border-color: @border-color !important;
+	border-color: transparent @border-color @border-color transparent !important;
+	border-style: solid;
 	color: inherit !important;
+	margin-top: -1px;
 }
 
 .slick-header-column, .slick-header-columns {