feat(ui): implement Stage 7 watermark background switcher (product, white, transparent grid) and action button margin polish

upload/admin/controller/module/img_opti.php

@@ -1999,9 +1999,10 @@ class ControllerModuleImgOpti extends Controller {
 
         $type = isset($this->request->post['module_img_opti_wm_type']) ? $this->request->post['module_img_opti_wm_type'] : '';
         $image = isset($this->request->post['module_img_opti_wm_image']) ? $this->request->post['module_img_opti_wm_image'] : '';
-
+        $bg_mode = isset($this->request->post['wm_preview_bg']) ? $this->request->post['wm_preview_bg'] : 'product';
 
         $base_file = '';
+        if ($bg_mode === 'product') {
             $query_prod = $this->db->query("SELECT image FROM `" . DB_PREFIX . "product` WHERE image IS NOT NULL AND image != '' AND image LIKE 'catalog/%' LIMIT 1");
             if ($query_prod->num_rows && is_file(DIR_IMAGE . $query_prod->row['image'])) {
                 $base_file = DIR_IMAGE . $query_prod->row['image'];
@@ -2011,6 +2012,7 @@ class ControllerModuleImgOpti extends Controller {
                     $base_file = DIR_IMAGE . 'catalog/no_image.png';
                 }
             }
+        }
 
         $temp_preview = DIR_IMAGE . 'cache/temp_wm_preview.png';
         $compare_dir = DIR_IMAGE . 'cache/';
@@ -2018,6 +2020,29 @@ class ControllerModuleImgOpti extends Controller {
             @mkdir($compare_dir, 0755, true);
         }
 
+        $preview_w = 500;
+        $preview_h = 500;
+        $preview_im = imagecreatetruecolor($preview_w, $preview_h);
+
+        if ($bg_mode === 'white') {
+            $white = imagecolorallocate($preview_im, 255, 255, 255);
+            imagefill($preview_im, 0, 0, $white);
+        } elseif ($bg_mode === 'transparent') {
+            $c1 = imagecolorallocate($preview_im, 255, 255, 255);
+            $c2 = imagecolorallocate($preview_im, 226, 232, 240);
+            imagefill($preview_im, 0, 0, $c1);
+            $sqSize = 25;
+            for ($x = 0; $x < $preview_w; $x += $sqSize) {
+                for ($y = 0; $y < $preview_h; $y += $sqSize) {
+                    if ((($x / $sqSize) + ($y / $sqSize)) % 2 === 0) {
+                        imagefilledrectangle($preview_im, $x, $y, $x + $sqSize - 1, $y + $sqSize - 1, $c2);
+                    }
+                }
+            }
+        } else {
+            $white = imagecolorallocate($preview_im, 255, 255, 255);
+            imagefill($preview_im, 0, 0, $white);
+
             $base_img = false;
             if (is_file($base_file)) {
                 $ext = strtolower(pathinfo($base_file, PATHINFO_EXTENSION));
@@ -2030,18 +2055,7 @@ class ControllerModuleImgOpti extends Controller {
                 }
             }
 
-        if (!$base_img) {
+            if ($base_img) {
-            $base_img = imagecreatetruecolor(500, 500);
-            $bg = imagecolorallocate($base_img, 240, 240, 240);
-            imagefill($base_img, 0, 0, $bg);
-        }
-
-        $preview_w = 500;
-        $preview_h = 500;
-        $preview_im = imagecreatetruecolor($preview_w, $preview_h);
-        $white = imagecolorallocate($preview_im, 255, 255, 255);
-        imagefill($preview_im, 0, 0, $white);
-
                 $orig_w = imagesx($base_img);
                 $orig_h = imagesy($base_img);
                 $scale = min($preview_w / $orig_w, $preview_h / $orig_h);
@@ -2052,6 +2066,8 @@ class ControllerModuleImgOpti extends Controller {
 
                 imagecopyresampled($preview_im, $base_img, $dst_x, $dst_y, 0, 0, $new_w, $new_h, $orig_w, $orig_h);
                 imagedestroy($base_img);
+            }
+        }
 
         imagepng($preview_im, $temp_preview);
         imagedestroy($preview_im);

upload/admin/view/template/module/img_opti.tpl

@@ -1,4 +1,4 @@
-<?php echo $header; ?><?php echo $column_left; ?>
+<?php echo $header; ?><?php echo $column_left; ?>
 <div id="content">
   <div class="page-header">
     <div class="container-fluid">
@@ -3404,6 +3404,14 @@ $(document).ready(function() {
           <div class="form-group" style="margin-top:10px;">
             <label class="col-sm-3 control-label"></label>
             <div class="col-sm-9">
+              <div style="margin-bottom: 10px;">
+                <label style="font-weight:bold; margin-right:8px; display:inline-block; vertical-align:middle;">Фон прев'ю / Фон превью / Preview BG:</label>
+                <div class="btn-group" data-toggle="buttons" id="wm-preview-bg-switcher">
+                  <label class="btn btn-default active" style="padding: 4px 10px; font-size: 12px;"><input type="radio" name="wm_preview_bg" value="product" checked="checked"> 🖼️ Товар / Item</label>
+                  <label class="btn btn-default" style="padding: 4px 10px; font-size: 12px;"><input type="radio" name="wm_preview_bg" value="white"> ⚪ Білий / Белый</label>
+                  <label class="btn btn-default" style="padding: 4px 10px; font-size: 12px;"><input type="radio" name="wm_preview_bg" value="transparent"> 🏁 Сітка / Сетка</label>
+                </div>
+              </div>
               <button type="button" id="btn-modal-wm-preview" class="btn btn-info"><i class="fa fa-eye"></i> <?php echo $button_preview_watermark; ?></button>
               <div id="modal-wm-preview-container" style="display:none; margin-top:15px; text-align:center; border:2px dashed #2c3e50; padding:15px; border-radius:4px; background:#f8f9fa;">
                 <div style="font-weight:bold; color:#2c3e50; margin-bottom:8px;"><i class="fa fa-image"></i> <?php echo $text_wm_preview_title; ?></div>