refactored message background colos
This commit is contained in:
Gene S
+31
-252
@@ -31,8 +31,8 @@
|
||||
var APP_NAME = "TinodeReact/0.6";
|
||||
|
||||
// Host name and port 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";
|
||||
@@ -538,12 +538,6 @@
|
||||
console.log(invite);
|
||||
},
|
||||
tnMeSubsUpdated: function(names) {
|
||||
/*var subs = [];
|
||||
Tinode.getMeTopic().contacts(function(cont) {
|
||||
subs.push(cont);
|
||||
});
|
||||
this.setState({subscriptions: subs});
|
||||
*/
|
||||
this.forceUpdate();
|
||||
},
|
||||
onSelectionChange: function(sel) {
|
||||
@@ -559,8 +553,8 @@
|
||||
}
|
||||
contactNodes.push(
|
||||
<Contact
|
||||
title={c.public.vcard.fn}
|
||||
avatar={makeImageUrl(c.public.vcard.photo)}
|
||||
title={c.public.fn}
|
||||
avatar={makeImageUrl(c.public.photo)}
|
||||
comment={c.private}
|
||||
unread={unread} now={c.online}
|
||||
selected={this.state.selected}
|
||||
@@ -592,13 +586,33 @@
|
||||
CLIENT: 1,
|
||||
READ: 2
|
||||
};
|
||||
|
||||
// Material colors, shade #200; 16 colors.
|
||||
var messageColors = [
|
||||
{bgColor: "#c5e1a5", color: "#212121"}, {bgColor: "#ef9a9a", color: "#212121"},
|
||||
{bgColor: "#90caf9", color: "#212121"}, {bgColor: "#fff59d", color: "#212121"},
|
||||
{bgColor: "#b0bec5", color: "#212121"}, {bgColor: "#f48fb1", color: "#212121"},
|
||||
{bgColor: "#b39ddb", color: "#212121"}, {bgColor: "#9fa8da", color: "#212121"},
|
||||
{bgColor: "#ffab91", color: "#212121"}, {bgColor: "#ffe082", color: "#212121"},
|
||||
{bgColor: "#a5d6a7", color: "#212121"}, {bgColor: "#bcaaa4", color: "#212121"},
|
||||
{bgColor: "#eeeeee", color: "#212121"}, {bgColor: "#80deea", color: "#212121"},
|
||||
{bgColor: "#e6ee9c", color: "#212121"}, {bgColor: "#ce93d8", color: "#212121"}
|
||||
];
|
||||
// Colors for user's own messages
|
||||
var selfColor = {bgColor: "#fafafa", color: "#212121"};
|
||||
var Message = React.createClass({
|
||||
render: function() {
|
||||
var liClass = (this.props.response ? "left" : "right") + " " + this.props.sequence;
|
||||
var colors = {
|
||||
backgroundColor: materialColor[materialColorIndex[this.props.userIndex]]["100"],
|
||||
borderColor: materialColor[materialColorIndex[this.props.userIndex]]["100"]
|
||||
};
|
||||
var colors;
|
||||
colors = this.props.response ? {
|
||||
backgroundColor: messageColors[this.props.userIndex].bgColor,
|
||||
borderColor: messageColors[this.props.userIndex].bgColor,
|
||||
color: messageColors[this.props.userIndex].color
|
||||
} : {
|
||||
backgroundColor: selfColor.bgColor,
|
||||
borderColor: selfColor.bgColor,
|
||||
color: selfColor.color
|
||||
};
|
||||
var bubbleClass = (this.props.sequence === "single" || this.props.sequence === "last") ?
|
||||
"bubble tip" : "bubble";
|
||||
return (
|
||||
@@ -696,7 +710,7 @@
|
||||
}
|
||||
},
|
||||
handleDescChange: function(desc) {
|
||||
this.setState({title: desc.public.vcard.fn});
|
||||
this.setState({title: desc.public.fn});
|
||||
},
|
||||
handleSubsUpdated: function(uids) {
|
||||
|
||||
@@ -976,8 +990,8 @@
|
||||
},
|
||||
tnMeMetaDesc: function(desc) {
|
||||
this.setState({
|
||||
sidePanelTitle: desc.public.vcard.fn,
|
||||
sidePanelAvatar: makeImageUrl(desc.public.vcard.photo)
|
||||
sidePanelTitle: desc.public.fn,
|
||||
sidePanelAvatar: makeImageUrl(desc.public.photo)
|
||||
});
|
||||
},
|
||||
// Sending "received" notifications
|
||||
@@ -1076,240 +1090,5 @@
|
||||
document.getElementById('mountPoint')
|
||||
);
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var materialColorIndex = ["red", "green", "blue", "yellow", "grey", "pink", "light-green", "indigo", "deep-purple",
|
||||
"light-blue", "deep-orange", "cyan", "lime","amber", "purple", "orange", "teal", "brown", "blue-grey"];
|
||||
var materialShadeIndex = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"];
|
||||
var materialColor = {
|
||||
"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