obsidian-plugin/peritus_obsidian-interactive-ratings
1
0
Fork 0
mirror of https://github.com/peritus/obsidian-interactive-ratings.git synced 2026-07-22 05:43:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
No description
109 commits 1 branch 9 tags 450 KiB
TypeScript 75.2%
CSS 13%
JavaScript 11.8%
Find a file
Filip Noetzel 9b21e5e6bd Add distinct CSS class for half symbols and enhance customization 
- Updated applySymbolState.ts to support 'half' state for half-filled symbols
- Modified renderRating.ts to apply 'half' state to half symbols (instead of 'rated')
- Updated previewRating.ts to use distinct states during hover preview for consistency
- Added CSS styling for .interactive-rating-symbol--half class with 80% opacity
- Added high contrast accessibility support for half symbols (60% opacity with enhanced contrast)
- Enhanced CSS-CUSTOMIZATION.md with comprehensive examples for half symbols including:
  * Basic color styling for filled/half/empty symbols
  * Gradient effects for half symbols
  * Enhanced hover effects for all three states
  * Different styling examples for various symbol types
  * Updated default styling documentation
  * Enhanced accessibility considerations
  * Updated migration guide

This completes the full CSS customization system with distinct classes for:
- .interactive-rating-symbol--rated (filled symbols)
- .interactive-rating-symbol--half (half symbols) 
- .interactive-rating-symbol--empty (empty symbols)
- .interactive-rating-symbol--unrated (full-only grayed symbols)
2025-06-24 06:36:18 +02:00
.github/workflows re-enable npm build for github actions 2025-03-20 07:01:23 +01:00
src Add distinct CSS class for half symbols and enhance customization 2025-06-24 06:36:18 +02:00
.bumpversion.toml Bump version: 1.0.5 → 1.0.6 2025-06-10 09:25:20 +02:00
.gitignore move to typescript 2025-03-20 06:59:03 +01:00
codemcp.toml setup codemcp.toml 2025-06-08 10:45:54 +02:00
CSS-CUSTOMIZATION.md Add distinct CSS class for half symbols and enhance customization 2025-06-24 06:36:18 +02:00
esbuild.config.js Add CodeMirror editor extension to make ratings interactive in editing mode 2025-06-08 10:45:54 +02:00
LICENSE Initial commit 2025-03-17 17:35:08 +01:00
manifest.json Bump version: 1.0.5 → 1.0.6 2025-06-10 09:25:20 +02:00
package-lock.json feat: use esbuild for greating a single output file named main.js 2025-03-31 22:05:59 +02:00
package.json Bump version: 1.0.5 → 1.0.6 2025-06-10 09:25:20 +02:00
README.md Re-arrange README 2025-06-10 08:36:37 +02:00
screencast.gif add README + screencast 2025-03-17 17:30:05 +01:00
styles.css Add distinct CSS class for half symbols and enhance customization 2025-06-24 06:36:18 +02:00
tsconfig.json move source to src/*.ts 2025-03-31 22:05:59 +02:00

README.md

Interactive Ratings Plugin for Obsidian

Add interactive rating symbols to your notes that update with a click.

demo of the Interactive Ratings Plugin for Obsidian

Supported Symbol Sets

Symbol Type Full Empty Half Examples
Stars ★ ☆ ★★★☆☆ (3/5) Book rating
Star Symbols ✦ ✧ ✦✦✦✧✧ (3/5) Stargazing
Moon Phases 🌕 🌑 🌗 🌕🌕🌗🌑🌑 (2.5/5) Lunar observation
Circles ● ○ ◐ ●●●○○○○○○○ 3/10 Movie review scale
Squares ■ □ ◧ ■■■□ (3/4) Recipe difficulty
Triangles ▲ △ ▲▲▲▲▲△△△△△△△ 5/12 Hiking difficulty
Red Hearts ❤️ 🤍 ❤️❤️❤️🤍🤍 (3/5) Celebrity crush
Orange Hearts 🧡 🤍 🧡🧡🧡🧡🤍 80% Sunset addiction
Yellow Hearts 💛 🤍 💛💛🤍🤍 2/4 Wizard vibes
Green Hearts 💚 🤍 💚💚💚🤍🤍🤍 50% Plant guilt
Blue Hearts 💙 🤍 💙💙🤍🤍🤍 (2/5) Ocean yearning
Purple Hearts 💜 🤍 💜💜💜💜🤍 4/5 Unicorn belief
Black Hearts 🖤 🤍 🖤🖤🖤🤍 75% Villain sympathy
Brown Hearts 🤎 🤍 🤎🤎🤍🤍🤍 (2/5) Chocolate dependency
Block Progress █ ▁ ███▁▁▁ (3/6) Project completion
Braille Dots ⣿ ⣀ ⡇ ⣿⣿⡇⣀⣀⣀⣀⣀⣀⣀ 2.5/10
Solid/Empty Circles ⬤ ○ ⬤⬤⬤○○○○○○○○○ 25% Budget spending
Solid/Empty Squares ■ □ ■■■□□□□ 3/7 Weekly progress
Dotted Squares ▰ ▱ ▰▰▰▱▱▱▱▱▱▱ (3/10) Task complexity
Filled/Empty Rectangles ◼ ▭ ◼◼◼▭ 75% Reading progress
Vertical Bars ▮ ▯ ▮▮▮▮▮▮▯▯▯▯▯▯ 50% Battery level
Bold Circles ⬤ ◯ ⬤◯◯ 1/3 Quick product review
Black/White Circles ⚫ ⚪ ⚫⚫⚫⚫⚫⚪⚪⚪⚪⚪ (5/10) Coffee strength
Block/Light Shade █ ░ ███░░░░░░░ 30% Download progress

Usage

Type any supported symbol sequence (minimum 3 identical symbols) in your note. When you hover over these symbols in edit mode, clicking on one of the symbols allowing you to update the rating.

Rating Text (optional)

Add numerical ratings with these formats:

  • ★★★☆☆ - Only symbols, no rating text
  • ★★★☆☆ 3/5 - Fraction without parentheses
  • ★★★☆☆ (3/5) - Fraction in parentheses
  • ★★★☆☆ 60% - Percentage
  • ★★★☆☆ (60%) - Percentage in parentheses

The numerical rating updates automatically when you change the symbols.

Custom Emojis

You can configure which emojis are supported for rating interactions by going to Settings → Community Plugins → Interactive Ratings. In the "Emojis to support in ratings" setting, enter any emojis you want to use for ratings.

Default emojis: 🎥🏆⭐💎🔥⚡🎯🚀💰🎖️

Example usage:

  • 🎥🎥🎥🎥🎥 (4/5) Movie rating
  • 🏆🏆🏆 3/5 Achievement level
  • 🔥🔥🔥🔥 80% Spice level
  • 🎯🎯🎯🎯🎯🎯 (5/6) Accuracy rating

Installation

  1. In Obsidian settings, go to Community Plugins
  2. Disable Safe Mode
  3. Search for "Interactive Ratings"
  4. Install and enable the plugin

Use Cases

  • Book/Media Reviews: ★★★★☆☆☆☆☆☆ Just okay, 4/10
  • Habit Tracking: Exercise: ●●●○○○○ (3/7) days this week
  • Project Status: Client project: ████████░░ 80% complete
  • Recipe Notes: Pasta recipe: ■■■□ (3/4) difficulty, would make again
  • Learning Progress: Spanish vocabulary: ⬤⬤⬤⬤⬤⬤◯◯◯◯ 60% mastered

Support

For issues or feature requests: GitHub repository

License

MIT