updated bootstrap and css

frappe/public/css/appframe.css

@@ -51,6 +51,13 @@ h2.titlebar-left-item {
 	width: 90%;
 }
 
+.title-sub {
+	font-size: 50%;
+	color: #888;
+	margin-left: 42px;
+	margin-top: 4px;
+}
+
 @media (max-width: 768px) {
 	.titlebar-center-item  {
 		width: 80%;

frappe/public/css/desk.css

@@ -19,6 +19,10 @@ a.disabled, a.disabled:hover {
 	text-decoration: none;
 }
 
+a.form-link {
+	font-weight: bold;
+}
+
 .layout-main {
 	padding-bottom: 10px;
 }
@@ -139,7 +143,7 @@ div#freeze {
 .doclist-row {
 	position: relative;
 	padding-top: 5px;
-	padding-bottom: 3px;
+	padding-bottom: 6px;
 	border-bottom: "1px solid #eee";
 }
 
@@ -156,6 +160,13 @@ div#freeze {
 	color: #888;
 }
 
+.list-doc-name {
+	position: absolute;
+	bottom: 2px;
+	font-size: 70%;
+	color: #888;
+}
+
 /* module */
 
 .module-item-progress {

frappe/public/css/less/frappe.less

@@ -12,6 +12,9 @@
 @alert-padding:              10px;
 @nav-link-padding:           8px 15px;
 
+@link-color:                 #000;
+@font-family-sans-serif:     "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
 .alert {
     border: 1px solid transparent;
 }
@@ -33,4 +36,4 @@ h3, h4 {
 ul.with-margin li,
 ol.with-margin li {
 	margin: 7px auto;
-}
+}

frappe/public/js/frappe/form/formatters.js

@@ -12,7 +12,7 @@ frappe.form.formatters = {
 	Float: function(value, docfield) {
 		var decimals = cint(docfield.options, null) || cint(frappe.boot.sysdefaults.float_precision, null);
 
-		return "<div style='text-align: right'>" + 
+		return "<div style='text-align: right'>" +
 			((value==null || value==="") ? "" :
 				format_number(value, null, decimals)) + "</div>";
 	},
@@ -30,15 +30,15 @@ frappe.form.formatters = {
 		return value ? "<i class='icon-check'></i>" : "<i class='icon-check-empty'></i>";
 	},
 	Link: function(value, docfield, options) {
-		if(options && options.for_print) 
+		if(options && options.for_print)
 			return value;
-		if(!value) 
+		if(!value)
 			return "";
 		if(docfield && docfield.link_onclick) {
-			return repl('<a onclick="%(onclick)s">%(value)s</a>', 
+			return repl('<a class="form-link" onclick="%(onclick)s">%(value)s</a>',
 				{onclick: docfield.link_onclick.replace(/"/g, '&quot;'), value:value});
 		} else if(docfield && docfield.options) {
-			return repl('%(icon)s<a href="#Form/%(doctype)s/%(name)s">%(label)s</a>', {
+			return repl('%(icon)s<a class="form-link" href="#Form/%(doctype)s/%(name)s">%(label)s</a>', {
 				doctype: encodeURIComponent(docfield.options),
 				name: encodeURIComponent(value),
 				label: value,
@@ -122,4 +122,4 @@ frappe.form.get_formatter = function(fieldtype) {
 frappe.format = function(value, df, options, doc) {
 	if(!df) df = {"fieldtype":"Data"};
 	return frappe.form.get_formatter(df.fieldtype)(value, df, options, doc);
-}
+}

frappe/public/js/frappe/form/toolbar.js

@@ -39,6 +39,11 @@ frappe.ui.form.Toolbar = Class.extend({
 	set_title: function() {
 		if(this.frm.meta.title_field) {
 			var title = this.frm.doc[this.frm.meta.title_field] || __(this.frm.docname);
+			if(this.frm.doc.__islocal) {
+				this.appframe.set_title_sub("");
+			} else {
+				this.appframe.set_title_sub("#" + this.frm.docname);
+			}
 		} else {
 			var title = __(this.frm.docname);
 		}

frappe/public/js/frappe/ui/appframe.js

@@ -10,10 +10,14 @@ frappe.ui.AppFrame = Class.extend({
 		this.fields_dict = {};
 		this.parent = parent;
 
+		var $center = parent.find(".titlebar-center-item");
 		this.$title_area = $('<span class="title-area">\
 				<span class="title-icon text-muted" style="display: none"></span>\
 				<span class="title-text"></span>\
-			</span>').appendTo(parent.find(".titlebar-center-item"));
+			</span>').appendTo($center);
+
+		this.$sub_title_area = $('<div class="title-sub"></div>')
+			.appendTo($center);
 
 		this.setup_iconbar();
 
@@ -47,6 +51,11 @@ frappe.ui.AppFrame = Class.extend({
 		this.$title_area.find(".title-text").html(txt);
 	},
 
+	set_title_sub: function(txt) {
+		// strip icon
+		this.$sub_title_area.html(txt);
+	},
+
 	set_title_left: function(click) {
 		return $("<a>")
 			.html('<i class="icon-angle-left text-muted" style="margin-right: 10px; \
@@ -223,7 +232,7 @@ frappe.ui.AppFrame = Class.extend({
 	},
 
 	get_main_icon: function(icon) {
-		return this.$title_area.find(".title-icon").html('<i class="'+icon+'"></i> ').toggle(true);
+		return this.$title_area.find(".title-icon").html('<i class="'+icon+' icon-fixed-width"></i> ').toggle(true);
 	},
 
 	add_help_button: function(txt) {

frappe/public/js/frappe/views/doclistview.js

@@ -60,12 +60,19 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 		$('<div class="show-docstatus hide side-panel">\
 			<h5 class="text-muted">Show</h5>\
 			<div class="side-panel-body">\
-			<div class="text-muted small"><input data-docstatus="0" type="checkbox" \
-				checked="checked" /> '+__('Drafts')+'</div>\
-			<div class="text-muted small"><input data-docstatus="1" type="checkbox" \
-				checked="checked" /> '+__('Submitted')+'</div>\
-			<div class="text-muted small"><input data-docstatus="2" type="checkbox" \
-				/> '+__('Cancelled')+'</div></div>\
+			    <div class="checkbox"><label>\
+					<input type="checkbox" data-docstatus="0" checked="checked">\
+						<span class="text-muted">'+__('Drafts')+'</span>\
+			    </label></div>\
+			    <div class="checkbox"><label>\
+					<input type="checkbox" data-docstatus="1" checked="checked">\
+						<span class="text-muted">'+__('Submitted')+'</span>\
+			    </label></div>\
+			    <div class="checkbox"><label>\
+					<input type="checkbox" data-docstatus="2">\
+						<span class="text-muted">'+__('Cancelled')+'</span>\
+			    </label></div>\
+			</div>\
 		</div>')
 			.appendTo(this.$page.find(".layout-side-section"));
 

frappe/public/js/frappe/views/listview.js

@@ -1,7 +1,7 @@
 // Copyright (c) 2013, Web Notes Technologies Pvt. Ltd. and Contributors
 // MIT License. See license.txt
 
-frappe.views.get_listview = function(doctype, parent) {	
+frappe.views.get_listview = function(doctype, parent) {
 	if(frappe.doclistviews[doctype]) {
 		var listview = new frappe.doclistviews[doctype](parent);
 	} else {
@@ -15,13 +15,13 @@ frappe.views.ListView = Class.extend({
 	init: function(doclistview, doctype) {
 		this.doclistview = doclistview;
 		this.doctype = doctype;
-		this.settings = frappe.listview_settings[this.doctype] || {};		
+		this.settings = frappe.listview_settings[this.doctype] || {};
 		this.set_fields();
 		this.set_columns();
 		this.id_list = [];
-		if(this.settings.group_by) 
+		if(this.settings.group_by)
 			this.group_by = this.settings.group_by;
-			
+
 		var me = this;
 		this.doclistview.onreset = function() {
 			me.id_list = [];
@@ -38,8 +38,8 @@ frappe.views.ListView = Class.extend({
 			if(me.fields.indexOf(field)=== -1)
 				me.fields.push(field);
 		}
-		
-		$.each(['name', 'owner', 'docstatus', '_user_tags', '_comments', 'modified', 
+
+		$.each(['name', 'owner', 'docstatus', '_user_tags', '_comments', 'modified',
 			'modified_by'], function(i, fieldname) { add_field(fieldname); })
 
 		// add title field
@@ -48,14 +48,14 @@ frappe.views.ListView = Class.extend({
 			this.title_field = meta.title_field;
 			add_field(meta.title_field);
 		}
-		
+
 		// add workflow field (as priority)
 		this.workflow_state_fieldname = frappe.workflow.get_state_fieldname(this.doctype);
 		if(this.workflow_state_fieldname) {
 			add_field(this.workflow_state_fieldname);
 			this.stats.push(this.workflow_state_fieldname);
 		}
-				
+
 		$.each(meta.fields, function(i,d) {
 			if(d.in_list_view && frappe.perm.has_perm(me.doctype, d.permlevel, "read")) {
 				if(d.fieldtype=="Image" && d.options) {
@@ -63,7 +63,7 @@ frappe.views.ListView = Class.extend({
 				} else {
 					add_field(d.fieldname);
 				}
-				
+
 				if(d.fieldtype=="Select") {
 					if(me.stats.indexOf(d.fieldname)===-1) me.stats.push(d.fieldname);
 				}
@@ -93,19 +93,19 @@ frappe.views.ListView = Class.extend({
 		var me = this;
 		if(this.workflow_state_fieldname) {
 			this.columns.push({
-				colspan: 3, 
-				content: this.workflow_state_fieldname, 
+				colspan: 3,
+				content: this.workflow_state_fieldname,
 				type:"select"
 			});
 		}
 
 		// overridden
-		var overridden = $.map(this.settings.add_columns || [], function(d) { 
+		var overridden = $.map(this.settings.add_columns || [], function(d) {
 			return d.content;
 		});
-		var docfields_in_list_view = frappe.get_children("DocType", this.doctype, "fields", 
+		var docfields_in_list_view = frappe.get_children("DocType", this.doctype, "fields",
 			{"in_list_view":1}).sort(function(a, b) { return a.idx - b.idx })
-		
+
 		$.each(docfields_in_list_view, function(i,d) {
 			if(in_list(overridden, d.fieldname) || d.fieldname === me.title_field) {
 				return;
@@ -122,7 +122,7 @@ frappe.views.ListView = Class.extend({
 				colspan = "4";
 			}
 			me.total_colspans += parseInt(colspan);
-			me.columns.push({colspan: colspan, content: d.fieldname, 
+			me.columns.push({colspan: colspan, content: d.fieldname,
 				type:d.fieldtype, df:d, title:__(d.label) });
 		});
 
@@ -149,8 +149,8 @@ frappe.views.ListView = Class.extend({
 	render: function(row, data) {
 		this.prepare_data(data);
 		//$(row).removeClass("list-row");
-		
-		
+
+
 		// maintain id_list to avoid duplication incase
 		// of filtering by child table
 		if(in_list(this.id_list, data.name)) {
@@ -158,8 +158,8 @@ frappe.views.ListView = Class.extend({
 		} else {
 			this.id_list.push(data.name);
 		}
-		
-		
+
+
 		var left_cols = 4 + this.shift_right, right_cols = 8 - this.shift_right;
 		var body = $('<div class="doclist-row row">\
 			<div class="list-row-id-area col-sm-'+left_cols+'" style="white-space: nowrap;\
@@ -168,41 +168,48 @@ frappe.views.ListView = Class.extend({
 		</div>').appendTo($(row).css({"position":"relative"})),
 			colspans = 0,
 			me = this;
-		
+
 		me.render_avatar_and_id(data, body.find(".list-row-id-area"))
-		
+
 		// make table
 		$.each(this.columns, function(i, v) {
 			var colspan = v.colspan || 3;
 			colspans = colspans + flt(colspan)
-						
+
 			if(colspans <= 12) {
 				var col = me.make_column(body.find(".list-row-content-area"), colspan);
 				me.render_column(data, col, v);
 			}
 		});
-		
+
 		var comments = data._comments ? JSON.parse(data._comments) : [];
 		var tags = $.map((data._user_tags || "").split(","), function(v) { return v ? v : null; });
-		
-		var timestamp_and_comment = 
+
+		if(me.title_field) {
+			$('<div class="list-doc-name">')
+				.appendTo(row)
+				.css({"left": me.title_offset_left})
+				.html('<span style="margin-right: 10px;">#' + data.name + "</span>");
+		}
+
+		var timestamp_and_comment =
 			$('<div class="list-timestamp">')
 				.appendTo(row)
 				.html(""
 					+ (tags.length ? (
 							'<span style="margin-right: 10px;" class="list-tag-preview">' + tags.join(", ") + '</span>'
 						): "")
-					+ (comments.length ? 
+					+ (comments.length ?
 						('<a style="margin-right: 10px;" href="#Form/'+
-							this.doctype + '/' + data.name 
+							this.doctype + '/' + data.name
 							+'" title="'+
 							comments[comments.length-1].comment
-							+'"><i class="icon-comments"></i> ' 
+							+'"><i class="icon-comments"></i> '
 							+ comments.length + " " + (
 								comments.length===1 ? __("comment") : __("comments")) + '</a>')
 						: "")
 					+ comment_when(data.modified));
-		
+
 		// row #2
 		var row2 = $('<div class="row tag-row" style="margin-bottom: 5px;">\
 			<div class="col-xs-12">\
@@ -213,14 +220,14 @@ frappe.views.ListView = Class.extend({
 				</div>\
 			</div>\
 		</div>').appendTo(row);
-		
+
 		// modified
-		body.find(".list-last-modified").html(__("Last updated by") + ": " + frappe.user_info(data.modified_by).fullname);		
-		
+		body.find(".list-last-modified").html(__("Last updated by") + ": " + frappe.user_info(data.modified_by).fullname);
+
 		if(!me.doclistview.tags_shown) {
 			row2.addClass("hide");
 		}
-		
+
 		// add tags
 		var tag_editor = new frappe.ui.TagEditor({
 			parent: row2.find(".list-tag"),
@@ -231,7 +238,7 @@ frappe.views.ListView = Class.extend({
 			user_tags: data._user_tags
 		});
 		tag_editor.$w.on("click", ".tagit-label", function() {
-			me.doclistview.set_filter("_user_tags", 
+			me.doclistview.set_filter("_user_tags",
 				$(this).text());
 		});
 	},
@@ -248,44 +255,55 @@ frappe.views.ListView = Class.extend({
 		return col;
 	},
 	render_avatar_and_id: function(data, parent) {
+		this.title_offset_left = 15;
+
 		if((frappe.model.can_delete(this.doctype) || this.settings.selectable) && !this.no_delete) {
 			$('<input class="list-delete" type="checkbox">')
 				.data('name', data.name)
 				.data('data', data)
 				.css({"margin-right": "5px"})
 				.appendTo(parent)
+
+			this.title_offset_left += 13 + 5;
 		}
-		
-		var $avatar = $(frappe.avatar(data.modified_by, false, __("Modified by")+": " 
+
+		var $avatar = $(frappe.avatar(data.modified_by, false, __("Modified by")+": "
 			+ frappe.user_info(data.modified_by).fullname))
 				.appendTo(parent)
 				.css({"max-width": "100%"})
 
+		this.title_offset_left += 30 + 5;
+
 
 		if(frappe.model.is_submittable(this.doctype)) {
 			$(parent).append(repl('<span class="docstatus" style="margin-right: 3px;"> \
-				<i class="%(docstatus_icon)s" \
-				title="%(docstatus_title)s"></i></span>', data));			
+				<i class="%(docstatus_icon)s icon-fixed-width" \
+				title="%(docstatus_title)s"></i></span>', data));
+
+				this.title_offset_left += 15 + 4;
 		}
 
 		var title = data[this.title_field || "name"];
-		$("<a>")
+		$("<a class='form-link list-id' style='margin-left: 5px'>")
 			.attr("href", "#Form/" + data.doctype + "/" + encodeURIComponent(data.name))
 			.html(title)
 			.appendTo(parent.css({"overflow":"hidden"}));
-			
+
+		this.title_offset_left += 5;
+
 		parent.attr("title", title).tooltip();
-		
+
+
 	},
 	render_column: function(data, parent, opts) {
 		var me = this;
 		if(opts.type) opts.type= opts.type.toLowerCase();
-		
+
 		// style
 		if(opts.css) {
 			$.each(opts.css, function(k, v) { $(parent).css(k, v)});
 		}
-		
+
 		// multiple content
 		if(opts.content.indexOf && opts.content.indexOf('+')!=-1) {
 			$.map(opts.content.split('+'), function(v) {
@@ -293,7 +311,7 @@ frappe.views.ListView = Class.extend({
 			});
 			return;
 		}
-		
+
 		// content
 		if(typeof opts.content=='function') {
 			opts.content(parent, data, me);
@@ -305,7 +323,7 @@ frappe.views.ListView = Class.extend({
 		}
 		else if(opts.template) {
 			$(parent).append(repl(opts.template, data));
-		} 
+		}
 		else if(opts.type=="date" && data[opts.content]) {
 			$("<span>")
 				.html(frappe.datetime.str_to_user(data[opts.content]))
@@ -324,20 +342,20 @@ frappe.views.ListView = Class.extend({
 					.appendTo(parent);
 		}
 		else if(opts.type=="select" && data[opts.content]) {
-			
+
 			var label_class = "label-default";
 
 			var style = frappe.utils.guess_style(data[opts.content]);
 			if(style) label_class = "label-" + style;
-			
-			$("<span>" 
+
+			$("<span>"
 				+ data[opts.content] + "</span>")
 				.css({"cursor":"pointer"})
 				.addClass("label")
 				.addClass(label_class)
 				.attr("data-fieldname", opts.content)
 				.click(function() {
-					me.doclistview.set_filter($(this).attr("data-fieldname"), 
+					me.doclistview.set_filter($(this).attr("data-fieldname"),
 						$(this).text());
 				})
 				.appendTo(parent.css({"overflow":"hidden"}));
@@ -347,35 +365,35 @@ frappe.views.ListView = Class.extend({
 				.html(frappe.format(data[opts.content], opts.df, null, data))
 				.appendTo(parent.css({"overflow":"hidden"}))
 				.click(function() {
-					me.doclistview.set_filter($(this).attr("data-fieldname"), 
+					me.doclistview.set_filter($(this).attr("data-fieldname"),
 						$(this).attr("data-value"));
 					return false;
 				})
 				.attr("data-fieldname", opts.content)
 				.attr("data-value", data[opts.content])
 				.find("a").attr("href", "#");
-			
+
 		}
 		else if(data[opts.content]) {
 			$("<span>")
 				.html(frappe.format(data[opts.content], opts.df, null, data))
 				.appendTo(parent.css({"overflow":"hidden"}))
 		}
-		
+
 		// finally
 		if(!$(parent).html()) {
 			$("<span>-</span>").css({color:"#ccc"}).appendTo(parent);
 		}
-		
+
 		// title
 		if(!in_list(["avatar", "_user_tags", "check"], opts.content)) {
 			if($(parent).attr("title")==undefined) {
-				$(parent).attr("title", (opts.title || opts.content) + ": " 
+				$(parent).attr("title", (opts.title || opts.content) + ": "
 					+ (data[opts.content] || "Not Set"))
 			}
 			$(parent).tooltip();
 		}
-		
+
 	},
 	show_hide_check_column: function() {
 		if(!this.doclistview.can_delete) {
@@ -383,22 +401,22 @@ frappe.views.ListView = Class.extend({
 		}
 	},
 	prepare_data: function(data) {
-		
+
 		if(data.modified)
 			this.prepare_when(data, data.modified);
-		
+
 		// docstatus
 		if(data.docstatus==0 || data.docstatus==null) {
 			data.docstatus_icon = 'icon-check-empty';
 			data.docstatus_title = __('Editable');
 		} else if(data.docstatus==1) {
-			data.docstatus_icon = 'icon-lock';			
+			data.docstatus_icon = 'icon-lock';
 			data.docstatus_title = __('Submitted');
 		} else if(data.docstatus==2) {
-			data.docstatus_icon = 'icon-remove';			
+			data.docstatus_icon = 'icon-remove';
 			data.docstatus_title = __('Cancelled');
 		}
-		
+
 		// nulls as strings
 		for(key in data) {
 			if(data[key]==null) {
@@ -410,7 +428,7 @@ frappe.views.ListView = Class.extend({
 		if(this.settings.prepare_data)
 			this.settings.prepare_data(data);
 	},
-	
+
 	prepare_when: function(data, date_str) {
 		if (!date_str) date_str = data.modified;
 		// when
@@ -426,7 +444,7 @@ frappe.views.ListView = Class.extend({
 			data.when = __('2 days ago')
 		}
 	},
-	
+
 	render_bar_graph: function(parent, data, field, label) {
 		var args = {
 			percent: data[field],
@@ -469,4 +487,4 @@ frappe.views.RecordListView = frappe.views.DocListView.extend({
 		args.docstatus = args.docstatus.concat((this.default_docstatus || []));
 		return args;
 	},
-});
+});