feat: added driver.js with style overrides

frappe/public/build.json

@@ -112,7 +112,9 @@
 		"public/less/chat.less",
 		"public/less/filters.less",
 		"public/less/social.less",
-		"node_modules/frappe-charts/dist/frappe-charts.min.css"
+		"node_modules/frappe-charts/dist/frappe-charts.min.css",
+		"node_modules/driver.js/dist/driver.min.css",
+		"public/less/driver.less"
 	],
 	"css/frappe-rtl.css": [
 		"public/css/bootstrap-rtl.css",
@@ -244,6 +246,7 @@
 		"public/js/frappe/utils/energy_point_utils.js",
 		"public/js/frappe/utils/dashboard_utils.js",
 		"public/js/frappe/ui/chart.js",
+		"public/js/frappe/ui/driver.js",
 		"public/js/frappe/barcode_scanner/index.js"
 	],
 	"css/form.min.css": [

frappe/public/js/frappe/ui/driver.js

@@ -0,0 +1,3 @@
+import Driver from 'driver.js';
+
+frappe.Driver = Driver;

frappe/public/less/driver.less

@@ -0,0 +1,180 @@
+@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;
+		}
+
+		button.driver-disabled {
+			color: grey;
+			cursor: default;
+			pointer-events: none;
+		}
+
+		.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;
+	}
+}
+
+.driver-clearfix {
+	&:after {
+		content: "";
+		display: table;
+		clear: both;
+	}
+	&:before {
+		content: "";
+		display: table;
+	}
+}
+
+.driver-stage-no-animation {
+	-webkit-transition: none !important;
+	-moz-transition: none !important;
+	-ms-transition: none !important;
+	-o-transition: none !important;
+	transition: none !important;
+	background: transparent !important;
+	outline: 5000px solid rgba(0,0,0,.75);
+}
+
+div#driver-page-overlay {
+	background: @modal-backdrop-bg;
+	position: fixed;
+	bottom: 0;
+	right: 0;
+	display: block;
+	width: 100%;
+	height: 100%;
+	zoom: 1;
+	filter: alpha(opacity=25);
+	opacity: .25;
+	z-index: 100002 !important;
+	top: 0;
+	left: 0;
+	-webkit-transition: all .3s;
+	-moz-transition: all .3s;
+	-ms-transition: all .3s;
+	-o-transition: all .3s;
+	transition: all .3s;
+}
+
+div#driver-highlighted-element-stage {
+	top: 0;
+	left: 0;
+	-webkit-transition: all .3s;
+	-moz-transition: all .3s;
+	-ms-transition: all .3s;
+	-o-transition: all .3s;
+	transition: all .3s;
+	position: absolute;
+	height: 50px;
+	width: 300px;
+	background: #fff;
+	z-index: 100003 !important;
+	display: none;
+	border-radius: 2px;
+}
+
+.driver-highlighted-element {
+	z-index: 100004 !important;
+}
+
+.driver-position-relative {
+	position: relative !important;
+}
+
+.driver-fix-stacking {
+	z-index: auto !important;
+	opacity: 1 !important;
+	-webkit-transform: none !important;
+	-moz-transform: none !important;
+	-ms-transform: none !important;
+	-o-transform: none !important;
+	transform: none !important;
+	-webkit-filter: none !important;
+	-moz-filter: none !important;
+	-ms-filter: none !important;
+	-o-filter: none !important;
+	filter: none !important;
+	-webkit-perspective: none !important;
+	-moz-perspective: none !important;
+	-ms-perspective: none !important;
+	-o-perspective: none !important;
+	perspective: none !important;
+	-webkit-transform-style: flat !important;
+	-moz-transform-style: flat !important;
+	-ms-transform-style: flat !important;
+	transform-style: flat !important;
+	-webkit-transform-box: border-box !important;
+	-moz-transform-box: border-box !important;
+	-ms-transform-box: border-box !important;
+	-o-transform-box: border-box !important;
+	transform-box: border-box !important;
+	will-change: unset !important;
+}
+
+

package.json

@@ -25,6 +25,7 @@
     "bootstrap": "^4.4.1",
     "cookie": "^0.4.0",
     "cssnano": "^4.1.10",
+    "driver.js": "^0.9.8",
     "express": "^4.17.1",
     "fast-deep-equal": "^2.0.1",
     "frappe-charts": "^1.3.2",

yarn.lock

@@ -1770,6 +1770,11 @@ double-ended-queue@^2.1.0-0:
   resolved "https://registry.yarnpkg.com/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz#103d3527fd31528f40188130c841efdd78264e5c"
   integrity sha1-ED01J/0xUo9AGIEwyEHv3XgmTlw=
 
+driver.js@^0.9.8:
+  version "0.9.8"
+  resolved "https://registry.yarnpkg.com/driver.js/-/driver.js-0.9.8.tgz#4b327f4537b1c9b9fb19419de86174be821ae32a"
+  integrity sha512-bczjyKdX6XmFyCDkwtRmlaORDwfBk1xXmRO0CAe5VwNQTM98aWaG2LAIiIdTe53iV/B7W5lXlIy2xYtf0JRb7Q==
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"