vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

feat: add page switcher for mobile view

Browse source
This commit is contained in:
Shivam Mishra 2020-06-04 20:18:39 +05:30
parent 8ab6ba1384
commit 6c4296c44a
2 changed files with 61 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
frappe/public/js/frappe/views/desktop/desktop.js
View file

@ -26,14 +26,25 @@ export default class Desktop {
}
make_container() {
this.container = $(`<div class="desk-container row">
this.container = $(`
<div class="desk-container row">
<div class="desk-sidebar"></div>
<div class="desk-body"></div>
<div class="desk-body">
<div class="page-switcher">
<div class="current-title"></div>
<i class="fa fa-chevron-down text-muted"></i>
</div>
<div class="mobile-list">
</div>
</div>
</div>`);
this.container.appendTo(this.wrapper);
this.sidebar = this.container.find(".desk-sidebar");
this.body = this.container.find(".desk-body");
this.current_title = this.container.find(".current-title");
this.mobile_list = this.container.find(".mobile-list");
this.page_switcher = this.container.find(".page-switcher");
}
fetch_desktop_settings() {
@ -73,7 +84,9 @@ export default class Desktop {
this.current_page = item.name;
}
let $item = get_sidebar_item(item);
$item.appendTo(this.sidebar);
$item.appendTo(this.mobile_list);
$item.clone().appendTo(this.sidebar);
this.sidebar_items[item.name] = $item;
};
@ -84,6 +97,7 @@ export default class Desktop {
`<div class="sidebar-group-title h6 uppercase">${__(name)}</div>`
);
$title.appendTo(this.sidebar);
$title.clone().appendTo(this.mobile_list);
};
this.sidebar_categories.forEach(category => {
@ -94,6 +108,11 @@ export default class Desktop {
});
}
});
if (frappe.is_mobile) {
this.page_switcher.on('click', () => {
this.mobile_list.toggle();
});
}
}
show_page(page) {
@ -106,6 +125,8 @@ export default class Desktop {
this.sidebar_items[page].addClass("selected");
}
this.current_page = page;
this.mobile_list.hide();
this.current_title.empty().append(this.current_page);
localStorage.current_desk_page = page;
this.pages[page] ? this.pages[page].show() : this.make_page(page);
}

37
frappe/public/less/desktop.less
View file

@ -3,6 +3,40 @@
.desk-container {
margin-top: 20px;
.page-switcher {
border-radius: 5px;
display: none;
border: 1px solid @border-color;
background-color: @panel-bg;
padding: 8px 15px;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.mobile-list {
display: none;
border-radius: 5px;
padding: 8px 15px;
border: 1px solid @border-color;
.sidebar-item {
font-size: 12px;
font-weight: bold;
margin-bottom: 1px;
display: flex;
padding: 10px 15px;
border-radius: 4px;
text-decoration: none;
cursor: pointer;
text-rendering: optimizelegibility;
&.selected {
background-color: @panel-bg;
}
}
}
.desk-sidebar {
width: 20rem;
display: block;
@ -103,6 +137,9 @@
.desk-body {
padding-left: 15px !important;
}
.page-switcher {
display: flex;
}
}
}