refactoring message view (incomplete)
This commit is contained in:
Gene S
@@ -7,3 +7,5 @@ This is work in progress. Bugs are expected.
|
||||
Try it at http://api.tinode.co/x/example-react-js/
|
||||
|
||||
License: [Apache 2.0](http://www.apache.org/licenses/LICENSE-2.0)
|
||||
|
||||
Avatar photos from [https://www.pexels.com/] under [CC0 license](https://www.pexels.com/photo-license/).
|
||||
|
||||
+143
@@ -210,6 +210,7 @@ html, body {
|
||||
background-color: #E9E9FF;
|
||||
}
|
||||
|
||||
/*
|
||||
.chatBox {
|
||||
list-style: none;
|
||||
padding: 1.5em 0 1.5em;
|
||||
@@ -298,3 +299,145 @@ html, body {
|
||||
.chatBox-body > p + p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
*/
|
||||
|
||||
/* CSS talk bubble */
|
||||
.chat-box {
|
||||
list-style: none;
|
||||
padding: 0 0 5em 0;
|
||||
}
|
||||
|
||||
.chat-box li {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.chat-box li.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.chat-box .bubble {
|
||||
position: relative;
|
||||
max-width: 32em;
|
||||
height: auto;
|
||||
padding: 1.5em 0 1.5em;
|
||||
background-color: #ef9a9a;
|
||||
border: 1px solid #e53935;
|
||||
|
||||
margin: 0;
|
||||
padding: 0.5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.chat-box li.single {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.chat-box li.single .bubble {
|
||||
border-radius: 0.5em;
|
||||
-webkit-border-radius: 0.5em;
|
||||
-moz-border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.chat-box li.first {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.05em;
|
||||
}
|
||||
|
||||
.chat-box li.first .bubble {
|
||||
border-radius: 0.5em 0.5em 0 0;
|
||||
-webkit-border-radius: 0.5em 0.5em 0 0;
|
||||
-moz-border-radius: 0.5em 0.5em 0 0;
|
||||
}
|
||||
|
||||
.chat-box li.middle {
|
||||
margin-top: 0.05em;
|
||||
margin-bottom: 0.05em;
|
||||
}
|
||||
|
||||
.chat-box li.middle .bubble {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.chat-box li.last {
|
||||
margin-top: 0.05em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.chat-box li.last .bubble {
|
||||
border-radius: 0 0 0.5em 0.5em;
|
||||
-webkit-border-radius: 0 0 0.5em 0.5em;
|
||||
-moz-border-radius: 0 0 0.5em 0.5em;
|
||||
}
|
||||
|
||||
/* Left triangle placed bottom left flush. */
|
||||
.chat-box li.left .tip::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
right: auto;
|
||||
left: -11px;
|
||||
top: auto;
|
||||
bottom: -1px; /* border-width */
|
||||
border: 10px solid;
|
||||
border-color: transparent transparent #e53935 transparent;
|
||||
}
|
||||
.chat-box li.left .tip::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
right: auto;
|
||||
left: -9px;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
border: 9px solid;
|
||||
border-color: transparent transparent #ef9a9a transparent;
|
||||
}
|
||||
|
||||
/* Right triangle placed bottom right flush. */
|
||||
.chat-box li.right .tip::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: auto;
|
||||
right: -11px;
|
||||
top: auto;
|
||||
bottom: -1px; /* border-width */
|
||||
border: 10px solid;
|
||||
border-color: transparent transparent #e53935 transparent;
|
||||
}
|
||||
.chat-box li.right .tip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: auto;
|
||||
right: -9px;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
border: 9px solid;
|
||||
border-color: transparent transparent #ef9a9a transparent;
|
||||
}
|
||||
|
||||
.chat-box .avatar {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chat-box .avatar img {
|
||||
width: 32px;
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 4px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.chat-box .bubble p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
+251
-30
@@ -23,14 +23,18 @@
|
||||
<div id="mountPoint"></div>
|
||||
<script type="text/babel">
|
||||
// Host name and posrt to connect to
|
||||
//var HOST = "api.tinode.co";
|
||||
var HOST = "localhost:6060";
|
||||
var HOST = "api.tinode.co";
|
||||
//var HOST = "localhost:6060";
|
||||
|
||||
// API key. Use https://github.com/tinode/chat/tree/master/keygen to generate your own
|
||||
var API_KEY = "AQEAAAABAAD_rAp4DJh05a1HAwFT3A6K";
|
||||
|
||||
// Minimum time between two keypress notifications, milliseconds.
|
||||
var KEYPRESS_DELAY = 5*1000;
|
||||
|
||||
// Delay before sending a {note} for reciving a message, milliseconds.
|
||||
var RECEIVED_DELAY = 500;
|
||||
|
||||
// Delay before sending a read notification, milliseconds.
|
||||
var READ_DELAY = 3*1000;
|
||||
|
||||
@@ -219,24 +223,7 @@
|
||||
);
|
||||
}
|
||||
})
|
||||
/*
|
||||
SideNavbar.MenuStart = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<li className="dropdown">
|
||||
<a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<big><span className="glyphicon glyphicon-option-vertical"></span></big>
|
||||
</a>
|
||||
<ul className="dropdown-menu">
|
||||
<li><a href="#" onClick={this.props.onSignUp}><span className="glyphicon glyphicon-user"></span> Sign Up</a></li>
|
||||
<li><a href="#" onClick={this.props.onSettings}><span className="glyphicon glyphicon-cog"></span> Settings</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
SideNavbar.MenuStart = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
@@ -528,15 +515,14 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
|
||||
};
|
||||
var Message = React.createClass({
|
||||
render: function() {
|
||||
var liClass = (this.props.response ? "left" : "right") + " " + this.props.sequence;
|
||||
return (
|
||||
<li className={this.props.response ? 'chatBox-inverted' : null}>
|
||||
<div className="chatBox-panel">
|
||||
<div className="chatBox-body">
|
||||
<p>{this.props.content}
|
||||
<Message.ReceivedMarker response={this.props.response}
|
||||
<li className={liClass}>
|
||||
<div className="bubble tip">
|
||||
<p>{this.props.content}
|
||||
<Message.ReceivedMarker response={this.props.response}
|
||||
timestamp={this.props.timestamp} received={this.props.received} />
|
||||
</p>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
@@ -689,6 +675,7 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
|
||||
render: function() {
|
||||
var me = Tinode.getCurrentUserID();
|
||||
var topic = Tinode.getTopic(this.state.topic);
|
||||
var previousFrom = null;
|
||||
var messageNodes = this.state.messages.map(function(msg) {
|
||||
var isReply = !(msg.from === me);
|
||||
var msgReceived = Received.UNDEF;
|
||||
@@ -703,7 +690,7 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
|
||||
}
|
||||
return (
|
||||
<Message content={msg.content} timestamp={msg.ts} response={isReply}
|
||||
received={msgReceived} key={msg.seq} />
|
||||
sequence = {sequence} received={msgReceived} key={msg.seq} />
|
||||
);
|
||||
});
|
||||
return (
|
||||
@@ -712,7 +699,7 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
|
||||
<h3 className="panel-title">{this.state.title}</h3>
|
||||
</div>
|
||||
<div className="panel-body" id="messagesView">
|
||||
<ul className="chatBox">
|
||||
<ul className="chat-box">
|
||||
{messageNodes}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -877,6 +864,240 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
|
||||
document.getElementById('mountPoint')
|
||||
);
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var materialColorIndex = ["red", "pink", "purple", "deep-purple", "indigo", "blue", "light-blue", "cyan", "teal",
|
||||
"green","light-green","lime","yellow", "amber", "orange", "deep-orange", "brown", "grey", "blue-grey"];
|
||||
var materialShadeIndex = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"];
|
||||
var materialColors = {
|
||||
"red": {
|
||||
"50": "#ffebee",
|
||||
"100": "#ffcdd2",
|
||||
"200": "#ef9a9a",
|
||||
"300": "#e57373",
|
||||
"400": "#ef5350",
|
||||
"500": "#f44336",
|
||||
"600": "#e53935",
|
||||
"700": "#d32f2f",
|
||||
"800": "#c62828",
|
||||
"900": "#b71c1c"
|
||||
},
|
||||
"pink": {
|
||||
"50": "#fce4ec",
|
||||
"100": "#f8bbd0",
|
||||
"200": "#f48fb1",
|
||||
"300": "#f06292",
|
||||
"400": "#ec407a",
|
||||
"500": "#e91e63",
|
||||
"600": "#d81b60",
|
||||
"700": "#c2185b",
|
||||
"800": "#ad1457",
|
||||
"900": "#880e4f"
|
||||
},
|
||||
"purple": {
|
||||
"50": "#f3e5f5",
|
||||
"100": "#e1bee7",
|
||||
"200": "#ce93d8",
|
||||
"300": "#ba68c8",
|
||||
"400": "#ab47bc",
|
||||
"500": "#9c27b0",
|
||||
"600": "#8e24aa",
|
||||
"700": "#7b1fa2",
|
||||
"800": "#6a1b9a",
|
||||
"900": "#4a148c"
|
||||
},
|
||||
"deep-purple": {
|
||||
"50": "#ede7f6",
|
||||
"100": "#d1c4e9",
|
||||
"200": "#b39ddb",
|
||||
"300": "#9575cd",
|
||||
"400": "#7e57c2",
|
||||
"500": "#673ab7",
|
||||
"600": "#5e35b1",
|
||||
"700": "#512da8",
|
||||
"800": "#4527a0",
|
||||
"900": "#311b92"
|
||||
},
|
||||
"indigo": {
|
||||
"50": "#e8eaf6",
|
||||
"100": "#c5cae9",
|
||||
"200": "#9fa8da",
|
||||
"300": "#7986cb",
|
||||
"400": "#5c6bc0",
|
||||
"500": "#3f51b5",
|
||||
"600": "#3949ab",
|
||||
"700": "#303f9f",
|
||||
"800": "#283593",
|
||||
"900": "#1a237e"
|
||||
},
|
||||
"blue": {
|
||||
"50": "#e3f2fd",
|
||||
"100": "#bbdefb",
|
||||
"200": "#90caf9",
|
||||
"300": "#64b5f6",
|
||||
"400": "#42a5f5",
|
||||
"500": "#2196f3",
|
||||
"600": "#1e88e5",
|
||||
"700": "#1976d2",
|
||||
"800": "#1565c0",
|
||||
"900": "#0d47a1"
|
||||
},
|
||||
"light-blue": {
|
||||
"50": "#e1f5fe",
|
||||
"100": "#b3e5fc",
|
||||
"200": "#81d4fa",
|
||||
"300": "#4fc3f7",
|
||||
"400": "#29b6f6",
|
||||
"500": "#03a9f4",
|
||||
"600": "#039be5",
|
||||
"700": "#0288d1",
|
||||
"800": "#0277bd",
|
||||
"900": "#01579b"
|
||||
},
|
||||
"cyan": {
|
||||
"50": "#e0f7fa",
|
||||
"100": "#b2ebf2",
|
||||
"200": "#80deea",
|
||||
"300": "#4dd0e1",
|
||||
"400": "#26c6da",
|
||||
"500": "#00bcd4",
|
||||
"600": "#00acc1",
|
||||
"700": "#0097a7",
|
||||
"800": "#00838f",
|
||||
"900": "#006064"
|
||||
},
|
||||
"teal": {
|
||||
"50": "#e0f2f1",
|
||||
"100": "#b2dfdb",
|
||||
"200": "#80cbc4",
|
||||
"300": "#4db6ac",
|
||||
"400": "#26a69a",
|
||||
"500": "#009688",
|
||||
"600": "#00897b",
|
||||
"700": "#00796b",
|
||||
"800": "#00695c",
|
||||
"900": "#004d40"
|
||||
},
|
||||
"green": {
|
||||
"50": "#e8f5e9",
|
||||
"100": "#c8e6c9",
|
||||
"200": "#a5d6a7",
|
||||
"300": "#81c784",
|
||||
"400": "#66bb6a",
|
||||
"500": "#4caf50",
|
||||
"600": "#43a047",
|
||||
"700": "#388e3c",
|
||||
"800": "#2e7d32",
|
||||
"900": "#1b5e20"
|
||||
},
|
||||
"light-green": {
|
||||
"50": "#f1f8e9",
|
||||
"100": "#dcedc8",
|
||||
"200": "#c5e1a5",
|
||||
"300": "#aed581",
|
||||
"400": "#9ccc65",
|
||||
"500": "#8bc34a",
|
||||
"600": "#7cb342",
|
||||
"700": "#689f38",
|
||||
"800": "#558b2f",
|
||||
"900": "#33691e"
|
||||
},
|
||||
"lime": {
|
||||
"50": "#f9fbe7",
|
||||
"100": "#f0f4c3",
|
||||
"200": "#e6ee9c",
|
||||
"300": "#dce775",
|
||||
"400": "#d4e157",
|
||||
"500": "#cddc39",
|
||||
"600": "#c0ca33",
|
||||
"700": "#afb42b",
|
||||
"800": "#9e9d24",
|
||||
"900": "#827717"
|
||||
},
|
||||
"yellow": {
|
||||
"50": "#fffde7",
|
||||
"100": "#fff9c4",
|
||||
"200": "#fff59d",
|
||||
"300": "#fff176",
|
||||
"400": "#ffee58",
|
||||
"500": "#ffeb3b",
|
||||
"600": "#fdd835",
|
||||
"700": "#fbc02d",
|
||||
"800": "#f9a825",
|
||||
"900": "#f57f17"
|
||||
},
|
||||
"amber": {
|
||||
"50": "#fff8e1",
|
||||
"100": "#ffecb3",
|
||||
"200": "#ffe082",
|
||||
"300": "#ffd54f",
|
||||
"400": "#ffca28",
|
||||
"500": "#ffc107",
|
||||
"600": "#ffb300",
|
||||
"700": "#ffa000",
|
||||
"800": "#ff8f00",
|
||||
"900": "#ff6f00"
|
||||
},
|
||||
"orange": {
|
||||
"50": "#fff3e0",
|
||||
"100": "#ffe0b2",
|
||||
"200": "#ffcc80",
|
||||
"300": "#ffb74d",
|
||||
"400": "#ffa726",
|
||||
"500": "#ff9800",
|
||||
"600": "#fb8c00",
|
||||
"700": "#f57c00",
|
||||
"800": "#ef6c00",
|
||||
"900": "#e65100"
|
||||
},
|
||||
"deep-orange": {
|
||||
"50": "#fbe9e7",
|
||||
"100": "#ffccbc",
|
||||
"200": "#ffab91",
|
||||
"300": "#ff8a65",
|
||||
"400": "#ff7043",
|
||||
"500": "#ff5722",
|
||||
"600": "#f4511e",
|
||||
"700": "#e64a19",
|
||||
"800": "#d84315",
|
||||
"900": "#bf360c"
|
||||
},
|
||||
"brown": {
|
||||
"50": "#efebe9",
|
||||
"100": "#d7ccc8",
|
||||
"200": "#bcaaa4",
|
||||
"300": "#a1887f",
|
||||
"400": "#8d6e63",
|
||||
"500": "#795548",
|
||||
"600": "#6d4c41",
|
||||
"700": "#5d4037",
|
||||
"800": "#4e342e",
|
||||
"900": "#3e2723"
|
||||
},
|
||||
"grey": {
|
||||
"50": "#fafafa",
|
||||
"100": "#f5f5f5",
|
||||
"200": "#eeeeee",
|
||||
"300": "#e0e0e0",
|
||||
"400": "#bdbdbd",
|
||||
"500": "#9e9e9e",
|
||||
"600": "#757575",
|
||||
"700": "#616161",
|
||||
"800": "#424242",
|
||||
"900": "#212121"
|
||||
},
|
||||
"blue-grey": {
|
||||
"50": "#eceff1",
|
||||
"100": "#cfd8dc",
|
||||
"200": "#b0bec5",
|
||||
"300": "#90a4ae",
|
||||
"400": "#78909c",
|
||||
"500": "#607d8b",
|
||||
"600": "#546e7a",
|
||||
"700": "#455a64",
|
||||
"800": "#37474f",
|
||||
"900": "#263238"
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user