mirror of
https://github.com/Safe-Support-Chat/ocrcc-chatbox
synced 2024-11-01 00:55:26 +00:00
dark mode, add bookmarklet demo
This commit is contained in:
parent
08981fd444
commit
4b5bb34261
@ -4,24 +4,26 @@
|
||||
<title>Embeddable Chatbox Demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<p style="font-family:sans-serif; padding: 3rem 5rem;">
|
||||
<a id="bookmarklet">Bookmarklet (drag it to your bookmarks bar)</a>
|
||||
</p>
|
||||
<p style="font-family:sans-serif; padding: 3rem 5rem;">Look down!</p>
|
||||
|
||||
<script src="./widget.js"></script>
|
||||
<script>
|
||||
var theme = {
|
||||
themeColor: "#008080",
|
||||
lightColor: "#FFF8F0",
|
||||
darkColor: "#22333B",
|
||||
errorColor: "#FFFACD",
|
||||
font: "'Assistant', 'Helvetica', sans-serif",
|
||||
placement: "right"
|
||||
};
|
||||
|
||||
EmbeddableWidget.mount({
|
||||
termsUrl: "https://tosdr.org/",
|
||||
privacyStatement: "This chat application does not collect any of your personal data or any data from your use of this service.",
|
||||
matrixServerUrl: "https://matrix.rhok.space",
|
||||
roomName: "Support Chat",
|
||||
theme: theme
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var bookmarklet = "var s= document.createElement('script'); s.setAttribute('src', '"+window.location.href+"bookmarklet.js'); s.setAttribute('crossorigin', 'anonymous'); document.body.appendChild(s);"
|
||||
bookmarklet = '(function(){'+ bookmarklet +'})();'
|
||||
document.querySelector('a#bookmarklet').setAttribute("href", "javascript:" + encodeURIComponent(bookmarklet));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -11,6 +11,10 @@
|
||||
min-height: 180px;
|
||||
border: 1px solid $theme-color;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.message-window {
|
||||
background-color: $light-color;
|
||||
flex: 1 1 auto;
|
||||
@ -24,6 +28,10 @@
|
||||
.notices {
|
||||
color: $dark-color;
|
||||
font-size: 0.9rem;
|
||||
|
||||
> div {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
|
@ -6,6 +6,7 @@ $white: #ffffff;
|
||||
$highlight-color: $yellow;
|
||||
$theme-color: $dark-blue;
|
||||
$theme-font: 'Assistant', 'Helvetica', sans-serif;
|
||||
$drop-shadow-color: #BDBEBF;
|
||||
|
||||
/* Dark mode colors */
|
||||
|
||||
|
@ -36,7 +36,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
width: 400px;
|
||||
max-width: calc(100vw - 10px);
|
||||
background: $theme-color;
|
||||
@ -47,6 +47,7 @@
|
||||
color: $white;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
box-shadow: 0 2px 15px $drop-shadow-color;
|
||||
}
|
||||
|
||||
|
||||
@ -56,6 +57,7 @@
|
||||
border-bottom: none;
|
||||
animation-duration: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
box-shadow: 0 2px 15px $drop-shadow-color;
|
||||
|
||||
&-entering {
|
||||
animation-name: slideInUp;
|
||||
|
@ -196,7 +196,6 @@ class ChatBox extends React.Component {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
this.state.client.on("Room.timeline", (event, room, toStartOfTimeline) => {
|
||||
if (event.getType() === "m.room.message") {
|
||||
|
||||
@ -214,6 +213,10 @@ class ChatBox extends React.Component {
|
||||
|
||||
this.handleMessageEvent(event)
|
||||
}
|
||||
|
||||
if (event.getType() === "m.room.encryption") {
|
||||
this.setState({ isRoomEncrypted: true })
|
||||
}
|
||||
});
|
||||
|
||||
this.state.client.on("Event.decrypted", (event) => {
|
||||
@ -264,7 +267,7 @@ class ChatBox extends React.Component {
|
||||
|
||||
render() {
|
||||
const { ready, messages, inputValue, userId, isRoomEncrypted } = this.state;
|
||||
const { opened, handleToggleOpen } = this.props;
|
||||
const { opened, handleToggleOpen, privacyStatement, termsUrl } = this.props;
|
||||
const inputLabel = 'Send a message...'
|
||||
|
||||
return (
|
||||
@ -296,9 +299,9 @@ class ChatBox extends React.Component {
|
||||
}
|
||||
</div>
|
||||
<div className="notices">
|
||||
{
|
||||
isRoomEncrypted && <div role="status">Messages in this chat are secured with end-to-end encryption.</div>
|
||||
}
|
||||
{ privacyStatement && <div>{privacyStatement}</div> }
|
||||
{ termsUrl && <div>By using this service you agree to the <a href={termsUrl} target="_blank">Terms of Use</a>.</div> }
|
||||
{ isRoomEncrypted && <div role="status">Messages in this chat are secured with end-to-end encryption.</div> }
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-window">
|
||||
@ -324,6 +327,8 @@ ChatBox.propTypes = {
|
||||
matrixServerUrl: PropTypes.string.isRequired,
|
||||
roomName: PropTypes.string.isRequired,
|
||||
theme: PropTypes.object,
|
||||
termsUrl: PropTypes.string,
|
||||
privacyStatement: PropTypes.string,
|
||||
}
|
||||
|
||||
ChatBox.defaultProps = {
|
||||
|
@ -6,7 +6,12 @@ export default function bookmarklet() {
|
||||
}
|
||||
window.EmbeddableWidget = EmbeddableWidget;
|
||||
|
||||
EmbeddableWidget.mount();
|
||||
EmbeddableWidget.mount({
|
||||
termsUrl: "https://tosdr.org/",
|
||||
privacyStatement: "This chat application does not collect any of your personal data or any data from your use of this service.",
|
||||
matrixServerUrl: "https://matrix.rhok.space",
|
||||
roomName: "Support Chat",
|
||||
});
|
||||
}
|
||||
|
||||
bookmarklet();
|
||||
|
Loading…
Reference in New Issue
Block a user