Add button text modification option
Browse files- src/popover.ts +19 -1
- src/style.css +8 -4
src/popover.ts
CHANGED
@@ -11,7 +11,13 @@ export type Popover = {
|
|
11 |
description: string;
|
12 |
side?: Side;
|
13 |
align?: Alignment;
|
|
|
14 |
showButtons?: boolean;
|
|
|
|
|
|
|
|
|
|
|
15 |
};
|
16 |
|
17 |
export type PopoverDOM = {
|
@@ -42,7 +48,19 @@ export function renderPopover(element: Element, step: DriveStep) {
|
|
42 |
document.body.appendChild(popover.wrapper);
|
43 |
}
|
44 |
|
45 |
-
const {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
46 |
|
47 |
if (title) {
|
48 |
popover.title.innerText = title;
|
|
|
11 |
description: string;
|
12 |
side?: Side;
|
13 |
align?: Alignment;
|
14 |
+
|
15 |
showButtons?: boolean;
|
16 |
+
|
17 |
+
doneBtnText?: string;
|
18 |
+
closeBtnText?: string;
|
19 |
+
nextBtnText?: string;
|
20 |
+
prevBtnText?: string;
|
21 |
};
|
22 |
|
23 |
export type PopoverDOM = {
|
|
|
48 |
document.body.appendChild(popover.wrapper);
|
49 |
}
|
50 |
|
51 |
+
const {
|
52 |
+
title,
|
53 |
+
description,
|
54 |
+
showButtons = undefined,
|
55 |
+
doneBtnText = 'Done',
|
56 |
+
closeBtnText= 'Close',
|
57 |
+
nextBtnText= 'Next →',
|
58 |
+
prevBtnText = '← Previous',
|
59 |
+
} = step.popover || {};
|
60 |
+
|
61 |
+
popover.nextButton.innerHTML = nextBtnText;
|
62 |
+
popover.previousButton.innerHTML = prevBtnText;
|
63 |
+
popover.closeButton.innerHTML = closeBtnText;
|
64 |
|
65 |
if (title) {
|
66 |
popover.title.innerText = title;
|
src/style.css
CHANGED
@@ -51,12 +51,16 @@
|
|
51 |
|
52 |
.driver-popover-title {
|
53 |
font: 19px / normal sans-serif;
|
54 |
-
margin: 0 0 5px;
|
55 |
font-weight: 700;
|
56 |
display: block;
|
57 |
position: relative;
|
58 |
line-height: 1.5;
|
59 |
zoom: 1;
|
|
|
|
|
|
|
|
|
|
|
60 |
}
|
61 |
|
62 |
.driver-popover-description {
|
@@ -80,7 +84,7 @@
|
|
80 |
all: unset;
|
81 |
display: inline-block;
|
82 |
box-sizing: border-box;
|
83 |
-
padding:
|
84 |
text-decoration: none;
|
85 |
text-shadow: 1px 1px 0 #fff;
|
86 |
color: #2d2d2d;
|
@@ -90,11 +94,11 @@
|
|
90 |
zoom: 1;
|
91 |
line-height: 1.3;
|
92 |
border: 1px solid #ccc;
|
93 |
-
border-radius:
|
94 |
}
|
95 |
|
96 |
.driver-popover-footer-btns button + button {
|
97 |
-
margin-left:
|
98 |
}
|
99 |
|
100 |
.driver-popover-arrow {
|
|
|
51 |
|
52 |
.driver-popover-title {
|
53 |
font: 19px / normal sans-serif;
|
|
|
54 |
font-weight: 700;
|
55 |
display: block;
|
56 |
position: relative;
|
57 |
line-height: 1.5;
|
58 |
zoom: 1;
|
59 |
+
margin: 0;
|
60 |
+
}
|
61 |
+
|
62 |
+
.driver-popover-title + .driver-popover-description {
|
63 |
+
margin-top: 5px;
|
64 |
}
|
65 |
|
66 |
.driver-popover-description {
|
|
|
84 |
all: unset;
|
85 |
display: inline-block;
|
86 |
box-sizing: border-box;
|
87 |
+
padding: 3px 7px;
|
88 |
text-decoration: none;
|
89 |
text-shadow: 1px 1px 0 #fff;
|
90 |
color: #2d2d2d;
|
|
|
94 |
zoom: 1;
|
95 |
line-height: 1.3;
|
96 |
border: 1px solid #ccc;
|
97 |
+
border-radius: 3px;
|
98 |
}
|
99 |
|
100 |
.driver-popover-footer-btns button + button {
|
101 |
+
margin-left: 4px;
|
102 |
}
|
103 |
|
104 |
.driver-popover-arrow {
|