feat: customize colors for types #69
Conversation
src/popup.tsx
Outdated
| flexShrink: 0, | ||
| }} | ||
| ></div> | ||
| <svg |
There was a problem hiding this comment.
I don't think using svg directly in the tsx file is a good idea. Can u try use the svg as an image instead?
src/popup.tsx
Outdated
| colorsRef.current[idx] = node; | ||
| }} | ||
| className={`bg-${colors[idx]}-500 w-4 h-4`} | ||
| style={{ |
There was a problem hiding this comment.
className and style seems to be duplicated
src/popup.tsx
Outdated
| value={colorOption} | ||
| onChange={(e) => { | ||
| setColor(e.target.value); | ||
| console.log(e.target.value); |
src/popup.tsx
Outdated
| type="radio" | ||
| name="color" | ||
| className={`bg-${colorOption}-500 w-4 h-4 rounded-full`} | ||
| style={{ |
There was a problem hiding this comment.
ok,I'll use inline styles. Initially, I used className, but it had no effect, so I switched to style. I also noticed that Chrome's tab groups support 'grey' by default, but Tailwind CSS uses the American spelling 'gray'.
There was a problem hiding this comment.
Maybe you can modify the tailwind.config.js
src/popup.tsx
Outdated
| width="16" | ||
| height="16" | ||
| onClick={(e) => { | ||
| let nextIdx = |
src/popup.tsx
Outdated
| DEFAULT_COLOR.length; | ||
| const newColors = [...colors]; | ||
| newColors[idx] = DEFAULT_COLOR[nextIdx]; | ||
| colorsRef.current[idx].animate( |
There was a problem hiding this comment.
it seems that you are using refs only for transition for colors? You can just add transition-colors in tailwind to do so. If there is any other reason using refs pls let me know~
There was a problem hiding this comment.
Yes, you're right. I was planning to utilize refs to create a translation animation with transform. The sole advantage of using refs might be the convenience it offers when altering the animation later on. Should I delete it...
src/utils.ts
Outdated
| @@ -31,6 +31,17 @@ export const DEFAULT_GROUP = [ | |||
| "Utilities", | |||
| ]; | |||
|
|
|||
| export const DEFAULT_COLOR = [ | |||
There was a problem hiding this comment.
Since it's a fixed and unchanging choice for colors, maybe we can use enum for better types
|
BTW, since it's a breaking change in popup(which some other users might don't like it, you can check my latest main branch, there is a feature flags tab in options page, you can decide whether to show the colors picker in popup |
I have a question. If user have created serveral types without customizing colors, when he click this switch to enable customize colors, The color data for displaying types is sourced from where? And when he creates serveral types without customizing colors, do we need to generate a random color that is different from the previous type's color to save? |
By default we will use a random color unless user has specified a color for this type |
|
Sorry for the late merge, can you help me to solve the conflicts? |
|
It's okay, maybe I forgot to remind you. As a newbie, I really appreciate you letting me participate in the development of this feature and taking the time to review my low quality code and give feedback. If you did it yourself, you would be able to complete this feature very quickly. 😰😰 |
Hey I really appreciate your work! Without your help I can't bring it to a next level myself! |
Resolves #47