feat: ✨ Optimize the experience of setting colors

haydenull · Dec 6, 2022 · e51075a · e51075a
1 parent 4203f35
commit e51075a
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 5 deletions.
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
@@ -1,6 +1,16 @@
 import React, { useState } from 'react'
 import { SketchPicker } from 'react-color'
 
+const presetColors = [
+  '#ad1357', '#d81b60', '#d50001', '#e67c73',
+  '#f4511e', '#ef6c00', '#f09300', '#f6bf25',
+  '#e4c442', '#c0ca33', '#7cb342', '#33b679',
+  '#0a8043', '#009688', '#049be5', '#4285f4',
+  '#4050b5', '#7886cb', '#b39ddb', '#9e69af',
+  '#8e24aa', '#795648', '#616161', '#a79b8e',
+  '#333333', '#000000', '#ffffff',
+]
+
 const ColorPicker: React.FC<{
   text: string
   value?: string
@@ -16,12 +26,15 @@ const ColorPicker: React.FC<{
 
   return (
     <div>
-      <span style={{ backgroundColor: value }} className="px-2 py-1 rounded cursor-pointer shadow-md" onClick={() => setPickerVisible(true)}>{text}</span>
+      <div className="flex items-center cursor-pointer" onClick={() => setPickerVisible(true)}>
+        {text + ': '}
+        <span style={{ backgroundColor: value, boxShadow: 'inset 0px 0px 1px var(--ls-title-text-color)' }} className="rounded w-4 h-4 ml-1"></span>
+      </div>
       {pickerVisible && (
         <>
           <div className="bg-transparent fixed top-0 left-0 w-screen h-screen" onClick={() => setPickerVisible(false)}></div>
           <div className="fixed z-10 mt-2">
-            <SketchPicker color={value} onChange={onChangeColor} />
+            <SketchPicker color={value} onChange={onChangeColor} disableAlpha presetColors={presetColors} />
           </div>
         </>
       )}

diff --git a/src/helper/autoTextColor.ts b/src/helper/autoTextColor.ts
@@ -0,0 +1,15 @@
+const getTextColor = (bgColor: number[]) => {
+  // 当color值大于128时,color值偏向255,即#ffffff,此时字体颜色应为#333333
+  // 当color值小于128时,color值偏向0,即#000000,此时字体颜色应为#ffffff
+  const isWhiteBg = 0.213 * bgColor[0] + 0.715 * bgColor[1] + 0.072 * bgColor[2] > 255 / 2;
+  return isWhiteBg ? '#333333': '#ffffff'
+}
+
+/**
+ * get text color base on background color
+ * @param rbgColor rgba(11, 22, 33, 1)
+ */
+export const autoTextColor = (rbgColor: string) => {
+  const [red, green, blue, alpha] = rbgColor.replace(/(?:\(|\)|rgba)*/g, "").split(",")
+  return getTextColor([Number(red), Number(green), Number(blue)])
+}
diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
@@ -13,6 +13,7 @@ import { subscriptionSchedulesAtom } from '@/model/schedule'
 import { settingsAtom } from '@/model/settings'
 import { getSubCalendarSchedules } from '@/util/subscription'
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
+import { set, get, cloneDeep } from 'lodash'
 
 import Tabs from './components/Tabs'
 import s from './index.module.less'
@@ -21,6 +22,7 @@ import { managePluginTheme } from '@/util/util'
 import dayjs from 'dayjs'
 import { getTodoistInstance } from '@/helper/todoist'
 import { TodoistApi } from '@doist/todoist-api-typescript'
+import { autoTextColor } from '@/helper/autoTextColor'
 
 const TABS = [
   { value: 'basis', label: 'Basis' },
@@ -64,20 +66,45 @@ const Settings: React.FC<{
     onValuesChange({ calendarList }, settingForm.getFieldsValue(true))
   }
   const onValuesChange = (changedValues: Partial<ISettingsForm>, allValues: ISettingsForm) => {
+    let _allValues = cloneDeep(allValues);
+
+    // Automatically changes the color of text and border when the background color changes
+    ['logKey', 'journal'].forEach(key => {
+      const bgColor = get(changedValues, [key, 'bgColor'])
+      if (bgColor) {
+        const textColor = autoTextColor(bgColor)
+        settingForm.setFieldValue([key, 'textColor'], textColor)
+        settingForm.setFieldValue([key, 'borderColor'], bgColor)
+        set(_allValues, [key, 'textColor'], textColor)
+        set(_allValues, [key, 'borderColor'], bgColor)
+      }
+    });
+    ['projectList', 'calendarList', 'subscriptionList'].forEach(key => {
+      const index = get(changedValues, [key])?.findIndex(Boolean)
+      const bgColor = get(changedValues, [key, index, 'bgColor'])
+      if (bgColor) {
+        const textColor = autoTextColor(bgColor)
+        settingForm.setFieldValue([key, index, 'textColor'], textColor)
+        settingForm.setFieldValue([key, index, 'borderColor'], bgColor)
+        set(_allValues, [key, index, 'textColor'], textColor)
+        set(_allValues, [key, index, 'borderColor'], bgColor)
+      }
+    });
+
     if (changedValues.todoist?.token?.length === 40) {
       const todoist = getTodoistInstance(changedValues.todoist?.token)
       setTodoistOptions(todoist)
     }
-    setSettings(allValues)
+    setSettings(_allValues)
     // hack https://github.com/logseq/logseq/issues/4447
     logseq.updateSettings({calendarList: 1, subscriptionList: 1, projectList: 1})
     logseq.updateSettings({
       // ensure subscription list is array
       subscriptionList: [],
       projectList: [],
-      ...allValues,
+      ..._allValues,
       // supports delete ignore tag
-      ignoreTag: allValues.ignoreTag || null,
+      ignoreTag: _allValues.ignoreTag || null,
     })
 
     if (typeof changedValues.weekStartDay === 'number') {