Merge branch 'rebrand-ui' of https://github.com/frappe/frappe into rebrand-ui

This commit is contained in:
prssanna 2020-12-07 18:13:12 +05:30
commit 9bab8e9546
10 changed files with 86 additions and 32 deletions

View file

@ -40,22 +40,36 @@ class BaseTimeline {
this.timeline_items_wrapper.empty();
this.timeline_items = [];
this.doc_info = this.frm && this.frm.get_docinfo() || {};
this.prepare_timeline_contents();
this.timeline_items.sort((item1, item2) => new Date(item1.creation) - new Date(item2.creation));
this.timeline_items.forEach(this.add_timeline_item.bind(this));
let response = this.prepare_timeline_contents();
if (response instanceof Promise) {
response.then(() => {
this.timeline_items.sort((item1, item2) => new Date(item1.creation) - new Date(item2.creation));
this.timeline_items.forEach(this.add_timeline_item.bind(this));
});
} else {
this.timeline_items.sort((item1, item2) => new Date(item1.creation) - new Date(item2.creation));
this.timeline_items.forEach(this.add_timeline_item.bind(this));
}
}
prepare_timeline_contents() {
//
}
add_timeline_item(item) {
add_timeline_item(item, append_at_the_end=false) {
let timeline_item = this.get_timeline_item(item);
this.timeline_items_wrapper.prepend(timeline_item);
if (append_at_the_end) {
this.timeline_items_wrapper.append(timeline_item);
} else {
this.timeline_items_wrapper.prepend(timeline_item);
}
return timeline_item;
}
add_timeline_items(items, append_at_the_end=false) {
items.forEach((item) => this.add_timeline_item(item, append_at_the_end));
}
get_timeline_item(item) {
// item can have content*, creation*,
// timeline_badge, icon, icon_size,

View file

@ -211,10 +211,10 @@ frappe.ui.form.Toolbar = Class.extend({
if (!this.frm.is_new() && !issingle) {
this.page.add_action_icon("left", function() {
me.frm.navigate_records(1);
}, 'prev-doc');
}, 'prev-doc', __("Previous Document"));
this.page.add_action_icon("right", function() {
me.frm.navigate_records(0);
}, 'next-doc');
}, 'next-doc', __("Next Document"));
}
// Print
@ -227,7 +227,7 @@ frappe.ui.form.Toolbar = Class.extend({
}, true);
this.print_icon = this.page.add_action_icon("printer", function() {
me.frm.print_doc();
});
},'', __("Print"));
}
}

View file

@ -44,13 +44,17 @@ frappe.ui.Notifications = class Notifications {
e.stopImmediatePropagation();
this.dropdown.dropdown('hide');
frappe.set_route('Form', 'Notification Settings', frappe.session.user);
}).appendTo(this.header_actions);
}).appendTo(this.header_actions)
.attr('title', __("Notification Settings"))
.tooltip();
$(`<span class="mark-all-read pull-right" data-action="mark_all_as_read">
${frappe.utils.icon('mark-as-read')}
</span>`)
.on('click', (e) => this.mark_all_as_read(e))
.appendTo(this.header_actions);
.appendTo(this.header_actions)
.attr('title', __("Mark all as read"))
.tooltip();
this.categories = [
{
@ -193,6 +197,7 @@ class BaseNotificaitonsView {
class NotificationsView extends BaseNotificaitonsView {
make() {
this.notifications_icon = this.parent.find('.notifications-icon');
this.notifications_icon.attr("title", __('Notifications')).tooltip();
this.setup_notification_listeners();
this.get_notifications_list(this.max_length).then(list => {
@ -277,23 +282,23 @@ class NotificationsView extends BaseNotificaitonsView {
${user_avatar}
${message_html}
</div>
<div class="mark-as-read">
<div class="mark-as-read" title="${__("Mark as Read")}">
</div>
</a>`);
item_html.find('.mark-as-read').on('click', (e) => {
e.preventDefault();
e.stopImmediatePropagation();
if (!field.read) {
if (!field.read) {
let mark_btn = item_html.find(".mark-as-read")
mark_btn.tooltip();
mark_btn.on('click', (e) => {
e.preventDefault();
e.stopImmediatePropagation();
this.mark_as_read(field.name, item_html);
}
});
item_html.on('click', (e) => {
if (!field.read) {
});
item_html.on('click', (e) => {
this.mark_as_read(field.name, item_html);
}
});
});
}
return item_html;
}

View file

@ -144,6 +144,7 @@ frappe.ui.Page = Class.extend({
// keyboard shortcuts
let menu_btn = this.menu_btn_group.find('button');
menu_btn.attr("title", __("Menu")).tooltip();
frappe.ui.keys
.get_shortcut_group(this.page_actions[0])
.add(menu_btn, menu_btn.find('.menu-btn-group-label'));
@ -157,6 +158,7 @@ frappe.ui.Page = Class.extend({
setup_sidebar_toggle() {
let sidebar_toggle = $('.page-head').find('.sidebar-toggle-btn');
let sidebar_wrapper = this.wrapper.find('.layout-side-section');
sidebar_toggle.attr("title", __("Toggle Sidebar")).tooltip();
if (sidebar_wrapper.length) {
sidebar_toggle.click(() => sidebar_wrapper.toggle());
} else {
@ -168,12 +170,18 @@ frappe.ui.Page = Class.extend({
this.clear_indicator().removeClass("hide").html(`<span>${label}</span>`).addClass(color);
},
add_action_icon: function(icon, click, css_class='') {
return $(`
add_action_icon: function(icon, click, css_class='', tooltip_label) {
const button = $(`
<button class="text-muted btn btn-default ${css_class} icon-btn">
${frappe.utils.icon(icon)}
</button>
`).appendTo(this.icon_group.removeClass("hide")).click(click);
`)
button.appendTo(this.icon_group.removeClass("hide"));
button.click(click);
button.attr("title", __(tooltip_label || frappe.unscrub(icon))).tooltip();
return button
},
clear_indicator: function() {

View file

@ -648,7 +648,7 @@ frappe.views.QueryReport = class QueryReport extends frappe.views.BaseList {
render_summary(data) {
data.forEach((summary) => {
frappe.widget.utils.build_summary_item(summary).appendTo(this.$summary);
frappe.utils.build_summary_item(summary).appendTo(this.$summary);
})
this.$summary.show();

View file

@ -83,7 +83,7 @@ export default class ChartWidget extends Widget {
}
this.summary.forEach(summary => {
frappe.widget.utils.build_summary_item(summary).appendTo(this.$summary);
frappe.utils.build_summary_item(summary).appendTo(this.$summary);
});
this.summary.length && this.$summary.show();
}

View file

@ -165,14 +165,18 @@
--popover-bg: white;
// Background Text Color Pairs
--bg-blue: var(--blue-50);
--bg-blue: var(--blue-100);
--bg-light-blue: var(--blue-50);
--bg-green: var(--dark-green-50);
--bg-yellow: var(--yellow-50);
--bg-orange: var(--orange-50);
--bg-red: var(--red-50);
--bg-gray: var(--gray-200);
--bg-light-gray: var(--gray-100);
--bg-purple: var(--purple-100);
--text-on-blue: var(--blue-600);
--text-on-light-blue: var(--blue-500);
--text-on-blue: var(--blue-600);
--text-on-green: var(--dark-green-500);
--text-on-yellow: var(--yellow-500);
@ -180,6 +184,7 @@
--text-on-red: var(--red-500);
--text-on-gray: var(--gray-600);
--text-on-light-gray: var(--gray-800);
--text-on-purple: var(--purple-500);
// Other Colors
--sidebar-select-color: var(--gray-200);

View file

@ -34,21 +34,25 @@
--popover-bg: var(--bg-color);
// Background Text Color Pairs
--bg-blue: var(--blue-500);
--bg-blue: var(--blue-600);
--bg-light-blue: var(--blue-400);
--bg-green: var(--dark-green-500);
--bg-yellow: var(--yellow-500);
--bg-orange: var(--orange-500);
--bg-red: var(--red-500);
--bg-gray: var(--gray-600);
--bg-light-gray: var(--gray-700);
--bg-purple: var(--purple-600);
--text-on-blue: var(--blue-50);
--text-on-light-blue: var(--blue-100);
--text-on-green: var(--dark-green-50);
--text-on-yellow: var(--yellow-50);
--text-on-orange: var(--orange-100);
--text-on-red: var(--red-50);
--text-on-gray: var(--gray-300);
--text-on-light-gray: var(--gray-100);
--text-on-purple: var(--purple-100);
--sidebar-select-color: var(--gray-800);

View file

@ -117,7 +117,7 @@
.indicator-pill.gray,
.indicator-pill-right.gray,
.indicator-pill-round.gray {
@include indicator-pill-color('gray');
@include indicator-pill-color('light-gray');
}
.indicator.red {
@ -130,6 +130,24 @@
@include indicator-pill-color('red');
}
.indicator-pill.darkgrey,
.indicator-pill-right.darkgrey,
.indicator-pill-round.darkgrey {
@include indicator-pill-color('gray');
}
.indicator-pill.purple,
.indicator-pill-right.purple,
.indicator-pill-round.purple {
@include indicator-pill-color('purple');
}
.indicator-pill.lightblue,
.indicator-pill-right.lightblue,
.indicator-pill-round.lightblue {
@include indicator-pill-color('light-blue');
}
.indicator.blink {
animation: blink 1s linear infinite;
}

View file

@ -1,5 +1,5 @@
:root {
--kanban-column-bg: var(--gray-200);
--kanban-column-bg: var(--gray-100);
--kanban-card-bg: var(--card-bg);
--kanban-card-hover-bg: var(--card-bg);
--kanban-new-card-bg: var(--gray-200);