[ui] flattified desktop icons

core/page/desktop/desktop.css

@@ -33,7 +33,7 @@
 }
 
 /* Hover and click effects */
-.case-border:hover, .circle:hover, .hover-effect {
+.case-border:hover, .hover-effect {
 	box-shadow: 0 0 1px 0px black, 0 0 2px 1px white ;
 	-moz-box-shadow: 0 0 1px 0px black, 0 0 2px 1px white ;
 	-webkit-box-shadow: 0 0 1px 0px black, 0 0 2px 1px white ;
@@ -52,14 +52,6 @@
 
 }
 
-.circle:active, .circle:focus, .circle-click {
-	transform: scale(1, 1);
-	-ms-transform: scale(1, 1); /* IE 9 */
-	-webkit-transform: scale(1, 1); /* Safari and Chrome */
-	-o-transform: scale(1, 1); /* Opera */
-	-moz-transform: scale(1, 1); /* Firefox */
-}
-
 .circle {
 	position: absolute;
 	top: -10px;
@@ -70,6 +62,7 @@
 	line-height: 12px;
 	background: #e74c3c;
 	padding: 7px;
+	z-index: 5;
 }
 
 .circle-text {

core/page/desktop/desktop.js

@@ -61,24 +61,6 @@ erpnext.desktop.show_pending_notifications = function() {
 			repl('<div id="%(id)s" class="circle" title="%(title)s" style="display: None">\
 					<span class="circle-text"></span>\
 				 </div>', {id: id, title: wn._(title)}));
-		
-		var case_border = module.find('.case-border');
-		var circle = module.find('.circle');
-
-		var add_hover_and_click = function(primary, secondary, hover_class, click_class) {
-			primary
-			.hover(
-				function() { secondary.addClass(hover_class); },
-				function() { secondary.removeClass(hover_class); })
-			.mousedown(function() { secondary.addClass(click_class); })
-			.mouseup(function() { secondary.removeClass(click_class); })
-			.focusin(function() { $(this).mousedown(); })
-			.focusout(function() { $(this).mouseup(); })
-		}
-		
-		add_hover_and_click(case_border, circle, 'hover-effect', 'circle-click');
-		add_hover_and_click(circle, case_border, 'hover-effect', 'case-border-click');
-
 	}
 
 	add_circle('module-icon-messages', 'unread_messages', 'Unread Messages');

core/page/messages/messages.js

@@ -32,8 +32,7 @@ wn.pages.messages.onload = function(wrapper) {
 	</div>\
 	<div class="all-messages"></div>').appendTo($(wrapper).find('.layout-main-section'));
 
-	wrapper.appframe.add_home_breadcrumb();
-	wrapper.appframe.add_breadcrumb(wn.modules["Messages"].icon);
+	wrapper.appframe.add_module_icon("Messages");
 	
 	erpnext.messages = new erpnext.Messages(wrapper);
 	erpnext.toolbar.set_new_comments(0);

public/css/ui/common.css

@@ -4,6 +4,10 @@ body {
 	padding-bottom: 50px;
 }
 
+h1, h2, h3, h4, h5 {
+	font-weight: 500;
+}
+
 a {
 	cursor: pointer;
 }
@@ -116,6 +120,26 @@ a {
 	font-weight: bold;
 }
 
+.appframe .title-icon {
+	cursor: pointer;
+	display: inline-block;
+	padding: 14px;
+	width: 55px;
+	color: white;
+	text-align: center;
+	margin-right: 10px;
+	border-radius: 5px;
+	margin-top: -10px;
+	font-size: 24px;
+}
+
+.appframe .title-icon:active {
+	-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
+			box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
+
+}
+
+
 /* home icon in main nav */
 
 .navbar-icon-home {

public/js/wn/ui/appframe.js

@@ -72,17 +72,13 @@ wn.ui.AppFrame = Class.extend({
 		if(module_info) {
 			this.$w.find(".title-icon").html('<i class="'
 				+module_info.icon+'"></i> ')
-				.css({"cursor":"pointer"})
+				.css({
+					"background-color": module_info.color,
+				})
 				.attr("module-name", module)
 				.click(function() {
 					wn.set_route(wn.modules[$(this).attr("module-name")].link);
 				});
-			this.$w.prepend("<div>").css({
-				"border-top": "7px solid " + module_info.color
-			});
-			// this.$w.find(".title-area").css({
-			// 	"border-left": "5px solid " + module_info.color
-			// })
 		}
 	},
 	

public/js/wn/views/calendar.js

@@ -47,9 +47,7 @@ wn.views.Calendar = Class.extend({
 
 		var module = locals.DocType[this.doctype].module;
 		this.page.appframe.set_title(wn._("Calendar") + " - " + wn._(this.doctype));
-		this.page.appframe.add_home_breadcrumb()
-		this.page.appframe.add_module_icon(module)
-		this.page.appframe.add_breadcrumb("icon-calendar");
+		this.page.appframe.add_module_icon(module==="Core" ? "Calendar" : module)
 
 		this.page.appframe.set_views_for(this.doctype, "calendar");
 	},