Merge branch 'rebrand-ui' of https://github.com/frappe/frappe into rebrand-ui
This commit is contained in:
prssanna
commit
051a56ed10
12 changed files with 209 additions and 188 deletions
|
|
@ -43,6 +43,7 @@ tbody > tr:first-child {
|
|||
|
||||
button.btn-remove-perm {
|
||||
box-shadow: none;
|
||||
padding: var(--padding-xs) var(--padding-xs);
|
||||
}
|
||||
|
||||
button.btn-remove-perm > svg > use {
|
||||
|
|
|
|||
|
|
@ -322,7 +322,7 @@ frappe.PermissionEngine = class PermissionEngine {
|
|||
}
|
||||
|
||||
add_delete_button(row, d) {
|
||||
$(`<button class='btn btn-danger btn-remove-perm btn-sm'>${frappe.utils.icon('delete')}</button>`)
|
||||
$(`<button class='btn btn-danger btn-remove-perm btn-xs'>${frappe.utils.icon('delete')}</button>`)
|
||||
.appendTo($(`<td class="pt-4">`).appendTo(row))
|
||||
.attr("data-doctype", d.parent)
|
||||
.attr("data-role", d.role)
|
||||
|
|
|
|||
|
|
@ -88,9 +88,7 @@
|
|||
"public/less/social.less",
|
||||
"public/scss/desk.scss",
|
||||
"node_modules/frappe-charts/dist/frappe-charts.min.css",
|
||||
"node_modules/driver.js/dist/driver.min.css",
|
||||
"node_modules/plyr/dist/plyr.css",
|
||||
"public/less/driver.less"
|
||||
"node_modules/plyr/dist/plyr.css"
|
||||
],
|
||||
"css/frappe-rtl.css": [
|
||||
"public/css/bootstrap-rtl.css",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 212 KiB |
|
|
@ -1,11 +1,3 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
|
||||
<title>Artboard</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="cloud" transform="translate(1.000000, 3.000000)" fill="#50A6F2" fill-rule="nonzero">
|
||||
<path d="M3.0625,10.5 C1.371125,10.5 0,9.128875 0,7.4375 C0,5.85515 1.2000275,4.5531325 2.7396425,4.3918175 C2.66483875,4.1070925 2.625,3.80820125 2.625,3.5 C2.625,1.5670025 4.1920025,0 6.125,0 C7.76895,0 9.1482125,1.1334575 9.5239375,2.66153125 C9.6999875,2.6374425 9.8798,2.625 10.0625,2.625 C12.2371375,2.625 14,4.38788 14,6.5625 C14,8.7371375 12.2371375,10.5 10.0625,10.5 L3.0625,10.5 Z" id="Path"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.82596 4.06912C7.27748 3.59867 7.90608 3.30688 8.60129 3.30688C9.52545 3.30688 10.3317 3.8222 10.7611 4.58722C11.1343 4.4205 11.5473 4.32776 11.9818 4.32776C13.6487 4.32776 15 5.69088 15 7.37226C15 9.05385 13.6487 10.417 11.9818 10.417C11.7822 10.4171 11.583 10.3972 11.3873 10.3577C11.0092 11.0322 10.2887 11.4879 9.46163 11.4879C9.11542 11.4879 8.78795 11.4079 8.49639 11.2657C8.11308 12.1674 7.22004 12.7995 6.1792 12.7995C5.0953 12.7995 4.17154 12.1137 3.81696 11.1519C3.662 11.1848 3.50146 11.2019 3.33672 11.2019C2.04622 11.2019 1 10.1449 1 8.84088C1 7.96698 1.47006 7.20394 2.16846 6.79571C2.02468 6.46487 1.9447 6.09971 1.9447 5.71579C1.9447 4.21608 3.16222 3.00037 4.66394 3.00037C5.54561 3.00037 6.32918 3.41957 6.82596 4.06912Z" fill="#00A1E0"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 950 B After Width: | Height: | Size: 871 B |
|
|
@ -1631,6 +1631,9 @@ frappe.ui.form.Form = class FrappeForm {
|
|||
}
|
||||
|
||||
const driver = new frappe.Driver({
|
||||
className: 'frappe-driver',
|
||||
allowClose: false,
|
||||
padding: 10,
|
||||
overlayClickNext: true,
|
||||
keyboardControl: true,
|
||||
nextBtnText: 'Next',
|
||||
|
|
|
|||
|
|
@ -15,21 +15,21 @@ export default class OnboardingWidget extends Widget {
|
|||
this.steps.forEach((step, index) => {
|
||||
this.add_step(step, index);
|
||||
});
|
||||
|
||||
this.show_step(this.steps[0]);
|
||||
}
|
||||
|
||||
add_step(step, index) {
|
||||
let label = `<div class="step-index">${ __(index + 1) }</div>`;
|
||||
let status = 'pending';
|
||||
|
||||
if (step.is_complete) {
|
||||
label = `<div class="step-index complete">${frappe.utils.icon('tick', 'xs')}</div>`;
|
||||
} else if (step.is_skipped) {
|
||||
label = `<div class="step-index skipped">${frappe.utils.icon('tick', 'xs')}</div>`;
|
||||
}
|
||||
if (step.is_skipped) status = "skipped";
|
||||
if (step.is_complete) status = "complete";
|
||||
|
||||
let $step = $(`<a class="onboarding-step ${status}">
|
||||
<div class="step-title">
|
||||
${label}
|
||||
<div class="step-index step-pending">${ __(index + 1) }</div>
|
||||
<div class="step-index step-skipped">${frappe.utils.icon('tick', 'xs')}</div>
|
||||
<div class="step-index step-complete">${frappe.utils.icon('tick', 'xs')}</div>
|
||||
<div>${step.title}</div>
|
||||
</div>
|
||||
</a>`);
|
||||
|
|
@ -37,7 +37,7 @@ export default class OnboardingWidget extends Widget {
|
|||
step.$step = $step;
|
||||
|
||||
// Add skip button
|
||||
if (!step.is_mandatory && !step.is_complete) {
|
||||
if (!step.is_mandatory && !step.is_complete && !step.is_skipped) {
|
||||
let skip_html = $(
|
||||
`<div class="step-skip">Skip</div>`
|
||||
);
|
||||
|
|
@ -61,7 +61,7 @@ export default class OnboardingWidget extends Widget {
|
|||
this.active_step = step;
|
||||
|
||||
let actions = {
|
||||
"Watch Video": this.show_video,
|
||||
"Watch Video": (step) => this.show_video(step),
|
||||
"Create Entry": (step) => {
|
||||
if (step.is_complete) {
|
||||
frappe.set_route(`#List/${step.reference_document}`);
|
||||
|
|
@ -73,10 +73,10 @@ export default class OnboardingWidget extends Widget {
|
|||
}
|
||||
}
|
||||
},
|
||||
"Show Form Tour": this.show_form_tour,
|
||||
"Update Settings": this.update_settings,
|
||||
"View Report": this.open_report,
|
||||
"Go to Page": this.go_to_page,
|
||||
"Show Form Tour": (step) => this.show_form_tour(step),
|
||||
"Update Settings": (step) => this.update_settings(step),
|
||||
"View Report": (step) => this.open_report(step),
|
||||
"Go to Page": (step) => this.go_to_page(step),
|
||||
};
|
||||
|
||||
const toggle_content = () => {
|
||||
|
|
@ -102,14 +102,17 @@ export default class OnboardingWidget extends Widget {
|
|||
|
||||
const video = $(`<div class="video-player" data-plyr-provider="youtube" data-plyr-embed-id="${step.intro_video_url}"></div>`);
|
||||
video.appendTo(this.step_body)
|
||||
new frappe.Plyr(video[0], {
|
||||
let plyr = new frappe.Plyr(video[0], {
|
||||
hideControls: true,
|
||||
resetOnEnd: true,
|
||||
});
|
||||
|
||||
$(`<button class="btn btn-primary btn-sm">${__(step.action)}</button>`)
|
||||
.appendTo(this.step_footer)
|
||||
.on('click', () => actions[step.action](step));
|
||||
.on('click', () => {
|
||||
plyr.pause()
|
||||
actions[step.action](step)
|
||||
});
|
||||
|
||||
$(`<button class="btn btn-secondary ml-2 btn-sm">${__('Back')}</button>`)
|
||||
.appendTo(this.step_footer)
|
||||
|
|
@ -121,20 +124,22 @@ export default class OnboardingWidget extends Widget {
|
|||
}
|
||||
|
||||
go_to_page(step) {
|
||||
this.mark_complete(step);
|
||||
frappe.set_route(step.path).then(() => {
|
||||
if (step.callback_message) {
|
||||
let msg_dialog = frappe.msgprint({
|
||||
message: __(step.callback_message),
|
||||
title: __(step.callback_title),
|
||||
primary_action: {
|
||||
action: () => {
|
||||
msg_dialog.hide();
|
||||
},
|
||||
label: () => __("Continue"),
|
||||
let message = step.callback_message || __("You can continue with the onboarding after exploring this page")
|
||||
let title = step.callback_title || __("Awesome Work")
|
||||
|
||||
let msg_dialog = frappe.msgprint({
|
||||
message: message,
|
||||
title: title,
|
||||
primary_action: {
|
||||
action: () => {
|
||||
msg_dialog.hide();
|
||||
},
|
||||
wide: true,
|
||||
});
|
||||
}
|
||||
label: () => __("Continue"),
|
||||
},
|
||||
wide: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -374,6 +379,7 @@ export default class OnboardingWidget extends Widget {
|
|||
let callback = () => {
|
||||
step.is_skipped = true;
|
||||
$step.removeClass("complete");
|
||||
$step.removeClass("pending");
|
||||
$step.addClass("skipped");
|
||||
};
|
||||
|
||||
|
|
@ -382,8 +388,8 @@ export default class OnboardingWidget extends Widget {
|
|||
|
||||
update_step_status(step, status, value, callback) {
|
||||
let icon_class = {
|
||||
is_complete: "fa-check-circle-o",
|
||||
is_skipped: "fa-check-circle-o",
|
||||
is_complete: "complete",
|
||||
is_skipped: "skipped",
|
||||
};
|
||||
// Clear any hooks
|
||||
frappe.route_hooks = {};
|
||||
|
|
@ -397,10 +403,11 @@ export default class OnboardingWidget extends Widget {
|
|||
.then(() => {
|
||||
callback();
|
||||
|
||||
let icon = step.$step.find("i.fa");
|
||||
icon.removeClass();
|
||||
icon.addClass("fa");
|
||||
icon.addClass(icon_class[status]);
|
||||
step.$step
|
||||
.removeClass("pending")
|
||||
.removeClass("complete")
|
||||
.removeClass("skipped")
|
||||
.addClass(icon_class[status]);
|
||||
|
||||
let pending = this.steps.filter((step) => {
|
||||
return !(step.is_complete || step.is_skipped);
|
||||
|
|
@ -420,7 +427,7 @@ export default class OnboardingWidget extends Widget {
|
|||
let documentation = "";
|
||||
if (this.docs_url) {
|
||||
documentation = __(
|
||||
'Congratulations on completing the module setup. If you want to learn more you can refer to the documentation <a href="{0}">here</a>.',
|
||||
'Congratulations on completing the module setup. If you want to learn more you can refer to the documentation <a target="_blank" href="{0}">here</a>.',
|
||||
[this.docs_url]
|
||||
);
|
||||
}
|
||||
|
|
@ -429,30 +436,14 @@ export default class OnboardingWidget extends Widget {
|
|||
<img src="${success_state_image}" alt="Success State" class="zoom-in success-state">
|
||||
<h3>${success_message}</h3>
|
||||
<div class="text-muted">${documentation}</div>
|
||||
<button class="btn btn-primary btn-sm">${__('Continue')}</button>
|
||||
</div>
|
||||
`);
|
||||
|
||||
if (!this.success_dialog) {
|
||||
this.success_dialog = new frappe.ui.Dialog({
|
||||
primary_action: () => {
|
||||
this.success_dialog.hide();
|
||||
// Wait for modal to close before removing widget
|
||||
setTimeout(() => {
|
||||
this.delete();
|
||||
}, 300);
|
||||
},
|
||||
primary_action_label: __("Continue"),
|
||||
});
|
||||
success.find('.btn').on('click', () => this.delete());
|
||||
|
||||
this.success_dialog.set_title(__("Onboarding Complete"));
|
||||
this.success_dialog.header
|
||||
.find(".indicator")
|
||||
.removeClass("hidden")
|
||||
.addClass("green");
|
||||
|
||||
success.appendTo(this.success_dialog.$body);
|
||||
this.success_dialog.show();
|
||||
}
|
||||
this.step_preview.empty();
|
||||
success.appendTo(this.step_preview);
|
||||
}
|
||||
|
||||
set_body() {
|
||||
|
|
|
|||
|
|
@ -1,76 +0,0 @@
|
|||
@import "frappe/public/less/variables.less";
|
||||
|
||||
div#driver-popover-item {
|
||||
.driver-popover-footer {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
|
||||
button {
|
||||
// Edited
|
||||
padding: 1px 5px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
text-shadow: none !important;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.driver-close-btn {
|
||||
// Edited
|
||||
float: left;
|
||||
color: inherit;
|
||||
background-color: #f0f4f7;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.driver-navigation-btns {
|
||||
// Edited
|
||||
.driver-prev-btn {
|
||||
color: inherit;
|
||||
background-color: #f0f4f7;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.driver-next-btn {
|
||||
color: #fff;
|
||||
background-color: #5e64ff;
|
||||
border-color: #444bff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.driver-popover-title {
|
||||
// Edited
|
||||
font: 18px/normal sans-serif;
|
||||
margin: 0 0 5px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
position: relative;
|
||||
line-height: 1.5;
|
||||
zoom: 1;
|
||||
}
|
||||
.driver-popover-description {
|
||||
// Edited
|
||||
margin-bottom: 0;
|
||||
font: 12px/normal sans-serif;
|
||||
line-height: 1.5;
|
||||
color: @text-muted;
|
||||
font-weight: 400;
|
||||
zoom: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -292,31 +292,73 @@ body {
|
|||
font-size: var(--text-md);
|
||||
max-width: 350px;
|
||||
|
||||
&.pending {
|
||||
.step-index.step-pending {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.step-index.step-pending {
|
||||
background-color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.complete {
|
||||
.step-index.step-complete {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.skipped {
|
||||
.step-index.step-skipped {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: var(--bg-light-gray);
|
||||
|
||||
.step-skip {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.step-title {
|
||||
@include flex(flex, null, center, null);
|
||||
}
|
||||
|
||||
.step-index {
|
||||
@include flex(flex, center, center, null);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
color: var(--text-on-light-gray);
|
||||
background-color: var(--bg-light-gray);
|
||||
.step-index {
|
||||
@include flex(flex, center, center, null);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
color: var(--text-on-light-gray);
|
||||
background-color: var(--bg-light-gray);
|
||||
|
||||
margin-right: var(--margin-sm);
|
||||
border-radius: var(--border-radius-full);
|
||||
margin-right: var(--margin-sm);
|
||||
border-radius: var(--border-radius-full);
|
||||
}
|
||||
|
||||
&.complete {
|
||||
background-color: var(--primary);
|
||||
.icon use {
|
||||
stroke: var(--white);
|
||||
}
|
||||
.step-index {
|
||||
&.step-pending {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.step-complete {
|
||||
display: none;
|
||||
background-color: var(--primary);
|
||||
.icon use {
|
||||
stroke: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
&.skipped {
|
||||
background-color: var(--blue-100);
|
||||
svg {
|
||||
stroke: var(--blue-600);
|
||||
}
|
||||
&.step-skipped {
|
||||
display: none;
|
||||
background-color: var(--blue-100);
|
||||
svg {
|
||||
stroke: var(--blue-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -327,19 +369,6 @@ body {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: var(--bg-light-gray);
|
||||
|
||||
.step-index {
|
||||
background-color: var(--fg-color);
|
||||
}
|
||||
|
||||
.step-skip {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.skipped {
|
||||
i {
|
||||
color: var(--text-muted);
|
||||
|
|
@ -535,13 +564,18 @@ body {
|
|||
}
|
||||
|
||||
.onboarding-success {
|
||||
margin: 50px auto;
|
||||
margin: var(--margin-lg) auto;
|
||||
max-width: 75%;
|
||||
|
||||
.success-state {
|
||||
height: 15rem !important;
|
||||
max-height: 150px;
|
||||
width: auto;
|
||||
margin-bottom: var(--margin-xl);
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: var(--margin-md);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
67
frappe/public/scss/desk/driver.scss
Normal file
67
frappe/public/scss/desk/driver.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
@import "~driver.js/src/driver.scss";
|
||||
|
||||
div#driver-popover-item {
|
||||
$text-color: var(--text-color);
|
||||
$popover-bg: var(--card-bg);
|
||||
|
||||
padding: var(--padding-md) var(--padding-lg);
|
||||
max-width: 350px;
|
||||
border-radius: var(--border-radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
|
||||
.driver-popover-title {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--text-color);
|
||||
margin-bottom: var(--margin-sm);
|
||||
}
|
||||
|
||||
.driver-popover-description {
|
||||
font-size: var(--text-md);
|
||||
color: var(--text-light);
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.driver-popover-footer {
|
||||
margin-top: var(--margin-lg);
|
||||
|
||||
button,
|
||||
button.driver-next-btn,
|
||||
button.driver-prev-btn,
|
||||
button.driver-close-btn,
|
||||
button.driver-disabled {
|
||||
@extend .btn;
|
||||
@extend .btn-sm;
|
||||
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button.driver-next-btn {
|
||||
@extend .btn-primary;
|
||||
}
|
||||
|
||||
button.driver-prev-btn {
|
||||
@extend .btn-secondary;
|
||||
margin-left: var(--margin-sm);
|
||||
}
|
||||
|
||||
button.driver-close-btn {
|
||||
@extend .btn-link;
|
||||
@extend .text-muted;
|
||||
@extend .px-0;
|
||||
}
|
||||
|
||||
button.driver-disabled {
|
||||
@extend .btn-disabled !optional;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#driver-highlighted-element-stage {
|
||||
border-radius: var(--border-radius) !important;
|
||||
}
|
||||
|
||||
input.driver-highlighted-element {
|
||||
background-color: var(--fg-color);
|
||||
}
|
||||
|
|
@ -32,6 +32,7 @@
|
|||
@import "dashboard-view";
|
||||
@import "tree";
|
||||
@import "controls";
|
||||
@import "driver";
|
||||
@import "role_editor";
|
||||
@import "user-profile";
|
||||
@import "quill";
|
||||
|
|
|
|||
|
|
@ -75,10 +75,17 @@
|
|||
}
|
||||
|
||||
.page-card-body {
|
||||
::placeholder, /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: var(--text-light);
|
||||
opacity: 1; /* Firefox */
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"] {
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
font-size: var(--text-base);
|
||||
background-color: var(--control-bg);
|
||||
margin-bottom: 10px;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue