feat(rows): add row highlight color for checkbox columns

src/modules/modals/EditColumn.vue

@@ -203,7 +203,7 @@ export default {
 			delete data.createdBy
 			delete data.lastEditAt
 			delete data.lastEditBy
-			data.customSettings = { width: data.customSettings.width }
+			data.customSettings = { width: data.customSettings?.width, rowHighlightColor: data.customSettings?.rowHighlightColor }
 			console.debug('this column data will be send', data)
 			const res = await this.updateColumn({
 				id: this.editColumn.id,

src/shared/components/ncTable/partials/TableRow.vue

@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<tr v-if="row" :class="{ selected }">
+	<tr v-if="row" :class="{ selected }" :style="rowHighlightStyle">
 		<td v-if="config.canSelectRows" :class="{sticky: config.canSelectRows}">
 			<NcCheckboxRadioSwitch :checked="selected" @update:checked="v => $emit('update-row-selection', { rowId: row.id, value: v })" />
 		</td>
@@ -120,6 +120,32 @@ export default {
 			return [
 			]
 		},
+		// Compute row highlight color based on checkbox columns
+		rowHighlightStyle() {
+			// Find checkbox columns with highlight color setting
+			for (const col of this.visibleColumns) {
+				// Check if column is checkbox type (selection with subtype check)
+				if (col.type === ColumnTypes.SelectionCheck || 
+					(col.type === 'selection' && col.subtype === 'check')) {
+
+					const highlightColor = col.customSettings?.rowHighlightColor
+					if (highlightColor) {
+						// Get cell value for this column
+						const cell = this.getCell(col.id)
+						const value = cell?.value
+
+						// Check if checkbox is checked (true or "true")
+						if (value === true || value === 'true') {
+							return {
+								backgroundColor: highlightColor + '33', // Add transparency (20%)
+								borderLeft: `4px solid ${highlightColor}`,
+							}
+						}
+					}
+				}
+			}
+			return {}
+		},
 	},
 	methods: {
 		t,

src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionCheckForm.vue

@@ -4,7 +4,6 @@
 -->
 <template>
 	<div style="width: 100%">
-		<!-- options -->
 		<div class="row space-T">
 			<div class="fix-col-4">
 				{{ t('tables', 'Default') }}
@@ -13,17 +12,43 @@
 				<NcCheckboxRadioSwitch type="switch" :checked.sync="mutableColumn.selectionDefault" data-cy="selectionCheckFormDefaultSwitch" />
 			</div>
 		</div>
+		<div class="row space-T">
+			<div class="fix-col-4">
+				{{ t('tables', 'Row highlight color') }}
+			</div>
+			<div class="fix-col-4 space-L-small highlight-color-picker">
+				<NcColorPicker v-model="highlightColor" :palette="colorPalette">
+					<NcButton type="secondary" :style="colorButtonStyle" :aria-label="t('tables', 'Pick a color')">
+						<template #icon>
+							<FormatColorFill :size="20" />
+						</template>
+						{{ highlightColor ? '' : t('tables', 'None') }}
+					</NcButton>
+				</NcColorPicker>
+				<NcButton v-if="highlightColor" type="tertiary" :aria-label="t('tables', 'Clear color')" @click="clearHighlightColor">
+					<template #icon>
+						<Close :size="20" />
+					</template>
+				</NcButton>
+			</div>
+		</div>
 	</div>
 </template>
-
 <script>
-import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch, NcColorPicker, NcButton } from '@nextcloud/vue'
 import { translate as t } from '@nextcloud/l10n'
+import FormatColorFill from 'vue-material-design-icons/FormatColorFill.vue'
+import Close from 'vue-material-design-icons/Close.vue'
+import Vue from 'vue'
 
 export default {
 	name: 'SelectionCheckForm',
 	components: {
 		NcCheckboxRadioSwitch,
+		NcColorPicker,
+		NcButton,
+		FormatColorFill,
+		Close,
 	},
 	props: {
 		column: {
@@ -38,11 +63,37 @@ export default {
 	data() {
 		return {
 			mutableColumn: this.column,
+			highlightColor: this.column?.customSettings?.rowHighlightColor || '',
+			colorPalette: [
+				'#4caf50', '#8bc34a', '#cddc39', '#ffeb3b',
+				'#ffc107', '#ff9800', '#f44336', '#e91e63',
+				'#9c27b0', '#2196f3', '#00bcd4', '#009688',
+			],
 		}
 	},
+	computed: {
+		colorButtonStyle() {
+			if (this.highlightColor) {
+				return {
+					backgroundColor: this.highlightColor,
+					borderColor: this.highlightColor,
+					color: this.getContrastColor(this.highlightColor),
+				}
+			}
+			return {}
+		},
+	},
 	watch: {
+		highlightColor(newColor) {
+			console.debug('highlightColor changed to:', newColor)
+			if (!this.mutableColumn.customSettings) {
+				Vue.set(this.mutableColumn, 'customSettings', {})
+			}
+			Vue.set(this.mutableColumn.customSettings, 'rowHighlightColor', newColor)
+		},
 		column() {
 			this.mutableColumn = this.column
+			this.highlightColor = this.column?.customSettings?.rowHighlightColor || ''
 		},
 	},
 	created() {
@@ -53,9 +104,30 @@ export default {
 		if (typeof this.mutableColumn.selectionDefault !== 'boolean') {
 			this.mutableColumn.selectionDefault = false
 		}
+		if (!this.mutableColumn.customSettings) {
+			Vue.set(this.mutableColumn, 'customSettings', {})
+		}
 	},
 	methods: {
 		t,
+		clearHighlightColor() {
+			this.highlightColor = ''
+		},
+		getContrastColor(hexcolor) {
+			const hex = hexcolor.replace('#', '')
+			const r = parseInt(hex.substr(0, 2), 16)
+			const g = parseInt(hex.substr(2, 2), 16)
+			const b = parseInt(hex.substr(4, 2), 16)
+			const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+			return luminance > 0.5 ? '#000000' : '#ffffff'
+		},
 	},
 }
 </script>
+<style scoped>
+.highlight-color-picker {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+</style>