Fix a bunch of bugs related to the color picker UX

WorldBrain · Jul 27, 2024 · 3a034d3 · 3a034d3
1 parent e398e53
commit 3a034d3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
diff --git a/src/annotations/components/highlightColorPicker/index.tsx b/src/annotations/components/highlightColorPicker/index.tsx
@@ -118,14 +118,14 @@ export default class HighlightColorPicker extends React.Component<
  }
 
  componentWillUnmount(): void {
- if (this.state.highlightColorStateChanged) {
- this.saveHighlightColorSettings()
- }
+ // if (this.state.highlightColorStateChanged) {
+ //  this.saveHighlightColorSettings()
+ // }
  }
 
- getHighlightColorSettings = async () => {
+ getHighlightColorSettings = async (forceUpdate?) => {
  let highlightColors = this.state.highlightColorSettingState
- if (!highlightColors) {
+ if (!highlightColors || forceUpdate) {
  highlightColors = await this.syncSettings.highlightColors.get(
  'highlightColors',
  )
@@ -176,6 +176,9 @@ export default class HighlightColorPicker extends React.Component<
  modifyDomHighlightColor(highlight, colorItem)
  }
  }
+ this.setState({
+ highlightColorSettingState: this.state.highlightColorSettingState,
+ })
 
  await this.syncSettings.highlightColors.set(
  'highlightColors',
@@ -195,11 +198,12 @@ export default class HighlightColorPicker extends React.Component<
  onClick={(event) => {
  event.stopPropagation()
  }}
+ key={'ColorEditBox' + index}
  >
  <TopBarBox>
  <PrimaryAction
  label={'Cancel'}
- onClick={(event) => {
+ onClick={async (event) => {
  let highlights: NodeListOf<Element> = document.querySelectorAll(
  '.' + DEF_HIGHLIGHT_CSS_CLASS,
  )
@@ -225,11 +229,10 @@ export default class HighlightColorPicker extends React.Component<
  const newShowEditColor = [
  ...this.state.showEditColor,
  ]
+
+ this.getHighlightColorSettings(true)
  newShowEditColor[index] = false
  this.setState({
- highlightColorSettingState: [
- ...this.state.highlightColorSettingState,
- ],
  showColorEditorPanel: false,
  showEditColor: newShowEditColor,
  })
@@ -465,6 +468,7 @@ export default class HighlightColorPicker extends React.Component<
  }}
  active={this.state.showEditColor[i]}
  selected={this.state.selectedRow === i}
+ key={colorId}
  >
  <ColorPickerCircle
  backgroundColor={RGBAobjectToString(