continuation of embed modal interfacing

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

diff --git a/mod/ecml/languages/en.php b/mod/ecml/languages/en.php
index 415dcb6f1846c6da4d5decace8637df415937e22..a1be61a5f0d41d206d96a9a7c1ec3c491093fe45 100644 (file)
--- a/mod/ecml/languages/en.php
+++ b/mod/ecml/languages/en.php
@@ -88,7 +88,7 @@ grid below.
 
        // embed support
        'ecml:embed:web_services' => 'Web Services',
-       'ecml:embed:instructions' => 'Select a service for instructions on how to get embed code or paste the code in directly.',
+       'ecml:embed:instructions' => 'Select a service for instructions on how to get embed code or paste the url in directly.',
 
 
 );

diff --git a/mod/ecml/views/default/ecml/admin/css.php b/mod/ecml/views/default/ecml/admin/css.php
index 07c8311dcb10ec0758cef444003ddcf1c8fa842b..d91fd779c2b047e8c2c5bf3aa634c9111dc07a77 100644 (file)
--- 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 0a65a851f3bef2be1b17bb8f785c4a4a94d055be..ecd023011b4cedfbdda58b5b296e72a8c67137ea 100644 (file)
--- 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');