Skip to content

Commit 69c4b17

Browse files
ivictborivictbor
authored
Merge pull request #285 from devforth/AdminForth/732
fix: add correct dark theme for the checkboxes
2 parents a0ec20a + 699f314 commit 69c4b17

File tree

2 files changed

+49
-23
lines changed

2 files changed

+49
-23
lines changed

‎adminforth/spa/src/components/ResourceListTable.vue

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,16 @@
1616
<!-- table header -->
1717
<tr class="t-header sticky z-10 top-0 text-xs bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
1818
<td scope="col" class="p-4">
19-
<div class="flex items-center">
19+
<div class="flex items-center justify-center relative">
2020
<input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()"
2121
:disabled="!rows || !rows.length"
22-
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded
23-
focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
22+
class="peer appearance-none w-4 h-4 text-blue-600 bg-light-primary border border-gray-500 rounded-sm checked:bg-blue-500
23+
focus:ring-blue-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800
24+
focus:ring-2 dark:bg-dark-primary dark:border-gray-600 dark:checked:bg-blue-500 cursor-pointer">
2425
<label for="checkbox-all-search" class="sr-only">{{ $t('checkbox') }}</label>
26+
<div class="pointer-events-none absolute text-white text-[13px] leading-none peer-checked:block hidden">
27+
<IconCheckOutline width="18" height="18" />
28+
</div>
2529
</div>
2630
</td>
2731

@@ -90,18 +94,27 @@
9094

9195
:class="{'border-b': rowI !== rows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
9296
>
93-
<td class="w-4 p-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
94-
<div class="flex items center ">
95-
<input
96-
@click="(e)=>{e.stopPropagation()}"
97-
id="checkbox-table-search-1"
98-
type="checkbox"
99-
:checked="checkboxesInternal.includes(row._primaryKeyValue)"
100-
@change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
101-
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer">
102-
<label for="checkbox-table-search-1" class="sr-only">{{ $t('checkbox') }}</label>
97+
<td class="w-4 p-4 cursor-default" @click="(e)=>e.stopPropagation()">
98+
<div class="flex items-center justify-center relative">
99+
<input
100+
@click="(e)=>e.stopPropagation()"
101+
id="checkbox-table-search-1"
102+
type="checkbox"
103+
:checked="checkboxesInternal.includes(row._primaryKeyValue)"
104+
@change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
105+
class="peer appearance-none w-4 h-4 text-blue-600 bg-light-primary border border-gray-500 rounded-sm checked:bg-blue-500
106+
focus:ring-blue-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800
107+
focus:ring-2 dark:bg-dark-primary dark:border-gray-600 dark:checked:bg-blue-500 cursor-pointer"
108+
/>
109+
<label for="checkbox-table-search-1" class="sr-only">
110+
{{ $t('checkbox') }}
111+
</label>
112+
<div class="pointer-events-none absolute text-white text-[13px] leading-none peer-checked:block hidden">
113+
<IconCheckOutline width="18" height="18" />
103114
</div>
104-
</td>
115+
</div>
116+
</td>
117+
105118
<td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4">
106119
<!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
107120
<component
@@ -306,7 +319,8 @@ import {
306319
import {
307320
IconEyeSolid,
308321
IconPenSolid,
309-
IconTrashBinSolid
322+
IconTrashBinSolid,
323+
IconCheckOutline
310324
} from '@iconify-prerendered/vue-flowbite';
311325
import router from '@/router';
312326
import { Tooltip } from '@/afcl';

‎adminforth/spa/src/components/ResourceListTableVirtual.vue

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,16 @@
2020
<!-- table header -->
2121
<tr class="t-header sticky z-10 top-0 text-xs bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
2222
<td scope="col" class="p-4">
23-
<div class="flex items-center">
23+
<div class="flex items-center justify-center relative">
2424
<input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()"
2525
:disabled="!rows || !rows.length"
26-
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded
27-
focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
26+
class="peer appearance-none w-4 h-4 text-blue-600 bg-light-primary border border-gray-500 rounded-sm checked:bg-blue-500
27+
focus:ring-blue-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800
28+
focus:ring-2 dark:bg-dark-primary dark:border-gray-600 dark:checked:bg-blue-500 cursor-pointer">
2829
<label for="checkbox-all-search" class="sr-only">{{ $t('checkbox') }}</label>
30+
<div class="pointer-events-none absolute text-white text-[13px] leading-none peer-checked:block hidden">
31+
<IconCheckOutline width="18" height="18" />
32+
</div>
2933
</div>
3034
</td>
3135

@@ -101,16 +105,24 @@
101105
:class="{'border-b': rowI !== visibleRows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
102106
@mounted="(el) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
103107
>
104-
<td class="w-4 p-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
105-
<div class="flex items center ">
108+
<td class="w-4 p-4 cursor-default" @click="(e)=>e.stopPropagation()">
109+
<div class="flex items-center justify-center relative">
106110
<input
107-
@click="(e)=>{e.stopPropagation()}"
111+
@click="(e)=>e.stopPropagation()"
108112
id="checkbox-table-search-1"
109113
type="checkbox"
110114
:checked="checkboxesInternal.includes(row._primaryKeyValue)"
111115
@change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
112-
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer">
113-
<label for="checkbox-table-search-1" class="sr-only">{{ $t('checkbox') }}</label>
116+
class="peer appearance-none w-4 h-4 text-blue-600 bg-gray-50 border border-gray-500 rounded-sm checked:bg-blue-500
117+
focus:ring-blue-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800
118+
focus:ring-2 dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-blue-500 cursor-pointer"
119+
/>
120+
<label for="checkbox-table-search-1" class="sr-only">
121+
{{ $t('checkbox') }}
122+
</label>
123+
<div class="pointer-events-none absolute text-white text-[13px] leading-none peer-checked:block hidden">
124+
<IconCheckOutline width="18" height="18" />
125+
</div>
114126
</div>
115127
</td>
116128
<td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4">

0 commit comments

Comments
 (0)