kamrify commited on
Commit
d6df79d
·
1 Parent(s): 9a5b24f

Add button text modification option

Browse files
Files changed (2) hide show
  1. src/popover.ts +19 -1
  2. 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 { title, description, showButtons = undefined } = step.popover || {};
 
 
 
 
 
 
 
 
 
 
 
 
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: 5px 10px;
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: 4px;
94
  }
95
 
96
  .driver-popover-footer-btns button + button {
97
- margin-left: 5px;
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 {