add Style Section to settings

CHANGELOG.md

@@ -0,0 +1,64 @@
+# Changelog
+
+All notable changes to Rich Foot will be documented in this file.
+
+## [1.5.0] - 2024-10-31
+
+### Added
+- New Style Settings section in plugin settings
+- Border customization options:
+  - Border width slider (1-10px)
+  - Border style dropdown with 8 styles
+  - Border opacity slider (0-1)
+- Link appearance controls:
+  - Border radius slider (0-15px)
+  - Links opacity slider (0-1)
+- Date display controls:
+  - Dates opacity slider (0-1)
+- Reset buttons for all customization options
+- Improved settings UI organization
+
+### Changed
+- Reorganized settings panel for better usability
+- Updated documentation to reflect new customization options
+- Improved CSS variable management for better theme compatibility
+
+## [1.4.0] - 2023-10-28
+
+### Added
+- Display `Outlinks` (under the `Backlinks` section)
+- Updated Settings page:
+  - Toggle controls for Backlinks, Outlinks, and Created/Modified dates
+  - Improved Exclude Folders controls for easier management
+
+## [1.3.3] - 2023-10-21
+
+### Fixed
+- Only create backlinks to notes, not files like images
+- Fixed issue with backlinks being removed/re-added when scrolling long notes
+- Fixed issue with rich-foot being displayed to the right of notes in editing mode
+
+## [1.3.0] - 2023-10-17
+
+### Fixed
+- Compatibility issues with Obsidian v1.7.2+ that introduces `DeferredView`
+
+## [1.2.0] - 2023-10-12
+
+### Changed
+- Don't create backlinks that reference themselves
+
+## [1.1.0] - 2023-10-09
+
+### Added
+- Support for `rich-foot` rendering in both `editing` and `live preview` modes
+
+## [1.0.0] - 2023-09-23
+
+### Added
+- Initial release
+- Backlinks displayed as tags in note footers
+- Created/Modified dates display
+- Stylish appearance with tag-like links
+- Folder exclusion feature
+- Basic settings configuration

README.md

@@ -9,6 +9,7 @@ Rich Foot is an Obsidian plugin that enhances the footer of your notes by adding
 - Displays `created` and `modified` dates for each note
 - Supports links in frontmatter
 - Stylish appearance with tag-like links
+- Highly customizable appearance with opacity and border controls
 - Option to exclude folder(s) from displaying 🦶 Rich Foot
 
 ## Installation
@@ -53,6 +54,24 @@ You can toggle the visibility of each section:
 - Show/Hide Outlinks (disabled by default)
 - Show/Hide Dates
 
+### Style Settings
+
+Customize the appearance of your Rich Foot:
+
+#### Border Customization
+- **Border Width**: Adjust thickness from 1-10px
+- **Border Style**: Choose from various styles (solid, dashed, dotted, double, groove, ridge, inset, outset)
+- **Border Opacity**: Control border transparency (0-1)
+
+#### Links Customization
+- **Link Border Radius**: Adjust the roundness of link corners (0-15px)
+- **Links Opacity**: Control transparency of backlinks and outlinks (0-1)
+
+#### Dates Customization
+- **Dates Opacity**: Control transparency of created/modified dates (0-1)
+
+Each setting includes a reset button to quickly return to default values.
+
 ### Excluding Folders
 
 You can prevent Rich Foot from appearing in specific folders:

SOW.md

@@ -0,0 +1,66 @@
+# Rich Foot Border Customization Implementation Plan
+
+## Setup & Configuration
+- [x] Add new settings to data.json schema for border properties
+  - borderWidth (number)
+  - borderStyle (string)
+  - borderColor (string)
+  - borderOpacity (number)
+  - borderRadius (number)
+  - datesOpacity (number)
+  - linksOpacity (number)
+- [x] Add default values in main.js
+  - width: 1
+  - style: "dashed"
+  - color: "var(--text-accent)"
+  - opacity: 1
+  - radius: 15
+  - dates opacity: 1
+  - links opacity: 1
+
+## Settings UI Implementation
+- [x] Create new "Border Settings" section in settings tab
+  - [x] add a reset button to reset to default values
+- [x] Implement slider control for border width (1-10px)
+  - [x] add a reset button to reset to default values
+- [x] Create dropdown for border styles (solid, dashed, dotted, double, groove, ridge, inset, outset)
+  - [x] add a reset button to reset to default values
+- [x] Build color swatch picker component
+  - [x] Create grid layout for swatches
+  - [x] Add Obsidian extended color variables
+  - [x] Style swatches to display actual colors using variables
+  - [x] Add selection indicator for active color
+  - [x] add a reset button to reset to default values
+- [x] Add opacity slider control (0-1 with 0.1 steps)
+  - [x] add a reset button to reset to default values
+- [x] Add border radius slider control (0-15px)
+  - [x] add a reset button to reset to default values
+- [x] Add dates opacity slider control (0-1 with 0.1 steps)
+  - [x] add a reset button to reset to default values
+- [x] Add links opacity slider control (0-1 with 0.1 steps)
+  - [x] add a reset button to reset to default values
+
+## CSS Implementation
+- [x] Update .rich-foot--dashed-line class to use new customizable properties
+- [x] Add CSS for settings UI components
+  - [x] Style slider
+  - [x] Style dropdown
+  - [x] Style color swatch grid
+  - [x] Style active color indicator
+
+## Testing
+- [ ] Test all border styles render correctly
+- [ ] Verify color swatches display correct colors
+- [ ] Test settings persistence
+- [ ] Test default values
+- [ ] Test opacity controls
+  - [ ] Border opacity
+  - [ ] Dates opacity
+  - [ ] Links opacity
+- [ ] Test border radius control
+- [ ] Cross-theme testing
+
+## Documentation
+- [ ] Update README with new customization options
+- [ ] Add screenshots of new settings UI
+- [ ] Document new CSS variables and classes

UPDATE.md

@@ -1,6 +1,17 @@
-# What's New in Rich Foot
+## 🎉 What's New
 
-## v1.4.1
-### Added
-- New Update Notification
+### v1.5.0
+#### New Customization Options
+Rich Foot now offers extensive customization options for fine-tuning the appearance of your note footers:
 
+##### Border Controls
+- Adjustable border width (1-10px)
+- Multiple border styles (solid, dashed, dotted, double, groove, ridge, inset, outset)
+- Border opacity control (0-1)
+
+##### Link Appearance
+- Customizable border radius for links (0-15px)
+- Opacity control for backlinks and outlinks (0-1)
+
+##### Date Display
+- Adjustable opacity for created/modified dates (0-1)

manifest.json

@@ -1,7 +1,7 @@
 {
     "id": "rich-foot",
     "name": "Rich Foot",
-    "version": "1.4.1",
+    "version": "1.5.0",
     "minAppVersion": "1.6.0",
     "description": "Adds backlink tags and created/modified dates to the footer of your notes.",
     "author": "Justin Parker",

package.json

@@ -1,7 +1,7 @@
 {
   "scripts": {
     "test-build": "node esbuild.config.mjs production && cp styles.css main.js manifest.json example-vault/rich-foot-example/.obsidian/plugins/rich-foot",
-    "build": "npm run dev && zip -r example-vault.zip example-vault"
+    "build": "npm run test-build && zip -r example-vault.zip example-vault"
   },
   "devDependencies": {
     "builtin-modules": "4.0.0",