Merge branch 'rebrand-ui' of https://github.com/frappe/frappe into rebrand-ui
This commit is contained in:
Suraj Shetty
commit
0329bf959c
9 changed files with 111 additions and 29 deletions
|
|
@ -207,7 +207,7 @@ frappe.views.BaseList = class BaseList {
|
|||
set_menu_items() {
|
||||
this.set_default_secondary_action()
|
||||
|
||||
this.menu_items.map((item) => {
|
||||
this.menu_items && this.menu_items.map((item) => {
|
||||
if (item.condition && item.condition() === false) {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@ frappe.ui.Notifications = class Notifications {
|
|||
this.header_items = this.dropdown_list.find('.header-items');
|
||||
this.header_actions = this.dropdown_list.find('.header-actions');
|
||||
this.body = this.dropdown_list.find('.notification-list-body');
|
||||
this.reel = this.dropdown_list.find('.notifcation-reel')
|
||||
this.panel_events = this.dropdown_list.find('.panel-events');
|
||||
this.panel_notifications = this.dropdown_list.find('.panel-notifications');
|
||||
|
||||
this.notification_indicator = this.dropdown.find(
|
||||
'.notifications-indicator'
|
||||
|
|
@ -51,8 +54,20 @@ frappe.ui.Notifications = class Notifications {
|
|||
.appendTo(this.header_actions);
|
||||
|
||||
this.categories = [
|
||||
{ label: __("Notifications"), id: "notifications", view: NotificationsView },
|
||||
{ label: __("Today's Events"), id: "todays_events", view: EventsView }
|
||||
{
|
||||
label: __("Notifications"),
|
||||
id: "notifications",
|
||||
view: NotificationsView,
|
||||
el: this.panel_notifications,
|
||||
transform: 'translateX(0%)'
|
||||
},
|
||||
{
|
||||
label: __("Today's Events"),
|
||||
id: "todays_events",
|
||||
view: EventsView,
|
||||
el: this.panel_events,
|
||||
transform: 'translateX(-50%)'
|
||||
}
|
||||
];
|
||||
|
||||
let get_headers_html = (item) => {
|
||||
|
|
@ -78,28 +93,26 @@ frappe.ui.Notifications = class Notifications {
|
|||
return item
|
||||
})
|
||||
navitem.appendTo(this.header_items);
|
||||
this.switch_tab(this.categories[0]);
|
||||
this.make_tab_view(this.categories[0]);
|
||||
this.make_tab_view(this.categories[1]);
|
||||
}
|
||||
|
||||
switch_tab(item) {
|
||||
this.categories.forEach((item) => {
|
||||
item.dom.removeClass("active");
|
||||
});
|
||||
|
||||
this.reel[0].style.transform = item.transform;
|
||||
|
||||
item.dom.addClass("active");
|
||||
this.current_tab && this.current_tab.hide();
|
||||
if (this.tabs[item.id]) {
|
||||
this.tabs[item.id].show()
|
||||
this.current_tab = this.tabs[item.id]
|
||||
} else {
|
||||
this.make_tab_view(item);
|
||||
}
|
||||
|
||||
this.tabs[item.id]
|
||||
this.current_tab = this.tabs[item.id]
|
||||
}
|
||||
|
||||
make_tab_view(item) {
|
||||
let tabView = new item.view(this.body);
|
||||
let tabView = new item.view(item.el);
|
||||
this.tabs[item.id] = tabView;
|
||||
this.current_tab = tabView;
|
||||
tabView.show();
|
||||
}
|
||||
|
||||
go_to_settings(e) {
|
||||
|
|
@ -173,12 +186,16 @@ frappe.ui.Notifications = class Notifications {
|
|||
|
||||
setup_dropdown_events() {
|
||||
this.dropdown.on('hide.bs.dropdown', e => {
|
||||
this.dropdown_list.removeClass('animate-list');
|
||||
let hide = $(e.currentTarget).data('closable');
|
||||
$(e.currentTarget).data('closable', true);
|
||||
return hide;
|
||||
});
|
||||
|
||||
this.dropdown.on('show.bs.dropdown', () => {
|
||||
setTimeout(() => {
|
||||
this.dropdown_list.addClass('animate-list');
|
||||
})
|
||||
this.toggle_seen(true);
|
||||
if (this.notification_indicator.is(':visible')) {
|
||||
this.notification_indicator.hide();
|
||||
|
|
|
|||
|
|
@ -38,7 +38,12 @@
|
|||
<div class="header-items"></div>
|
||||
<div class="header-actions"></div>
|
||||
</div>
|
||||
<div class="notification-list-body"></div>
|
||||
<div class="notification-list-body">
|
||||
<div class="notifcation-reel">
|
||||
<div class="panel-notifications"></div>
|
||||
<div class="panel-events"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-message dropdown-mobile">
|
||||
|
|
|
|||
|
|
@ -53,6 +53,8 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
|
|||
|
||||
// throttle refresh for 300ms
|
||||
this.refresh = frappe.utils.throttle(this.refresh, 300);
|
||||
|
||||
this.menu_items = [];
|
||||
}
|
||||
|
||||
set_default_secondary_action() {
|
||||
|
|
@ -62,6 +64,14 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
|
|||
});
|
||||
}
|
||||
|
||||
set_default_secondary_action() {
|
||||
this.refresh_button && this.refresh_button.remove();
|
||||
this.refresh_button = this.page.add_action_icon("refresh", () => {
|
||||
this.setup_progress_bar();
|
||||
this.refresh()
|
||||
});
|
||||
}
|
||||
|
||||
setup_events() {
|
||||
frappe.realtime.on("report_generated", (data) => {
|
||||
if(data.report_name) {
|
||||
|
|
@ -356,10 +366,13 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
|
|||
this.clear_filters();
|
||||
const { filters = [] } = this.report_settings;
|
||||
|
||||
let filter_area = $(`<div class="flex flex-wrap"></div>`);
|
||||
this.page.page_form.append(filter_area);
|
||||
|
||||
this.filters = filters.map(df => {
|
||||
if (df.fieldtype === 'Break') return;
|
||||
|
||||
let f = this.page.add_field(df);
|
||||
let f = this.page.add_field(df, filter_area);
|
||||
|
||||
if (df.default) {
|
||||
f.set_input(df.default);
|
||||
|
|
@ -690,6 +703,7 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
|
|||
options.axisOptions = {
|
||||
shortenYAxisNumbers: 1
|
||||
};
|
||||
options.height = 280;
|
||||
|
||||
return options;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
frappe.provide('frappe.report_utils');
|
||||
|
||||
frappe.report_utils = {
|
||||
make_chart_options: function(columns, raw_data, { y_fields, x_field, chart_type, colors }) {
|
||||
make_chart_options: function(columns, raw_data, { y_fields, x_field, chart_type, colors, height }) {
|
||||
const type = chart_type.toLowerCase();
|
||||
|
||||
let rows = raw_data.result.filter(value => Object.keys(value).length);
|
||||
|
|
@ -24,6 +24,7 @@ frappe.report_utils = {
|
|||
},
|
||||
truncateLegends: 1,
|
||||
type: type,
|
||||
height: height ? height : 280,
|
||||
colors: colors,
|
||||
axisOptions: {
|
||||
shortenYAxisNumbers: 1,
|
||||
|
|
|
|||
|
|
@ -5,6 +5,15 @@ html {
|
|||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: $body-color;
|
||||
|
||||
&.full-width {
|
||||
@include media-breakpoint-up(md) {
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -214,7 +223,7 @@ select.input-xs {
|
|||
|
||||
.dropdown-menu {
|
||||
min-width: 200px;
|
||||
padding: 4px 0;
|
||||
padding: 4px;
|
||||
font-size: $font-size-md;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,19 @@
|
|||
@mixin size($w, $h) {
|
||||
width: $w;
|
||||
height: $h;
|
||||
}
|
||||
|
||||
@mixin flex($dis, $x, $y, $dir) {
|
||||
display: $dis;
|
||||
justify-content: $x;
|
||||
align-items: $y;
|
||||
flex-direction: $dir;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
perspective: 3200px;
|
||||
}
|
||||
|
||||
.dropdown-notifications .header {
|
||||
margin: 7px 15px 10px 15px;
|
||||
cursor: pointer;
|
||||
|
|
@ -50,18 +66,40 @@
|
|||
position: absolute;
|
||||
box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), 0px 2px 6px rgba(17, 43, 66, 0.08);
|
||||
|
||||
opacity: 0.3;
|
||||
transform-origin: center -20px;
|
||||
transform: rotateX(-15deg);
|
||||
transition:
|
||||
transform 0.3s,
|
||||
opacity 0.3s;
|
||||
|
||||
&.animate-list {
|
||||
opacity: 1;
|
||||
transform: rotateX(0);
|
||||
}
|
||||
|
||||
.notification-list-header {
|
||||
margin: 0px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@include flex(flex, space-between, center, null);
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.notification-list-body {
|
||||
// margin: 10px 0px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
overflow-y: auto;
|
||||
@include size(200%, 100%);
|
||||
flex: 1;
|
||||
|
||||
.notifcation-reel {
|
||||
@include size(100%, null);
|
||||
@include flex(flex, space-between, null, null);
|
||||
transition: 0.5s;
|
||||
|
||||
.panel-events, .panel-notifications {
|
||||
@include size(50%, null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-item-tabs {
|
||||
|
|
@ -116,8 +154,7 @@
|
|||
&::before {
|
||||
content: '';
|
||||
display:inline-block;
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
@include size(4px, 4px);
|
||||
margin-top: 14px;
|
||||
border-radius: 10px;
|
||||
margin-right: 5px;
|
||||
|
|
@ -180,8 +217,7 @@
|
|||
}
|
||||
|
||||
.recent-item.open-docs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@include flex(flex, space-between, null, null);
|
||||
|
||||
.indicator-pill {
|
||||
margin: 0px;
|
||||
|
|
|
|||
|
|
@ -79,8 +79,8 @@
|
|||
background-color: white;
|
||||
|
||||
.form-group {
|
||||
padding: 0px;
|
||||
margin: 5px;
|
||||
padding: 0px 5px;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.checkbox {
|
||||
margin-top: 4px;
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@
|
|||
border-bottom: 1px solid $border-color;
|
||||
|
||||
// SIZE & SPACING
|
||||
margin: 1rem 0px;
|
||||
margin: 1rem;
|
||||
padding: 20px 15px;
|
||||
|
||||
// LAYOUT
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue