From fcdbb68cafb710877fc3b16c029fd081ca1e29b5 Mon Sep 17 00:00:00 2001 From: Anand Doshi Date: Wed, 21 Jan 2015 17:44:11 +0530 Subject: [PATCH] [design] todo sidebar and nav sidebar for desktop --- frappe/public/build.json | 1 + frappe/public/css/bootstrap.css | 12 +- frappe/public/css/desktop.css | 5 + frappe/public/css/mobile.css | 89 +++++++++++++-- frappe/public/css/navbar.css | 3 + .../js/frappe/ui/toolbar/awesome_bar.js | 2 +- .../js/frappe/ui/toolbar/left_sidebar.html | 35 ++++++ frappe/public/js/frappe/ui/toolbar/toolbar.js | 56 +++++---- frappe/public/js/frappe/views/container.js | 5 +- frappe/public/less/desktop.less | 5 + frappe/public/less/mobile.less | 106 ++++++++++++++++-- frappe/public/less/navbar.less | 1 + frappe/public/less/variables.less | 3 + frappe/templates/pages/desk.html | 6 +- 14 files changed, 277 insertions(+), 52 deletions(-) create mode 100644 frappe/public/js/frappe/ui/toolbar/left_sidebar.html diff --git a/frappe/public/build.json b/frappe/public/build.json index 717006256f..c4908806ce 100644 --- a/frappe/public/build.json +++ b/frappe/public/build.json @@ -149,6 +149,7 @@ "public/js/frappe/ui/toolbar/bookmarks.js", "public/js/frappe/ui/toolbar/about.js", "public/js/frappe/ui/toolbar/navbar.html", + "public/js/frappe/ui/toolbar/left_sidebar.html", "public/js/frappe/ui/toolbar/toolbar.js", "public/js/frappe/ui/editor.js", diff --git a/frappe/public/css/bootstrap.css b/frappe/public/css/bootstrap.css index ca80d3bd63..c05e2f2432 100644 --- a/frappe/public/css/bootstrap.css +++ b/frappe/public/css/bootstrap.css @@ -4372,8 +4372,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } } .navbar-default { - background-color: rgba(241, 244, 248, .7); - border-color: rgba(231, 236, 239, .7); + background-color: #f5f7fa; + border-color: #ebeff2; } .navbar-default .navbar-brand { color: #6c7680; @@ -4398,7 +4398,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #555; - background-color: rgba(219, 227, 237, .7); + background-color: #dfe5ef; } .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, @@ -4418,13 +4418,13 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } .navbar-default .navbar-collapse, .navbar-default .navbar-form { - border-color: rgba(231, 236, 239, .7); + border-color: #ebeff2; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #555; - background-color: rgba(219, 227, 237, .7); + background-color: #dfe5ef; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { @@ -4439,7 +4439,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #555; - background-color: rgba(219, 227, 237, .7); + background-color: #dfe5ef; } .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, diff --git a/frappe/public/css/desktop.css b/frappe/public/css/desktop.css index b9df5feb0b..6f17a2b550 100644 --- a/frappe/public/css/desktop.css +++ b/frappe/public/css/desktop.css @@ -1,3 +1,8 @@ +body[data-route=""] .navbar-default, +body[data-route="desktop"] .navbar-default { + background-color: rgba(255, 255, 255, 0.5); + border-color: transparent; +} #page-desktop { min-width: 100%; padding-top: 80px; diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css index 523465cdac..e14bd2c9aa 100644 --- a/frappe/public/css/mobile.css +++ b/frappe/public/css/mobile.css @@ -1,4 +1,4 @@ -@media screen and (max-width: 767px) { +@media (max-width: 767px) { .layout-main > div[class^="col-sm-"], .form-section { padding-left: 0px; @@ -86,35 +86,36 @@ } .offcanvas, .page-head, - .sidebar-offcanvas-right, - .sidebar-offcanvas-left, + .sidebar-right, + .sidebar-left, .navbar-fixed-top { -webkit-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; } .offcanvas { - position: absolute; + position: fixed; left: 0; right: 0; top: 0; bottom: 0; + overflow-y: auto; } .offcanvas.active-left, .offcanvas.active-left .page-head, .offcanvas.active-left .navbar-fixed-top { left: 75%; /* 9 columns */ - right: -25%; + right: -75%; } .offcanvas.active-right, .offcanvas.active-right .page-head, .offcanvas.active-right .navbar-fixed-top { right: 75%; /* 9 columns */ - left: -25%; + left: -75%; } - .offcanvas .sidebar-offcanvas { + .offcanvas .sidebar { position: fixed; top: 0; bottom: 0; @@ -122,19 +123,85 @@ /* 9 columns */ overflow-x: hidden; overflow-y: auto; + font-size: 12px; } - .offcanvas .sidebar-offcanvas-right { + .offcanvas .sidebar-right { right: -75%; /* 9 columns */ + border-left: 1px solid #d1d8dd; } - .offcanvas .sidebar-offcanvas-left { + .offcanvas .sidebar-left { left: -75%; /* 9 columns */ + border-right: 1px solid #d1d8dd; } - .offcanvas.active-left .sidebar-offcanvas-left { + .offcanvas.active-left .sidebar-left { left: 0; } - .offcanvas.active-right .sidebar-offcanvas-right { + .offcanvas.active-right .sidebar-right { right: 0; } + .offcanvas .sidebar ul { + list-style: outside none none; + padding-left: 0px; + margin-top: -1px; + } + .offcanvas .sidebar-menu li > a { + padding: 12px 14px; + display: block; + clear: both; + whitespace: nowrap; + transition: 0.2s; + } + .offcanvas .sidebar li > a:hover, + .offcanvas .sidebar li > a:focus, + .offcanvas .sidebar li > a:active { + background-color: #f0f4f7; + } + .sidebar .divider { + height: 1px; + overflow: hidden; + background-color: #ebeff2; + } + .sidebar .form-group { + margin-bottom: 0px; + } + #sidebar-search { + height: 27px; + } + .sidebar .navbar-search-icon { + float: right; + color: #6c7680; + font-size: inherit; + position: relative; + right: 7px; + top: -21px; + height: 0; + } + .sidebar form { + padding: 7px; + } + .sidebar .main-menu { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 41px; + overflow-y: auto; + } + .sidebar .user-menu { + padding: 9px 14px; + background-color: #f5f7fa; + position: absolute; + left: 0; + bottom: 0; + right: 0; + } + .sidebar .user-menu, + .sidebar .user-menu .octicon { + color: #6c7680; + } + .sidebar .user-menu img { + margin-top: -1px; + } } diff --git a/frappe/public/css/navbar.css b/frappe/public/css/navbar.css index f67d2ac6c0..fa98c44eb2 100644 --- a/frappe/public/css/navbar.css +++ b/frappe/public/css/navbar.css @@ -57,8 +57,11 @@ .navbar .badge { font-weight: normal; } +#sidebar-notification > li > a:hover .badge, #navbar-notification > li > a:hover .badge, +#sidebar-notification > li > a:focus .badge, #navbar-notification > li > a:focus .badge, +#sidebar-notification > li > a:active .badge, #navbar-notification > li > a:active .badge { background-color: #D8DFE5; } diff --git a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js index 76f581e6ca..20ccbce25c 100644 --- a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js +++ b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js @@ -18,7 +18,7 @@ frappe.ui.toolbar.Search = frappe.ui.toolbar.SelectorDialog.extend({ frappe.search = { setup: function() { - $("#navbar-search").autocomplete({ + $("#navbar-search, #sidebar-search").autocomplete({ minLength: 0, source: function(request, response) { var txt = strip(request.term); diff --git a/frappe/public/js/frappe/ui/toolbar/left_sidebar.html b/frappe/public/js/frappe/ui/toolbar/left_sidebar.html new file mode 100644 index 0000000000..0f10f1abf7 --- /dev/null +++ b/frappe/public/js/frappe/ui/toolbar/left_sidebar.html @@ -0,0 +1,35 @@ +
+
+
+ + +
+
+ +
+
+
+ + + {%= frappe.user.full_name() %} + +
+
+ +
+
diff --git a/frappe/public/js/frappe/ui/toolbar/toolbar.js b/frappe/public/js/frappe/ui/toolbar/toolbar.js index 22e4bd1973..3d10757440 100644 --- a/frappe/public/js/frappe/ui/toolbar/toolbar.js +++ b/frappe/public/js/frappe/ui/toolbar/toolbar.js @@ -5,6 +5,7 @@ frappe.ui.toolbar.Toolbar = Class.extend({ init: function() { var header = $('header').append(frappe.render_template("navbar", {})); + var sidebar = $('.offcanvas .sidebar-left').append(frappe.render_template("left_sidebar", {})); header.find(".toggle-sidebar").on("click", function() { $(".offcanvas").toggleClass("active-left").removeClass("active-right"); @@ -65,54 +66,69 @@ frappe.ui.toolbar.update_notifications = function() { var doctypes = keys(frappe.boot.notification_info.open_count_doctype).sort(); var modules = keys(frappe.boot.notification_info.open_count_module).sort(); - $("#navbar-notification").empty(); + var navbar_notification = $("#navbar-notification").empty(); + var sidebar_notification = $("#sidebar-notification").empty(); + + $.each(modules, function(i, module) { var count = frappe.boot.notification_info.open_count_module[module]; if(count) { - $(repl('
  • \ + var notification_row = repl('
  • \ \ %(count)s \ %(module)s
    • ', { module: __(module), count: count, - icon: frappe.modules[module].icon - })) - .appendTo("#navbar-notification") - .find("a") - .attr("data-module", module) - .on("click", function() { - frappe.set_route(frappe.modules[$(this).attr("data-module")].link); - }); + icon: frappe.modules[module].icon, + data_module: module + }); + + navbar_notification.append($(notification_row)); + sidebar_notification.append($(notification_row)); + total += count; } }); if(total) { - $('
  • ').appendTo("#navbar-notification"); + var divider = '
  • '; + navbar_notification.append($(divider)); + sidebar_notification.append($(divider)); } $.each(doctypes, function(i, doctype) { var count = frappe.boot.notification_info.open_count_doctype[doctype]; if(count) { - $(repl('
  • \ + var notification_row = repl('
  • \ \ %(count)s \ %(doctype)s
    • ', { doctype: __(doctype), icon: frappe.boot.doctype_icons[doctype], - count: count - })) - .appendTo("#navbar-notification") - .find("a") - .attr("data-doctype", doctype) - .on("click", function() { - frappe.views.show_open_count_list(this); - }); + count: count, + data_doctype: doctype + }); + + navbar_notification.append($(notification_row)); + sidebar_notification.append($(notification_row)); + total += count; } }); + $("#navbar-notification a, #sidebar-notification a").on("click", function() { + var module = $(this).attr("data-module"); + if (module) { + frappe.set_route(frappe.modules[module].link); + } else { + var doctype = $(this).attr("data-doctype"); + if (doctype) { + frappe.views.show_open_count_list(this); + } + } + }); + $(".navbar-new-comments") .html(total) .toggleClass("navbar-new-comments-true", total ? true : false); diff --git a/frappe/public/js/frappe/views/container.js b/frappe/public/js/frappe/views/container.js index cf9b112023..336b660a1d 100644 --- a/frappe/public/js/frappe/views/container.js +++ b/frappe/public/js/frappe/views/container.js @@ -15,7 +15,10 @@ frappe.views.Container = Class.extend({ this.pagewidth = $('#body_div').width(); this.pagemargin = 50; - $(document).on("page-change", this.set_full_width); + $(document).on("page-change", function() { + // set data-route in body + $("body").attr("data-route", frappe.get_route_str()); + }); }, add_page: function(label, onshow, onhide) { var page = $('
    ') diff --git a/frappe/public/less/desktop.less b/frappe/public/less/desktop.less index c75256c87a..fde2000082 100644 --- a/frappe/public/less/desktop.less +++ b/frappe/public/less/desktop.less @@ -3,6 +3,11 @@ @icon-color: @light-bg; @icon-hover: #fff; +body[data-route=""] .navbar-default, body[data-route="desktop"] .navbar-default { + background-color: rgba(255, 255, 255, 0.5); + border-color: transparent; +} + #page-desktop { min-width: 100%; padding-top: 80px; diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less index 076e754f6c..856a2393ae 100644 --- a/frappe/public/less/mobile.less +++ b/frappe/public/less/mobile.less @@ -1,4 +1,6 @@ -@media screen and (max-width: 767px) { +@import "variables.less"; + +@media(max-width: 767px) { .layout-main > div[class^="col-sm-"], .form-section { padding-left: 0px; @@ -112,8 +114,8 @@ // Off Canvas .offcanvas, .page-head, - .sidebar-offcanvas-right, - .sidebar-offcanvas-left, + .sidebar-right, + .sidebar-left, .navbar-fixed-top { -webkit-transition: 0.25s; -o-transition: 0.25s; @@ -121,49 +123,131 @@ } .offcanvas { - position: absolute; + position: fixed; left: 0; right: 0; top: 0; bottom: 0; + overflow-y: auto; } .offcanvas.active-left, .offcanvas.active-left .page-head, .offcanvas.active-left .navbar-fixed-top { left: 75%; /* 9 columns */ - right: -25%; + right: -75%; } .offcanvas.active-right, .offcanvas.active-right .page-head, .offcanvas.active-right .navbar-fixed-top { right: 75%; /* 9 columns */ - left: -25%; + left: -75%; } - .offcanvas .sidebar-offcanvas { + .offcanvas .sidebar { position: fixed; top: 0; bottom: 0; width: 75%; /* 9 columns */ overflow-x: hidden; overflow-y: auto; + font-size: 12px; } - .offcanvas .sidebar-offcanvas-right { + .offcanvas .sidebar-right { right: -75%; /* 9 columns */ + border-left: 1px solid @border-color; } - .offcanvas .sidebar-offcanvas-left { + .offcanvas .sidebar-left { left: -75%; /* 9 columns */ + border-right: 1px solid @border-color; } - .offcanvas.active-left .sidebar-offcanvas-left { + .offcanvas.active-left .sidebar-left { left: 0; } - .offcanvas.active-right .sidebar-offcanvas-right { + .offcanvas.active-right .sidebar-right { right: 0; } + + .offcanvas .sidebar ul { + list-style: outside none none; + padding-left: 0px; + margin-top: -1px; + } + + .offcanvas .sidebar-menu li > a { + padding: 12px 14px; + display: block; + clear: both; + whitespace: nowrap; + transition: 0.2s; + } + + .offcanvas .sidebar li > a& { + &:hover, + &:focus, + &:active { + background-color: @btn-bg; + } + } + + .sidebar .divider { + height: 1px; + overflow: hidden; + background-color: @navbar-default-border; + } + + .sidebar .form-group { + margin-bottom: 0px; + } + + #sidebar-search { + height: 27px; + } + + .sidebar .navbar-search-icon { + float: right; + color: @navbar-default-color; + font-size: inherit; + position: relative; + right: 7px; + top: -21px; + height: 0; + } + + .sidebar form { + padding: 7px; + } + + .sidebar .main-menu { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 41px; + overflow-y: auto; + } + + .sidebar .user-menu { + padding: 9px 14px; + background-color: @navbar-default-bg; + + position: absolute; + left: 0; + bottom: 0; + right: 0; + } + + .sidebar .user-menu, + .sidebar .user-menu .octicon { + color: @navbar-default-color; + } + + .sidebar .user-menu img { + margin-top: -1px; + } } diff --git a/frappe/public/less/navbar.less b/frappe/public/less/navbar.less index c400e04ced..44f6b76af2 100644 --- a/frappe/public/less/navbar.less +++ b/frappe/public/less/navbar.less @@ -70,6 +70,7 @@ font-weight: normal; } +#sidebar-notification > li > a&, #navbar-notification > li > a& { &:hover .badge, &:focus .badge, diff --git a/frappe/public/less/variables.less b/frappe/public/less/variables.less index d768ab4b45..3f9185c148 100644 --- a/frappe/public/less/variables.less +++ b/frappe/public/less/variables.less @@ -19,6 +19,8 @@ @navbar-default-color: #6C7680; @navbar-inverse-color: #9D9D9D; +@navbar-default-bg: #f5f7fa; +@navbar-default-border: #EBEFF2; @breadcrumb-divider-color: #C0C9D2; @label-primary-bg: #D9F6FF; @@ -26,3 +28,4 @@ @label-info-bg: #E8DDFF; @label-warning-bg: #FFE6BF; @label-danger-bg: #FFDCDC; + diff --git a/frappe/templates/pages/desk.html b/frappe/templates/pages/desk.html index 6e3a906c52..28613a17f7 100644 --- a/frappe/templates/pages/desk.html +++ b/frappe/templates/pages/desk.html @@ -17,8 +17,10 @@
    -
    something
    -
    something
    +
    +
    + +