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> <title>Embeddable Chatbox Demo</title>
</head> </head>
<body> <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> <p style="font-family:sans-serif; padding: 3rem 5rem;">Look down!</p>
<script src="./widget.js"></script> <script src="./widget.js"></script>
<script> <script>
var theme = {
themeColor: "#008080",
lightColor: "#FFF8F0",
darkColor: "#22333B",
errorColor: "#FFFACD",
font: "'Assistant', 'Helvetica', sans-serif",
placement: "right"
};
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", matrixServerUrl: "https://matrix.rhok.space",
roomName: "Support Chat", roomName: "Support Chat",
theme: theme
}); });
</script> </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> </body>
</html> </html>

8
src/components/_chat.scss
View File

@ -11,6 +11,10 @@
min-height: 180px; min-height: 180px;
border: 1px solid $theme-color; border: 1px solid $theme-color;
a {
color: inherit;
}
.message-window { .message-window {
background-color: $light-color; background-color: $light-color;
flex: 1 1 auto; flex: 1 1 auto;
@ -24,6 +28,10 @@
.notices { .notices {
color: $dark-color; color: $dark-color;
font-size: 0.9rem; font-size: 0.9rem;
> div {
padding-bottom: 0.5rem;
}
} }
.message { .message {

1
src/components/_variables.scss
View File

@ -6,6 +6,7 @@ $white: #ffffff;
$highlight-color: $yellow; $highlight-color: $yellow;
$theme-color: $dark-blue; $theme-color: $dark-blue;
$theme-font: 'Assistant', 'Helvetica', sans-serif; $theme-font: 'Assistant', 'Helvetica', sans-serif;
$drop-shadow-color: #BDBEBF;
/* Dark mode colors */ /* Dark mode colors */

4
src/components/_widget.scss
View File

@ -36,7 +36,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.5rem; padding: 0.75rem;
width: 400px; width: 400px;
max-width: calc(100vw - 10px); max-width: calc(100vw - 10px);
background: $theme-color; background: $theme-color;
@ -47,6 +47,7 @@
color: $white; color: $white;
font-size: 1rem; font-size: 1rem;
line-height: 1; line-height: 1;
box-shadow: 0 2px 15px $drop-shadow-color;
} }
@ -56,6 +57,7 @@
border-bottom: none; border-bottom: none;
animation-duration: 0.2s; animation-duration: 0.2s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
box-shadow: 0 2px 15px $drop-shadow-color;
&-entering { &-entering {
animation-name: slideInUp; 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) => { this.state.client.on("Room.timeline", (event, room, toStartOfTimeline) => {
if (event.getType() === "m.room.message") { if (event.getType() === "m.room.message") {
@ -214,6 +213,10 @@ class ChatBox extends React.Component {
this.handleMessageEvent(event) this.handleMessageEvent(event)
} }
if (event.getType() === "m.room.encryption") {
this.setState({ isRoomEncrypted: true })
}
}); });
this.state.client.on("Event.decrypted", (event) => { this.state.client.on("Event.decrypted", (event) => {
@ -264,7 +267,7 @@ class ChatBox extends React.Component {
render() { render() {
const { ready, messages, inputValue, userId, isRoomEncrypted } = this.state; 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...' const inputLabel = 'Send a message...'
return ( return (
@ -296,9 +299,9 @@ class ChatBox extends React.Component {
} }
</div> </div>
<div className="notices"> <div className="notices">
{ { privacyStatement && <div>{privacyStatement}</div> }
isRoomEncrypted && <div role="status">Messages in this chat are secured with end-to-end encryption.</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> </div>
<div className="input-window"> <div className="input-window">
@ -324,6 +327,8 @@ ChatBox.propTypes = {
matrixServerUrl: PropTypes.string.isRequired, matrixServerUrl: PropTypes.string.isRequired,
roomName: PropTypes.string.isRequired, roomName: PropTypes.string.isRequired,
theme: PropTypes.object, theme: PropTypes.object,
termsUrl: PropTypes.string,
privacyStatement: PropTypes.string,
} }
ChatBox.defaultProps = { ChatBox.defaultProps = {

7
src/outputs/bookmarklet.js
View File

@ -6,7 +6,12 @@ export default function bookmarklet() {
} }
window.EmbeddableWidget = EmbeddableWidget; 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(); bookmarklet();