media manager: fixed and improved diff views

2 files changed, 23 insertions, 31 deletions

diff --git a/lib/scripts/media.js b/lib/scripts/media.js
index 8e4cb64a0..76274c868 100644
--- a/lib/scripts/media.js
+++ b/lib/scripts/media.js
@@ -580,7 +580,7 @@ var dw_mediamanager = {
         if (!$form.length) return;
 
         $label = jQuery(document.createElement('label'));
-        $label.append('<span>'+LANG.media_diff+'</span>');
+        $label.append('<span>'+LANG.media_diff+'</span> ');
         $select = jQuery(document.createElement('select'))
          .attr('id', 'mediamanager__difftype')
          .attr('name', 'difftype')
@@ -626,10 +626,10 @@ var dw_mediamanager = {
      * @author Kate Arzamastseva <pshns@ukr.net>
      */
     opacity_slider: function () {
-        var $slider = jQuery( "#mediamanager__diff div.diff_slider" );
+        var $slider = jQuery( "#mediamanager__diff div.slider" );
         if (!$slider.length) return;
 
-        var $image = jQuery('#mediamanager__diff div.diff_opacity div.image1 img');
+        var $image = jQuery('#mediamanager__diff div.imageDiff.opacity div.image1 img');
         if (!$image.length) return;
         $slider.width($image.width()-20);
 
@@ -639,7 +639,7 @@ var dw_mediamanager = {
         $slider.slider("option", "step", 0.001);
         $slider.slider("option", "value", 0.5);
         $slider.bind("slide", function(event, ui) {
-            jQuery('#mediamanager__diff div.diff_opacity div.image2 img').css({ opacity: $slider.slider("option", "value")});
+            jQuery('#mediamanager__diff div.imageDiff.opacity div.image2 img').css({ opacity: $slider.slider("option", "value")});
         });
     },
 
@@ -649,8 +649,8 @@ var dw_mediamanager = {
      * @author Kate Arzamastseva <pshns@ukr.net>
      */
     portions_slider: function () {
-        var $image1 = jQuery('#mediamanager__diff div.diff_portions div.image1 img');
-        var $image2 = jQuery('#mediamanager__diff div.diff_portions div.image2 img');
+        var $image1 = jQuery('#mediamanager__diff div.imageDiff.portions div.image1 img');
+        var $image2 = jQuery('#mediamanager__diff div.imageDiff.portions div.image2 img');
         if (!$image1.length || !$image2.length) return;
 
         var $div = jQuery("#mediamanager__diff");
@@ -669,7 +669,7 @@ var dw_mediamanager = {
         $image2.width($image1.width());
         $image1.width($image1.width());
 
-        var $slider = jQuery("#mediamanager__diff div.diff_slider");
+        var $slider = jQuery("#mediamanager__diff div.slider");
         if (!$slider.length) return;
         $slider.width($image1.width()-20);
 
@@ -679,7 +679,7 @@ var dw_mediamanager = {
         $slider.slider("option", "step", 1);
         $slider.slider("option", "value", 50);
         $slider.bind("slide", function(event, ui) {
-            jQuery('#mediamanager__diff div.diff_portions div.image2').css({ width: $slider.slider("option", "value")+'%'});
+            jQuery('#mediamanager__diff div.imageDiff.portions div.image2').css({ width: $slider.slider("option", "value")+'%'});
         });
     },
 
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
index 619ca9929..03c2cb9ce 100644
--- a/lib/tpl/default/mediamanager.css
+++ b/lib/tpl/default/mediamanager.css
@@ -382,55 +382,47 @@
     font-size: 90%;
 }
 
-/* Image diff */
-
 #mediamanager__diff dl dd strong{
     background-color: __highlight__;
     color: __text__;
     font-weight: normal;
 }
 
-#mediamanager__form_diffview {
+/* Image diff */
+
+#mediamanager__page .file form.diffView {
     margin-bottom: 10px;
     display: block;
 }
 
+#mediamanager__diff div.slider {
+    margin: 10px;
+    width: 95%;
+}
 
-
-
-
-#mediamanager__diff_layout {
+#mediamanager__diff .imageDiff {
     position: relative;
 }
-
-#mediamanager__diff_layout div {
+#mediamanager__diff .imageDiff .image1,
+#mediamanager__diff .imageDiff .image2 {
     position: absolute;
     top: 0;
     left: 0;
-}
-
-#mediamanager__diff div.image1 {
     width: 97%;
 }
 
-#mediamanager__diff_layout div img {
-    width: 100%;
-}
-
-#mediamanager__diff div.diff_opacity div.image2 {
-    width: 97%;
+#mediamanager__diff .imageDiff.opacity .image2 {
     -moz-opacity: 0.5;
     -khtml-opacity: 0.5;
     opacity: 0.5;
 }
 
-#mediamanager__diff div.diff_portions div.image2 {
-    width: 97%;
+#mediamanager__diff .imageDiff.portions .image2 {
     border-right: 1px solid red;
     overflow: hidden;
 }
 
-#mediamanager__diff div.diff_slider {
-    margin: 10px;
-    width: 95%;
+#mediamanager__diff .imageDiff img {
+    width: 100%;
 }
+