Permalink
Browse files

animate channel tab sliding, user toggle logo, inline embed toggler

  • Loading branch information...
1 parent ea0d352 commit c96f4cf95c6030ea0aeca5575b208de68ef14f43 @ngokevin committed Sep 21, 2012
@@ -130,6 +130,12 @@
right: 0;
width: 55px;
z-index: 3; }
+ .container-fluid #user-window-toggle img {
+ position: absolute;
+ top: 18px;
+ left: 18px;
+ height: 30px;
+ width: 30px; }
.container-fluid #user-window-toggle:hover {
background: rgba(67, 73, 80, 0.5);
cursor: pointer; }
@@ -165,6 +165,13 @@
right: 0;
width: 55px;
z-index: 3;
+ img {
+ position: absolute;
+ top: 18px;
+ left: 18px;
+ height: 30px;
+ width: 30px;
+ }
&:hover {
background: rgba(67, 73, 80, .5);
cursor: pointer;
View
@@ -356,6 +356,11 @@ html { overflow: hidden; }
white-space: pre;
}
+div.embed-toggle {
+ display: inline;
+ margin-left: 5px;
+}
+
.chat-message .embed img{
display: block;
max-width: 100%;
View
@@ -30,7 +30,7 @@ $(function() {
try {
window.unity.api = external.getUnityObject(1.0);
window.unity.init({
- name: "Subay IRC",
+ name: "Subway IRC",
iconUrl: window.location.protocol+"//"+window.location.host+"/assets/images/subway.png",
onInit: function() {
window.unity.connected = true;
@@ -87,7 +87,7 @@ $(function() {
alert('You were disconnected from the server.');
$('.container-fluid').css('opacity', '0.5');
});
-
+
irc.socket.on('register_success', function(data) {
$('#overview').html(ich.overview_connection());
@@ -102,9 +102,9 @@ $(function() {
$.each(data.channels, function(key, value){
var chanName = value.serverName.toLowerCase();
if(chanName[0] == '#'){
- irc.chatWindows.add({name: chanName});
+ irc.chatWindows.add({name: chanName, initial: true});
} else {
- irc.chatWindows.add({name: chanName, type: 'pm'});
+ irc.chatWindows.add({name: chanName, type: 'pm', initial: true});
}
var channel = irc.chatWindows.getByName(chanName);
var channelTabs = irc.appView.channelList.channelTabs;
@@ -274,38 +274,41 @@ $(function() {
var output = '';
channel = irc.chatWindows.getByName(data.name);
- $.each(data.messages.reverse(), function(index, message){
- if($('#' + message._id).length) {
- return true; //continue to next iteration
- }
-
- var type = '';
- var message_html;
- if (message.message.substr(1, 6) === 'ACTION') {
- message_html = ich.action({
- user: message.user,
- content: message.message.substr(8),
- renderedTime: utils.formatDate(message.date)
- }, true);
- } else {
- message_html = ich.message({
- user: message.user,
- content: message.message,
- renderedTime: utils.formatDate(message.date)
- }, true);
- }
-
-
- if(message.user == irc.me.get('nick')){
- type = 'message-me';
- } else {
- message_html = utils.mentions(message_html);
- }
+ if (data.messages) {
+ $.each(data.messages.reverse(), function(index, message){
+ if($('#' + message._id).length) {
+ return true; //continue to next iteration
+ }
+
+ var type = '';
+ var message_html;
+ if (message.message.substr(1, 6) === 'ACTION') {
+ message_html = ich.action({
+ user: message.user,
+ content: message.message.substr(8),
+ renderedTime: utils.formatDate(message.date)
+ }, true);
+ } else {
+ message_html = ich.message({
+ user: message.user,
+ content: message.message,
+ renderedTime: utils.formatDate(message.date)
+ }, true);
+ }
+
+
+ if(message.user == irc.me.get('nick')){
+ type = 'message-me';
+ } else {
+ message_html = utils.mentions(message_html);
+ }
+
+ message_html = utils.linkify(message_html);
+ message_html = "<div id=\"" + message._id + "\" class=\"message-box " + type + "\">" + message_html + "</div>";
+ output += message_html;
+ });
+ }
- message_html = utils.linkify(message_html);
- message_html = "<div id=\"" + message._id + "\" class=\"message-box " + type + "\">" + message_html + "</div>";
- output += message_html;
- });
var old_height = channel.view.$('#chat-contents')[0].scrollHeight;
channel.view.$('#chat-contents').prepend(output);
var new_height = channel.view.$('#chat-contents')[0].scrollHeight+1000-old_height;
@@ -25,7 +25,7 @@ var ChannelListView = Backbone.View.extend({
if(name[0] === '#' || name === 'status'){
view.setActive();
- if ($el.css('position') == 'fixed') {
+ if ($el.css('position') == 'fixed' && !(chatWindow.get('initial'))) {
// MOBILE: navigate the tab list all the way to the right, to the
// newest tab.
$el.css('left', -1 * (this.channelTabs.length - 1) *
@@ -36,24 +36,30 @@ var ChannelListView = Backbone.View.extend({
slidePrev: function() {
// MOBILE: slide the tab list left, but don't let first tab hit the left.
- var $el = $(this.el);
- if ($el.css('position') != 'fixed') { return; }
+ var that = this;
+ setTimeout(function() {
+ var $el = $(that.el);
+ if ($el.css('position') != 'fixed') { return; }
- var left = parseInt($el.css('left'), 10);
- if (left < BTN_WIDTH) {
- $el.css('left', left + TAB_WIDTH + 'px');
- }
+ var left = parseInt($el.css('left'), 10);
+ if (left < BTN_WIDTH) {
+ $el.animate({'left': left + TAB_WIDTH + 'px'}, 100);
+ }
+ }, 200);
},
slideNext: function() {
// MOBILE: slide the tab list right, but don't go farther than last tabs.
- var $el = $(this.el);
- if ($el.css('position') != 'fixed') { return; }
+ var that = this;
+ setTimeout(function() {
+ var $el = $(that.el);
+ if ($el.css('position') != 'fixed') { return; }
- var left = parseInt($el.css('left'), 10);
- if (left >= -1 * (this.channelTabs.length - 2) * TAB_WIDTH) {
- $el.css('left', left - TAB_WIDTH + 'px');
- }
+ var left = parseInt($el.css('left'), 10);
+ if (left >= -1 * (that.channelTabs.length - 2) * TAB_WIDTH) {
+ $el.animate({'left': left - TAB_WIDTH + 'px'}, 100);
+ }
+ }, 200);
},
});
View
@@ -116,6 +116,7 @@ script(id="chat", type="text/html")
span(class='window_title') User List
#user-list.bar
#user-window-toggle
+ img(src="/assets/images/register.svg")
script(id="channel", type="text/html")
span(class="channel-name") {{name}}
@@ -145,7 +146,7 @@ script(id="link", type="text/html")
a(target="_blank", href="{{link}}") {{link}}
script(id="image_embed", type="text/html")
- div
+ div.embed-toggle
a.hide_embed
i(class="icon-chevron-up")
a.show_embed.hide

0 comments on commit c96f4cf

Please sign in to comment.