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>
|
<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>
|
||||||
|
@ -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 {
|
||||||
|
@ -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 */
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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 = {
|
||||||
|
@ -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();
|
||||||
|
Loading…
Reference in New Issue
Block a user