Add tag colors setup #704

Komediruzecki · 2020-11-30T18:28:40Z

Add tag colors setup (#323):

Add tag context menu (right click on tag) for chosing colors
Add react color as color pickers library
Add basic DB management for tags with color (FSNote, PouchDB, createStore API)
Add basic UI component (react-color) for choosing the color
Add basic handling of color brightness in tags and hover styles (black/white inversion, brigther, dimmer when bg is dark/light)
Add colored tags inside note list note tag list

Fix right click context menu in sidebar

How it works:
Users can right click on any tag in note tag list. The color picker comes up and on selection it changes colors (preview is below in color slider at right corner), below that are some predefined colors which can be clicked. Once user is satisfied with color, to close the dialog any click outside of the color picker will do. The color is then updated in UI acordingly.

For background colors which are too dark, hovering the tag will brighten it up, opposite works too.
For background colors which are too dark, text and remove tag button are light/white and vice versa.

The following image shows picking color:

Some colored tags preview:

v0.11.5 - new tag location examples:

Test:

In electron Linux App (dev)
In electron Linux App production version (appImage)

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

#323: Add colors to tags

Rokt33r · 2020-12-06T21:37:27Z

src/components/atoms/TagNavigatorListItem.tsx

+  const [colorPickerModal, showColorPickerModal] = useState(false)
+
+  const openTagContextMenu: React.MouseEventHandler = useCallback(
+    (_) => {


If you don't need to access the event parameter, you don't need to provide the handler type

Rokt33r · 2020-12-06T21:39:18Z

src/components/organisms/NotePageToolbar.tsx

+          title: 'Cannot update tag color.',
+          description: 'Invalid note or tag.',
+        })
+        console.log('Tag name or note was null', 'requested color:', color)


Delete this!

Rokt33r · 2020-12-06T21:40:31Z

src/components/pages/NotePage.tsx

@@ -220,12 +220,18 @@ const NotePage = ({ storage }: NotePageProps) => {

  const { showSearchModal } = useSearchModal()

+  const storageTags = useMemo(() => {
+    if (storage == null) return []
+    return values(storage.tagMap).map((tag) => tag)


[...storage.tagMap.values()]

There is no values() on ObjectMap

So final should be:
return [...values(storage.tagMap)]? copy of tags
or maybe even
return values(storage.tagMap)? raw values

Rokt33r · 2020-12-06T21:40:44Z

src/components/pages/WikiNotePage.tsx

@@ -77,11 +78,17 @@ const WikiNotePage = ({ storage }: WikiNotePageProps) => {

  const { showSearchModal } = useSearchModal()

+  const storageTags = useMemo(() => {
+    if (storage == null) return []
+    return values(storage.tagMap).map((tag) => tag)


[...storage.tagMap.values()]

There is no values() on ObjectMap

So final should be:
return [...values(storage.tagMap)]? copy of tags
or maybe even
return values(storage.tagMap)? raw values

Rokt33r · 2020-12-06T21:41:03Z

src/lib/colors.ts

+
+const brightnessDefaultThreshold = 110
+
+export function getColorBrightness(color: RGBColor | string | null) {


Don't accept null

Rokt33r · 2020-12-06T21:43:34Z

src/lib/colors.ts

+}
+
+export function isColorBright(
+  color: RGBColor | string | null,


Dont accept null

Rokt33r · 2020-12-06T21:45:15Z

src/lib/db/createStore.ts

@@ -922,6 +928,7 @@ export function createDbStoreCreator(
              return {
                ...(await targetStorage.db.getTag(tagName))!,
                name: tagName,
+                color: '',


If color is not set, I'd like to leave it as undefined

Rokt33r · 2020-12-06T21:45:47Z

src/lib/db/createStore.ts

+      map[name] = {
+        ...tagDoc,
+        name,
+        color: tagDoc.color || '',


Don't fill empty string.

Rokt33r · 2020-12-06T21:48:13Z

src/lib/db/types.ts

@@ -70,6 +70,7 @@ export type TagDoc = {
 } & TagDocEditibleProps

 export type TagDocEditibleProps = {
+  color?: string
  data: JsonObject


I'd like to put it in data like bookmarked prop of NoteDoc

It's a bit more work, because it is not a boolean.
But I think I managed to do it.

Rokt33r · 2020-12-06T21:48:38Z

src/lib/styled/styleFunctions.ts

@@ -199,3 +204,14 @@ export const flexCenter = () => `display: flex;
 align-items: center;
 justify-content: center;
 `
+
+export const tagBgColor = ({ theme, color }: StyledProps & TagStyleProps) => `


tagBackgroundColor

Rokt33r · 2020-12-14T22:12:50Z

src/lib/db/createStore.ts

+      map[name] = {
+        ...tagDoc,
+        name,
+        color: tagColor,


We can access color directly from tagDoc.data.color I don't see any benifits

True, a mistake! Fixed now!

Rokt33r · 2020-12-14T22:13:05Z

src/lib/db/types.ts

@@ -118,6 +118,7 @@ export type PopulatedFolderDoc = FolderDoc & {

 export type PopulatedTagDoc = TagDoc & {
  name: string
+  color?: string


Should be discarded

Yes, correct. Done!

guneskaan · 2020-12-20T14:49:39Z

@Rokt33r, @Komediruzecki: One concern I have with this is that the web browser users will not be able to right click on tags and open the context menu, as they can only perform left click. Instead, you can add a control to the SideNavigatorItem, where the users can click on the three vertical dots to open the context menu (similar to note and folder context menus).

I've implemented this in #730. Feel free to copy over the code, or change the implementation.

Komediruzecki · 2020-12-20T20:21:45Z

@Rokt33r, @Komediruzecki: One concern I have with this is that the web browser users will not be able to right click on tags and open the context menu, as they can only perform left click. Instead, you can add a control to the SideNavigatorItem, where the users can click on the three vertical dots to open the context menu (similar to note and folder context menus).

I've implemented this in #730. Feel free to copy over the code, or change the implementation.

Hi,

I agree that it will be a problem for users who don't have the typical right-click option (I suppose you mean mobile browser users or native android version in general?)

I looked over the PR and I am missing some images how all of this looks like, can you share them?
Also, if there are three dots next to the tags list, which tag will be renamed? it should be possible for any tag? If so, this might be a bit trickier than adding such control (or I might be mistaken if this is something else, maybe a picture would help to visualize it).

If the implementation wise makes sense, sure I will transfer the code or rebase it onto it if it merges to master sooner.

guneskaan · 2020-12-21T07:20:09Z

I should've attached some pictures to make it clear, my bad. The web browser app (www.boostnote.io/app) will not allow users to right click. This is not the case only for mobile users, but for desktop browser users as well. This is what they'll see when they right click:

By adding a control option (three vertical dots) to the list view, we can allow them to view the context menu by left clicking on this button:

This control option may not be possible in the note view due to lack of space. But even then, I believe we should give the user the ability to use this feature through the list view

Komediruzecki · 2020-12-21T07:26:19Z

I should've attached some pictures to make it clear, my bad. The web browser app (www.boostnote.io/app) will not allow users to right click. This is not the case only for mobile users, but for desktop browser users as well. This is what they'll see when they right click:

By adding a control option (three vertical dots) to the list view, we can allow them to view the context menu by left clicking on this button:

This control option may not be possible in the note view due to lack of space. But even then, I believe we should give the user the ability to use this feature through the list view

Oh, I see, you are right. I'll rebase and integrate changes to make it easier for those users too. Thanks for the suggestion.

Rokt33r · 2021-01-03T19:52:08Z

src/components/atoms/TagNavigatorListItem.tsx

+    },
+    [tag, updateTagColorByName]
+  )
+  const tagColor = useCallback(() => {


Use useMemo

Rokt33r · 2021-01-03T19:57:43Z

src/components/atoms/dialog/DialogColorPicker.tsx

+  colorBrightness: number
+}
+
+export default class DialogColorPicker extends React.Component<


I don't see any benefits to make a class component. Please covert this into a function component!

True, refactored

Add tag context menu (right click on tag) for chosing colors Add react color as color pickers library Add basic DB management for tags with color (FSNote, PouchDB, createStore API) Add basic UI component (react-color) for choosing the color Add basic handling of color brightness in tags and hover styles (black/white inversion, brigther, dimmer when bg is dark/light) Add colored tags inside note list note tag list

Komediruzecki requested a review from Rokt33r November 30, 2020 18:28

Komediruzecki added this to Waiting for review in Dev kanban Nov 30, 2020

Komediruzecki force-pushed the feature/add-colored-tags branch 2 times, most recently from a989841 to fb181c1 Compare December 5, 2020 09:30

Komediruzecki self-assigned this Dec 5, 2020

Rokt33r requested changes Dec 6, 2020

View reviewed changes

Rokt33r added the awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. label Dec 6, 2020

Komediruzecki force-pushed the feature/add-colored-tags branch 2 times, most recently from d48ce37 to f8ac689 Compare December 9, 2020 16:28

Komediruzecki added awaiting review ❇️ Pull request is awaiting a review. and removed awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. labels Dec 9, 2020

Rokt33r requested changes Dec 14, 2020

View reviewed changes

Rokt33r added awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. and removed awaiting review ❇️ Pull request is awaiting a review. labels Dec 14, 2020

Komediruzecki added awaiting review ❇️ Pull request is awaiting a review. and removed awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. labels Dec 15, 2020

Komediruzecki requested a review from Rokt33r December 15, 2020 10:28

Komediruzecki mentioned this pull request Dec 21, 2020

tags标签只能新建，不能删除 #731

Closed

Komediruzecki force-pushed the feature/add-colored-tags branch from 4a3860f to 65e6637 Compare December 24, 2020 10:46

Rokt33r requested changes Jan 3, 2021

View reviewed changes

Komediruzecki force-pushed the feature/add-colored-tags branch from 65e6637 to d71ce2c Compare January 3, 2021 20:39

Komediruzecki requested a review from Rokt33r January 3, 2021 20:45

Rokt33r merged commit 94732ec into BoostIO:master Jan 3, 2021

Rokt33r added this to the v0.13 milestone Jan 3, 2021

Komediruzecki removed the awaiting review ❇️ Pull request is awaiting a review. label Jan 6, 2021

Komediruzecki mentioned this pull request Jan 6, 2021

Add colors to tags #323

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add tag colors setup #704

Add tag colors setup #704

Komediruzecki commented Nov 30, 2020 •

edited by issuehunt-oss bot

Rokt33r Dec 6, 2020

Komediruzecki Dec 9, 2020

Rokt33r Dec 6, 2020

Komediruzecki Dec 9, 2020

Rokt33r Dec 6, 2020

Komediruzecki Dec 9, 2020

Rokt33r Dec 6, 2020

Komediruzecki Dec 9, 2020 •

edited

Rokt33r Dec 6, 2020

Komediruzecki Dec 9, 2020

Rokt33r Dec 6, 2020

Komediruzecki Dec 9, 2020

Rokt33r Dec 6, 2020

Komediruzecki Dec 9, 2020

Rokt33r Dec 6, 2020

Komediruzecki Dec 9, 2020

Rokt33r Dec 6, 2020

Komediruzecki Dec 9, 2020

Rokt33r Dec 6, 2020

Komediruzecki Dec 9, 2020

Rokt33r Dec 14, 2020

Komediruzecki Dec 15, 2020

Rokt33r Dec 14, 2020

Komediruzecki Dec 15, 2020

guneskaan commented Dec 20, 2020

Komediruzecki commented Dec 20, 2020 •

edited

guneskaan commented Dec 21, 2020

Komediruzecki commented Dec 21, 2020

Rokt33r Jan 3, 2021

Komediruzecki Jan 3, 2021

Rokt33r Jan 3, 2021

Komediruzecki Jan 3, 2021


		const brightnessDefaultThreshold = 110

		export function getColorBrightness(color: RGBColor \| string \| null) {

Add tag colors setup #704

Add tag colors setup #704

Conversation

Komediruzecki commented Nov 30, 2020 • edited by issuehunt-oss bot

Referenced issues

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Komediruzecki Dec 9, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

guneskaan commented Dec 20, 2020

Komediruzecki commented Dec 20, 2020 • edited

guneskaan commented Dec 21, 2020

Komediruzecki commented Dec 21, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Komediruzecki commented Nov 30, 2020 •

edited by issuehunt-oss bot

Komediruzecki Dec 9, 2020 •

edited

Komediruzecki commented Dec 20, 2020 •

edited