rodolphe/chromesoul
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UI recasting: new look, avatars, history and so on and so forth

Browse source
This commit is contained in:
Rodolphe Breard 2013-01-12 13:34:16 +01:00
parent b3039e534a
commit ddfca60134
18 changed files with 275 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CREDITS.md
View file

@ -1,6 +1,7 @@
## [Chromesoul](https://github.com/TychoBrahe/chromesoul) ## [Chromesoul](https://github.com/TychoBrahe/chromesoul)
* Rodolphe Breard * Rodolphe Breard (development)
* Romain Mardargent (design)
### Special thanks ### Special thanks

153
chromesoul.css
View file

@ -1,18 +1,50 @@
#l-lst { /*
* Page itself
*/
body {
margin: 0;
padding: 0;
background: #347db0 url(img/chromesoul-logo.png) no-repeat 10px 10px;
}
/*
* Top menu
*/
#user-status {
position: fixed;
right: 285px;
top: 10px;
margin: 0;
padding: 0;
width: 150px;
}
#settings-btn {
position: fixed;
right: 222px;
top: 10px;
margin: 0;
padding: 0;
}
/*
* Contact list
*/
#contact-lst-wrapper {
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
margin: 0;
padding: 0 5px 0 5px; padding: 0 5px 0 5px;
width: 200px; width: 200px;
height: 100%; height: 100%;
border-left: 1px solid #aaa; border-left: 1px solid #aaa;
} background-color: #e4e4e4;
box-shadow: 0px 0px 10px #666;
#l-lst > h2 { overflow-y: scroll;
margin: 0;
padding: 0;
text-align: center;
font-size: 1em;
} }
#contact-lst { #contact-lst {
@ -23,15 +55,53 @@
#contact-lst > li { #contact-lst > li {
margin: 5px 0 0 0; margin: 5px 0 0 0;
padding: 5px; padding: 5px 5px 5px 28px;
border: 1px solid #aaa; border: 1px solid #aaa;
background-size: 23px 26px;
background-repeat: no-repeat;
} }
#r-lst { #add-contact::-webkit-input-placeholder {
padding-right: 210px; color: rgba(52, 125, 176, 0.42);
}
#add-contact {
padding: 2px;
outline: 0px solid #aaa;
width: 184px;
height: 20px;
margin: 5px 0 0 0;
}
#add-contact, #contact-lst > li {
box-shadow: inset 0px 0px 1px #666;
background-color: #f3f3f3;
border: 1px solid #347db0;
color: #347db0;
font-family: monospace;
}
.remove {
float: right;
font-family: sans-serif;
font-size: 12px;
cursor: pointer;
}
/*
* Main content
*/
#main-ctn {
margin: 135px 0 0 0;
padding: 10px 220px 10px 10px;
min-width: 400px; min-width: 400px;
} }
/*
* Tabs
*/
#tab-lst { #tab-lst {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -75,6 +145,10 @@
margin: 5px; margin: 5px;
} }
/*
* Chat
*/
.chat-log { .chat-log {
margin: 0; margin: 0;
padding: 2px 5px 2px 0; padding: 2px 5px 2px 0;
@ -84,38 +158,23 @@
font-family: monospace; font-family: monospace;
} }
#add-contact, .chat-input {
padding: 0; .chat-input-wrapper {
border-style: none; padding-right: 2px;
outline: 1px solid #aaa; }
.chat-input {
padding: 0px;
outline: 0px solid #aaa;
width: 100%; width: 100%;
height: 20px; height: 20px;
margin: 5px 0 0 0; margin: 5px 0 0 0;
} }
#add-contact:focus, .chat-input:focus { .chat-input:focus {
outline-offset: 0; outline-offset: 0;
} }
.chat-input-wrapper {
background-image: url('img/user-offline.png');
background-repeat: no-repeat;
background-position: left bottom;
padding-left: 24px;
}
#tab-lst > #tab-config {
background-image: url('img/preferences.png');
background-repeat: no-repeat;
background-position: center;
padding-left: 12px;
padding-right: 12px;
}
#tab-config > span {
display: none;
}
.spk-oth { .spk-oth {
color: red; color: red;
} }
@ -124,9 +183,23 @@
color: blue; color: blue;
} }
.remove { /*
float: right; * Scrollbar
font-family: sans-serif; */
font-size: 12px;
cursor: pointer; ::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: green;
}
::-webkit-scrollbar-track-piece {
background-color: #e4e4e4;
}
::-webkit-scrollbar-thumb {
height: 40px;
background-color: #347db0;
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
} }

25
chromesoul.html
View file

@ -6,30 +6,29 @@
<link rel="stylesheet" type="text/css" media="all" href="chromesoul.css"> <link rel="stylesheet" type="text/css" media="all" href="chromesoul.css">
</head> </head>
<body> <body>
<h1>Welcome to chromesoul</h1> <p id="user-status">
<p>
Status: <span id="status_txt"></span><br> Status: <span id="status_txt"></span><br>
<button id="reconnect">Reconnect</button> <button id="reconnect">Reconnect</button>
</p> </p>
<div id="l-lst"> <div id="settings-btn"><img src="img/settings.png" atl="settings"></div>
<h2>Contacts</h2>
<div id="contact-lst-wrapper">
<input type="text" id="add-contact" placeholder="New contact"> <input type="text" id="add-contact" placeholder="New contact">
<ul id="contact-lst"></ul> <ul id="contact-lst"></ul>
</div> </div>
<div id="r-lst"> <div id="main-ctn">
<ul id="tab-lst"> <p id="pre-conf-pannel">You haven't configured chromesoul yet, you should go to the configuration pannel.</p>
<li id="tab-config"><span>configuration</span></li> <div id="config-pannel">
</ul> Login: <input type="text" id="login" class="opt" value=""><br>
<div id="tab-body-wrapper"> Password (socks): <input type="password" id="pwd_socks" class="opt" value=""><br>
<div id="configuration" class="tab-body">
Login: <input type="text" id="login" class="opt"><br>
Password (socks): <input type="password" id="pwd_socks" class="opt"><br>
Enable messages: <input type="checkbox" id="enable_msg" class="opt" checked="checked"><br> Enable messages: <input type="checkbox" id="enable_msg" class="opt" checked="checked"><br>
<button id="save">Save</button> <span id="status"></span> <button id="save">Save</button> <span id="status"></span>
</div> </div>
<div id="chat-pannel">
<ul id="tab-lst"></ul>
<div id="tab-body-wrapper"></div>
</div> </div>
</div> </div>

BIN
img/chromesoul-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
img/default-avatar.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
img/preferences.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1,014 B

BIN
img/settings.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

BIN
img/user-available.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1 KiB

BIN
img/user-away.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1 KiB

BIN
img/user-busy.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 972 B

BIN
img/user-idle.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1 KiB

BIN
img/user-invisible.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 959 B

BIN
img/user-offline.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

61
lib/contacts.nsui.js
View file

@ -16,27 +16,59 @@
var ContactList = function() { var ContactList = function() {
this.storage = chrome.storage.sync; this.storage = chrome.storage.sync;
this.contacts = {}; this.contacts = {}; // {<name>: {name: <string>, li: <DOM element>, avatar: <url>}}
this.lst = document.getElementById("contact-lst"); this.lst = document.getElementById("contact-lst");
}; };
ContactList.prototype.insertContact = function(elem) { ContactList.prototype.insertContact = function(elem) {
var i, nb_el = this.lst.children.length; var i, next = null;
for (i = 0; i < nb_el; i++) { for (i in this.contacts) {
if (this.lst.children[i].children[0].innerHTML > elem.children[0].innerHTML) { if (this.contacts.hasOwnProperty(i)) {
this.lst.insertBefore(elem, this.lst.children[i]); if (elem.name < this.contacts[i].name && (next === null || this.contacts[i].name < next.name)) {
return ; next = this.contacts[i];
} }
} }
this.lst.appendChild(elem); }
if (next !== null) {
this.lst.insertBefore(elem.li, next.li);
} else {
this.lst.appendChild(elem.li);
}
}; };
ContactList.prototype.getContactPic = function(elem, infos) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.epitech.eu/intra/photos/" + infos.name + ".jpg", true);
xhr.responseType = "blob";
xhr.onload = (function(el) {
return function(e) {
if (e.target.status === 200) {
infos.avatar = window.webkitURL.createObjectURL(this.response);
} else {
infos.avatar= "img/default-avatar.jpg";
}
elem.style.backgroundImage = "url('" + infos.avatar + "')";
};
})(this);
xhr.send();
}
ContactList.prototype.addContact = function(name) { ContactList.prototype.addContact = function(name) {
var li = null, login = null, close = null; var infos = {}, li = null, login = null, close = null;
if (typeof this.contacts[name] === "undefined") { if (typeof this.contacts[name] === "undefined") {
infos = {
"name": name,
"li": null,
"avatar": null
};
li = document.createElement("li"); li = document.createElement("li");
this.getContactPic(li, infos);
login = document.createElement("span"); login = document.createElement("span");
close = document.createElement("span"); close = document.createElement("span");
close.classList.add("remove"); close.classList.add("remove");
@ -55,20 +87,19 @@ ContactList.prototype.addContact = function(name) {
elem.rmContact(name); elem.rmContact(name);
}; };
})(this)); })(this));
this.contacts[name] = li;
infos.li = li;
this.contacts[name] = infos;
this.save(); this.save();
this.insertContact(li); this.insertContact(infos);
} }
}; };
ContactList.prototype.rmContact = function(name) { ContactList.prototype.rmContact = function(name) {
for (var i = this.lst.children.length - 1; i >= 0; --i) { if (typeof this.contacts[name] !== "undefined") {
if (this.lst.children[i].children[0].innerHTML === name) { this.lst.removeChild(this.contacts[name].li);
this.lst.removeChild(this.lst.children[i]);
delete this.contacts[name]; delete this.contacts[name];
this.save(); this.save();
break ;
}
} }
}; };

33
lib/ns_client.js
View file

@ -57,22 +57,31 @@ var NsClient = function() {
})(this); })(this);
}; };
NsClient.prototype.replacePairs = function(str, pairs) {
for (var i in pairs) {
if (pairs.hasOwnProperty(i)) {
str = str.replace(pairs[i], i);
}
}
return str;
}
NsClient.prototype.msgDecode = function(msg) { NsClient.prototype.msgDecode = function(msg) {
msg = unescape(msg) return this.replacePairs(unescape(msg), {
msg = msg.replace('&commat;', '@'); "@": /%40/g,
msg = msg.replace('&ast;', '*'); "*": /%2A/g,
msg = msg.replace('&sol;', '/'); "/": /%2F/g,
msg = msg.replace('&plus;', '+'); "+": /%2B/g
return msg; });
}; };
NsClient.prototype.msgEncode = function(msg) { NsClient.prototype.msgEncode = function(msg) {
msg = escape(msg) return this.replacePairs(escape(msg), {
msg = msg.replace('@', '&commat;'); "%40": /@/g,
msg = msg.replace('*', '&ast;'); "%2A": /\*/g,
msg = msg.replace('/', '&sol;'); "%2F": /\//g,
msg = msg.replace('+', '&plus;'); "%2B": /\+/g,
return msg; });
}; };
NsClient.prototype.connect = function() { NsClient.prototype.connect = function() {

57
lib/nsui.js
View file

@ -39,13 +39,10 @@ Nsui.prototype.deleteTab = function(tab) {
if (new_tab !== null) { if (new_tab !== null) {
new_tab.show(); new_tab.show();
} else {
document.getElementById("configuration").style.display = "block";
} }
}; };
Nsui.prototype.hideAllTabs = function() { Nsui.prototype.hideAllTabs = function() {
document.getElementById("configuration").style.display = "none";
for (i = this.tab_lst.length - 1; i >= 0; --i) { for (i = this.tab_lst.length - 1; i >= 0; --i) {
this.tab_lst[i].hide(); this.tab_lst[i].hide();
} }
@ -86,7 +83,9 @@ Nsui.prototype.addNewTab = function(tab_name) {
if (tab === null) { if (tab === null) {
tab = this.createTab(tab_name); tab = this.createTab(tab_name);
} }
if (!tab.isCurrent()) { if (this.tab_lst.length <= 1) {
tab.show();
} else if (!tab.isCurrent()) {
tab.setActive(); tab.setActive();
} }
@ -98,7 +97,7 @@ Nsui.prototype.addContentToTab = function(tab_name, content) {
if ($cs.opts.get("enable_msg")) { if ($cs.opts.get("enable_msg")) {
tab = this.addNewTab(tab_name); tab = this.addNewTab(tab_name);
tab.appendText(this.formatMessage(content)); tab.appendMessage(content);
} }
}; };
@ -122,23 +121,40 @@ Nsui.prototype.formatMessage = function(msg) {
fmt += '<span class="spk-me">' + document.getElementById('login').value + ': </span>'; fmt += '<span class="spk-me">' + document.getElementById('login').value + ': </span>';
} }
msg.message = msg.message.replace("<", "&lt;"); fmt += this.sanitizeText(msg.message);
msg.message = msg.message.replace(">", "&gt;"); fmt += "<br>";
fmt += msg.message;
fmt += '<br>';
return fmt; return fmt;
}; };
Nsui.prototype.init = function() { Nsui.prototype.sanitizeText = function(str) {
document.getElementById("tab-config").addEventListener("click", (function(elem) { return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
return function() { };
for (var i = elem.tab_lst.length - 1; i >= 0; --i) {
elem.tab_lst[i].hide(); Nsui.prototype.showContent = function(part_id) {
var i, ctn_lst = ["config-pannel", "chat-pannel", "pre-conf-pannel"];
for (i = ctn_lst.length - 1; i>= 0; --i) {
if (ctn_lst[i] === part_id) {
document.getElementById(ctn_lst[i]).style.display = "block";
} else {
document.getElementById(ctn_lst[i]).style.display = "none";
} }
this.classList.add("tab-current"); }
document.getElementById("configuration").style.display = "block"; };
Nsui.prototype.switchContent = function(part_id, part_id_to) {
if (document.getElementById(part_id).style.display !== "block") {
this.showContent(part_id);
} else {
this.showContent(part_id_to);
}
}
Nsui.prototype.init = function() {
document.getElementById("settings-btn").addEventListener("click", (function(elem) {
return function() {
elem.switchContent("config-pannel", "chat-pannel");
}; };
})(this), false); })(this), false);
@ -153,4 +169,11 @@ Nsui.prototype.init = function() {
elem.hideAllTabs(); elem.hideAllTabs();
}; };
})(this); })(this);
this.showContent("chat-pannel");
setTimeout(function() {
if ($cs.opts.get("login") === null || $cs.opts.get("pwd_socks") === null) {
$cs.ui.showContent("pre-conf-pannel");
}
}, 600);
}; };

53
lib/tab.nsui.js
View file

@ -19,27 +19,19 @@ var Tab = function(name) {
this.chat_input = null; this.chat_input = null;
this.wr_lst = document.getElementById("tab-lst"); this.wr_lst = document.getElementById("tab-lst");
this.wr_body = document.getElementById("tab-body-wrapper"); this.wr_body = document.getElementById("tab-body-wrapper");
this.buff_len = 1000;
this.history_index = 0;
this.history = [];
this.initListElement(); this.initListElement();
this.initBodyElement(); this.initBodyElement();
}; };
Tab.prototype.filterName = function(name) { Tab.prototype.filterName = function(name) {
// TODO: enforce an id compliant name return name.replace(/[^a-z0-9\-_]/g, "").replace(/^[0-9]/g, "_");
return name;
}; };
Tab.prototype.initListElement = function() { Tab.prototype.initListElement = function() {
var inner = document.createElement("span"), var inner = document.createElement("span");
evt_click = function(elem) {
return function() {
elem.show();
};
},
evt_dblclick = function(elem) {
return function() {
elem.close();
};
};
inner.innerHTML = this.name; inner.innerHTML = this.name;
this.el_lst = document.createElement("li"); this.el_lst = document.createElement("li");
@ -73,7 +65,9 @@ Tab.prototype.initBodyElement = function() {
this.chat_input.setAttribute("type", "text"); this.chat_input.setAttribute("type", "text");
this.chat_input.addEventListener("keyup", (function(elem) { this.chat_input.addEventListener("keyup", (function(elem) {
return function(event) { return function(event) {
if (event.keyCode == 13 && this.value != "") { var key_submit = 13, key_up = 38, key_down = 40;
if (event.keyCode === key_submit && this.value != "") {
var msg = this.value; var msg = this.value;
this.value = ""; this.value = "";
@ -83,6 +77,20 @@ Tab.prototype.initBodyElement = function() {
} else { } else {
console.error("chromesoul client not found"); console.error("chromesoul client not found");
} }
} else if (event.keyCode === key_up) {
if (elem.history_index < elem.history.length) {
elem.history_index++;
this.value = elem.history[elem.history.length - elem.history_index];
}
} else if (event.keyCode === key_down) {
if (elem.history_index > 0) {
elem.history_index--;
if (elem.history_index > 0) {
this.value = elem.history[elem.history.length - elem.history_index];
} else {
this.value = "";
}
}
} }
}; };
})(this), false); })(this), false);
@ -128,13 +136,22 @@ Tab.prototype.setActive = function() {
Tab.prototype.flushText = function() { Tab.prototype.flushText = function() {
var str = this.chat_log.innerHTML, sep = "<br>", t = str.split(sep); var str = this.chat_log.innerHTML, sep = "<br>", t = str.split(sep);
if (t.length > 1000) { if (t.length > this.buff_len + 1) {
this.chat_log.innerHTML = str.substring(str.indexOf(sep) + sep.length); this.chat_log.innerHTML = str.substring(str.indexOf(sep) + sep.length);
} }
while (this.history.length > this.buff_len) {
this.history.shift();
}
}; };
Tab.prototype.appendText = function(text) { Tab.prototype.appendMessage = function(msg) {
this.history_index = 0;
this.chat_log.innerHTML += $cs.ui.formatMessage(msg);
if (!(typeof msg.login !== "undefined" && msg.login !== null)) {
this.history.push(msg.message);
}
this.flushText(); this.flushText();
this.chat_log.innerHTML += text; this.chat_log.scrollTop = 42 * this.buff_len;
this.chat_log.scrollTop = 42000;
}; };

3
manifest.json
View file

@ -1,6 +1,6 @@
{ {
"name": "chromesoul", "name": "chromesoul",
"version": "0.3.4", "version": "0.4.2",
"minimum_chrome_version": "24", "minimum_chrome_version": "24",
"manifest_version": 2, "manifest_version": 2,
"offline_enabled": false, "offline_enabled": false,
@ -11,6 +11,7 @@
} }
}, },
"permissions": [ "permissions": [
"http://www.epitech.eu/intra/photos/",
"background", "background",
"storage", "storage",
{"socket": ["tcp-connect:ns-server.epita.fr:4242"]} {"socket": ["tcp-connect:ns-server.epita.fr:4242"]}