From 2ef65f1da07b7fd8980de480438583b76e36709c Mon Sep 17 00:00:00 2001 From: Rushabh Mehta Date: Tue, 4 Jun 2013 15:04:34 +0530 Subject: [PATCH] [ui] flattified desktop icons --- core/page/desktop/desktop.css | 11 ++--------- core/page/desktop/desktop.js | 18 ------------------ core/page/messages/messages.js | 3 +-- public/css/ui/common.css | 24 ++++++++++++++++++++++++ public/js/wn/ui/appframe.js | 10 +++------- public/js/wn/views/calendar.js | 4 +--- 6 files changed, 31 insertions(+), 39 deletions(-) diff --git a/core/page/desktop/desktop.css b/core/page/desktop/desktop.css index 82d8530e98..c7c8918d4c 100644 --- a/core/page/desktop/desktop.css +++ b/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 { diff --git a/core/page/desktop/desktop.js b/core/page/desktop/desktop.js index 4ea5deab3d..c777b20766 100644 --- a/core/page/desktop/desktop.js +++ b/core/page/desktop/desktop.js @@ -61,24 +61,6 @@ erpnext.desktop.show_pending_notifications = function() { repl('', {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'); diff --git a/core/page/messages/messages.js b/core/page/messages/messages.js index 0720322f35..07135eccec 100644 --- a/core/page/messages/messages.js +++ b/core/page/messages/messages.js @@ -32,8 +32,7 @@ wn.pages.messages.onload = function(wrapper) { \
').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); diff --git a/public/css/ui/common.css b/public/css/ui/common.css index 3fa65238f7..66467b47e1 100644 --- a/public/css/ui/common.css +++ b/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 { diff --git a/public/js/wn/ui/appframe.js b/public/js/wn/ui/appframe.js index e5fee3ed0b..c9e93a3031 100644 --- a/public/js/wn/ui/appframe.js +++ b/public/js/wn/ui/appframe.js @@ -72,17 +72,13 @@ wn.ui.AppFrame = Class.extend({ if(module_info) { this.$w.find(".title-icon").html(' ') - .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("
").css({ - "border-top": "7px solid " + module_info.color - }); - // this.$w.find(".title-area").css({ - // "border-left": "5px solid " + module_info.color - // }) } }, diff --git a/public/js/wn/views/calendar.js b/public/js/wn/views/calendar.js index 72b244ff4d..905f001242 100644 --- a/public/js/wn/views/calendar.js +++ b/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"); },