From 60ac9bc6fda74278d98890a2c26f3834acad8222 Mon Sep 17 00:00:00 2001 From: Sarven Capadisli Date: Wed, 27 May 2009 19:43:43 +0000 Subject: Bunch of UI fixes/improvements for attachments (hover, overlay, notice view, clip) --- js/util.js | 72 +++++++++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 48 insertions(+), 24 deletions(-) (limited to 'js') diff --git a/js/util.js b/js/util.js index b1b6ec82b..08cc1d370 100644 --- a/js/util.js +++ b/js/util.js @@ -17,30 +17,6 @@ */ $(document).ready(function(){ - $('a.attachment').click(function() {$().jOverlay({url: $('address .url')[0].href+'/attachment/' + ($(this).attr('id').substring('attachment'.length + 1)) + '/ajax'}); return false; }); - $("a.thumbnail").hover( - function() { - var anchor = $(this); - $("a.thumbnail").children('img').remove(); - - setTimeout(function() { - anchor.closest(".entry-title").addClass('ov'); - $.get($('address .url')[0].href+'/attachment/' + (anchor.attr('id').substring('attachment'.length + 1)) + '/thumbnail', null, function(data) { - anchor.append(data); - }); - }, 250); - - setTimeout(function() { - anchor.children('img').remove(); - anchor.closest(".entry-title").removeClass('ov'); - }, 3000); - }, - function() { - $(this).children('img').remove(); - $(this).closest(".entry-title").removeClass('ov'); - } - ); - // count character on keyup function counter(event){ var maxLength = 140; @@ -238,6 +214,7 @@ $(document).ready(function(){ $("#form_notice").each(addAjaxHidden); NoticeHover(); NoticeReply(); + NoticeAttachments(); }); @@ -276,3 +253,50 @@ function NoticeReplySet(nick,id) { } return true; } + +function NoticeAttachments() { + $.fn.jOverlay.options = { + method : 'GET', + data : '', + url : '', + color : '#000', + opacity : '0.6', + zIndex : 9999, + center : true, + imgLoading : $('address .url')[0].href+'theme/base/images/illustrations/illu_progress_loading-01.gif', + bgClickToClose : true, + success : function() { + $('#jOverlayContent').append(''); + $('#jOverlayContent button').click($.closeOverlay); + }, + timeout : 0 + }; + + $('a.attachment').click(function() { + $().jOverlay({url: $('address .url')[0].href+'/attachment/' + ($(this).attr('id').substring('attachment'.length + 1)) + '/ajax'}); + return false; + }); + $("body:not(#shownotice) a.thumbnail").hover( + function() { + var anchor = $(this); + $("a.thumbnail").children('img').remove(); + anchor.closest(".entry-title").addClass('ov'); + + setTimeout(function() { + $.get($('address .url')[0].href+'/attachment/' + (anchor.attr('id').substring('attachment'.length + 1)) + '/thumbnail', null, function(data) { + anchor.append(data); + }); + }, 500); + + setTimeout(function() { + anchor.children('img').remove(); + anchor.closest(".entry-title").removeClass('ov'); + }, 3000); + }, + function() { + $("a.thumbnail").children('img').remove(); + $(this).closest(".entry-title").removeClass('ov'); + } + ); +} + -- cgit v1.2.3-54-g00ecf From f0dc97e4da16181b0d6a74361734678d0f37fd5e Mon Sep 17 00:00:00 2001 From: Sarven Capadisli Date: Thu, 28 May 2009 22:59:22 +0000 Subject: Smarter call for hover events. It now makes a new GET for attachment thumbnails on mouseover only if it hasn't been requested before on that notice attachment. --- js/util.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'js') diff --git a/js/util.js b/js/util.js index 08cc1d370..6cfad3a8e 100644 --- a/js/util.js +++ b/js/util.js @@ -261,7 +261,7 @@ function NoticeAttachments() { url : '', color : '#000', opacity : '0.6', - zIndex : 9999, + zIndex : '9999', center : true, imgLoading : $('address .url')[0].href+'theme/base/images/illustrations/illu_progress_loading-01.gif', bgClickToClose : true, @@ -279,22 +279,22 @@ function NoticeAttachments() { $("body:not(#shownotice) a.thumbnail").hover( function() { var anchor = $(this); - $("a.thumbnail").children('img').remove(); + $("a.thumbnail").children('img').hide(); anchor.closest(".entry-title").addClass('ov'); - setTimeout(function() { - $.get($('address .url')[0].href+'/attachment/' + (anchor.attr('id').substring('attachment'.length + 1)) + '/thumbnail', null, function(data) { - anchor.append(data); - }); - }, 500); - - setTimeout(function() { - anchor.children('img').remove(); - anchor.closest(".entry-title").removeClass('ov'); - }, 3000); + if (anchor.children('img').length == 0) { + setTimeout(function() { + $.get($('address .url')[0].href+'/attachment/' + (anchor.attr('id').substring('attachment'.length + 1)) + '/thumbnail', null, function(data) { + anchor.append(data); + }); + }, 500); + } + else { + anchor.children('img').show(); + } }, function() { - $("a.thumbnail").children('img').remove(); + $("a.thumbnail").children('img').hide(); $(this).closest(".entry-title").removeClass('ov'); } ); -- cgit v1.2.3-54-g00ecf From 6612993c1d59051bbb4dafed73e0111eec8ccfd6 Mon Sep 17 00:00:00 2001 From: Sarven Capadisli Date: Thu, 28 May 2009 23:16:25 +0000 Subject: Prevents regular hovers over attachment anchors from making a GET request for the thumbnail. There is 500 ms delay while on mouseover state before going ahead with the request. Fun. --- js/util.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/util.js b/js/util.js index 6cfad3a8e..d5697e880 100644 --- a/js/util.js +++ b/js/util.js @@ -276,6 +276,8 @@ function NoticeAttachments() { $().jOverlay({url: $('address .url')[0].href+'/attachment/' + ($(this).attr('id').substring('attachment'.length + 1)) + '/ajax'}); return false; }); + + var t; $("body:not(#shownotice) a.thumbnail").hover( function() { var anchor = $(this); @@ -283,7 +285,7 @@ function NoticeAttachments() { anchor.closest(".entry-title").addClass('ov'); if (anchor.children('img').length == 0) { - setTimeout(function() { + t = setTimeout(function() { $.get($('address .url')[0].href+'/attachment/' + (anchor.attr('id').substring('attachment'.length + 1)) + '/thumbnail', null, function(data) { anchor.append(data); }); @@ -294,6 +296,7 @@ function NoticeAttachments() { } }, function() { + clearTimeout(t); $("a.thumbnail").children('img').hide(); $(this).closest(".entry-title").removeClass('ov'); } -- cgit v1.2.3-54-g00ecf From f56f2f52e74ec3d0037bc33f9bbcee170e982d49 Mon Sep 17 00:00:00 2001 From: Sarven Capadisli Date: Sat, 30 May 2009 19:42:15 +0000 Subject: Some cross-browser updates for conversation UI --- js/util.js | 2 +- theme/base/css/display.css | 12 ++++++++++-- theme/base/css/ie.css | 6 ++++++ 3 files changed, 17 insertions(+), 3 deletions(-) (limited to 'js') diff --git a/js/util.js b/js/util.js index d5697e880..c710ae839 100644 --- a/js/util.js +++ b/js/util.js @@ -261,7 +261,7 @@ function NoticeAttachments() { url : '', color : '#000', opacity : '0.6', - zIndex : '9999', + zIndex : 99, center : true, imgLoading : $('address .url')[0].href+'theme/base/images/illustrations/illu_progress_loading-01.gif', bgClickToClose : true, diff --git a/theme/base/css/display.css b/theme/base/css/display.css index e3c499a5e..5ad4217cd 100644 --- a/theme/base/css/display.css +++ b/theme/base/css/display.css @@ -951,7 +951,7 @@ font-size:1.3em; margin-bottom:4px; } -#attachments li { +#attachments ol li { margin-bottom:18px; list-style-type:decimal; float:left; @@ -962,6 +962,11 @@ clear:both; #jOverlayContent #content, #jOverlayContent #content_inner { width: auto !important; +margin-bottom:0; +} +#jOverlayContent #content { +padding:11px; +min-height:auto; } #jOverlayContent .external span { display:block; @@ -971,8 +976,11 @@ margin-bottom:11px; position:absolute; top:0; right:0; -padding:3px 4px; +width:29px; +height:29px; +text-align:center; font-weight:bold; +padding:0; } #jOverlayContent h1 { max-width:475px; diff --git a/theme/base/css/ie.css b/theme/base/css/ie.css index 5d8bea8ae..df0388a5a 100644 --- a/theme/base/css/ie.css +++ b/theme/base/css/ie.css @@ -30,3 +30,9 @@ margin-right:4px; .entity_profile { width:64%; } +#jOverlayContent .notice * { +z-index:1; +} +#jOverlayContent .notice .attachment img { +z-index:9999; +} -- cgit v1.2.3-54-g00ecf