Background colours in section view

1 posts by 1 authors in: Forums > CMS Builder Community
Last Post: November 13, 2019   (RSS)

By Toledoh - November 13, 2019

Hi All.

Thought I'd share this - but smarter people than me could probably improve it.

I've wanted to highlight records for various reason previously (status indicator etc) and finally got around to messing with the greyHiddenRecords plugin to see what I could do.

In this case I've got a section "colours" and then each record with HEX and RGB values of various colours and I wanted to give the client a visual representation of those colours.

I've used the hex_code value to give the row a background colour

addFilter('listRow_trStyle',      'displayColourOptions_listRow_trStyle', null, 3);
function displayColourOptions_listRow_trStyle($trStyle, $tableName, $record) {  foreach($GLOBALS['displayColourOptions'] as $fieldName => $conditions){    if (is_null(@$record[$fieldName])) { continue; } // skip if the field doesn't exists on this record    if (@$conditions['tableName'] && @$conditions['tableName'] != $tableName) { continue; } // skip if the target table/section is set but doesn't match the record's tableName    //    $isMatched = displayColourOptions_isMatched($record[$fieldName], $conditions['value'], $conditions['comparator']);    if ($isMatched){      return "color:#7f7f7f; background-color: #".$record['hex_code']." !important";   }  }}

Then gave the row a new class

addFilter('listRow_trClass',      'displayColourOptions_listRow_trClass', null, 3);
function displayColourOptions_listRow_trClass($trStyle, $tableName, $record) {  foreach($GLOBALS['displayColourOptions'] as $fieldName => $conditions){    if (is_null(@$record[$fieldName])) { continue; } // skip if the field doesn't exists on this record    if (@$conditions['tableName'] && @$conditions['tableName'] != $tableName) { continue; } // skip if the target table/section is set but doesn't match the record's tableName    //    $isMatched = displayColourOptions_isMatched($record[$fieldName], $conditions['value'], $conditions['comparator']);    if ($isMatched){      return "forcedBackgroundColour";    }  }}

Then added to the theme.css to make the cells transparent and the text contrast with the background

tr.forcedBackgroundColour > td{ background: transparent !important; mix-blend-mode: luminosity;}

I ended up just applying the background colour to the first cell as I thought it was too much for the whole row to be coloured.

tr.forcedBackgroundColour > td:first-child{ background: transparent !important; mix-blend-mode: luminosity;

I've attached a screen shot of the results and the plugin.

Cheers,

Tim (toledoh.com.au)