Skip to content
This repository was archived by the owner on Sep 7, 2020. It is now read-only.

Commit 01dce80

Browse files
coderbyheartcoderbyheart
committed
fix(ui): let page decide which font to use
1 parent 7caf510 commit 01dce80

File tree

4 files changed

+103
-100
lines changed

4 files changed

+103
-100
lines changed

‎src/Chat/components/ChannelView.ts

-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ export const Header = styled.div`
44
display: flex;
55
justify-content: space-between;
66
font-weight: 300;
7-
font-family: 'Inter', sans-serif;
87
align-items: center;
98
width: 100%;
109
height: 40px;
@@ -24,7 +23,6 @@ export const Footer = styled(Header)`
2423
`
2524

2625
export const TextButton = styled.button`
27-
font-family: 'Inter', sans-serif;
2826
background-color: transparent;
2927
border: 0;
3028
margin: 0;
@@ -55,7 +53,6 @@ export const Controls = styled.div`
5553
}
5654
`
5755
export const Button = styled.button`
58-
font-family: 'Inter', sans-serif;
5956
background-color: transparent;
6057
border: 1px solid;
6158
height: 30px;
@@ -77,7 +74,6 @@ export const SendButton = styled.button`
7774

7875
export const MessageInput = styled.input`
7976
flex-grow: 1;
80-
font-family: 'Inter', sans-serif;
8177
background-color: #fff;
8278
border: 1px solid;
8379
height: 28px;

‎src/Chat/components/ChatWidget.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ export const ChatWidget = styled.div`
55
z-index: 9999;
66
right: 1rem;
77
bottom: 1rem;
8-
font-family: 'Inter', sans-serif;
98
max-width: 350px;
109
font-size: 16px;
1110
`

‎src/Chat/components/Error.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ const Header = styled.div`
55
background-color: #fa0000;
66
color: #ffffff;
77
font-weight: 300;
8-
font-family: 'Inter', sans-serif;
98
width: 100%;
109
`
1110

‎web/index.html

+103-94
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,117 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Distribute Aid: Chat</title>
6+
<meta name="chat:context" content="general" />
7+
<meta name="chat:endpoint" content="{{GRAPHQL_API_ENDPOINT}}" />
8+
<meta name="chat:apiKey" content="{{GRAPHQL_API_KEY}}" />
9+
<link
10+
href="https://fonts.googleapis.com/css?family=Quicksand&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<style>
14+
html,
15+
body {
16+
font-family: "Quicksand", sans-serif;
17+
}
18+
</style>
19+
</head>
320

4-
<head>
5-
<meta charset="UTF-8" />
6-
<title>Distribute Aid: Chat</title>
7-
<meta name="chat:context" content="general" />
8-
<meta name="chat:endpoint" content="{{GRAPHQL_API_ENDPOINT}}" />
9-
<meta name="chat:apiKey" content="{{GRAPHQL_API_KEY}}" />
10-
<link rel="stylesheet" href="https://rsms.me/inter/inter-ui.css"
11-
integrity="sha256-cdb8LF5k6q+Mbl8Od9ARdnDUCjihJZocnLNXYUFtMmg=" crossorigin="" />
12-
</head>
13-
14-
<body>
15-
<h1>Distribute Aid: Chat</h1>
16-
17-
<p>This is the demo page for the <em>Distribute Aid</em> in-app-chat.</p>
21+
<body>
22+
<h1>Distribute Aid: Chat</h1>
1823

19-
<p>
20-
It will be loaded from an external source, and will create it's DOM
21-
element with an overlaying chat window.
22-
</p>
24+
<p>This is the demo page for the <em>Distribute Aid</em> in-app-chat.</p>
2325

24-
<p>
25-
Every chat has a <em>context</em>, which needs to be provided. In this
26-
example we use the <code>general</code> context, which is a public chat
27-
room that is available for all authenticated users.
28-
</p>
26+
<p>
27+
It will be loaded from an external source, and will create it's DOM
28+
element with an overlaying chat window.
29+
</p>
2930

30-
<p>
31-
The API endpoint of the integration for this instance is
32-
<code>{{GRAPHQL_API_ENDPOINT}}</code>.
33-
</p>
31+
<p>
32+
Every chat has a <em>context</em>, which needs to be provided. In this
33+
example we use the <code>general</code> context, which is a public chat
34+
room that is available for all authenticated users.
35+
</p>
3436

35-
<p><strong>Preview mode:</strong> Note that the chat will only load if the <code>DAChat:enabled</code> is set in
36-
localStorage. Run this command in the console to enable it:
37-
<code>window.localStorage.setItem('DAChat:enabled', '1')</code></p>
37+
<p>
38+
The API endpoint of the integration for this instance is
39+
<code>{{GRAPHQL_API_ENDPOINT}}</code>.
40+
</p>
3841

39-
<div id="tokenform"></div>
42+
<p>
43+
<strong>Preview mode:</strong> Note that the chat will only load if the
44+
<code>DAChat:enabled</code> is set in localStorage. Run this command in
45+
the console to enable it:
46+
<code>window.localStorage.setItem('DAChat:enabled', '1')</code>
47+
</p>
4048

41-
<script src="https://cdn.rawgit.com/muicss/loadjs/4.2.0/dist/loadjs.min.js" defer></script>
42-
<script type="text/javascript">
43-
const launchChat = token =>
44-
DAChat({
45-
context: document
46-
.querySelector("meta[name='chat:context']")
47-
.getAttribute("content"),
48-
apiKey: document
49-
.querySelector("meta[name='chat:apiKey']")
50-
.getAttribute("content"),
51-
apiEndpoint: document
52-
.querySelector("meta[name='chat:endpoint']")
53-
.getAttribute("content"),
54-
token
55-
});
49+
<div id="tokenform"></div>
5650

57-
const loadJsAsync = deps => loadjs(deps, {
58-
async: true,
59-
returnPromise: true
60-
})
51+
<script
52+
src="https://cdn.rawgit.com/muicss/loadjs/4.2.0/dist/loadjs.min.js"
53+
defer
54+
></script>
55+
<script type="text/javascript">
56+
const launchChat = token =>
57+
DAChat({
58+
context: document
59+
.querySelector("meta[name='chat:context']")
60+
.getAttribute("content"),
61+
apiKey: document
62+
.querySelector("meta[name='chat:apiKey']")
63+
.getAttribute("content"),
64+
apiEndpoint: document
65+
.querySelector("meta[name='chat:endpoint']")
66+
.getAttribute("content"),
67+
token
68+
});
6169

62-
const loadChat = () => {
63-
loadJsAsync([
64-
'https://unpkg.com/react@16/umd/react.development.js',
65-
'https://unpkg.com/react-dom@16/umd/react-dom.development.js',
66-
'https://media.twiliocdn.com/sdk/js/chat/v3.3/twilio-chat.min.js',
67-
'https://twemoji.maxcdn.com/v/latest/twemoji.min.js',
70+
const loadJsAsync = deps =>
71+
loadjs(deps, {
72+
async: true,
73+
returnPromise: true
74+
});
6875

69-
])
70-
.then(() => loadJsAsync([
71-
'./main.js',
72-
'./demo.js',
73-
]))
74-
.then(() => {
75-
ReactDOM.render(
76-
React.createElement(TokenForm, {
77-
onToken: token => launchChat(token)
78-
}),
79-
document.querySelector("#tokenform")
80-
);
81-
})
82-
};
76+
const loadChat = () => {
77+
loadJsAsync([
78+
"https://unpkg.com/react@16/umd/react.development.js",
79+
"https://unpkg.com/react-dom@16/umd/react-dom.development.js",
80+
"https://media.twiliocdn.com/sdk/js/chat/v3.3/twilio-chat.min.js",
81+
"https://twemoji.maxcdn.com/v/latest/twemoji.min.js"
82+
])
83+
.then(() => loadJsAsync(["./main.js", "./demo.js"]))
84+
.then(() => {
85+
ReactDOM.render(
86+
React.createElement(TokenForm, {
87+
onToken: token => launchChat(token)
88+
}),
89+
document.querySelector("#tokenform")
90+
);
91+
});
92+
};
8393

84-
window.onload = () => {
85-
if (window.localStorage.getItem('DAChat:enabled') === '1') {
86-
if (document.cookie.split(';').filter((item) => item.trim().startsWith('DAChatopen=')).length) {
87-
loadChat()
88-
} else {
89-
console.log('not open')
90-
loadJsAsync([
91-
'./chatbutton.js'
92-
])
93-
.then(() => {
94-
DAChatButton((removeButton) => {
95-
document.cookie = 'DAChatopen=1'
96-
loadChat()
97-
.then(() => {
98-
removeButton()
99-
})
100-
})
101-
})
94+
window.onload = () => {
95+
if (window.localStorage.getItem("DAChat:enabled") === "1") {
96+
if (
97+
document.cookie
98+
.split(";")
99+
.filter(item => item.trim().startsWith("DAChatopen=")).length
100+
) {
101+
loadChat();
102+
} else {
103+
console.log("not open");
104+
loadJsAsync(["./chatbutton.js"]).then(() => {
105+
DAChatButton(removeButton => {
106+
document.cookie = "DAChatopen=1";
107+
loadChat().then(() => {
108+
removeButton();
109+
});
110+
});
111+
});
112+
}
102113
}
103-
}
104-
}
105-
</script>
106-
</body>
107-
108-
</html>
114+
};
115+
</script>
116+
</body>
117+
</html>

0 commit comments

Comments
 (0)