Bunch of UI fixes/improvements for attachments (hover, overlay, notice view,

clip)

6 files changed, 116 insertions, 41 deletions

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('<button>&#215;</button>');
+            $('#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');
+        }
+    );
+}
+
diff --git a/lib/attachmentlist.php b/lib/attachmentlist.php
index d0478bad3..559962acc 100644
--- a/lib/attachmentlist.php
+++ b/lib/attachmentlist.php
@@ -80,10 +80,10 @@ class AttachmentList extends Widget
 
     function show()
     {
-        $this->out->elementStart('dl', array('id' =>'attachment'));
+        $this->out->elementStart('dl', array('id' =>'attachments'));
         $this->out->element('dt', null, _('Attachments'));
         $this->out->elementStart('dd');
-        $this->out->elementStart('ul', array('class' => 'attachments'));
+        $this->out->elementStart('ol', array('class' => 'attachments'));
 
         $atts = new File;
         $att = $atts->getAttachments($this->notice->id);
@@ -93,7 +93,7 @@ class AttachmentList extends Widget
         }
 
         $this->out->elementEnd('dd');
-        $this->out->elementEnd('ul');
+        $this->out->elementEnd('ol');
         $this->out->elementEnd('dl');
 
         return count($att);
diff --git a/theme/base/css/display.css b/theme/base/css/display.css
index 9bc1417b1..16c9e3c00 100644
--- a/theme/base/css/display.css
+++ b/theme/base/css/display.css
@@ -855,20 +855,6 @@ display:inline-block;
 text-transform:lowercase;
 }
 
-.notice .attachment {
-position:relative;
-}
-.notice .attachment img {
-position:absolute;
-top:18px;
-left:0;
-z-index:99;
-}
-#shownotice .notice .attachment img {
-position:static;
-}
-
-
 .notice-options {
 position:relative;
 font-size:0.95em;
@@ -936,6 +922,59 @@ padding:0;
 }
 
 
+.notice .attachment {
+position:relative;
+padding-left:16px;
+}
+#attachments .attachment {
+padding-left:0;
+}
+.notice .attachment img {
+position:absolute;
+top:18px;
+left:0;
+z-index:99;
+}
+#shownotice .notice .attachment img {
+position:static;
+}
+
+#attachments {
+clear:both;
+float:left;
+width:100%;
+margin-top:18px;
+}
+#attachments dt {
+font-weight:bold;
+font-size:1.3em;
+margin-bottom:4px;
+}
+
+#attachments li {
+margin-bottom:18px;
+list-style-type:decimal;
+float:left;
+clear:both;
+}
+
+#jOverlayContent,
+#jOverlayContent #content {
+width: auto !important;
+}
+#jOverlayContent .external span {
+display:block;
+margin-bottom:11px;
+}
+#jOverlayContent button {
+position:absolute;
+top:0;
+right:0;
+padding:3px 4px;
+font-weight:bold;
+}
+
+
 #usergroups #new_group {
 float: left;
 margin-right: 2em;
diff --git a/theme/base/images/icons/twotone/green/clip-02.gif b/theme/base/images/icons/twotone/green/clip-02.gif
new file mode 100644
index 000000000..77a729799
--- /dev/null
+++ b/theme/base/images/icons/twotone/green/clip-02.gif
diff --git a/theme/default/css/display.css b/theme/default/css/display.css
index 737db7ce9..e08a4783b 100644
--- a/theme/default/css/display.css
+++ b/theme/default/css/display.css
@@ -175,6 +175,12 @@ background-image:url(../../base/images/icons/twotone/green/shield.gif);
 }
 
 /* NOTICES */
+.notice .attachment {
+background:transparent url(../../base/images/icons/twotone/green/clip-02.gif) no-repeat 0 45%;
+}
+#attachments .attachment {
+background:none;
+}
 .notice-options .notice_reply a,
 .notice-options form input.submit {
 background-color:transparent;
diff --git a/theme/identica/css/display.css b/theme/identica/css/display.css
index f7abac482..1f1298737 100644
--- a/theme/identica/css/display.css
+++ b/theme/identica/css/display.css
@@ -175,6 +175,12 @@ background-image:url(../../base/images/icons/twotone/green/shield.gif);
 }
 
 /* NOTICES */
+.notice .attachment {
+background:transparent url(../../base/images/icons/twotone/green/clip-02.gif) no-repeat 0 45%;
+}
+#attachments .attachment {
+background:none;
+}
 .notice-options .notice_reply a,
 .notice-options form input.submit {
 background-color:transparent;