[design] todo sidebar and nav sidebar for desktop
This commit is contained in:
Anand Doshi
parent
9f6667a3b7
commit
fcdbb68caf
14 changed files with 277 additions and 52 deletions
|
|
@ -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",
|
||||
|
||||
|
|
|
|||
12
frappe/public/css/bootstrap.css
vendored
12
frappe/public/css/bootstrap.css
vendored
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
35
frappe/public/js/frappe/ui/toolbar/left_sidebar.html
Normal file
35
frappe/public/js/frappe/ui/toolbar/left_sidebar.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<div class="main-menu">
|
||||
<form role="search" onsubmit="return false;">
|
||||
<div class="form-group form-group-sm">
|
||||
<input id="sidebar-search" type="text" class="form-control"
|
||||
placeholder="{%= __("Search or type a command") %}" aria-haspopup="true">
|
||||
<span class="octicon octicon-search navbar-search-icon"></span>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="sidebar-menu">
|
||||
<li class="divider"></li>
|
||||
<li><a href="#" class="strong">{%= __("All Applications") %}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#" onclick="return frappe.ui.toolbar.show_about();">
|
||||
{%= __("About") %}</a></li>
|
||||
<li><a href="https://frappe.io" target="_blank" data-link="docs">
|
||||
{%= __("Documentation") %}</a></li>
|
||||
<li><a href="https://discuss.frappe.io" target="_blank">
|
||||
{%= __("Forums") %}</a></li>
|
||||
<li><a href="https://github.com/frappe/erpnext/issues" target="_blank">
|
||||
{%= __("Report an Issue") %}</a></li>
|
||||
<li><a href="#" onclick="return frappe.ui.toolbar.clear_cache();">
|
||||
{%= __("Reload") %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="user-menu clearfix">
|
||||
<div class="pull-left text-ellipsis" style="max-width: 75%;">
|
||||
<a href="#Form/User/{%= encodeURIComponent(user) %}">
|
||||
<img src="{%= frappe.user_info().image %}" class="navbar-user-image">
|
||||
<span>{%= frappe.user.full_name() %}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pull-right" style="margin-top: 4px;">
|
||||
<a onclick="return frappe.app.logout();"><i class="octicon octicon-sign-out"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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('<li><a>\
|
||||
var notification_row = repl('<li><a data-module="%(data_module)s">\
|
||||
<span class="badge pull-right">\
|
||||
%(count)s</span> \
|
||||
%(module)s </a></li>', {
|
||||
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) {
|
||||
$('<li class="divider"></li>').appendTo("#navbar-notification");
|
||||
var divider = '<li class="divider"></li>';
|
||||
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('<li><a>\
|
||||
var notification_row = repl('<li><a data-doctype="%(data_doctype)s">\
|
||||
<span class="badge pull-right">\
|
||||
%(count)s</span> \
|
||||
%(doctype)s </a></li>', {
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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 = $('<div class="content page-container"></div>')
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
#sidebar-notification > li > a&,
|
||||
#navbar-notification > li > a& {
|
||||
&:hover .badge,
|
||||
&:focus .badge,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -17,8 +17,10 @@
|
|||
|
||||
<div class="desk-container">
|
||||
<div class="offcanvas">
|
||||
<div class="sidebar-offcanvas sidebar-offcanvas-left visible-xs">something</div>
|
||||
<div class="sidebar-offcanvas sidebar-offcanvas-right visible-xs">something</div>
|
||||
<div class="sidebar sidebar-left visible-xs"></div>
|
||||
<div class="sidebar sidebar-right visible-xs">
|
||||
<ul class="sidebar-menu" id="sidebar-notification"></ul>
|
||||
</div>
|
||||
<div class="desk-main-section">
|
||||
<header></header>
|
||||
<div id="body_div"></div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue