From: Sarven Capadisli Date: Wed, 27 May 2009 19:43:43 +0000 (+0000) Subject: Bunch of UI fixes/improvements for attachments (hover, overlay, notice view, X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=60ac9bc6fda74278d98890a2c26f3834acad8222;p=quix0rs-gnu-social.git Bunch of UI fixes/improvements for attachments (hover, overlay, notice view, clip) --- diff --git a/js/util.js b/js/util.js index b1b6ec82bd..08cc1d3705 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'); + } + ); +} + diff --git a/lib/attachmentlist.php b/lib/attachmentlist.php index d0478bad35..559962acca 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 9bc1417b17..16c9e3c009 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 0000000000..77a729799b Binary files /dev/null and b/theme/base/images/icons/twotone/green/clip-02.gif differ diff --git a/theme/default/css/display.css b/theme/default/css/display.css index 737db7ce96..e08a4783bd 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 f7abac4823..1f1298737c 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;