View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 0011910 | mantisbt | attachments | public | 2010-05-11 08:35 | 2010-05-29 10:49 |
| Reporter | klkl | Assigned To | |||
| Priority | normal | Severity | feature | Reproducibility | N/A |
| Status | new | Resolution | open | ||
| Product Version | git trunk | ||||
| Summary | 0011910: Enhanced attachment previews (patch) | ||||
| Description | Show/hide button to image attachment previews (same as there's for text) Configuration option to show only limited number of images. The default is 3. Remaining images can be shown via aforementioned button. | ||||
| Additional Information | Patch for git master. | ||||
| Tags | patch | ||||
| Attached Files | images.patch (14,321 bytes)
From 65ee2f39b955c10750d0a972e78c0311fa10872d Mon Sep 17 00:00:00 2001
From: Kornel Lesinski <kornel@aardvarkmedia.co.uk>
Date: Tue, 11 May 2010 12:17:17 +0100
Subject: [PATCH 1/3] Cleaned up HTML and JS of bug attachments
---
core/print_api.php | 51 +++++++++++++++++++++++----------------------------
css/default.css | 4 ++++
2 files changed, 27 insertions(+), 28 deletions(-)
diff --git a/core/print_api.php b/core/print_api.php
index 5ea497b..6452f2a 100644
--- a/core/print_api.php
+++ b/core/print_api.php
@@ -1586,7 +1586,7 @@ function print_sql_error( $p_query ) {
# Get icon corresponding to the specified filename
function print_file_icon( $p_filename ) {
$t_icon = file_get_icon_url( $p_filename );
- echo '<img src="' . $t_icon['url'] . '" alt="' . $t_icon['alt'] . ' file icon" width="16" height="16" border="0" />';
+ echo '<img src="' . $t_icon['url'] . '" alt="' . $t_icon['alt'] . '" width="16" height="16" border="0" />';
}
# Prints an RSS image that is hyperlinked to an RSS feed.
@@ -1661,18 +1661,27 @@ function print_bug_attachments_list( $p_bug_id ) {
$t_attachments_count = count( $t_attachments );
$i = 0;
- $image_previewed = false;
+
+ echo "<script type=\"text/javascript\">
+ function attachement_toggle( cid ) {
+ var show = document.getElementById( 'showSection_' + cid );
+ var hide = document.getElementById( 'hideSection_' + cid );
+
+ if ( show.style.display == 'none' ) {
+ show.style.display = ''; hide.style.display = 'none';
+ } else {
+ show.style.display = 'none'; hide.style.display = '';
+ }
+ }
+ </script>";
foreach ( $t_attachments as $t_attachment ) {
+ echo '<div class="attachment">';
+
$t_file_display_name = string_display_line( $t_attachment['display_name'] );
$t_filesize = number_format( $t_attachment['size'] );
$t_date_added = date( config_get( 'normal_date_format' ), $t_attachment['date_added'] );
- if ( $image_previewed ) {
- $image_previewed = false;
- echo '<br />';
- }
-
if ( $t_attachment['can_download'] ) {
$t_href_start = "<a href=\"file_download.php?file_id={$t_attachment['id']}&type=bug\">";
$t_href_end = '</a>';
@@ -1683,7 +1692,7 @@ function print_bug_attachments_list( $p_bug_id ) {
if ( !$t_attachment['exists'] ) {
print_file_icon( $t_file_display_name );
- echo ' <span class="strike">' . $t_file_display_name . '</span>' . lang_get( 'word_separator' ) . '(' . lang_get( 'attachment_missing' ) . ')';
+ echo ' <del>' . $t_file_display_name . '</del>' . lang_get( 'word_separator' ) . '(' . lang_get( 'attachment_missing' ) . ')';
} else {
echo $t_href_start;
print_file_icon( $t_file_display_name );
@@ -1703,19 +1712,10 @@ function print_bug_attachments_list( $p_bug_id ) {
$c_id = db_prepare_int( $t_attachment['id'] );
$t_bug_file_table = db_get_table( 'bug_file' );
- echo "<script type=\"text/javascript\">
-<!--
-function swap_content( span ) {
-displayType = ( document.getElementById( span ).style.display == 'none' ) ? '' : 'none';
-document.getElementById( span ).style.display = displayType;
-}
-
- -->
- </script>";
- echo " <span id=\"hideSection_$c_id\">[<a class=\"small\" href='#' id='attmlink_" . $c_id . "' onclick='swap_content(\"hideSection_" . $c_id . "\");swap_content(\"showSection_" . $c_id . "\");return false;'>" . lang_get( 'show_content' ) . "</a>]</span>";
- echo " <span style='display:none' id=\"showSection_$c_id\">[<a class=\"small\" href='#' id='attmlink_" . $c_id . "' onclick='swap_content(\"hideSection_" . $c_id . "\");swap_content(\"showSection_" . $c_id . "\");return false;'>" . lang_get( 'hide_content' ) . "</a>]";
+ echo " <span class=\"hide-section\" id=\"hideSection_$c_id\">[<a class=\"small\" href='#' onclick='attachement_toggle(\"$c_id\");return false;'>" . lang_get( 'show_content' ) . "</a>]</span>";
+ echo " <div class=\"show-section\" style='display:none' id=\"showSection_$c_id\">[<a class=\"small\" href='#' onclick='attachement_toggle(\"$c_id\");return false;'>" . lang_get( 'hide_content' ) . "</a>]";
- echo "<pre>";
+ echo '<pre class="text-preview">';
/** @todo Refactor into a method that gets contents for download / preview. */
switch( config_get( 'file_upload_method' ) ) {
@@ -1744,7 +1744,7 @@ document.getElementById( span ).style.display = displayType;
}
echo htmlspecialchars( $v_content );
- echo "</pre></span>\n";
+ echo "</pre></div>\n";
}
if ( $t_attachment['can_download'] && $t_attachment['preview'] && $t_attachment['type'] == 'image' ) {
@@ -1762,15 +1762,10 @@ document.getElementById( span ).style.display = displayType;
$t_preview_style = 'style="' . $t_preview_style . '"';
$t_title = file_get_field( $t_attachment['id'], 'title' );
- echo "\n<br />$t_href_start<img alt=\"$t_title\" $t_preview_style src=\"file_download.php?file_id={$t_attachment['id']}&type=bug\" />$t_href_end";
- $image_previewed = true;
+ echo "<div class=\"image-preview\">$t_href_start<img alt=\"$t_title\" $t_preview_style src=\"file_download.php?file_id={$t_attachment['id']}&type=bug\" />$t_href_end</div>";
}
}
-
- if ( $i != ( $t_attachments_count - 1 ) ) {
- echo "<br />\n";
- $i++;
- }
+ echo '</div>';
}
}
diff --git a/css/default.css b/css/default.css
index 0fd1312..8f4743a 100644
--- a/css/default.css
+++ b/css/default.css
@@ -81,6 +81,10 @@ tr.print-category { color: #000000; font-weight: bold; }
#buglist tr { text-align: center; }
+div.attachment { padding: 0; }
+div.attachment pre { white-space:-moz-pre-wrap; white-space: pre-wrap; }
+div.attachment div.show-section { padding:0; display:inline; }
+
tr.bugnote .bugnote-meta { background-color: #c8c8e8; color: #000000; font-weight: bold; width: 25%; line-height: 1.4; vertical-align: top; }
tr.bugnote .bugnote-note { background-color: #e8e8e8; color: #000000; width: 75%; vertical-align: top; }
tr.bugnote .time-tracked,
--
1.7.0.2
From 1cfb0d06a2574b88a1bd1e234e0218dd9c7272a2 Mon Sep 17 00:00:00 2001
From: Kornel Lesinski <kornel@aardvarkmedia.co.uk>
Date: Tue, 11 May 2010 13:11:49 +0100
Subject: [PATCH 2/3] Added show/hide content links to image attachment previews.
---
core/print_api.php | 28 ++++++++++++++++++++--------
1 files changed, 20 insertions(+), 8 deletions(-)
diff --git a/core/print_api.php b/core/print_api.php
index 6452f2a..9bed59c 100644
--- a/core/print_api.php
+++ b/core/print_api.php
@@ -1654,6 +1654,19 @@ function get_dropdown( $p_control_array, $p_control_name, $p_match = '', $p_add_
return $t_info;
}
+/**
+ * @access private
+ */
+function print_bug_attachment_with_show_hide( $p_attachment, $p_markup ) {
+
+ $t_id = $p_attachment['id'];
+
+ echo " <span class=\"hide-section\" id=\"hideSection_$t_id\">[<a class=\"small\" href='#hideSection_$t_id' onclick='attachement_toggle(\"$t_id\");return false;'>" . lang_get( 'show_content' ) . "</a>]</span>";
+ echo " <div class=\"show-section\" style='display:none' id=\"showSection_$t_id\">[<a class=\"small\" href='#hideSection_$t_id' onclick='attachement_toggle(\"$t_id\");return false;'>" . lang_get( 'hide_content' ) . "</a>]";
+ echo $p_markup;
+ echo "</div>\n";
+}
+
# List the attachments belonging to the specified bug. This is used from within
# bug_view_page.php
function print_bug_attachments_list( $p_bug_id ) {
@@ -1712,11 +1725,6 @@ function print_bug_attachments_list( $p_bug_id ) {
$c_id = db_prepare_int( $t_attachment['id'] );
$t_bug_file_table = db_get_table( 'bug_file' );
- echo " <span class=\"hide-section\" id=\"hideSection_$c_id\">[<a class=\"small\" href='#' onclick='attachement_toggle(\"$c_id\");return false;'>" . lang_get( 'show_content' ) . "</a>]</span>";
- echo " <div class=\"show-section\" style='display:none' id=\"showSection_$c_id\">[<a class=\"small\" href='#' onclick='attachement_toggle(\"$c_id\");return false;'>" . lang_get( 'hide_content' ) . "</a>]";
-
- echo '<pre class="text-preview">';
-
/** @todo Refactor into a method that gets contents for download / preview. */
switch( config_get( 'file_upload_method' ) ) {
case DISK:
@@ -1743,8 +1751,10 @@ function print_bug_attachments_list( $p_bug_id ) {
$v_content = $row['content'];
}
- echo htmlspecialchars( $v_content );
- echo "</pre></div>\n";
+ $t_markup = "<pre class=\"text-preview\">\n"; # <pre> consumes first newline
+ $t_markup .= htmlspecialchars( $v_content ) . "</pre>";
+
+ print_bug_attachment_with_show_hide( $t_attachment, $t_markup );
}
if ( $t_attachment['can_download'] && $t_attachment['preview'] && $t_attachment['type'] == 'image' ) {
@@ -1762,7 +1772,9 @@ function print_bug_attachments_list( $p_bug_id ) {
$t_preview_style = 'style="' . $t_preview_style . '"';
$t_title = file_get_field( $t_attachment['id'], 'title' );
- echo "<div class=\"image-preview\">$t_href_start<img alt=\"$t_title\" $t_preview_style src=\"file_download.php?file_id={$t_attachment['id']}&type=bug\" />$t_href_end</div>";
+ $t_markup = "<div class=\"image-preview\">$t_href_start<img alt=\"$t_title\" $t_preview_style src=\"file_download.php?file_id={$t_attachment['id']}&type=bug\" />$t_href_end</div>";
+
+ print_bug_attachment_with_show_hide( $t_attachment, $t_markup );
}
}
echo '</div>';
--
1.7.0.2
From c6fcf277d059de1f4e349ae383e752dbe46ce2e1 Mon Sep 17 00:00:00 2001
From: Kornel Lesinski <kornel@aardvarkmedia.co.uk>
Date: Tue, 11 May 2010 13:28:26 +0100
Subject: [PATCH 3/3] Added option to limit number of image attachments displayed inline.
---
config_defaults_inc.php | 7 +++++++
core/file_api.php | 19 ++++++++++++++-----
core/print_api.php | 12 ++++++++++--
3 files changed, 31 insertions(+), 7 deletions(-)
diff --git a/config_defaults_inc.php b/config_defaults_inc.php
index f852da3..3500bf5 100644
--- a/config_defaults_inc.php
+++ b/config_defaults_inc.php
@@ -1976,6 +1976,13 @@ $g_fileinfo_magic_db_file = '';
$g_preview_attachments_inline_max_size = 256 * 1024;
/**
+ * Specifies maximum number of image attachements visible inline.
+ * Remaining attachements will be visible after clicking "Show Content".
+ * @global int $g_preview_attachments_inline_max_count
+ */
+$g_preview_attachments_inline_max_count = 3;
+
+/**
* Extensions for text files that can be expanded inline.
* @global array $g_preview_text_extensions
*/
diff --git a/core/file_api.php b/core/file_api.php
index 4ead250..63fc234 100644
--- a/core/file_api.php
+++ b/core/file_api.php
@@ -268,6 +268,7 @@ function file_normalize_attachment_path( $p_diskfile, $p_project_id ) {
# exists - Applicable for DISK attachments. true: file exists, otherwise false.
# can_delete - The logged in user can delete the attachments.
# preview - true: the attachment should be previewable, otherwise false.
+# preview_expanded - true: the attachment should be shown inline by default
# type - Can be "image", "text" or empty for other types.
# alt - The alternate text to be associated with the icon.
# icon - array with icon information, contains 'url' and 'alt' elements.
@@ -287,7 +288,6 @@ function file_get_visible_attachments( $p_bug_id ) {
$t_preview_text_ext = config_get( 'preview_text_extensions' );
$t_preview_image_ext = config_get( 'preview_image_extensions' );
- $image_previewed = false;
for( $i = 0;$i < $t_attachments_count;$i++ ) {
$t_row = $t_attachment_rows[$i];
@@ -309,15 +309,12 @@ function file_get_visible_attachments( $p_bug_id ) {
$t_attachment['download_url'] = "file_download.php?file_id=$t_id&type=bug";
}
- if( $image_previewed ) {
- $image_previewed = false;
- }
-
$t_attachment['exists'] = config_get( 'file_upload_method' ) != DISK || file_exists( $t_diskfile );
$t_attachment['icon'] = file_get_icon_url( $t_attachment['display_name'] );
$t_attachment['can_delete'] = $t_can_delete;
$t_attachment['preview'] = false;
+ $t_attachment['preview_expanded'] = false;
$t_attachment['type'] = '';
$t_ext = strtolower( file_get_extension( $t_attachment['display_name'] ) );
@@ -338,6 +335,18 @@ function file_get_visible_attachments( $p_bug_id ) {
$t_attachments[] = $t_attachment;
}
+ # Expand latest images by iterating from the end
+ $t_maximum_expanded_previews = config_get( 'preview_attachments_inline_max_count' );
+ for( $i = count($t_attachments)-1; $i >= 0; $i-- ) {
+ if ( $t_attachments[$i]['preview'] && $t_attachments[$i]['type'] === 'image') {
+
+ if ( $t_maximum_expanded_previews <= 0 ) break;
+ $t_maximum_expanded_previews--;
+
+ $t_attachments[$i]['preview_expanded'] = true;
+ }
+ }
+
return $t_attachments;
}
diff --git a/core/print_api.php b/core/print_api.php
index 9bed59c..db77465 100644
--- a/core/print_api.php
+++ b/core/print_api.php
@@ -1661,8 +1661,16 @@ function print_bug_attachment_with_show_hide( $p_attachment, $p_markup ) {
$t_id = $p_attachment['id'];
- echo " <span class=\"hide-section\" id=\"hideSection_$t_id\">[<a class=\"small\" href='#hideSection_$t_id' onclick='attachement_toggle(\"$t_id\");return false;'>" . lang_get( 'show_content' ) . "</a>]</span>";
- echo " <div class=\"show-section\" style='display:none' id=\"showSection_$t_id\">[<a class=\"small\" href='#hideSection_$t_id' onclick='attachement_toggle(\"$t_id\");return false;'>" . lang_get( 'hide_content' ) . "</a>]";
+ if ( $p_attachment['preview_expanded'] ) {
+ $hide_visibility = "style='display:none'";
+ $show_visibility = "";
+ } else {
+ $hide_visibility = "";
+ $show_visibility = "style='display:none'";
+ }
+
+ echo " <span class=\"hide-section\" $hide_visibility id=\"hideSection_$t_id\">[<a class=\"small\" href='#hideSection_$t_id' onclick='attachement_toggle(\"$t_id\");return false;'>" . lang_get( 'show_content' ) . "</a>]</span>";
+ echo " <div class=\"show-section\" $show_visibility id=\"showSection_$t_id\">[<a class=\"small\" href='#hideSection_$t_id' onclick='attachement_toggle(\"$t_id\");return false;'>" . lang_get( 'hide_content' ) . "</a>]";
echo $p_markup;
echo "</div>\n";
}
--
1.7.0.2
| ||||
