From be27513a56c69f6a70bcbf5b03b99847ea1415d9 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Mon, 11 May 2020 12:09:54 +0530 Subject: [PATCH] feat: added driver.js with style overrides --- frappe/public/build.json | 5 +- frappe/public/js/frappe/ui/driver.js | 3 + frappe/public/less/driver.less | 180 +++++++++++++++++++++++++++ package.json | 1 + yarn.lock | 5 + 5 files changed, 193 insertions(+), 1 deletion(-) create mode 100644 frappe/public/js/frappe/ui/driver.js create mode 100644 frappe/public/less/driver.less diff --git a/frappe/public/build.json b/frappe/public/build.json index d56907b558..e4c90cb708 100755 --- a/frappe/public/build.json +++ b/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": [ diff --git a/frappe/public/js/frappe/ui/driver.js b/frappe/public/js/frappe/ui/driver.js new file mode 100644 index 0000000000..98ed49ec05 --- /dev/null +++ b/frappe/public/js/frappe/ui/driver.js @@ -0,0 +1,3 @@ +import Driver from 'driver.js'; + +frappe.Driver = Driver; \ No newline at end of file diff --git a/frappe/public/less/driver.less b/frappe/public/less/driver.less new file mode 100644 index 0000000000..9dc7cde0b1 --- /dev/null +++ b/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; +} + + diff --git a/package.json b/package.json index e735beee9b..fae9798706 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index b189296086..73816bdece 100644 --- a/yarn.lock +++ b/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"