Shiloh/brotherton-erpnext
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleanup homepage

Browse Source
This commit is contained in:
Faris Ansari 2018-07-23 11:55:07 +05:30
parent ce6e27a066
commit f585197045
2 changed files with 232 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

233
erpnext/public/js/hub/hub_listing.js
View File

@ -22,7 +22,7 @@ erpnext.hub.HubListing = class HubListing extends frappe.views.BaseList {
const title = this.page_title; const title = this.page_title;
let iconHtml = `<img class="hub-icon" src="assets/erpnext/images/hub_logo.svg">`; let iconHtml = `<img class="hub-icon" src="assets/erpnext/images/hub_logo.svg">`;
let titleHtml = `<span class="hub-page-title">${title}</span>`; let titleHtml = `<span class="hub-page-title">${title}</span>`;
this.page.set_title(iconHtml + titleHtml, '', false, title); this.page.set_title(titleHtml, '', false, title);
} }
setup_fields() { setup_fields() {
@ -36,6 +36,8 @@ erpnext.hub.HubListing = class HubListing extends frappe.views.BaseList {
}); });
} }
setup_filter_area() { }
get_meta() { get_meta() {
return new Promise(resolve => return new Promise(resolve =>
frappe.call('erpnext.hub_node.get_meta', {doctype: this.doctype}, resolve)); frappe.call('erpnext.hub_node.get_meta', {doctype: this.doctype}, resolve));
@ -72,12 +74,12 @@ erpnext.hub.HubListing = class HubListing extends frappe.views.BaseList {
} }
setup_sort_selector() { setup_sort_selector() {
this.sort_selector = new frappe.ui.SortSelector({ // this.sort_selector = new frappe.ui.SortSelector({
parent: this.filter_area.$filter_list_wrapper, // parent: this.filter_area.$filter_list_wrapper,
doctype: this.doctype, // doctype: this.doctype,
args: this.order_by, // args: this.order_by,
onchange: () => this.refresh(true) // onchange: () => this.refresh(true)
}); // });
} }
setup_view() { setup_view() {
@ -88,6 +90,21 @@ erpnext.hub.HubListing = class HubListing extends frappe.views.BaseList {
this.page.fields_dict[field].set_value(value); this.page.fields_dict[field].set_value(value);
} }
} }
const $hub_search = $(`
<div class="hub-search-container">
<input type="text" class="form-control" placeholder="Search for anything">
</div>`
);
this.$frappe_list.prepend($hub_search);
const $search_input = $hub_search.find('input');
$search_input.on('keydown', frappe.utils.debounce((e) => {
if (e.which === frappe.ui.keyCode.ENTER) {
this.search_value = $search_input.val();
this.refresh();
}
}, 300));
} }
get_args() { get_args() {
@ -146,7 +163,10 @@ erpnext.hub.HubListing = class HubListing extends frappe.views.BaseList {
if (this.start === 0) { if (this.start === 0) {
// ${this.getHeaderHtml()} // ${this.getHeaderHtml()}
this.$result.html(` this.$result.html(`
<div class="image-view-container small"> <div class="row hub-card-container">
<div class="col-md-12 margin-bottom">
<b>Recently Published</b>
</div>
${html} ${html}
</div> </div>
`); `);
@ -366,23 +386,23 @@ erpnext.hub.ItemListing = class ItemListing extends erpnext.hub.HubListing {
} }
bootstrap_data(response) { bootstrap_data(response) {
let companies = response.companies.map(d => d.name); // let companies = response.companies.map(d => d.name);
this.custom_filter_configs = [ // this.custom_filter_configs = [
{ // {
fieldtype: 'Autocomplete', // fieldtype: 'Autocomplete',
label: __('Select Company'), // label: __('Select Company'),
condition: 'like', // condition: 'like',
fieldname: 'company_name', // fieldname: 'company_name',
options: companies // options: companies
}, // },
{ // {
fieldtype: 'Link', // fieldtype: 'Link',
label: __('Select Country'), // label: __('Select Country'),
options: 'Country', // options: 'Country',
condition: 'like', // condition: 'like',
fieldname: 'country' // fieldname: 'country'
} // }
]; // ];
} }
prepareFormFields() { prepareFormFields() {
@ -414,6 +434,10 @@ erpnext.hub.ItemListing = class ItemListing extends erpnext.hub.HubListing {
setup_side_bar() { setup_side_bar() {
super.setup_side_bar(); super.setup_side_bar();
this.setup_new_sidebar();
return;
let $pitch = $(`<div class="border" style=" let $pitch = $(`<div class="border" style="
margin-top: 10px; margin-top: 10px;
padding: 0px 10px; padding: 0px 10px;
@ -458,22 +482,71 @@ erpnext.hub.ItemListing = class ItemListing extends erpnext.hub.HubListing {
}, __("Account")); }, __("Account"));
} }
setup_new_sidebar() {
this.sidebar.$sidebar.append(`
<ul class="list-unstyled hub-sidebar-group">
<li class="hub-sidebar-item bold active">
Browse
</li>
<li class="hub-sidebar-item text-muted">
Favorites
</li>
<li class="hub-sidebar-item text-muted">
Become a seller
</li>
</ul>
`);
frappe.call('erpnext.hub_node.get_categories')
.then(r => {
const categories = r.message.map(d => d.value).sort();
const sidebar_items = [
`<li class="hub-sidebar-item bold is-title">
Category
</li>`,
`<li class="hub-sidebar-item active">
All
</li>`,
...categories.map(category => `
<li class="hub-sidebar-item text-muted">
${category}
</li>
`)
];
this.sidebar.$sidebar.append(`
<ul class="list-unstyled">
${sidebar_items.join('')}
</ul>
`);
});
}
update_category(label) { update_category(label) {
this.current_category = (label=='All Categories') ? undefined : label; this.current_category = (label=='All Categories') ? undefined : label;
this.refresh(); this.refresh();
} }
get_filters_for_args() { get_filters_for_args() {
if(!this.filter_area) return; const filter = {};
let filters = {};
this.filter_area.get().forEach(f => { if (this.search_value) {
let field = f[1] !== 'name' ? f[1] : 'item_name'; filter.item_name = ['like', `%${this.search_value}%`];
filters[field] = [f[2], f[3]];
});
if(this.current_category) {
filters['hub_category'] = this.current_category;
} }
return filters;
filter.image = ['like', 'http%'];
return filter;
// if(!this.filter_area) return;
// let filters = {};
// this.filter_area.get().forEach(f => {
// let field = f[1] !== 'name' ? f[1] : 'item_name';
// filters[field] = [f[2], f[3]];
// });
// if(this.current_category) {
// filters['hub_category'] = this.current_category;
// }
// return filters;
} }
update_data(r) { update_data(r) {
@ -485,11 +558,14 @@ erpnext.hub.ItemListing = class ItemListing extends erpnext.hub.HubListing {
}); });
} }
item_html(item) { item_html(item, index) {
item._name = encodeURI(item.name); item._name = encodeURI(item.name);
const encoded_name = item._name; const encoded_name = item._name;
const title = strip_html(item[this.meta.title_field || 'name']); const title = strip_html(item[this.meta.title_field || 'name']);
const _class = !item[this.imageFieldName] ? 'no-image' : '';
const img_url = item[this.imageFieldName];
const no_image = !img_url;
const _class = no_image ? 'no-image' : '';
const route = `#Hub/Item/${item.hub_item_code}`; const route = `#Hub/Item/${item.hub_item_code}`;
const company_name = item['company_name']; const company_name = item['company_name'];
@ -507,41 +583,66 @@ erpnext.hub.ItemListing = class ItemListing extends erpnext.hub.HubListing {
if(i >= ratingAverage) starClass = 'fa-star-o'; if(i >= ratingAverage) starClass = 'fa-star-o';
ratingHtml += `<i class='fa fa-fw ${starClass} star-icon' data-index=${i}></i>`; ratingHtml += `<i class='fa fa-fw ${starClass} star-icon' data-index=${i}></i>`;
} }
let dot_spacer = '<span aria-hidden="true"> · </span>';
let subtitle = '';
subtitle += comment_when(item.creation);
subtitle += dot_spacer;
if (ratingAverage > 0) {
subtitle += ratingAverage + `<i class='fa fa-fw fa-star-o'></i>`;
subtitle += dot_spacer;
}
subtitle += company_name;
let item_html = ` let item_html = `
<div class="image-view-item"> <div class="col-sm-3 col-xs-2">
<div class="image-view-header"> <div class="hub-card">
<div class="list-row-col list-subject ellipsis level"> <div class="hub-card-header">
<span class="level-item bold ellipsis" title="McGuffin"> <div class="list-row-col list-subject ellipsis level">
<a href="${route}">${title}</a> <span class="level-item bold ellipsis" title="McGuffin">
</span> <a href="${route}">${title}</a>
</div> </span>
<div class="text-muted small" style="margin: 5px 0px;">
${ratingHtml}
(${reviewLength})
</div>
<div class="list-row-col">
<a href="${'#Hub/Company/'+company_name+'/Items'}"><p>${ company_name }</p></a>
</div>
</div>
<div class="image-view-body">
<a data-name="${encoded_name}"
title="${encoded_name}"
href="${route}"
>
<div class="image-field ${_class}"
data-name="${encoded_name}"
>
<button class="btn btn-default zoom-view" data-name="${encoded_name}">
<i class="octicon octicon-eye" data-name="${encoded_name}"></i>
</button>
<button class="btn btn-default like-button" data-name="${encoded_name}">
<i class="octicon octicon-heart" data-name="${encoded_name}"></i>
</button>
</div> </div>
</a> <div class="text-muted small" style="margin: 5px 0px;">
${ratingHtml}
(${reviewLength})
</div>
<div class="list-row-col">
<a href="${'#Hub/Company/'+company_name+'/Items'}"><p>${ company_name }</p></a>
</div>
</div>
<div class="hub-card-body">
<a data-name="${encoded_name}"
title="${encoded_name}"
href="${route}"
>
<div class="image-field ${_class}"
data-name="${encoded_name}"
>
<button class="btn btn-default zoom-view" data-name="${encoded_name}">
<i class="octicon octicon-eye" data-name="${encoded_name}"></i>
</button>
<button class="btn btn-default like-button" data-name="${encoded_name}">
<i class="octicon octicon-heart" data-name="${encoded_name}"></i>
</button>
</div>
</a>
</div>
</div> </div>
</div>
`;
item_html = `
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="hub-card">
<div class="hub-card-header">
<div class="hub-card-title ellipsis bold">${title}</div>
<div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
</div>
<div class="hub-card-body">
<img class="hub-card-image ${no_image ? 'no-image' : ''}" src="${img_url}" />
</div>
</div>
</div> </div>
`; `;

67
erpnext/public/less/hub.less
View File

@ -6,8 +6,71 @@ body[data-route^="Hub/"] {
height: 40px; height: 40px;
} }
.hub-page-title { .layout-main-section {
margin-left: 10px; border: none;
}
.frappe-list {
padding-top: 25px;
font-size: @text-medium;
@media (max-width: @screen-xs) {
padding-left: 20px;
padding-right: 20px;
}
}
.hub-card {
border: 1px solid @border-color;
margin-bottom: 25px;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
}
.hub-card-header {
padding: 12px 15px;
height: 60px;
}
.hub-card-body {
height: 200px;
}
.hub-card-image {
min-width: 100%;
width: 100%;
}
.hub-search-container {
margin-bottom: 20px;
input {
font-size: @text-medium;
height: 32px;
}
}
.hub-sidebar {
padding-top: 25px;
padding-right: 15px;
}
.hub-sidebar-group {
margin-bottom: 10px;
}
.hub-sidebar-item {
padding: 5px 8px;
margin-bottom: 3px;
border-radius: 4px;
border: 1px solid transparent;
cursor: pointer;
&.active, &:hover:not(.is-title) {
border-color: @border-color;
}
} }
.img-wrapper { .img-wrapper {