Merge pull request #12351 from frappe/rebrand-ui-fixes

This commit is contained in:
Prssanna Desai 2021-02-09 15:54:50 +05:30 committed by GitHub
commit bf4cb6f39e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 50 additions and 29 deletions

View file

@ -201,7 +201,7 @@ frappe.setup.SetupWizard = class SetupWizard extends frappe.ui.Slides {
this.abort_setup(r.message.fail);
}
},
error: this.abort_setup("Error in setup", true)
error: () => this.abort_setup("Error in setup")
});
}

View file

@ -194,7 +194,6 @@
"public/js/frappe/ui/toolbar/search.js",
"public/js/frappe/ui/toolbar/tag_utils.js",
"public/js/frappe/ui/toolbar/search.html",
"public/js/frappe/ui/toolbar/search_header.html",
"public/js/frappe/ui/toolbar/search_utils.js",
"public/js/frappe/ui/toolbar/about.js",
"public/js/frappe/ui/toolbar/navbar.html",

View file

@ -677,6 +677,9 @@
<path d="M6.04544 17.5001C7.1751 17.5001 8.09087 16.5843 8.09087 15.4546C8.09087 14.325 7.1751 13.4092 6.04544 13.4092C4.91577 13.4092 4 14.325 4 15.4546C4 16.5843 4.91577 17.5001 6.04544 17.5001Z" stroke="var(--icon-stroke)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.2271 6.59087C15.3567 6.59087 16.2725 5.6751 16.2725 4.54544C16.2725 3.41577 15.3567 2.5 14.2271 2.5C13.0974 2.5 12.1816 3.41577 12.1816 4.54544C12.1816 5.6751 13.0974 6.59087 14.2271 6.59087Z" stroke="var(--icon-stroke)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="icon-restriction">
<path d="M8 14A6 6 0 108 2a6 6 0 000 12zM4 4l8 8" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
</symbol>
<symbol viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" id="icon-arrow-right" stroke-width="1.2">
<path d="M10 6.00223L1 5.99973" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.70015 3.00244L10.7001 6.00244L7.70015 9.00244" stroke="var(--icon-stroke)" stroke-linecap="round" stroke-linejoin="round"/>

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 88 KiB

View file

@ -89,18 +89,16 @@ frappe.ui.form.ControlAutocomplete = frappe.ui.form.ControlData.extend({
});
this.$input.on("awesomplete-open", () => {
let modal = this.$input.parents('.modal-dialog')[0];
if (modal) {
$(modal).removeClass("modal-dialog-scrollable");
}
this.toggle_container_scroll('.modal-dialog', 'modal-dialog-scrollable');
this.toggle_container_scroll('.grid-form-body .form-area', 'scrollable');
this.autocomplete_open = true;
});
this.$input.on("awesomplete-close", () => {
let modal = this.$input.parents('.modal-dialog')[0];
if (modal) {
$(modal).addClass("modal-dialog-scrollable");
}
this.toggle_container_scroll('.modal-dialog', 'modal-dialog-scrollable', true);
this.toggle_container_scroll('.grid-form-body .form-area', 'scrollable', true);
this.autocomplete_open = false;
});

View file

@ -129,5 +129,9 @@ frappe.ui.form.ControlData = frappe.ui.form.ControlInput.extend({
} else {
return v;
}
},
toggle_container_scroll: function(el_class, scroll_class, add=false) {
let el = this.$input.parents(el_class)[0];
if (el) $(el).toggleClass(scroll_class, add);
}
});

View file

@ -236,18 +236,16 @@ frappe.ui.form.ControlLink = frappe.ui.form.ControlData.extend({
});
this.$input.on("awesomplete-open", () => {
let modal = this.$input.parents('.modal-dialog')[0];
if (modal) {
$(modal).removeClass("modal-dialog-scrollable");
}
this.toggle_container_scroll('.modal-dialog', 'modal-dialog-scrollable');
this.toggle_container_scroll('.grid-form-body .form-area', 'scrollable');
this.autocomplete_open = true;
});
this.$input.on("awesomplete-close", () => {
let modal = this.$input.parents('.modal-dialog')[0];
if (modal) {
$(modal).addClass("modal-dialog-scrollable");
}
this.toggle_container_scroll('.modal-dialog', 'modal-dialog-scrollable', true);
this.toggle_container_scroll('.grid-form-body .form-area', 'scrollable', true);
this.autocomplete_open = false;
});

View file

@ -66,7 +66,7 @@ export default class GridRowForm {
</div>
</div>
<div class="grid-form-body">
<div class="form-area"></div>
<div class="form-area scrollable"></div>
<div class="grid-footer-toolbar hidden-xs flex justify-between">
<div class="grid-shortcuts">
<span> ${frappe.utils.icon("keyboard", "md")} </span>

View file

@ -165,7 +165,7 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
if (match_rules_list.length) {
this.restricted_list = $(
`<button class="btn btn-default btn-xs restricted-button flex align-center">
${frappe.utils.icon('lock', 'xs')}
${frappe.utils.icon('restriction', 'xs')}
</button>`
).click(() => this.show_restrictions(match_rules_list)).appendTo(this.page.page_form);
}

View file

@ -708,7 +708,7 @@ Object.assign(frappe.utils, {
title = frappe._title_prefix + " " + title.replace(/<[^>]*>/g, "");
}
document.title = title;
// save for re-routing
const sub_path = frappe.router.get_sub_path();
frappe.route_titles[sub_path] = title;
@ -1172,7 +1172,7 @@ Object.assign(frappe.utils, {
} else if (type === "page") {
route = item.name;
} else if (type === "dashboard") {
route = "dashboard/" + item.name;
route = `dashboard-view/${item.name}`;
}
} else {

View file

@ -86,4 +86,12 @@
.btn.btn-danger {
background-color: var(--red-400);
color: $white;
}
[data-theme="dark"] {
.btn-primary-light {
background-color: var(--bg-dark-blue);
box-shadow: none;
}
}

View file

@ -141,6 +141,7 @@
// Background Text Color Pairs
--bg-blue: var(--blue-100);
--bg-light-blue: var(--blue-50);
--bg-dark-blue: var(--blue-300);
--bg-green: var(--dark-green-50);
--bg-yellow: var(--yellow-50);
--bg-orange: var(--orange-50);
@ -151,6 +152,7 @@
--text-on-blue: var(--blue-600);
--text-on-light-blue: var(--blue-500);
--text-on-dark-blue: var(--blue-700);
--text-on-blue: var(--blue-600);
--text-on-green: var(--dark-green-500);
--text-on-yellow: var(--yellow-500);

View file

@ -42,6 +42,7 @@
// Background Text Color Pairs
--bg-blue: var(--blue-600);
--bg-light-blue: var(--blue-400);
--bg-dark-blue: var(--blue-900);
--bg-green: var(--dark-green-500);
--bg-yellow: var(--yellow-500);
--bg-orange: var(--orange-500);
@ -52,6 +53,7 @@
--text-on-blue: var(--blue-50);
--text-on-light-blue: var(--blue-100);
--text-on-dark-blue: var(--blue-300);
--text-on-green: var(--dark-green-50);
--text-on-yellow: var(--yellow-50);
--text-on-orange: var(--orange-100);
@ -72,6 +74,10 @@
.frappe-card {
.btn-default {
background-color: var(--bg-color);
&:hover {
background-color: var(--fg-hover-color);
}
}
}

View file

@ -340,8 +340,8 @@
}
.grid-form-body {
.form-area {
max-height: 70vh;
.form-area.scrollable {
max-height: calc(100vh - 3.5rem);
overflow-y: auto;
}
}

View file

@ -372,17 +372,20 @@ input.list-check-all, input.list-row-checkbox {
margin-top: var(--margin-xs);
height: var(--margin-xl);
.icon use {
stroke: var(--text-on-yellow);
.icon {
width: 14px;
height: 14px;
use {
stroke: var(--yellow-800);
}
}
&.btn {
box-shadow: none;
border: 1px solid;
@include button-variant(
$background: $light-yellow,
$border: darken($light-yellow, 5%),
);
box-shadow: none;
}
}

View file

@ -78,7 +78,7 @@
}
.page-head {
z-index: 2;
z-index: 4;
position: sticky;
top: var(--navbar-height);
background: var(--bg-color);