dave/ocrcc-chatbox
1
0
Fork 0
forked from Github/ocrcc-chatbox
Code Issues Pull Requests Projects Releases Wiki Activity

dark mode, add bookmarklet demo

Browse Source
This commit is contained in:
Sharon Kennedy 2020-02-17 00:31:50 +01:00
parent 08981fd444
commit 4b5bb34261
6 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/index.html
View File

@ -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>

8
src/components/_chat.scss
View File

@ -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 {

1
src/components/_variables.scss
View File

@ -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 */

4
src/components/_widget.scss
View File

@ -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;

15
src/components/chatbox.jsx
View File

@ -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 = {

7
src/outputs/bookmarklet.js
View File

@ -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();