Display: Fix legacy checkboxes applying new styles

AngelFQC · AngelFQC · commit 8716a8d8617f · 2026-01-14T12:37:31.000-05:00
diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -644,9 +644,6 @@ form .field {
   td {
     padding: 12px;
   }
-  input[type="checkbox"] {
-    transform: scale(1.2);
-  }
   .save-button {
     background-color: #4CAF50;
     color: white;
@@ -659,10 +656,6 @@ form .field {
   .save-button:hover {
     background-color: #45a049;
   }
-  input[type="checkbox"] {
-    transform: scale(1);
-    margin: 0 auto;
-  }
 }
 
 .files-info-page {
@@ -1036,11 +1029,6 @@ img.course-tool__icon {
   textarea {
     @apply focus:outline-0 focus:border-primary focus:rounded-md focus:transition;
   }
-
-  input[type="checkbox"],
-  input[type="radio"] {
-    @apply focus:outline-2 focus:outline-primary rounded-full;
-  }
 }
 @layer components {
   .form-group:focus-within,
diff --git a/assets/css/scss/atoms/_checkbox.scss b/assets/css/scss/atoms/_checkbox.scss
@@ -85,3 +85,12 @@
     @apply text-body-2 w-5 h-5;
   }
 }
+
+/* legacy checkboxes */
+.p-checkbox-box .p-checkbox-icon {
+  @apply hidden;
+}
+
+.p-checkbox-input:checked + .p-checkbox-box .p-checkbox-icon {
+  @apply block;
+}
diff --git a/public/main/inc/lib/display.lib.php b/public/main/inc/lib/display.lib.php
@@ -873,6 +873,28 @@ public static function input($type, $name, $value, $attributes = [])
             $attributes['value'] = $value;
         }
 
+        if ('checkbox' === $type) {
+            $attributes['class'] ??= 'p-checkbox-input';
+        }
+
+        $inputBase = self::tag('input', '', $attributes);
+
+        if ('checkbox' === $type) {
+            $isChecked = isset($attributes['checked']) && 'checked' === $attributes['checked'];
+            $compontentCheckedClass = $isChecked ? 'p-checkbox-checked' : '';
+
+            return <<<HTML
+                <div class="p-checkbox p-component $compontentCheckedClass">
+                    $inputBase
+                    <div class="p-checkbox-box">
+                        <svg class="p-icon p-checkbox-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                            <path d="M4.86199 11.5948C4.78717 11.5923 4.71366 11.5745 4.64596 11.5426C4.57826 11.5107 4.51779 11.4652 4.46827 11.4091L0.753985 7.69483C0.683167 7.64891 0.623706 7.58751 0.580092 7.51525C0.536478 7.44299 0.509851 7.36177 0.502221 7.27771C0.49459 7.19366 0.506156 7.10897 0.536046 7.03004C0.565935 6.95111 0.613367 6.88 0.674759 6.82208C0.736151 6.76416 0.8099 6.72095 0.890436 6.69571C0.970973 6.67046 1.05619 6.66385 1.13966 6.67635C1.22313 6.68886 1.30266 6.72017 1.37226 6.76792C1.44186 6.81567 1.4997 6.8786 1.54141 6.95197L4.86199 10.2503L12.6397 2.49483C12.7444 2.42694 12.8689 2.39617 12.9932 2.40745C13.1174 2.41873 13.2343 2.47141 13.3251 2.55705C13.4159 2.64268 13.4753 2.75632 13.4938 2.87973C13.5123 3.00315 13.4888 3.1292 13.4271 3.23768L5.2557 11.4091C5.20618 11.4652 5.14571 11.5107 5.07801 11.5426C5.01031 11.5745 4.9368 11.5923 4.86199 11.5948Z" fill="currentColor"></path>
+                        </svg>
+                    </div>
+                </div>
+HTML;
+        }
+
         if ('text' === $type) {
             $attributes['class'] = isset($attributes['class'])
                 ? $attributes['class'].' p-inputtext p-component '
diff --git a/public/main/inc/lib/sortable_table.class.php b/public/main/inc/lib/sortable_table.class.php
@@ -1058,11 +1058,13 @@ public function filter_data($row)
         }
         if (count($this->form_actions) > 0) {
             if (strlen($row[0]) > 0) {
-                $row[0] = '<div class="checkbox" ><label><input type="checkbox" name="'.$this->checkbox_name.'[]" value="'.$row[0].'"';
+                $checkboxParams = [];
+
                 if (isset($_GET[$this->param_prefix.'selectall'])) {
-                    $row[0] .= ' checked="checked"';
+                    $checkboxParams['checked'] = 'checked';
                 }
-                $row[0] .= '/><span class="checkbox-material"><span class="check"></span></span></label></div>';
+
+                $row[0] = Display::input('checkbox', $this->checkbox_name.'[]', $row[0], $checkboxParams);
             }
         }
         if (is_array($row)) {

Original file line number	Diff line number	Diff line change
`@@ -85,3 +85,12 @@`
`85`	`85`	`@apply text-body-2 w-5 h-5;`
`86`	`86`	`}`
`87`	`87`	`}`
	`88`	`+`
	`89`	`+/* legacy checkboxes */`
	`90`	`+.p-checkbox-box .p-checkbox-icon {`
	`91`	`+ @apply hidden;`
	`92`	`+}`
	`93`	`+`
	`94`	`+.p-checkbox-input:checked + .p-checkbox-box .p-checkbox-icon {`
	`95`	`+ @apply block;`
	`96`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1058,11 +1058,13 @@ public function filter_data($row)`
`1058`	`1058`	`}`
`1059`	`1059`	`if (count($this->form_actions) > 0) {`
`1060`	`1060`	`if (strlen($row[0]) > 0) {`
`1061`		`- $row[0] = '<div class="checkbox" ><label><input type="checkbox" name="'.$this->checkbox_name.'[]" value="'.$row[0].'"';`
	`1061`	`+ $checkboxParams = [];`
	`1062`	`+`
`1062`	`1063`	`if (isset($_GET[$this->param_prefix.'selectall'])) {`
`1063`		`- $row[0] .= ' checked="checked"';`
	`1064`	`+ $checkboxParams['checked'] = 'checked';`
`1064`	`1065`	`}`
`1065`		`- $row[0] .= '/><span class="checkbox-material"><span class="check"></span></span></label></div>';`
	`1066`	`+`
	`1067`	`+ $row[0] = Display::input('checkbox', $this->checkbox_name.'[]', $row[0], $checkboxParams);`
`1066`	`1068`	`}`
`1067`	`1069`	`}`
`1068`	`1070`	`if (is_array($row)) {`