Update Updates-page image comparison UI

The Seravo-plugin UI should be uniform. Removes unnecessary yellow backgrounds.
Seravo · Jan 6, 2019 · 1f01f4c · 1f01f4c
1 parent c26cb4c
commit 1f01f4c
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 17 deletions.
diff --git a/js/updates.js b/js/updates.js
@@ -147,7 +147,6 @@ jQuery(window).load(function(){
       var cur = jQuery(this);
       // Adjust the slider
       var width = cur.width() + 'px';
-      console.log(cur);
       cur.find('.ba-resize img').css('width', width);
       // Bind dragging events
       drags(cur.find('.ba-handle'), cur.find('.ba-resize'), cur);

diff --git a/lib/updates-page.php b/lib/updates-page.php
@@ -125,5 +125,5 @@
       </div>
     </div>
   </div>
+  <?php echo Seravo\Updates::seravo_admin_image_comparison(); ?>
 </div>
-<?php echo Seravo\Updates::seravo_admin_image_comparison(); ?>
diff --git a/modules/updates.php b/modules/updates.php
@@ -63,7 +63,17 @@ public static function seravo_admin_get_site_info() {
     public static function seravo_admin_image_comparison( $atts = [], $content = null, $tag = 'seravo_admin_image_comparison' ) {
       ob_start();
       ?>
-      <h2 class="clear"><?php _e('Screenshots', 'seravo'); ?></h2>
+      <div class="postbox-container">
+        <div id="normal-sortables" class="meta-box-sortables ui-sortable">
+          <div id="dashboard_right_now" class="postbox">
+            <button type="button" class="handlediv button-link" aria-expanded="true">
+              <span class="screen-reader-text">Toggle panel: <?php _e('Screenshots', 'seravo'); ?></span>
+              <span class="toggle-indicator" aria-hidden="true"></span>
+            </button>
+            <h2 class="hndle ui-sortable-handle">
+              <span><?php _e('Screenshots', 'seravo'); ?></span>
+            </h2>
+            <div class="inside seravo-updates-postbox">
       <?php
       $screenshots = glob( '/data/reports/tests/debug/*.png' );
       $showing = 0;
@@ -73,7 +83,7 @@ public static function seravo_admin_image_comparison( $atts = [], $content = nul
         echo '
       <table>
         <tr>
-          <th style="background-color: yellow;">' . __('The Difference', 'seravo') . '</th>
+          <th>' . __('The Difference', 'seravo') . '</th>
         </tr>
           <tbody  style="vertical-align: top; text-align: center;">';
 
@@ -107,18 +117,22 @@ public static function seravo_admin_image_comparison( $atts = [], $content = nul
 
           echo '
             <tr>
-              <td style="background-color: yellow;">
-              ';
+              <td>
+              <hr class="seravo-updates-hr">
+              <a href="/.seravo/screenshots-ng/debug/' . $name . '.diff.png" class="diff-img-title">' . $name . '</a>
+              <span';
+              // Make the difference number stand out if it is non-zero
+          if ( $diff > 0.011 ) {
+            echo ' style="background-color: yellow;color: red;"';
+          }
+              echo '>' . round( $diff * 100, 2 ) . ' %</span>';
+
               echo self::seravo_admin_image_comparison_slider(array(
+                'difference' => $diff,
                 'img_right' => "/.seravo/screenshots-ng/debug/$name.shadow.png",
                 'img_left' => "/.seravo/screenshots-ng/debug/$name.png",
               ));
-              echo '<br><span';
-              // Make the difference number stand out if it is non-zero
-          if ( $diff > 0.011 ) {
-            echo ' style="color: red;"';
-          }
-              echo '>' . round( $diff * 100, 2 ) . ' %</span>
+              echo '
               </td>
             </tr>';
             $showing++;
@@ -134,7 +148,11 @@ public static function seravo_admin_image_comparison( $atts = [], $content = nul
           __('No screenshots found. They will become available during the next attempted update.', 'seravo') .
           '</td></tr>';
       }
-
+      echo '
+            </div>
+          </div>
+        </div>
+      </div>';
       return ob_get_clean();
     }
 
@@ -144,6 +162,7 @@ public static function seravo_admin_image_comparison_slider( $atts = [], $conten
       $atts = array_change_key_case( (array) $atts, CASE_LOWER);
 
       $img_comp_atts = shortcode_atts([
+        'difference'  => '',
         'img_left'    => '',
         'img_right'   => '',
         'desc_left' => __('Current State', 'seravo'),
@@ -153,9 +172,14 @@ public static function seravo_admin_image_comparison_slider( $atts = [], $conten
         'desc_left_txt_color' => 'white',
         'desc_right_txt_color' => 'white',
 	  ], $atts, $tag);
+      if ( floatval( $img_comp_atts['difference'] ) > 0.011 ) {
+        $knob_style = 'difference';
+      } else {
+        $knob_style = '';
+      }
       ob_start();
       ?>
-      <div class="ba-slider">
+      <div class="ba-slider <?php echo $knob_style; ?>">
        <img src="<?php echo $img_comp_atts['img_right']; ?>">
        <div class="ba-text-block" style="background-color:<?php echo $img_comp_atts['desc_right_bg_color']; ?>;color:<?php echo $img_comp_atts['desc_right_txt_color']; ?>;">
             <?php echo $img_comp_atts['desc_right']; ?>

diff --git a/style/updates.css b/style/updates.css
@@ -96,10 +96,19 @@ form[name="seravo_updates_form"].has-errors > .technical_contacts_input {
   width:4px;
 }
 
-.ba-slider .ba-handle:after {  /* Big orange knob  */
+.ba-slider.difference .ba-handle:after {  /* Big orange knob  */
   background: #ffb800; /* @orange */
-  border-radius: 50%;
   border:1px solid #e6a600; /* darken(@orange, 5%) */
+  box-shadow:
+    0 2px 6px rgba(0,0,0,.3),
+    inset 0 2px 0 rgba(255,255,255,.5),
+    inset 0 60px 50px -30px #ffd466; /* lighten(@orange, 20%)*/
+}
+
+.ba-slider .ba-handle:after  {  /* Big knob  */
+  background: #404040; /* @gray */
+  border-radius: 50%;
+  border:1px solid #383838; /* darken(@gray ) */
   color:white;
   content:'\21d4';
   font-size:36px;
@@ -115,7 +124,7 @@ form[name="seravo_updates_form"].has-errors > .technical_contacts_input {
   box-shadow:
     0 2px 6px rgba(0,0,0,.3),
     inset 0 2px 0 rgba(255,255,255,.5),
-    inset 0 60px 50px -30px #ffd466; /* lighten(@orange, 20%)*/
+    inset 0 60px 50px -30px #808080; /* lighten(@gray, 20%)*/
 }
 
 .ba-slider .ba-handle.ba-draggable:after {