continuation of embed modal interfacing

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

2 files changed, 62 insertions, 13 deletions

diff --git a/mod/ecml/views/default/ecml/admin/css.php b/mod/ecml/views/default/ecml/admin/css.php
index 07c8311dc..d91fd779c 100644
--- a/mod/ecml/views/default/ecml/admin/css.php
+++ b/mod/ecml/views/default/ecml/admin/css.php
@@ -37,8 +37,53 @@
 	padding:0;
 	display:inline;
 }
-h2.embed_content_section {
-	margin:0 0 10px 0;
-	padding:10px 0;
-	border-bottom:1px solid #cccccc;
-}
\ No newline at end of file
+.embed_content_section {
+	border:none;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	background-color:#EEEEEE;
+	margin:10px 0 10px 0;
+	padding:5px;
+	width:auto;
+}
+.ecml_generated_code {
+	color:#666666;
+	font-size:85%;
+	font-style:normal;
+	line-height: 1.3em;
+	margin:5px 0;
+}
+.ecml_embed_instructions,
+.ecml_embed_preview {
+	background-image: url(<?php echo $vars['url']; ?>_graphics/elgg_sprites.png);
+	background-repeat: no-repeat;
+	background-position: 0px -367px;
+	padding-left: 12px;
+}
+.ecml_embed_instructions.open,
+.ecml_embed_preview.open {
+	background-position: 0px -388px;
+}
+#embed_service_url {
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	background-color:#EEEEEE;
+	margin:10px 0 10px 0;
+	padding:5px;
+	width:auto;
+}
+#embed_ecml_keyword_help,
+#ecml_preview {
+	padding:10px;
+}
+#ecml_preview object,
+#ecml_preview embed {
+	width: auto;
+	max-height:240px;
+}
+#embed_submit {
+	margin:10px 0 0 0;
+}
+
+
+
diff --git a/mod/ecml/views/default/embed/web_services/content.php b/mod/ecml/views/default/embed/web_services/content.php
index 0a65a851f..ecd023011 100644
--- a/mod/ecml/views/default/embed/web_services/content.php
+++ b/mod/ecml/views/default/embed/web_services/content.php
@@ -53,14 +53,16 @@ echo '<p>' . elgg_echo('ecml:embed:instructions') . '</p>';
 
 echo $keywords_html;
 
-echo "<h2 class='embed_content_section instructions hidden'><a class='ecml_embed_instructions link'>Instructions</a></h2><div id='embed_ecml_keyword_help' class='hidden'></div>";
+echo "<div class='embed_content_section instructions hidden'><a class='ecml_embed_instructions link'>Instructions</a>";
+echo "<div id='embed_ecml_keyword_help' class='hidden'></div></div>";
 
-echo "<h2 class='embed_content_section'>URL</h2><div id='embed_ecml_url'>".$input."</div>";
+echo "<div id='embed_service_url'><label>URL".$input."</label>";
+echo "<div class='ecml_generated_code'>ECML: <span id='ecml_code'></span></div></div>";
 
-echo "<p>ECML: <span id='ecml_code'></span></p>";
-
-echo "<h2 class='embed_content_section preview hidden'><a class='ecml_embed_preview link'>Preview</a></h2><div id='ecml_preview' class='hidden'></div>";
+echo "<div class='embed_content_section preview hidden'><a class='ecml_embed_preview link'>Preview</a>";
+echo "<div id='ecml_preview' class='hidden'></div></div>";
 
+echo "<div class='divider margin_top'></div>";
 echo $embed;
 
 ?>
@@ -69,11 +71,13 @@ echo $embed;
 
 $(document).ready(function() {
 	$('a.ecml_embed_instructions.link').click(function() {
-		elgg_slide_toggle($(this), '#facebox', '#embed_ecml_keyword_help');
+		elgg_slide_toggle($(this), '.embed_content_section.instructions', '#embed_ecml_keyword_help');
+		$('.ecml_embed_instructions').toggleClass('open');
 	});
 	
 	$('a.ecml_embed_preview.link').click(function() {
-		elgg_slide_toggle($(this), '#facebox', '#ecml_preview');
+		elgg_slide_toggle($(this), '.embed_content_section.preview', '#ecml_preview');
+		$('.ecml_embed_instructions').toggleClass('open');
 	});
 });
 
@@ -137,7 +141,6 @@ $(function() {
 
 		// fire off a preview attempt
 		if (selected_service) {
-			$('.embed_content_section.preview').removeClass('hidden'); // reveal preview link/panel
 			rest_timeout_id = setTimeout(generate_ecml, rest_min_time);
 		}
 	};
@@ -169,6 +172,7 @@ $(function() {
 				$('#ecml_preview').html(data.html);
 				$('#ecml_code').html(data.ecml);
 				$('body').data('elgg_embed_ecml', data.ecml);
+				$('.embed_content_section.preview').removeClass('hidden'); // reveal preview link/panel
 
 				// set status for embed button
 				embed_button.removeAttr('disabled').removeClass('embed_disabled').removeClass('embed_warning').addClass('embed_good');