diff --git a/frappe/public/build.json b/frappe/public/build.json index 7119934db1..108ca87a70 100644 --- a/frappe/public/build.json +++ b/frappe/public/build.json @@ -36,6 +36,7 @@ "public/css/indicator.css", "public/css/avatar.css", "public/css/navbar.css", + "public/css/sidebar.css", "public/css/page.css", "public/css/form.css", "public/css/form_grid.css", @@ -134,6 +135,7 @@ "public/js/frappe/list/doclistview.js", "public/js/frappe/list/list_sidebar.js", "public/js/frappe/list/list_sidebar.html", + "public/js/frappe/list/list_sidebar_stat.html", "public/js/frappe/list/list_item_main.html", "public/js/frappe/list/list_item_row.html", "public/js/frappe/list/list_item_main_head.html", @@ -149,7 +151,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/offcanvas_left_sidebar.html", "public/js/frappe/ui/toolbar/toolbar.js", "public/js/frappe/ui/editor.js", diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css index 6a945bb7ec..5361fef664 100644 --- a/frappe/public/css/desk.css +++ b/frappe/public/css/desk.css @@ -1,3 +1,12 @@ +.underline { + color: inherit; + border-bottom: 1px solid transparent; + margin-bottom: 0.4em; +} +.underline-hover { + border-bottom: 1px solid #212a33; + color: #212a33; +} html { min-height: 100%; position: relative; @@ -7,19 +16,10 @@ body { margin: 0px; } html, -body, -.desk-container { +body { overflow-x: hidden; /* Prevent scroll on narrow devices */ } -.desk-container { - position: absolute; - width: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; -} .desk-main-section { width: 100%; } @@ -57,6 +57,9 @@ a.grey:hover, border-bottom: 1px solid #212a33; color: #212a33; } +.text-color { + color: #36414c !important; +} .text-muted { color: #8d99a6 !important; } @@ -323,3 +326,8 @@ kbd { .dropdown-menu .divider { margin: 0px; } +a.badge-hover:hover .badge, +a.badge-hover:focus .badge, +a.badge-hover:active .badge { + background-color: #D8DFE5; +} diff --git a/frappe/public/css/form.css b/frappe/public/css/form.css index 2e9b5b019e..3ef848e480 100644 --- a/frappe/public/css/form.css +++ b/frappe/public/css/form.css @@ -40,32 +40,6 @@ .field_description_top { margin-bottom: 3px; } -.sidebar-section li { - margin-top: 5px; - font-size: 12px; -} -.sidebar-section { - margin-top: 25px; -} -.sidebar-section:last-child { - margin-bottom: 20px; -} -.sidebar-section h6 { - text-transform: uppercase; - color: #8d99a6; - font-size: 10px; - margin-bottom: 4px; -} -.sidebar-section .close { - font-size: 18px; - margin-bottom: -2px; -} -.sidebar-section h6 .label { - font-size: 12px; -} -.sidebar-section.sidebar-comments { - cursor: pointer; -} .user-actions { margin-bottom: 15px; } diff --git a/frappe/public/css/list.css b/frappe/public/css/list.css index 9e5b645e23..fa2989a329 100644 --- a/frappe/public/css/list.css +++ b/frappe/public/css/list.css @@ -72,9 +72,6 @@ .doclist-row .progress { margin-top: 12px; } -.stat-label { - margin-bottom: 5px; -} .filterable { cursor: pointer; } diff --git a/frappe/public/css/mixins.css b/frappe/public/css/mixins.css new file mode 100644 index 0000000000..bf8678f396 --- /dev/null +++ b/frappe/public/css/mixins.css @@ -0,0 +1,9 @@ +.underline { + color: inherit; + border-bottom: 1px solid transparent; + margin-bottom: 0.4em; +} +.underline-hover { + border-bottom: 1px solid #212a33; + color: #212a33; +} diff --git a/frappe/public/css/mobile.css b/frappe/public/css/mobile.css index 98c66063ab..b9e3113312 100644 --- a/frappe/public/css/mobile.css +++ b/frappe/public/css/mobile.css @@ -1,5 +1,4 @@ -@media (max-width: 767px) { - .layout-main > div[class^="col-sm-"], +@media (max-width: 991px) { .form-section { padding-left: 0px; padding-right: 0px; @@ -7,10 +6,6 @@ .module-sidebar-nav { margin-right: 0px; } - .list-sidebar { - padding-left: 15px; - padding-right: 15px; - } .layout-main-section { border-left: none; border-right: none; @@ -63,7 +58,7 @@ margin-top: 4px; } .navbar .breadcrumb-divider { - margin-top: 2px !important; + margin-top: 12px !important; margin-right: 3px; } #navbar-breadcrumbs { @@ -74,6 +69,9 @@ display: inline-block; vertical-align: middle; } + #navbar-breadcrumbs > li > a { + padding: 10px 0px 0px; + } #navbar-breadcrumbs li:not(:nth-last-child(-n+2)) { display: none; } @@ -88,27 +86,29 @@ .page-head, .sidebar-right, .sidebar-left, - .navbar-fixed-top { + .navbar-fixed-top, + .desk-main-section-overlay { transition: 0.25s; } - .offcanvas, - .desk-main-section-overlay { + .offcanvas { position: absolute; left: 0; right: 0; top: 0; bottom: 0; - overflow-y: auto; - overflow-x: hidden; + } + .desk-main-section-overlay { + bottom: 0; + position: fixed; } .offcanvas.active-left .desk-main-section-overlay, .offcanvas.active-right .desk-main-section-overlay { - display: block; - background-color: #334143; - opacity: 0.5; z-index: 1031; + display: block; + bottom: 0; } .offcanvas.active-left, + .offcanvas.active-left .desk-main-section-overlay, .offcanvas.active-left .page-head, .offcanvas.active-left .navbar-fixed-top { left: 75%; @@ -116,6 +116,7 @@ right: -75%; } .offcanvas.active-right, + .offcanvas.active-right .desk-main-section-overlay, .offcanvas.active-right .page-head, .offcanvas.active-right .navbar-fixed-top { right: 75%; @@ -148,27 +149,8 @@ .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; + .offcanvas .sidebar-menu { + margin-bottom: 0; } .sidebar .form-group { margin-bottom: 0px; diff --git a/frappe/public/css/navbar.css b/frappe/public/css/navbar.css index fa98c44eb2..a3c9d430e9 100644 --- a/frappe/public/css/navbar.css +++ b/frappe/public/css/navbar.css @@ -41,7 +41,7 @@ background-color: #ff5858; color: #fff; text-align: center; - padding: 1px 5px; + padding: 2px 5px; } #navbar-search { width: 300px; @@ -57,14 +57,6 @@ .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; -} #navbar-search-results { left: auto; right: inherit; diff --git a/frappe/public/css/page.css b/frappe/public/css/page.css index 7307efc223..1b247d9a1a 100644 --- a/frappe/public/css/page.css +++ b/frappe/public/css/page.css @@ -43,6 +43,13 @@ border: 1px solid #d1d8dd; border-top: 0px; } +.layout-main-section-wrapper { + margin-bottom: 60px; + padding-right: 0px; +} +.layout-side-section { + margin-right: -15px; +} .form-intro-area { padding: 15px; } @@ -60,6 +67,3 @@ .page-form .checkbox input { margin-top: -3px; } -.layout-main-section-wrapper { - margin-bottom: 60px; -} diff --git a/frappe/public/css/sidebar.css b/frappe/public/css/sidebar.css new file mode 100644 index 0000000000..ba75073f58 --- /dev/null +++ b/frappe/public/css/sidebar.css @@ -0,0 +1,150 @@ +.underline { + color: inherit; + border-bottom: 1px solid transparent; + margin-bottom: 0.4em; +} +.underline-hover { + border-bottom: 1px solid #212a33; + color: #212a33; +} +body[data-route=""] .main-menu .desk-sidebar, +body[data-route="desk"] .main-menu .desk-sidebar { + display: block !important; +} +body[data-route=""] .main-menu .form-sidebar, +body[data-route="desk"] .main-menu .form-sidebar { + display: none !important; +} +body[data-route^="List"] .main-menu .list-sidebar { + display: block !important; +} +body[data-route^="List"] .main-menu .form-sidebar { + display: none !important; +} +.sidebar-padding { + padding: 12px 14px; +} +.sidebar-left .sidebar-menu > li > a { + padding: 12px 14px; + display: block; + whitespace: nowrap; + transition: 0.2s; +} +.sidebar-left .divider { + height: 1px; + overflow: hidden; + background-color: #ebeff2; + width: 100%; +} +.sidebar-left .sidebar-menu > li > a:hover, +.sidebar-left .sidebar-menu > li > a:focus, +.sidebar-left .sidebar-menu > li > a:active { + background-color: #f0f4f7; +} +.layout-side-section { + font-size: 12px; +} +.layout-side-section .divider { + display: none !important; +} +.layout-side-section .sidebar-menu > li > a { + color: inherit; + border-bottom: 1px solid transparent; + margin-bottom: 0.4em; + display: inline-block; +} +.layout-side-section .sidebar-menu { + margin: 30px 0px; +} +.layout-side-section .sidebar-menu > li > a:hover, +.layout-side-section .sidebar-menu > li > a:focus, +.layout-side-section .sidebar-menu > li > a:active { + border-bottom: 1px solid #212a33; + color: #212a33; +} +.sidebar-menu .badge { + position: absolute; + right: 15px; +} +.sidebar-menu .octicon { + font-size: 12px; +} +.sidebar-menu h6, +.sidebar-menu .h6 { + text-transform: uppercase; + color: #8d99a6; + font-size: 10px; + margin-top: 0px; +} +.form-sidebar .form-tags .tag-area { + margin-top: -3px; + margin-left: -4px; +} +.form-sidebar .form-tags input { + font-size: 12px !important; + color: #36414c !important; + font-style: italic; +} +.form-sidebar .form-tags .tagit-new { + clear: both; + margin-top: 2px; + margin-bottom: -1px; +} +.form-sidebar .assignment-row a.close, +.form-sidebar .attachment-row a.close { + position: relative; + right: 5px; + top: 0px; +} +.sidebar-left .form-sidebar .form-tags, +.sidebar-left .form-sidebar .assignment-row, +.sidebar-left .form-sidebar .modified-by, +.sidebar-left .form-sidebar .created-by, +.sidebar-left .form-sidebar .tags-label { + padding: 12px 14px; +} +.sidebar-left .form-sidebar .assigned-to-label, +.sidebar-left .form-sidebar .attachments-label, +.sidebar-left .form-sidebar .tags-label { + padding: 12px 14px; + padding-bottom: 0px; + margin-bottom: 0px; +} +.sidebar-left .form-sidebar .assignment-row a.close { + top: -10px; + right: -10px; +} +.layout-side-section .form-sidebar .attachment-row a.close { + top: -4px; +} +.layout-side-section .form-sidebar .modified-by, +.layout-side-section .form-sidebar .created-by { + margin: 30px 0px; +} +.layout-side-section .form-sidebar .assignment-row a.close, +.layout-side-section .form-sidebar .attachment-row a.close { + padding: 0px !important; +} +.layout-side-section .list-sidebar { + margin-top: -15px; +} +.sidebar-left .list-sidebar .stat-label, +.sidebar-left .list-sidebar .stat-no-records { + padding: 12px 14px; +} +.sidebar-left .list-sidebar .stat-label { + margin-bottom: -10px; +} +.list-sidebar .list-tag-preview { + padding: 5px !important; + margin-left: 5px; + display: inline !important; +} +.list-sidebar .list-tag-preview:hover, +a.close:hover, +.list-sidebar .list-tag-preview:active, +a.close:active, +.list-sidebar .list-tag-preview:focus, +a.close:focus { + border-color: transparent !important; +} diff --git a/frappe/public/js/frappe/form/footer/assign_to.js b/frappe/public/js/frappe/form/footer/assign_to.js index 29487dcde5..538b114792 100644 --- a/frappe/public/js/frappe/form/footer/assign_to.js +++ b/frappe/public/js/frappe/form/footer/assign_to.js @@ -10,13 +10,12 @@ frappe.provide("frappe.ui.form"); frappe.ui.form.AssignTo = Class.extend({ init: function(opts) { - $.extend(this, opts); var me = this; - this.$list = this.parent.find(".assign-list"); - this.btn = this.parent.find(".add-assignment").click(function() { - me.add(); - }); + $.extend(this, opts); + this.btn = this.parent.find(".add-assignment").on("click", function() { me.add(); }); + this.btn_wrapper = this.btn.parent(); + this.refresh(); }, refresh: function() { @@ -30,7 +29,7 @@ frappe.ui.form.AssignTo = Class.extend({ render: function(d) { var me = this; this.frm.get_docinfo().assignments = d; - this.$list.empty(); + this.parent.find(".assignment-row").remove(); if(me.primary_action) { me.primary_action.remove(); @@ -48,11 +47,16 @@ frappe.ui.form.AssignTo = Class.extend({ info.image = frappe.user_info(d[i].owner).image; info.description = d[i].description || ""; - $(repl('
\ - ×\ - %(fullname)s\ -
', info)) - .appendTo(this.$list); + $(repl('
  • \ + ×\ +
    \ +
    \ + \ +
    \ + %(fullname)s\ +
    \ +
    • ', info)) + .appendTo(this.parent); if(d[i].owner===user) { me.primary_action = this.frm.page.add_menu_item(__("Assignment Complete"), function() { @@ -61,21 +65,20 @@ frappe.ui.form.AssignTo = Class.extend({ } if(!(d[i].owner === user || me.frm.perm[0].write)) { - me.$list.find('a.close').remove(); + me.parent.find('a.close').remove(); } } // set remove - this.$list.find('a.close').click(function() { + this.parent.find('a.close').click(function() { me.remove($(this).attr('data-owner')); return false; }); - this.btn.toggle(false); + this.btn_wrapper.addClass("hide"); } else { - this.btn.toggle(true); + this.btn_wrapper.removeClass("hide"); } - }, add: function() { var me = this; diff --git a/frappe/public/js/frappe/form/footer/attachments.js b/frappe/public/js/frappe/form/footer/attachments.js index b585c5c14e..013df64e9e 100644 --- a/frappe/public/js/frappe/form/footer/attachments.js +++ b/frappe/public/js/frappe/form/footer/attachments.js @@ -10,11 +10,11 @@ frappe.ui.form.Attachments = Class.extend({ }, make: function() { var me = this; - this.$list = this.parent.find(".attachment-list"); - this.parent.find(".add-attachment").click(function() { me.new_attachment(); }); + this.add_attachment_wrapper = this.parent.find(".add_attachment").parent(); + this.attachments_label = this.parent.find(".attachments-label"); }, max_reached: function() { // no of attachments @@ -27,24 +27,23 @@ frappe.ui.form.Attachments = Class.extend({ return true; }, refresh: function() { - var doc = this.frm.doc; - if(doc.__islocal) { + var me = this; + + if(this.frm.doc.__islocal) { this.parent.toggle(false); return; } this.parent.toggle(true); - this.parent.find(".btn").toggle(!this.max_reached()); - - this.$list.empty(); - - var attachments = this.get_attachments(); - var that = this; + this.parent.find(".attachment-row").remove(); + var max_reached = this.max_reached(); + this.add_attachment_wrapper.toggleClass("hide", !max_reached); // add attachment objects + var attachments = this.get_attachments(); if(attachments.length) { attachments.forEach(function(attachment) { - that.add_attachment(attachment) + me.add_attachment(attachment) }); } @@ -63,15 +62,16 @@ frappe.ui.form.Attachments = Class.extend({ } var me = this; - var $attach = $(repl('
    \ - ×\ - %(file_name)s\ -
    ', { + var $attach = $(repl('
  • \ + ×\ + \ + %(file_name)s\ +
    • ', { file_name: file_name, file_url: file_url })) - .appendTo(this.$list) + .insertAfter(this.attachments_label) var $close = $attach.find(".close") diff --git a/frappe/public/js/frappe/form/footer/footer.js b/frappe/public/js/frappe/form/footer/footer.js index 1b69f722e7..1e98e2f9dc 100644 --- a/frappe/public/js/frappe/form/footer/footer.js +++ b/frappe/public/js/frappe/form/footer/footer.js @@ -6,9 +6,6 @@ frappe.ui.form.Footer = Class.extend({ var me = this; $.extend(this, opts); this.make(); - this.make_assignments(); - this.make_attachments(); - this.make_tags(); this.make_comments(); // render-complete $(this.frm.wrapper).on("render_complete", function() { @@ -24,29 +21,6 @@ frappe.ui.form.Footer = Class.extend({ }) }, - make_tags: function() { - if (this.frm.meta.issingle) { - this.frm.sidebar.parent.find(".form-tags").toggle(false); - return; - } - - this.frm.tags = new frappe.ui.TagEditor({ - parent: this.frm.sidebar.parent.find(".tag-area"), - frm: this.frm, - }) - }, - make_attachments: function() { - this.frm.attachments = new frappe.ui.form.Attachments({ - parent: this.frm.sidebar.parent.find(".form-attachments"), - frm: this.frm - }); - }, - make_assignments: function() { - this.frm.assign_to = new frappe.ui.form.AssignTo({ - parent: this.frm.sidebar.parent.find(".form-assignments"), - frm: this.frm - }); - }, make_comments: function() { this.frm.comments = new frappe.ui.form.Comments({ parent: this.wrapper.find(".form-comments"), @@ -58,10 +32,7 @@ frappe.ui.form.Footer = Class.extend({ this.parent.addClass("hide"); } else { this.parent.removeClass("hide"); - this.frm.attachments.refresh(); this.frm.comments.refresh(); - this.frm.assign_to.refresh(); - this.frm.tags && this.frm.tags.refresh(); } }, }); diff --git a/frappe/public/js/frappe/form/footer/timeline.js b/frappe/public/js/frappe/form/footer/timeline.js index cc17eadb64..c422ce9e4d 100644 --- a/frappe/public/js/frappe/form/footer/timeline.js +++ b/frappe/public/js/frappe/form/footer/timeline.js @@ -48,7 +48,7 @@ frappe.ui.form.Comments = Class.extend({ }); this.wrapper.find(".is-email").prop("checked", this.last_type==="Email"); - this.update_sidebar_comments(); + this.frm.sidebar.refresh_comments(); }, render_comment: function(c) { @@ -164,12 +164,6 @@ frappe.ui.form.Comments = Class.extend({ c.icon_fg = "#fff"; }, - update_sidebar_comments: function() { - var comments = $.map(this.get_comments(), function(c) { - return (c.comment_type==="Email" || c.comment_type==="Comment") ? c : null; - }); - this.frm.sidebar.wrapper.find(".n-comments").html(comments.length); - }, get_comments: function() { return this.frm.get_docinfo().comments; }, diff --git a/frappe/public/js/frappe/form/form_sidebar.html b/frappe/public/js/frappe/form/form_sidebar.html index 26ec347a9e..889dda7738 100644 --- a/frappe/public/js/frappe/form/form_sidebar.html +++ b/frappe/public/js/frappe/form/form_sidebar.html @@ -1,52 +1,33 @@ -
    - - {% if (!frm.meta.hide_toolbar) { %} -
    -
    {%= __("Comments") %} -
    -
    -
    -
    - {%= __("Tags") %} -
    + + + + +
    -
    -
    - {%= __("Assigned To") %}: -
    -
    -
    - {%= __("Assign") %} - -
    -
    -
    -
    - {%= __("Attachments") %}: -
    -
    -
    - {%= __("Attach a file") %} - - -
    - {%= __("Drag and drop to attach") %} -
    -
    -
    -
    - {%= __("Last Edited") %} -
    -
    -
    -
    -
    - {%= __("Created By") %} -
    -
    -
    - {% } %} -
    + + + diff --git a/frappe/public/js/frappe/form/sidebar.js b/frappe/public/js/frappe/form/sidebar.js index d73e9ac649..06b9fd7c47 100644 --- a/frappe/public/js/frappe/form/sidebar.js +++ b/frappe/public/js/frappe/form/sidebar.js @@ -2,32 +2,93 @@ frappe.provide("frappe.ui.form"); frappe.ui.form.Sidebar = Class.extend({ init: function(opts) { $.extend(this, opts); + this.make(); + }, + + make: function() { + var sidebar_content = frappe.render_template("form_sidebar", {doctype: this.frm.doctype, frm:this.frm}); + + this.offcanvas_form_sidebar = $(".offcanvas .form-sidebar").html(sidebar_content); + this.page_sidebar = $('') + .html(sidebar_content) + .appendTo(this.page.sidebar.empty()); + + this.sidebar = this.page_sidebar.add(this.offcanvas_form_sidebar); + this.comments = this.sidebar.find(".sidebar-comments"); + this.user_actions = this.sidebar.find(".user-actions"); + + this.make_assignments(); + this.make_attachments(); + this.make_tags(); + + this.bind_events(); + + }, + + bind_events: function() { var me = this; - this.parent.addClass("hidden-xs"); - this.wrapper = $(frappe.render_template("form_sidebar", - {doctype: this.frm.doctype, frm:this.frm})) - .appendTo(this.parent); - this.$user_actions = this.wrapper.find(".user-actions"); - this.wrapper.find(".sidebar-section.sidebar-comments").on("click", function() { - $(window).scrollTop(me.frm.footer.wrapper.find(".form-comments").offset().top); + + // scroll to comments + this.comments.on("click", function() { + $(window).scrollTop(me.frm.footer.wrapper.find(".form-comments").offset().top + - $(".navbar").height() - $(".page-head").height()); + }); + }, + + refresh: function() { + if(this.frm.doc.__islocal) { + this.sidebar.toggle(false); + } else { + this.sidebar.toggle(true); + this.frm.assign_to.refresh(); + this.frm.attachments.refresh(); + this.frm.tags && this.frm.tags.refresh(); + this.sidebar.find(".modified-by").html(__("{0} edited this {1}", + ["" + frappe.user.full_name(this.frm.doc.modified_by) + "", + "
    " + comment_when(this.frm.doc.modified)])); + this.sidebar.find(".created-by").html(__("{0} created this {1}", + ["" + frappe.user.full_name(this.frm.doc.owner) + "", + "
    " + comment_when(this.frm.doc.creation)])); + } + }, + + refresh_comments: function() { + var comments = $.map(this.frm.comments.get_comments(), function(c) { + return (c.comment_type==="Email" || c.comment_type==="Comment") ? c : null; + }); + this.comments.find(".n-comments").html(comments.length); + }, + + make_tags: function() { + if (this.frm.meta.issingle) { + this.sidebar.find(".form-tags").toggle(false); + return; + } + + this.frm.tags = new frappe.ui.TagEditor({ + parent: this.sidebar.find(".tag-area"), + frm: this.frm + }); + }, + make_attachments: function() { + var me = this; + this.frm.attachments = new frappe.ui.form.Attachments({ + parent: me.sidebar.find(".form-attachments"), + frm: me.frm + }); + }, + make_assignments: function() { + this.frm.assign_to = new frappe.ui.form.AssignTo({ + parent: this.sidebar.find(".form-assignments"), + frm: this.frm }); }, add_user_action: function(label, click) { - return $('').html(label).appendTo($('
  • ') - .appendTo(this.$user_actions.removeClass("hide"))).on("click", click); + return $('').html(label).appendTo($('
  • ') + .appendTo(this.user_actions.removeClass("hide"))).on("click", click); }, clear_user_actions: function() { - this.$user_actions.empty().addClass("hide"); + this.user_actions.addClass("hide") + this.user_actions.find(".user-action-row").remove(); }, - refresh: function() { - if(this.frm.doc.__islocal) { - this.wrapper.toggle(false); - } else { - this.wrapper.toggle(true); - this.wrapper.find(".created-by").html(frappe.user.full_name(this.frm.doc.owner) + - "
    " + comment_when(this.frm.doc.creation)); - this.wrapper.find(".modified-by").html(frappe.user.full_name(this.frm.doc.modified_by) + - "
    " + comment_when(this.frm.doc.modified)); - } - } -}) +}); diff --git a/frappe/public/js/frappe/list/doclistview.js b/frappe/public/js/frappe/list/doclistview.js index 0372142c93..ef0b43e407 100644 --- a/frappe/public/js/frappe/list/doclistview.js +++ b/frappe/public/js/frappe/list/doclistview.js @@ -403,10 +403,11 @@ frappe.views.DocListView = frappe.ui.Listing.extend({ this.sidebar_stats = new frappe.views.ListSidebar({ doctype: this.doctype, stats: this.listview.stats, - parent: $('
    ').appendTo(this.$page.find('.layout-side-section')), + parent: this.$page.find('.layout-side-section'), set_filter: function(fieldname, label) { me.set_filter(fieldname, label); }, + page: this.page, doclistview: this }) }, diff --git a/frappe/public/js/frappe/list/list_sidebar.html b/frappe/public/js/frappe/list/list_sidebar.html index 0fc995f06c..8975bad721 100644 --- a/frappe/public/js/frappe/list/list_sidebar.html +++ b/frappe/public/js/frappe/list/list_sidebar.html @@ -1,20 +1,13 @@ - + + + + diff --git a/frappe/public/js/frappe/list/list_sidebar.js b/frappe/public/js/frappe/list/list_sidebar.js index c2a02cc1c2..6ac2013c05 100644 --- a/frappe/public/js/frappe/list/list_sidebar.js +++ b/frappe/public/js/frappe/list/list_sidebar.js @@ -12,11 +12,21 @@ frappe.provide('frappe.views'); frappe.views.ListSidebar = Class.extend({ init: function(opts) { $.extend(this, opts); - this.wrapper = $(frappe.render_template("list_sidebar", {doctype: this.doclistview.doctype})) - .appendTo(this.parent); this.get_stats(); + this.make(); + }, + make: function() { + var sidebar_content = frappe.render_template("list_sidebar", {doctype: this.doclistview.doctype}); + + this.offcanvas_list_sidebar = $(".offcanvas .list-sidebar").html(sidebar_content); + this.page_sidebar = $('') + .html(sidebar_content) + .appendTo(this.page.sidebar.empty()); + + this.sidebar = this.page_sidebar.add(this.offcanvas_list_sidebar); + if(frappe.views.calendar[this.doctype]) { - this.wrapper.find(".calendar-link, .gantt-link").removeClass("hide"); + this.sidebar.find(".calendar-link, .gantt-link").removeClass("hide"); } }, get_stats: function() { @@ -35,90 +45,49 @@ frappe.views.ListSidebar = Class.extend({ }); // reload button at the end - if(me.stats.length) { - $(''+__('Refresh Stats')+'') - .css({"margin-top":"15px", "display":"inline-block"}) - .click(function() { - me.reload_stats(); - return false; - }).appendTo($('
    ') - .appendTo(me.wrapper)); - } + // if(me.stats.length) { + // $(''+__('Refresh Stats')+'') + // .css({"margin-top":"15px", "display":"inline-block"}) + // .click(function() { + // me.reload_stats(); + // return false; + // }).appendTo($('
    ') + // .appendTo(me.sidebar)); + // } + me.doclistview.set_sidebar_height(); } }); }, render_stat: function(field, stat) { var me = this; - var show_tags = '' - + ''; - - if(!stat || !stat.length) { - if(field==='_user_tags') { - $('
    \ -
    \ - '+__('Tags')+show_tags+'
    \ -
    \ -
    '+__('No records tagged.')+'
    ' - +'
    \ -
    ').appendTo(this.wrapper); - } - return; - } - + var sum = 0; var label = frappe.meta.docfield_map[this.doctype][field] ? frappe.meta.docfield_map[this.doctype][field].label : field; - if(label==='_user_tags') label = 'Tags' + show_tags; + var show_tags = ''; - // grid - var $w = $('
    \ -
    '+ __(label) +'
    \ -
    \ -
    \ -
    '); - - // sort items - stat = stat.sort(function(a, b) { return b[1] - a[1] }); - var sum = 0; + stat = (stat || []).sort(function(a, b) { return b[1] - a[1] }); $.each(stat, function(i,v) { sum = sum + v[1]; }) - // render items - $.each(stat, function(i, v) { - me.render_stat_item(i, v, sum, field).appendTo($w.find('.side-panel-body')); - }); + var context = { + field: field, + stat: stat, + sum: sum, + label: label==='_user_tags' ? (__("Tags") + show_tags) : __(label), + }; - $w.appendTo(this.wrapper); - }, - render_stat_item: function(i, v, max, field) { - var me = this; - var args = {} - args.label = v[0]; - args._label = __(v[0]); - args.width = flt(v[1]) / max * 100; - args.count = v[1]; - args.field = field; - args.bar_style = ""; - - $item = $(repl('
    \ - \ - %(count)s\ - %(_label)s\ -
    ', args)); - - this.setup_stat_item_click($item); - return $item; + var sidebar_stat = $(frappe.render_template("list_sidebar_stat", context)) + .on("click", ".stat-link", function() { + var fieldname = $(this).attr('data-field'); + var label = $(this).attr('data-label'); + me.set_filter(fieldname, label); + return false; + }) + .appendTo(this.sidebar); }, reload_stats: function() { - this.wrapper.empty(); + this.sidebar.find(".sidebar-stat").remove(); this.get_stats(); }, - setup_stat_item_click: function($item) { - var me = this; - $item.find('a').click(function() { - var fieldname = $(this).attr('data-field'); - var label = $(this).attr('data-label'); - me.set_filter(fieldname, label); - return false; - }); - }, }); diff --git a/frappe/public/js/frappe/list/list_sidebar_stat.html b/frappe/public/js/frappe/list/list_sidebar_stat.html new file mode 100644 index 0000000000..61cb347eaf --- /dev/null +++ b/frappe/public/js/frappe/list/list_sidebar_stat.html @@ -0,0 +1,19 @@ +
      +
    • +
    • {%= label %}
      • + {% if(!stat.length) { %} +
    • {%= __("No records tagged.") %}
      • + {% } else { + for (var i=0, l=stat.length; i < l; i++) { + var stat_label = stat[i][0]; + var stat_count = stat[i][1]; + %} +
    • + + {%= stat_count %} + {%= __(stat_label) %} + +
      • + {% } + } %} +
    diff --git a/frappe/public/js/frappe/ui/page.html b/frappe/public/js/frappe/ui/page.html index 2888c56bf0..5c357f394b 100644 --- a/frappe/public/js/frappe/ui/page.html +++ b/frappe/public/js/frappe/ui/page.html @@ -9,12 +9,12 @@
    - +
    diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js index 3f94d31261..53f73df0ed 100644 --- a/frappe/public/js/frappe/ui/page.js +++ b/frappe/public/js/frappe/ui/page.js @@ -40,14 +40,14 @@ frappe.ui.Page = Class.extend({ if(this.single_column) { // nesting under col-sm-12 for consistency this.add_view("main", '
    \ -
    \ +
    \
    \
    \
    '); } else { var main = this.add_view("main", '
    \ -
    \ -
    \ +
    \ +
    \
    \
    \
    '); diff --git a/frappe/public/js/frappe/ui/tags.js b/frappe/public/js/frappe/ui/tags.js index 2dfeda7f0f..a7de386fae 100644 --- a/frappe/public/js/frappe/ui/tags.js +++ b/frappe/public/js/frappe/ui/tags.js @@ -17,7 +17,7 @@ frappe.ui.TagEditor = Class.extend({ this.$tags = $('
      ').prependTo(this.$w).tagit({ animate: false, allowSpaces: true, - placeholderText: __('Add Tag'), + placeholderText: __('Type to tag' + "..."), onTagAdded: function(ev, tag) { if(me.initialized && !me.refreshing) { var tag = tag.find('.tagit-label').text(); diff --git a/frappe/public/js/frappe/ui/toolbar/awesome_bar.js b/frappe/public/js/frappe/ui/toolbar/awesome_bar.js index 20ccbce25c..90eee7c71a 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, #sidebar-search").autocomplete({ + var opts = { minLength: 0, source: function(request, response) { var txt = strip(request.term); @@ -53,7 +53,9 @@ frappe.search = { $(this).val(''); return false; } - }).data('ui-autocomplete')._renderItem = function(ul, d) { + }; + + var render_item = function(ul, d) { var html = "" + __(d.value) + ""; if(d.description && d.value!==d.description) { html += '
      ' + __(d.description) + ''; @@ -64,6 +66,9 @@ frappe.search = { .appendTo(ul); }; + $("#navbar-search").autocomplete(opts).data('ui-autocomplete')._renderItem = render_item; + $("#sidebar-search").autocomplete(opts).data('ui-autocomplete')._renderItem = render_item; + frappe.search.make_page_title_map(); }, add_help: function() { diff --git a/frappe/public/js/frappe/ui/toolbar/navbar.html b/frappe/public/js/frappe/ui/toolbar/navbar.html index 2ab7372be3..288f3ef811 100644 --- a/frappe/public/js/frappe/ui/toolbar/navbar.html +++ b/frappe/public/js/frappe/ui/toolbar/navbar.html @@ -1,20 +1,20 @@