From 17a168956076455f6c6b00c892d8846813544300 Mon Sep 17 00:00:00 2001 From: Rodolphe Breard Date: Thu, 15 Nov 2012 01:45:45 +0100 Subject: [PATCH] improved tabs --- CREDITS.md | 5 ++ chromesoul.css | 29 ++++++++-- chromesoul.html | 2 +- img/preferences.png | Bin 0 -> 1014 bytes img/user-available.png | Bin 0 -> 1036 bytes img/user-away.png | Bin 0 -> 1064 bytes img/user-busy.png | Bin 0 -> 972 bytes img/user-idle.png | Bin 0 -> 1037 bytes img/user-invisible.png | Bin 0 -> 959 bytes img/user-offline.png | Bin 0 -> 1076 bytes lib/nsui.js | 107 +++++++++++++++++++++------------- lib/options.js | 3 - lib/tab.nsui.js | 128 +++++++++++++++++++++++++++++++++++++++++ start.js | 11 +++- 14 files changed, 233 insertions(+), 52 deletions(-) create mode 100644 img/preferences.png create mode 100644 img/user-available.png create mode 100644 img/user-away.png create mode 100644 img/user-busy.png create mode 100644 img/user-idle.png create mode 100644 img/user-invisible.png create mode 100644 img/user-offline.png create mode 100644 lib/tab.nsui.js diff --git a/CREDITS.md b/CREDITS.md index 3d7bf16..7c363c2 100644 --- a/CREDITS.md +++ b/CREDITS.md @@ -7,6 +7,11 @@ * Patrick Marie aka mycroft for his documentation about the NetSoul protocol +## [Gnome 2.18 icon theme](http://art.gnome.org/themes/icon) + +* AMAZIGH Aneglus + + ## [JSHash (JavaScript MD5)](http://pajhome.org.uk/crypt/md5) * Paul Johnston diff --git a/chromesoul.css b/chromesoul.css index 3ba0b1c..df19eae 100644 --- a/chromesoul.css +++ b/chromesoul.css @@ -7,13 +7,17 @@ #tab-lst > li { display: inline; margin: 0; - padding: 2px 20px 2px 20px; + padding: 2px 10px 2px 10px; border-top: 1px solid #aaa; border-right: 1px solid #aaa; border-radius: 8px 8px 0 0; color: #aaa; } +#tab-lst > li > span::selection { + background: transparent; +} + #tab-lst > li:first-child { border-left: 1px solid #aaa; } @@ -44,7 +48,7 @@ overflow-y: scroll; } -.chat-msg { +.chat-input { margin: 5px 0 0 0; padding: 0; height: 20px; @@ -53,10 +57,25 @@ outline: 1px solid #aaa; } -.chat-msg:focus { +.chat-input-wrapper { + background-image: url('img/user-offline.png'); + background-repeat: no-repeat; + background-position: left bottom; + padding-left: 24px; +} + +.chat-input:focus { outline-offset: 0; } -.capitalize { - text-transform: capitalize; +#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; } diff --git a/chromesoul.html b/chromesoul.html index 7428374..f176498 100644 --- a/chromesoul.html +++ b/chromesoul.html @@ -9,7 +9,7 @@

Welcome to chromesoul

diff --git a/img/preferences.png b/img/preferences.png new file mode 100644 index 0000000000000000000000000000000000000000..eb28840aa6fbcb03ec8d2a095cab0eb8bb937ed8 GIT binary patch literal 1014 zcmVgSB~TO zh8G*NWl~93CVZ&Xboimdf)9@!IkrQYBfkm&v{Wp%=jEwikSp1tSU7H)nw~&zjtX}Z z!nXV2=9cDH)#|P9TRW_(@vGxunxaPmfKDb;?5yU4e+bRa{@LH>aJQwMQG^g!JFTUxMA8jHw5e2z-@W^B z?X%BRF;15=;a^#%8k-u#!-FFskH`D9+jYir|7%pb#1&u~iVm6zZ%=>!|C<@f} z{l_i2N@>>zM-8%Ta~!P{C(wQBOH7=57gw%a-n=|E=A$W!B_KXN8aaCMq~jVz2tjeJ zT}?C6OUA0lige|VN=GJ_K;mI?{``-dc``oy`b)ZO!~W-)zn7P>MYRQiI{~;)ySPYb zeJ=$Ns`$W(pWkV(*6}n;kBr}hoEGrQ#S5``G`g?4Bzaw~V1GB6OglzLM>m#yw?z6{ zgIKFAWE{@kN%3~W@s53!J1aOLi~ecKi_k^{zj?0ncQ<3bD^t!%0BAqlrjW5R%rDF* z<9uS<;LzZO;-aFmq>$w4ED>$lSzN$enqI)_+B*Ec#U#%K)gx$tJzn$H{IgSR~?AyMt0IJ=tW&z$|jJ2P{m zPOsN1SJ&=nR07*qoM6N<$f)cCcmH+?% literal 0 HcmV?d00001 diff --git a/img/user-available.png b/img/user-available.png new file mode 100644 index 0000000000000000000000000000000000000000..12f43ff5ca994d8b5db07e737566c890c16e6739 GIT binary patch literal 1036 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 Hu0mjfez(@v literal 0 HcmV?d00001 diff --git a/img/user-invisible.png b/img/user-invisible.png new file mode 100644 index 0000000000000000000000000000000000000000..f73116aebddd4314c65620f36f4376e0443521f1 GIT binary patch literal 959 zcmV;w13>(VP)AVO?!Z)ABOQ*>c;b#rrNa{^^MrT_o{ z7j#8fbU}4=Xm4@=Okr?uAVXnnVQpb2*7d}uF$485;7R@|vCds|W#dLHkEmqrqk#O$0`S|WhAk4BX06=GFXDAXWM)02* z8SxA0blNM|?7@S91xz!$6=)xUG{zVJKm!99P_8ROL;wK_R9P#gvFpkc$9sA%e=$6% zbtUTRTj~}jbOr{7F&G2JZeT#EAOZnUgc6ttLP$;Y&J$i~~-oI%D&~D@l`7q}kf#>t{-4|B=`*ce=aq8F; z(+nYB$cF*I5W)ok;GDyF_1}dU=LY$Q9jOY*zIg-z*k} zCsnEfJJiwkSq0w7J-ZHE>+kQa*UV_T7dAx|7*?&_BsXqrHVq|^9sQ{0#+Pf|XAYAe_)63CAI^8@=8NYqE~Zkc zS4Jk2d7a5*x&T}Ppic&_t*wm}glK#A_|e`CTbqrh^;?Wc*o2gUx;tR6a~wwi7y&Sx zN~OTce~`b$wrw3i-I67XmaSN|`dBO$YueU)Aav_STII8%+Vi|Z<$hyIQ~;J`NdTX0 z+a7-V_Whg2#>O?GC{8OW8z$O6W#b7>5CxE2w_)w}@1xmE@p#;;>`&SF&sdgK0Pxbb h?I8euJRTp{{|Nz4aNzL#Y~BC>002ovPDHLkV1g`enh^j1 literal 0 HcmV?d00001 diff --git a/img/user-offline.png b/img/user-offline.png new file mode 100644 index 0000000000000000000000000000000000000000..c5fa77c3f1f62ac867c62965d2fb87f1d73c1946 GIT binary patch literal 1076 zcmV-41k3x0P)AVO?!Z)ABOQ*>c;b#rrNa{^^MrT_o{ z7j#8fbU}4=Xm4@=Okr?uAVXnnVQpbUiik>}94#1Z zh#H~A+K84Iu7#ddD{7kCotv9`wl8+~vWXW6KJ3iS>^$>*zVm%%W}Rxa3c&pQeD27R zW*@I2(!O*3`uBNqqi2Ys_XHf(byex}iplOOsfi+y^^W1kg@uKtYdVK! zN@H(L9vk-^*L7nc6~iU3UEl&pf+R^pL@?I!XMJ<>@#DG$mQ>5Mr^ZVs9F#&NohTrJ zB*j|6q{XCti?M>Xg0XSoVq(8++r2r8bL;&d@nDI|>{UBImAK*!_)tq}n$V3TEAD{)(dmDLqCHaD?W*x1}; z_0~!(kFX<^2#IQ zXTM98|VSC%)xdl#^C)o;YSKDj=R}?{zCNJ3)#_ruXu|3%`-L|p9 zw%$FSo<0DpG8${GyC4Qa5po1-dHb8Ft*t?_o z!NH>w$B#QhgC3si>{D`hu0km&zR{0T5Jk}MI^|nm zz;>ll!L3%S5%6D9_O)8A=3Kpe^~J0ZmUKE8S5hj-4-edz*}%jJKH#bP__?;apE z03-yqYPDMP(W6VxDwRqp48u>Q(<%1y&-uQ8P;3Bv-;aFX*Q=|m&)4s*Z;T8Vp5MNG u=WpNlqpY8k{!CxjYPH%xwOZACzyA-NSn+}-@`jQC0000= 0; --i) { - logs[i].scrollTop = 42000; - } -}; - -Nsui.prototype.set_current = function(tab_name) { - var tabs = document.getElementById('tab-lst').children; - for (var i = tabs.length - 1; i >= 0; --i) { - if (tabs[i].innerHTML === tab_name) { - tabs[i].classList.remove('tab-active'); - tabs[i].classList.add('tab-current'); - } else { - tabs[i].classList.remove('tab-current'); - } - } -}; - -Nsui.prototype.show_tab = function(tab_name) { - var tabs = document.getElementById('tab-body-wrapper').children; - for (var i = tabs.length - 1; i >= 0; --i) { - tabs[i].style.display = 'none'; - } - document.getElementById(tab_name).style.display = 'block'; - this.set_current(tab_name); - this.scroll_down(); -}; - -Nsui.prototype.init = function() { - var tab_body, tab_lst = document.getElementById('tab-lst').children; - - this.show_tab('configuration'); - for (var i = tab_lst.length - 1; i >= 0; --i) { - tab_body = document.getElementById(tab_lst[i].innerHTML); - tab_lst[i].addEventListener('click', function() { - show_tab(this.innerHTML); - }, false); - } + this.tab_lst = []; }; Nsui.prototype.setReconnect = function(func) { document.getElementById('reconnect').addEventListener('click', func, false); }; + +Nsui.prototype.getWidgetByName = function(name) { + var i, ret = null; + + for (i = this.tab_lst.length - 1; i >= 0; --i) { + if (this.tab_lst[i].name === name) { + ret = this.tab_lst[i]; + break ; + } + } + + return ret; +} + +Nsui.prototype.registerTab = function(tab) { + this.tab_lst.push(tab); +}; + +Nsui.prototype.unRegisterTab = function(tab) { + this.tab_lst = this.tab_lst.filter(function(element, index, array) { + return tab.name !== element.name; + }); +}; + +Nsui.prototype.init = function() { + var sh = function(elem) { + return function() { + for (var i = elem.tab_lst.length - 1; i >= 0; --i) { + elem.tab_lst[i].hide(); + } + this.classList.add('tab-current'); + document.getElementById('configuration').style.display = 'block'; + }; + }; + + document.getElementById('tab-config').addEventListener('click', sh(this), false); + + /* + var i, t, tabs = ['guitto_f', 'cadore_s', 'baud_c', 'bastie_j'], onTabDelete = function(elem) { + return function(tab) { + var n = tab.getNextTabName(), t = elem.getWidgetByName(tab.name); + + if (t !== null) { + elem.unRegisterTab(t); + } + if (n !== null) { + n = elem.getWidgetByName(n); + if (n !== null) { + n.show(); + } + } else { + document.getElementById('configuration').style.display = 'block'; + } + }; + }; + + for (i = 0; i < tabs.length; i++) { + t = new Tab(tabs[i]); + this.registerTab(t); + t.registerCloseHandler(onTabDelete(this)); + t.appendText(tabs[i] + ': Salut Rodolphe !'); + t.appendText(tabs[i] + ': Ça va ?'); + } + */ +}; diff --git a/lib/options.js b/lib/options.js index e19ba7c..e7679f5 100644 --- a/lib/options.js +++ b/lib/options.js @@ -134,6 +134,3 @@ OptionsManager.prototype.encrypt = function(value) { OptionsManager.prototype.decrypt = function(value) { return value; }; - -var opt_mgr = new OptionsManager(); -opt_mgr.init(); diff --git a/lib/tab.nsui.js b/lib/tab.nsui.js new file mode 100644 index 0000000..056d184 --- /dev/null +++ b/lib/tab.nsui.js @@ -0,0 +1,128 @@ +// +// Copyright (c) 2012 Rodolphe Breard +// +// Permission to use, copy, modify, and/or distribute this software for any +// purpose with or without fee is hereby granted, provided that the above +// copyright notice and this permission notice appear in all copies. +// +// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES +// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF +// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR +// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES +// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN +// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF +// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. +// + +var Tab = function(name) { + this.closeHandler = null; + this.name = this.filterName(name); + this.wr_lst = document.getElementById('tab-lst'); + this.wr_body = document.getElementById('tab-body-wrapper'); + this.initListElement(); + this.initBodyElement(); +}; + +Tab.prototype.filterName = function(name) { + // TODO: enforce an id compliant name + return name; +}; + +Tab.prototype.initListElement = function() { + 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; + this.el_lst = document.createElement('li'); + this.el_lst.addEventListener('click', evt_click(this), false); + this.el_lst.addEventListener('dblclick', evt_dblclick(this), false); + + this.el_lst.appendChild(inner); + this.wr_lst.appendChild(this.el_lst); +}; + +Tab.prototype.initBodyElement = function() { + var chat_input = document.createElement('input'), + chat_input_w = document.createElement('div'); + + this.chat_log = document.createElement('p'); + this.chat_log.classList.add('chat-log'); + this.el_body = document.createElement('div'); + this.el_body.classList.add('tab-body'); + this.el_body.id = this.name; + this.el_body.style.display = 'none'; + chat_input_w.classList.add('chat-input-wrapper'); + chat_input.classList.add('chat-input'); + chat_input.setAttribute('type', 'text'); + + chat_input_w.appendChild(chat_input); + this.el_body.appendChild(this.chat_log); + this.el_body.appendChild(chat_input_w); + this.wr_body.appendChild(this.el_body); +}; + +Tab.prototype.registerCloseHandler = function(func) { + this.closeHandler = func; +}; + +Tab.prototype.getNextTabName = function() { + var i, prev = null; + + for (i = this.wr_body.children.length - 1; i > 1; --i) { + if (this.wr_body.children[i].id === this.name) { + if (prev === null) { + prev = this.wr_body.children[i - 1].id; + } + break ; + } + prev = this.wr_body.children[i].id; + } + + return prev; +} + +Tab.prototype.close = function() { + if (this.closeHandler !== null) { + this.closeHandler(this); + } + this.wr_body.removeChild(this.el_body); + this.wr_lst.removeChild(this.el_lst); +}; + +Tab.prototype.hide = function() { + this.el_lst.classList.remove('tab-current'); + this.el_body.style.display = 'none'; +}; + +Tab.prototype.show = function() { + for (var i = this.wr_body.children.length - 1; i >= 0; --i) { + this.wr_body.children[i].style.display = 'none'; + } + this.el_body.style.display = 'block'; + this.chat_log.scrollTop = 42000; + this.setCurrent(); +}; + +Tab.prototype.setCurrent = function() { + var i, elems = document.getElementsByClassName('tab-current'); + + for (i = elems.length - 1; i >= 0; --i) { + elems[i].classList.remove('tab-current'); + } + this.el_lst.classList.remove('tab-active'); + this.el_lst.classList.add('tab-current'); +} + +Tab.prototype.appendText = function(text) { + // TODO: flush text + this.chat_log.innerHTML += text + '
'; +}; diff --git a/start.js b/start.js index 974dbdb..417eaae 100644 --- a/start.js +++ b/start.js @@ -1,8 +1,15 @@ -var ui = new Nsui(), - cs = new NsClient(); +var om, ui, cs; + +om = new OptionsManager(); +om.init(); + +ui = new Nsui(); ui.init(); + +cs = new NsClient(); cs.init(); + ui.setReconnect(function() { cs.disconnect(); cs.connect();