Skip to content

Commit

Permalink
fix: update feedback widget UI (#452)
Browse files Browse the repository at this point in the history
  • Loading branch information
@awais-ansari
awais-ansari committed Sep 6, 2023
1 parent cd4c7e4 commit 851cf20
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 148 deletions.
129 changes: 0 additions & 129 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,134 +7,5 @@
</head>
<body>
<div id="root"></div>
<!-- begin usabilla live embed code -->
<script defer type="text/javascript">
window.lightningjs ||
(function (n) {
var e = "lightningjs";
function t(e, t) {
var r, i, a, o, d, c;
return (
t && (t += (/\?/.test(t) ? "&" : "?") + "lv=1"),
n[e] ||
((r = window),
(i = document),
(a = e),
(o = i.location.protocol),
(d = "load"),
(c = 0),
(function () {
n[a] = function () {
var t = arguments,
i = this,
o = ++c,
d = (i && i != r && i.id) || 0;
function s() {
return (s.id = o), n[a].apply(s, arguments);
}
return (
(e.s = e.s || []).push([o, d, t]),
(s.then = function (n, t, r) {
var i = (e.fh[o] = e.fh[o] || []),
a = (e.eh[o] = e.eh[o] || []),
d = (e.ph[o] = e.ph[o] || []);
return (
n && i.push(n), t && a.push(t), r && d.push(r), s
);
}),
s
);
};
var e = (n[a]._ = {});
function s() {
e.P(d), (e.w = 1), n[a]("_load");
}
(e.fh = {}),
(e.eh = {}),
(e.ph = {}),
(e.l = t
? t.replace(/^\/\//, ("https:" == o ? o : "http:") + "//")
: t),
(e.p = { 0: +new Date() }),
(e.P = function (n) {
e.p[n] = new Date() - e.p[0];
}),
e.w && s(),
r.addEventListener
? r.addEventListener(d, s, !1)
: r.attachEvent("onload", s);
var l = function () {
function n() {
return [
"<!DOCTYPE ",
o,
"><",
o,
"><head></head><",
t,
"><",
r,
' src="',
e.l,
'"></',
r,
"></",
t,
"></",
o,
">",
].join("");
}
var t = "body",
r = "script",
o = "html",
d = i[t];
if (!d) return setTimeout(l, 100);
e.P(1);
var c,
s = i.createElement("div"),
h = s.appendChild(i.createElement("div")),
u = i.createElement("iframe");
(s.style.display = "none"),
(d.insertBefore(s, d.firstChild).id = "lightningjs-" + a),
(u.frameBorder = "0"),
(u.id = "lightningjs-frame-" + a),
/MSIE[ ]+6/.test(navigator.userAgent) &&
(u.src = "javascript:false"),
(u.allowTransparency = "true"),
h.appendChild(u);
try {
u.contentWindow.document.open();
} catch (n) {
(e.domain = i.domain),
(c =
"javascript:var d=document.open();d.domain='" +
i.domain +
"';"),
(u.src = c + "void(0);");
}
try {
var p = u.contentWindow.document;
p.write(n()), p.close();
} catch (e) {
u.src =
c +
'd.write("' +
n().replace(/"/g, String.fromCharCode(92) + '"') +
'");d.close();';
}
e.P(2);
};
e.l && l();
})()),
(n[e].lv = "1"),
n[e]
);
}
var r = (window.lightningjs = t(e));
(r.require = t), (r.modules = n);
})({});
</script>
<!-- end usabilla live embed code -->
</body>
</html>
169 changes: 151 additions & 18 deletions src/Notifications/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { useIntl } from '@edx/frontend-platform/i18n';
import { getConfig } from '@edx/frontend-platform';
import classNames from 'classnames';
import {
Badge, Icon, IconButton, OverlayTrigger, Popover, Hyperlink, Tooltip,
Badge, Icon, IconButton, OverlayTrigger, Popover, Hyperlink, Button,
} from '@edx/paragon';
import { NotificationsNone, Settings, Feedback } from '@edx/paragon/icons';
import { NotificationsNone, Settings } from '@edx/paragon/icons';
import { selectNotificationTabsCount } from './data/selectors';
import { resetNotificationState } from './data/thunks';
import { toggleTrayEvent } from './data/slice';
Expand Down Expand Up @@ -49,6 +49,145 @@ const Notifications = () => {
};
}, []);

useEffect(() => {
const script = document.createElement('script');
script.defer = true;
script.type = 'text/javascript';
script.innerHTML = `
window.lightningjs ||
(function (n) {
var e = "lightningjs";
function t(e, t) {
var r, i, a, o, d, c;
return (
t && (t += (/\\?/.test(t) ? "&" : "?") + "lv=1"),
n[e] ||
((r = window),
(i = document),
(a = e),
(o = i.location.protocol),
(d = "load"),
(c = 0),
(function () {
n[a] = function () {
var t = arguments,
i = this,
o = ++c,
d = (i && i != r && i.id) || 0;
function s() {
return (s.id = o), n[a].apply(s, arguments);
}
return (
(e.s = e.s || []).push([o, d, t]),
(s.then = function (n, t, r) {
var i = (e.fh[o] = e.fh[o] || []),
a = (e.eh[o] = e.eh[o] || []),
d = (e.ph[o] = e.ph[o] || []);
return (
n && i.push(n), t && a.push(t), r && d.push(r), s
);
}),
s
);
};
var e = (n[a]._ = {});
function s() {
e.P(d), (e.w = 1), n[a]("_load");
}
(e.fh = {}),
(e.eh = {}),
(e.ph = {}),
(e.l = t
? t.replace(/^\\/\\//, ("https:" == o ? o : "http:") + "//")
: t),
(e.p = { 0: +new Date() }),
(e.P = function (n) {
e.p[n] = new Date() - e.p[0];
}),
e.w && s(),
r.addEventListener
? r.addEventListener(d, s, !1)
: r.attachEvent("onload", s);
var l = function () {
function n() {
return [
"<!DOCTYPE ",
o,
"><",
o,
"><head></head><",
t,
"><",
r,
' src="',
e.l,
'"></',
r,
"></",
t,
"></",
o,
">",
].join("");
}
var t = "body",
r = "script",
o = "html",
d = i[t];
if (!d) return setTimeout(l, 100);
e.P(1);
var c,
s = i.createElement("div"),
h = s.appendChild(i.createElement("div")),
u = i.createElement("iframe");
(s.style.display = "none"),
(d.insertBefore(s, d.firstChild).id = "lightningjs-" + a),
(u.frameBorder = "0"),
(u.id = "lightningjs-frame-" + a),
/MSIE[ ]+6/.test(navigator.userAgent) &&
(u.src = "javascript:false"),
(u.allowTransparency = "true"),
h.appendChild(u);
try {
u.contentWindow.document.open();
} catch (n) {
(e.domain = i.domain),
(c =
"javascript:var d=document.open();d.domain='" +
i.domain +
"';"),
(u.src = c + "void(0);");
}
try {
var p = u.contentWindow.document;
p.write(n()), p.close();
} catch (e) {
u.src =
c +
'd.write("' +
n().replace(/"/g, String.fromCharCode(92) + '"') +
'");d.close();';
}
e.P(2);
};
e.l && l();
})()),
(n[e].lv = "1"),
n[e]
);
}
var r = (window.lightningjs = t(e));
(r.require = t), (r.modules = n);
})({});
`;

document.body.appendChild(script);

return () => {
document.body.removeChild(script);
};
}, []);

const viewPortHeight = document.body.clientHeight;
const headerHeight = document.getElementsByClassName('learning-header-container');
const footer = document.getElementsByClassName('footer');
Expand Down Expand Up @@ -101,22 +240,6 @@ const Notifications = () => {
line-height-24 bg-white position-sticky`}
>
{intl.formatMessage(messages.notificationTitle)}
{getConfig().NOTIFICATION_FEEDBACK_URL && (
<OverlayTrigger
overlay={(
<Tooltip id="feedback-icon">
{intl.formatMessage(messages.feedback)}
</Tooltip>
)}
>
<Icon
onClick={() => enableFeedback()}
src={Feedback}
className="icon-size-20 text-primary-500 cursor-pointer ml-1 mr-auto"
screenReaderText="feedback icon"
/>
</OverlayTrigger>
)}
<Hyperlink
destination={`${getConfig().ACCOUNT_SETTINGS_URL}/notifications`}
target="_blank"
Expand All @@ -134,6 +257,16 @@ const Notifications = () => {
<Popover.Content className="notification-content p-0">
<NotificationTabs />
</Popover.Content>
{getConfig().NOTIFICATION_FEEDBACK_URL && (
<Button
onClick={() => enableFeedback()}
variant="warning"
className="notification-feedback-widget"
alt="feedback button"
>
{intl.formatMessage(messages.feedback)}
</Button>
)}
</div>
</Popover>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/Notifications/messages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const messages = defineMessages({
feedback: {
id: 'notification.feedback',
defaultMessage: 'Feedback',
description: 'Feedback icon tooltip',
description: 'text for feedback widget',
},
});

Expand Down
7 changes: 7 additions & 0 deletions src/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,4 +281,11 @@ $white: #fff;
width: 10px;
}
}

.notification-feedback-widget {
right: -37px !important;
position: fixed !important;
transform: rotate(270deg) !important;
top: 50% !important;
}
}

0 comments on commit 851cf20

Please sign in to comment.