Better displaying of full screenshots in plugins admin.

git-svn-id: http://code.elgg.org/elgg/trunk@8036 36083f99-b078-4883-b0ff-0f9b5a30f544

3 files changed, 48 insertions, 7 deletions

diff --git a/views/default/admin/components/plugin.php b/views/default/admin/components/plugin.php
index 0185ba0ff..5a3bdad8a 100644
--- a/views/default/admin/components/plugin.php
+++ b/views/default/admin/components/plugin.php
@@ -122,8 +122,6 @@ if ($categories) {
 	$categories_html = implode(', ', $categories_arr);
 }
 
-// @todo We need to make a page handler to read these files in.
-// this is broken.
 $screenshots_html = '';
 $screenshots = $plugin->manifest->getScreenshots();
 if ($screenshots) {
@@ -188,22 +186,23 @@ if (elgg_view_exists($settings_view)) {
 
 		<div class="manifest_file hidden">
 
-		<div><?php echo elgg_echo('admin:plugins:label:location') . ": " . htmlspecialchars($plugin->getPath()) ?></div>
 		<?php
-		if ($categories_html) {
+		if ($screenshots_html) {
 			?>
-			<div><?php echo elgg_echo('admin:plugins:label:categories') . ": " . $categories_html; ?></div>
+			<div><ul><?php echo $screenshots_html; ?></ul></div>
 			<?php
 		}
 
-		if ($screenshots_html) {
+		if ($categories_html) {
 			?>
-			<div><ul><?php echo $screenshots_html; ?></ul></div>
+			<div><?php echo elgg_echo('admin:plugins:label:categories') . ": " . $categories_html; ?></div>
 			<?php
 		}
+
 		?>
 		<div><?php echo elgg_echo('admin:plugins:label:copyright') . ": " . $copyright; ?></div>
 		<div><?php echo elgg_echo('admin:plugins:label:licence') . ": " . $license; ?></div>
+		<div><?php echo elgg_echo('admin:plugins:label:location') . ": " . htmlspecialchars($plugin->getPath()) ?></div>
 
 		<div><?php echo elgg_echo('admin:plugins:label:dependencies'); ?>:
 		<?php
diff --git a/views/default/admin/plugins/advanced.php b/views/default/admin/plugins/advanced.php
index 0815739f5..2e05ae7ee 100644
--- a/views/default/admin/plugins/advanced.php
+++ b/views/default/admin/plugins/advanced.php
@@ -88,10 +88,42 @@ foreach ($installed_plugins as $plugin) {
 	));
 }
 ?>
+
 <script type="text/javascript">
 	$(document).ready(function() {
 		$('a.manifest_details.link').click(function() {
 			elgg_slide_toggle($(this), '.plugin_details', '.manifest_file');
 		});
+
+
+		$('.elgg-plugin-screenshot a').click(function(e) {
+			e.preventDefault();
+			var lb = $('.elgg-plugin-screenshot-lightbox');
+
+			if (lb.length < 1) {
+				$('body').append('<div class="elgg-plugin-screenshot-lightbox"></div>');
+				lb = $('.elgg-plugin-screenshot-lightbox');
+
+				lb.click(function() {
+					lb.hide();
+				});
+
+				$(document).click(function(e) {
+					var target = $(e.target);
+					if (target.is('a') && target.hasClass('elgg-plugin-screenshot-lightbox')) {
+						lb.hide();
+						e.preventDefault();
+					}
+				});
+			}
+
+			var img = '<img class="pas" src="' + $(this).attr('href') + '">';
+			lb.html(img);
+
+			top_pos = $(window).scrollTop() + 10 + 'px';
+			left_pos = $(window).scrollLeft() + 5 + 'px';
+
+			lb.css('top', top_pos).css('left', left_pos).show();
+		});
 	});
 </script>
\ No newline at end of file
diff --git a/views/default/css/admin.php b/views/default/css/admin.php
index de421c124..eec474dd4 100644
--- a/views/default/css/admin.php
+++ b/views/default/css/admin.php
@@ -961,6 +961,16 @@ ul.admin_plugins {
 .elgg-plugin-screenshot {
 	display: inline;
 }
+.elgg-plugin-screenshot-lightbox {
+	display: block;
+	position: absolute;
+	width: 99%;
+	text-align: center;
+	background-color: #eeeeee;
+	border: 1px solid #999999;
+	-moz-border-radius: 8px;
+	-webkit-border-radius: 8px;
+}
 .active {
 	border:1px solid #999999;
 	background:white;