Skip to content

Commit 76ab712

Browse files
boehlerlukasboehlerlukas
committed
v8.3.4
1 parent 3f81e0f commit 76ab712

File tree

8 files changed

+74
-43
lines changed

8 files changed

+74
-43
lines changed

‎build/index.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "gleap",
3-
"version": "8.3.3",
3+
"version": "8.3.4",
44
"main": "build/index.js",
55
"scripts": {
66
"start": "webpack serve",

‎published/8.3.4/index.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎published/latest/index.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/GleapFeedbackButtonManager.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export default class GleapFeedbackButtonManager {
9797
buttonIcon = loadIcon("button", "#fff");
9898
}
9999

100-
this.feedbackButton.className = "bb-feedback-button gleap-hidden";
100+
this.feedbackButton.className = "bb-feedback-button gleap-font gleap-hidden";
101101
this.feedbackButton.setAttribute("dir", GleapTranslationManager.getInstance().isRTLLayout ? "rtl" : "ltr");
102102

103103
if (

‎src/GleapFrameManager.js

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -163,9 +163,9 @@ export default class GleapFrameManager {
163163
const flowConfig = GleapConfigManager.getInstance().getFlowConfig();
164164
if (
165165
flowConfig.feedbackButtonPosition ===
166-
GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC ||
166+
GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC ||
167167
flowConfig.feedbackButtonPosition ===
168-
GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC_BOTTOM
168+
GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC_BOTTOM
169169
) {
170170
styleToApply = classicStyle;
171171
}
@@ -249,6 +249,7 @@ export default class GleapFrameManager {
249249
}
250250

251251
this.widgetOpened = true;
252+
this.updateUI();
252253
}
253254

254255
runWidgetShouldOpenCallback() {
@@ -264,17 +265,19 @@ export default class GleapFrameManager {
264265
});
265266

266267
this.showFrameContainer(false);
267-
268268
this.updateWidgetStatus();
269269

270+
GleapEventManager.notifyEvent("open");
271+
this.registerEscListener();
272+
}
273+
274+
updateUI() {
270275
// Clear notifications only when not opening a survey.
271276
GleapNotificationManager.getInstance().clearAllNotifications(
272277
this.isSurvey()
273278
);
274279
GleapNotificationManager.getInstance().setNotificationCount(0);
275280
GleapFeedbackButtonManager.getInstance().updateFeedbackButtonState();
276-
GleapEventManager.notifyEvent("open");
277-
this.registerEscListener();
278281
}
279282

280283
showWidget() {
@@ -284,6 +287,7 @@ export default class GleapFrameManager {
284287
} else {
285288
GleapFrameManager.getInstance().injectFrame();
286289
}
290+
this.updateUI();
287291
}, 0);
288292
}
289293

@@ -334,7 +338,7 @@ export default class GleapFrameManager {
334338
this.queue.push(data);
335339
}
336340
}
337-
} catch (e) {}
341+
} catch (e) { }
338342
}
339343

340344
sendSessionUpdate() {
@@ -500,7 +504,7 @@ export default class GleapFrameManager {
500504
this.listeners[i](data);
501505
}
502506
}
503-
} catch (exp) {}
507+
} catch (exp) { }
504508
});
505509
}
506510

‎src/GleapNotificationManager.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default class GleapNotificationManager {
3131
}
3232

3333
var elem = document.createElement("div");
34-
elem.className = "gleap-notification-container";
34+
elem.className = "gleap-notification-container gleap-font";
3535
document.body.appendChild(elem);
3636
this.notificationContainer = elem;
3737

‎src/UI.js

Lines changed: 57 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,27 @@ export const injectStyledCSS = (
5858

5959
var borderRadius = parseInt(borderRadius, 10);
6060
const buttonBorderRadius = Math.round(borderRadius * 1.05);
61+
const chatRadius = Math.round(borderRadius * 0.6);
6162
const formItemBorderRadius = Math.round(borderRadius * 0.4);
6263
const formItemSmallBorderRadius = Math.round(borderRadius * 0.25);
6364
const zIndexBase = 2147483600;
6465

6566
const colorStyleSheet = `
67+
.gleap-font, .gleap-font * {
68+
font-style: normal;
69+
font-variant-caps: normal;
70+
font-variant-ligatures: normal;
71+
font-variant-numeric: normal;
72+
font-variant-east-asian: normal;
73+
font-weight: normal;
74+
font-stretch: normal;
75+
font-size: 100%;
76+
line-height: 1;
77+
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
78+
}
6679
.gleap-frame-container {
6780
right: ${buttonX}px;
68-
bottom: ${75 + buttonY}px;
81+
bottom: ${69 + buttonY}px;
6982
width: calc(100% - 40px);
7083
max-width: 400px;
7184
position: fixed;
@@ -85,7 +98,7 @@ export const injectStyledCSS = (
8598
[dir=rtl].gleap-frame-container {
8699
right: auto;
87100
left: ${buttonX}px;
88-
bottom: ${75 + buttonY}px;
101+
bottom: ${69 + buttonY}px;
89102
}
90103
91104
.gleap-frame-container--loading iframe {
@@ -201,13 +214,13 @@ export const injectStyledCSS = (
201214
.gleap-frame-container--modern-left {
202215
right: auto;
203216
left: ${buttonX}px;
204-
bottom: ${75 + buttonY}px;
217+
bottom: ${69 + buttonY}px;
205218
}
206219
207220
[dir=rtl].gleap-frame-container--modern-left {
208221
left: auto;
209222
right: ${buttonX}px;
210-
bottom: ${75 + buttonY}px;
223+
bottom: ${69 + buttonY}px;
211224
}
212225
213226
.gleap-frame-container--animate {
@@ -238,7 +251,7 @@ export const injectStyledCSS = (
238251
239252
.gleap-notification-container {
240253
position: fixed;
241-
bottom: ${68 + buttonY}px;
254+
bottom: ${62 + buttonY}px;
242255
right: ${4 + buttonX}px;
243256
z-index: ${zIndexBase + 30};
244257
display: flex;
@@ -307,9 +320,9 @@ export const injectStyledCSS = (
307320
}
308321
309322
.gleap-notification-item img {
310-
width: 30px;
311-
height: 30px;
312-
min-width: 30px;
323+
width: 32px;
324+
height: 32px;
325+
min-width: 32px;
313326
border-radius: 100%;
314327
object-fit: cover;
315328
margin-right: 8px;
@@ -319,28 +332,40 @@ export const injectStyledCSS = (
319332
320333
.gleap-notification-item-container {
321334
box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.2);
322-
border-radius: ${formItemBorderRadius}px;
323-
padding: 12px 16px;
335+
border-radius: ${chatRadius}px;
336+
border-bottom-left-radius: 0px;
337+
padding: 20px;
324338
background-color: ${backgroundColor};
325339
margin-bottom: 12px;
326340
cursor: pointer;
327341
font-size: 15px;
328-
font-family: sans-serif;
329342
line-height: 21px;
330343
color: ${contrastBackgroundColor};
344+
position: relative;
345+
}
346+
347+
.gleap-notification-item-container::after {
348+
content: " ";
349+
position: absolute;
350+
bottom: 0px;
351+
width: 0px;
352+
height: 0px;
353+
left: -6px;
354+
border-style: solid;
355+
border-width: 0px 0px 10px 6px;
356+
border-color: transparent transparent white;
331357
}
332358
333359
.gleap-notification-item-sender {
334-
font-size: 13px;
335-
font-family: sans-serif;
336-
color: ${contrastBackgroundColor};
360+
color: ${subTextColor};
361+
line-height: 20px;
337362
}
338363
339364
.gleap-notification-item-content {
340-
font-size: 14px;
341-
font-family: sans-serif;
342365
line-height: 20px;
343-
color: ${subTextColor};
366+
color: ${contrastBackgroundColor};
367+
margin-top: 4px;
368+
min-width: min(200px, 50vw);
344369
}
345370
346371
.gleap-frame-container-inner {
@@ -470,8 +495,8 @@ export const injectStyledCSS = (
470495
471496
.bb-notification-bubble {
472497
position: absolute;
473-
top: -4px;
474-
right: -4px;
498+
top: -6px;
499+
right: -6px;
475500
min-width: 22px;
476501
padding: 0px 4px;
477502
height: 22px;
@@ -489,11 +514,11 @@ export const injectStyledCSS = (
489514
}
490515
491516
.bb-feedback-button-icon {
492-
width: 60px;
493-
height: 60px;
494-
border-radius: 60px;
517+
width: 54px;
518+
height: 54px;
519+
border-radius: 54px;
495520
background-color: #485bff;
496-
transition: box-shadow 0.3s ease-in-out;
521+
transition: box-shadow, transform 0.2s ease-in-out;
497522
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 0px 20px rgba(0, 0, 0, 0.1);
498523
position: relative;
499524
}
@@ -569,10 +594,10 @@ export const injectStyledCSS = (
569594
570595
.bb-feedback-button .bb-logo-logo {
571596
position: absolute;
572-
width: 38px;
573-
height: 38px;
574-
top: 11px;
575-
left: 11px;
597+
width: 34px;
598+
height: 34px;
599+
top: 10px;
600+
left: 10px;
576601
object-fit: contain;
577602
animation-duration: 0.3s;
578603
animation-fill-mode: both;
@@ -581,10 +606,10 @@ export const injectStyledCSS = (
581606
582607
.bb-feedback-button .bb-logo-arrowdown {
583608
position: absolute;
584-
width: 18px;
585-
height: 18px;
586-
top: 23px;
587-
left: 21px;
609+
width: 16px;
610+
height: 16px;
611+
top: 19px;
612+
left: 19px;
588613
object-fit: contain;
589614
animation-duration: 0.3s;
590615
animation-fill-mode: both;
@@ -604,6 +629,7 @@ export const injectStyledCSS = (
604629
605630
.bb-feedback-button-icon:hover {
606631
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25), 0px 0px 20px rgba(0, 0, 0, 0.2);
632+
transform: scale(1.1);
607633
}
608634
609635
.bb-feedback-button--open .bb-feedback-button-text {

0 commit comments

Comments
 (0)