starred/BoostNote-App

Fork 0

mirror of https://github.com/BoostIO/BoostNote-App.git synced 2026-04-26 21:05:55 +03:00

[PR #704] [MERGED] Add tag colors setup #856

New issue

Closed

opened 2026-03-03 00:23:30 +03:00 by kerem · 0 comments

kerem commented

2026-03-03 00:23:30 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/BoostIO/BoostNote-App/pull/704
Author: @Komediruzecki
Created: 11/30/2020
Status: ✅ Merged
Merged: 1/3/2021
Merged by: @Rokt33r

Base: master ← Head: feature/add-colored-tags

📝 Commits (1)

d71ce2c Add tag colors setup

📊 Changes

21 files changed (+382 additions, -92 deletions)

View changed files

📝 package-lock.json (+4 -12)
📝 package.json (+2 -0)
📝 src/components/atoms/TagNavigatorListItem.tsx (+90 -38)
📝 src/components/atoms/TagNavigatorNewTagPopup.tsx (+1 -1)
➕ src/components/atoms/dialog/DialogColorPicker.tsx (+41 -0)
📝 src/components/atoms/dialog/styled.ts (+59 -0)
📝 src/components/molecules/FolderNavigatorItem.tsx (+1 -0)
📝 src/components/molecules/NoteDetailTagNavigator.tsx (+24 -12)
📝 src/components/molecules/NoteItem.tsx (+31 -10)
📝 src/components/molecules/StorageNavigatorFragment.tsx (+1 -0)
📝 src/components/molecules/TagListFragment.tsx (+1 -0)
📝 src/components/organisms/NoteListNavigator.tsx (+16 -2)
📝 src/components/organisms/NotePageToolbar.tsx (+25 -6)
📝 src/components/organisms/NoteStorageNavigator.tsx (+1 -0)
📝 src/components/organisms/SearchModal.tsx (+2 -2)
📝 src/components/pages/NotePage.tsx (+6 -0)
📝 src/lib/colors.ts (+4 -7)
📝 src/lib/db/FSNoteDb.ts (+8 -0)
📝 src/lib/db/PouchNoteDb.ts (+8 -1)
📝 src/lib/db/createStore.ts (+38 -1)

...and 1 more files

📄 Description

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

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/BoostIO/BoostNote-App/pull/704 **Author:** [@Komediruzecki](https://github.com/Komediruzecki) **Created:** 11/30/2020 **Status:** ✅ Merged **Merged:** 1/3/2021 **Merged by:** [@Rokt33r](https://github.com/Rokt33r) **Base:** `master` ← **Head:** `feature/add-colored-tags` --- ### 📝 Commits (1) - [`d71ce2c`](https://github.com/BoostIO/BoostNote-App/commit/d71ce2c674708c458573ae3ee1845ea59a74f325) Add tag colors setup ### 📊 Changes **21 files changed** (+382 additions, -92 deletions) <details> <summary>View changed files</summary> 📝 `package-lock.json` (+4 -12) 📝 `package.json` (+2 -0) 📝 `src/components/atoms/TagNavigatorListItem.tsx` (+90 -38) 📝 `src/components/atoms/TagNavigatorNewTagPopup.tsx` (+1 -1) ➕ `src/components/atoms/dialog/DialogColorPicker.tsx` (+41 -0) 📝 `src/components/atoms/dialog/styled.ts` (+59 -0) 📝 `src/components/molecules/FolderNavigatorItem.tsx` (+1 -0) 📝 `src/components/molecules/NoteDetailTagNavigator.tsx` (+24 -12) 📝 `src/components/molecules/NoteItem.tsx` (+31 -10) 📝 `src/components/molecules/StorageNavigatorFragment.tsx` (+1 -0) 📝 `src/components/molecules/TagListFragment.tsx` (+1 -0) 📝 `src/components/organisms/NoteListNavigator.tsx` (+16 -2) 📝 `src/components/organisms/NotePageToolbar.tsx` (+25 -6) 📝 `src/components/organisms/NoteStorageNavigator.tsx` (+1 -0) 📝 `src/components/organisms/SearchModal.tsx` (+2 -2) 📝 `src/components/pages/NotePage.tsx` (+6 -0) 📝 `src/lib/colors.ts` (+4 -7) 📝 `src/lib/db/FSNoteDb.ts` (+8 -0) 📝 `src/lib/db/PouchNoteDb.ts` (+8 -1) 📝 `src/lib/db/createStore.ts` (+38 -1) _...and 1 more files_ </details> ### 📄 Description 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: ![InstructionsTagsChosingColor](https://user-images.githubusercontent.com/18196945/100648986-0c2bfe80-3342-11eb-95de-b981b5c5d06a.png) Some colored tags preview: ![ColoredTagsNotePreview](https://user-images.githubusercontent.com/18196945/100649027-206ffb80-3342-11eb-8227-343b2d74ba50.png) ![ColoredTagsNotePreview_Colored](https://user-images.githubusercontent.com/18196945/100648955-00d8d300-3342-11eb-98f1-ede62349befd.png) v0.11.5 - new tag location examples: ![ColorChoser](https://user-images.githubusercontent.com/18196945/101239142-7697c280-36e5-11eb-8d33-fdc0317eb63b.png) ![ColorList](https://user-images.githubusercontent.com/18196945/101239144-77305900-36e5-11eb-8005-c02c9e8dc143.png) Test: - In electron Linux App (dev) - In electron Linux App production version (appImage)  --- <details> <summary> <b>IssueHunt Summary</b> </summary> ### Referenced issues This pull request has been submitted to: - [#323: Add colors to tags](https://issuehunt.io/repos/74213528/issues/323) --- </details>  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem

2026-03-03 00:23:30 +03:00

closed this issue
added the
pull-request
label

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/BoostNote-App#856

No description provided.

Rows
Columns