From 356ab50adf5f39182be5ea709bbfdb24ebdc82a4 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Tue, 19 Apr 2022 22:41:51 +0700
Subject: [PATCH] Review comments: use hover style

Signed-off-by: Anna No <anna.no@xored.com>
---
 packages/ui/src/colors.ts                     | 15 +++++++--
 .../presenters/ColorPresenter.svelte          | 31 +++++++++----------
 .../presenters/LabelPresenter.svelte          |  3 +-
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/packages/ui/src/colors.ts b/packages/ui/src/colors.ts
index 69139435f6..3e20c8e5f5 100644
--- a/packages/ui/src/colors.ts
+++ b/packages/ui/src/colors.ts
@@ -66,6 +66,9 @@ export function getColorNumberByText (str: string): number {
  * @public
  */
 export function hexColorToNumber (hexColor: string): number {
+  if (hexColor === undefined || hexColor === null) {
+    return 0
+  }
   return parseInt(hexColor.replace('#', ''), 16)
 }
 
@@ -73,6 +76,9 @@ export function hexColorToNumber (hexColor: string): number {
  * @public
  */
 export function numberToHexColor (color: number): string {
+  if (color === undefined || color === null) {
+    return ''
+  }
   return `#${color.toString(16)}`
 }
 
@@ -80,10 +86,13 @@ export function numberToHexColor (color: number): string {
  * @public
  */
 export function numberToRGB (color: number, alpha?: number): string {
+  if (color === undefined || color === null) {
+    return ''
+  }
   const hex = color.toString(16)
-  const r = parseInt(hex.slice(0, 2), 16)
-  const g = parseInt(hex.slice(2, 4), 16)
-  const b = parseInt(hex.slice(4, 6), 16)
+  const r = hex.length >= 2 ? parseInt(hex.slice(0, 2), 16) : 0
+  const g = hex.length >= 4 ? parseInt(hex.slice(2, 4), 16) : 0
+  const b = hex.length >= 6 ? parseInt(hex.slice(4, 6), 16) : 0
 
   return `rgba(${r}, ${g}, ${b}, ${alpha === undefined ? '1' : alpha})`
 }
diff --git a/plugins/board-resources/src/components/presenters/ColorPresenter.svelte b/plugins/board-resources/src/components/presenters/ColorPresenter.svelte
index 3288fbe5c8..6c68165905 100644
--- a/plugins/board-resources/src/components/presenters/ColorPresenter.svelte
+++ b/plugins/board-resources/src/components/presenters/ColorPresenter.svelte
@@ -4,30 +4,27 @@
   export let value: number
   export let size: 'small' | 'medium' | 'large' = 'medium'
 
-  let isHovered = false
-
+  const hoverColor = numberToRGB(value, 0.6)
+  const color = numberToHexColor(value)
 </script>
 
+<style lang="scss">
+  .color-presenter {
+    background-color: var(--color-presenter-color);
+    &:hover {
+      background-color: var(--color-presenter-hoverColor);
+    }
+  }
+</style>
+
 {#if value}
   <div
-    class="border-radius-1 min-w-9"
+    class="color-presenter border-radius-1 min-w-9"
     class:h-8={size === 'large'}
     class:h-7={size === 'medium'}
     class:h-6={size === 'small'}
-    style:background-color={isHovered ? numberToRGB(value, 0.6) : numberToHexColor(value)}
-    on:click
-    on:mouseover={() => {
-      isHovered = true
-    }}
-    on:focus={() => {
-      isHovered = true
-    }}
-    on:mouseout={() => {
-      isHovered = false
-    }}
-    on:blur={() => {
-      isHovered = false
-    }}>
+    style="--color-presenter-color: {color}; --color-presenter-hoverColor: {hoverColor}"
+    on:click>
     <slot />
   </div>
 {/if}
diff --git a/plugins/board-resources/src/components/presenters/LabelPresenter.svelte b/plugins/board-resources/src/components/presenters/LabelPresenter.svelte
index 0b5a7f68af..5e5de6ea55 100644
--- a/plugins/board-resources/src/components/presenters/LabelPresenter.svelte
+++ b/plugins/board-resources/src/components/presenters/LabelPresenter.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
   import type { CardLabel } from '@anticrm/board'
-import ColorPresenter from './ColorPresenter.svelte'
+  import ColorPresenter from './ColorPresenter.svelte'
 
   export let value: CardLabel
   export let size: 'small' | 'medium' | 'large' = 'medium'
-
 </script>
 
 {#if value}