From aaf32ece5057032f33aa73332d0d1d6635bfcd8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jaros=C5=82aw=20Sadzi=C5=84ski?=
 <jaroslaw.sadzinski@gmail.com>
Date: Fri, 9 Dec 2022 16:12:12 +0100
Subject: [PATCH] (core) Replacing transparent colors

Summary:
Transparent colors can't be used with frozen columns.
This removes transparency from saved or calculated colors.

Test Plan: Updated

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3725
---
 app/client/widgets/FieldBuilder.ts | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/client/widgets/FieldBuilder.ts b/app/client/widgets/FieldBuilder.ts
index 4baf8111..27cc2c9e 100644
--- a/app/client/widgets/FieldBuilder.ts
+++ b/app/client/widgets/FieldBuilder.ts
@@ -561,7 +561,7 @@ export class FieldBuilder extends Disposable {
 
     const ruleFill = koUtil.withKoUtils(ko.computed(() => {
       if (this.isDisposed()) { return null; }
-      return computedRule()?.style?.fillColor || '';
+      return notTransparent(computedRule()?.style?.fillColor || '');
     })).onlyNotifyUnequal();
 
     const fontBold = buildFontOptions(this, computedRule, 'fontBold');
@@ -572,7 +572,7 @@ export class FieldBuilder extends Disposable {
     const errorInStyle = ko.pureComputed(() => Boolean(computedRule()?.error));
 
     const cellText = ko.pureComputed(() => this.field.textColor() || '');
-    const cellFill = ko.pureComputed(() => this.field.fillColor() || '');
+    const cellFill = ko.pureComputed(() => notTransparent(this.field.fillColor() || ''));
 
     const hasComment = koUtil.withKoUtils(ko.computed(() => {
       if (this.isDisposed()) { return false; }   // Work around JS errors during field removal.
@@ -771,3 +771,21 @@ const cssSeparator = styled('div', `
   border-bottom: 1px solid ${theme.pagePanelsBorder};
   margin-top: 16px;
 `);
+
+// Simple helper that removes transparency from a HEX or rgba color.
+// User can set a transparent fill color using doc actions, but we don't want to show it well
+// when a column is frozen.
+function notTransparent(color: string): string {
+  if (!color) {
+    return color;
+  } else if (color.startsWith('#') && color.length === 9) {
+    return color.substring(0, 7);
+  } else if (color.startsWith('rgba')) {
+    // rgba(255, 255, 255)
+    // rgba(255, 255, 255, 0.5)
+    // rgba(255 255 255 / 0.5)
+    // rgba(255 255 255 / 50%)
+    return color.replace(/^rgba\((\d+)[,\s]+(\d+)[,\s]+(\d+)[/,\s]+([\d.%]+)\)$/i, 'rgb($1, $2, $3)');
+  }
+  return color;
+}