feat: Add CHANGELOG.md and modernize UI by removing Vue.js dependency and migrating to external CSS.

2025-12-31 19:19:38 -08:00
parent 2184432372
commit 401813c207
5 changed files with 54 additions and 97 deletions
@@ -0,0 +1,43 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.5.0] - 2024-12-31
+
+### Added
+- Professional SVG icons replacing emoji icons throughout the UI
+- Full theme support for ComfyUI themes: Dark, Light, Solarized, Arc, Nord, GitHub
+- External CSS stylesheet for easier customization
+- Click event handlers for all floating control buttons
+- Section expand/collapse functionality in info panel
+
+### Changed
+- Migrated from inline CSS-in-JS to external `info-panel.css` file
+- Improved theme detection using ComfyUI's `Comfy.ColorPalette` setting
+- More professional appearance with custom SVG icon set
+
+### Removed
+- Vue.js dependency (reduces bundle size)
+- Emoji icons (replaced with SVG for better scaling and consistency)
+- Inline CSS injection (now uses external stylesheet)
+
+### Fixed
+- Button click handlers now properly attached to floating controls
+- Theme switching now works across all 6 ComfyUI themes
+- Removed stale build artifacts that caused module loading errors
+
+## [1.4.0] - Previous Release
+
+### Added
+- TypeScript source code
+- WebGL-based magnification
+- Info panel with node, media, and inspector sections
+- Floating control buttons
+- Multiple glass shapes and positions
+
+---
+
+For more information, see the [README](README.md).
@@ -18,11 +18,17 @@ A powerful, customizable magnifying glass extension for ComfyUI. Inspect fine de

 ### v1.5.0 — December 2024

-**TypeScript Migration & Architecture Improvements**
- Migrated entire codebase from JavaScript to TypeScript for improved maintainability
- Added Vite build system with proper module bundling
- Enhanced type safety and IDE support for contributors
- Cleaner separation of concerns with modular class architecture
+**UI Modernization & Theme Support**
+- Professional SVG icons replacing emojis throughout the UI
+- Full theme support for all 6 ComfyUI themes (Dark, Light, Solarized, Arc, Nord, GitHub)
+- External CSS stylesheet (`info-panel.css`) for easier customization
+- Improved button click handling for all floating controls
+
+**TypeScript Migration & Architecture**
+- Migrated entire codebase from JavaScript to TypeScript
+- Removed Vue.js dependency for reduced bundle size
+- Vite-based build system with proper module bundling
+- Enhanced type safety and modular class architecture

 ### v1.4.5 — August 2024

@@ -1,11 +0,0 @@
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-export {
-  _export_sfc as default
-};
-//# sourceMappingURL=_plugin-vue_export-helper.js.map
@@ -1 +0,0 @@
-{"version":3,"file":"_plugin-vue_export-helper.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
@@ -1,80 +0,0 @@
-
-.mag-info-panel[data-v-687c6e82] {
-  position: fixed;
-  bottom: 20px;
-  left: 20px;
-  background: var(--comfy-menu-bg, #222);
-  color: var(--comfy-text-color, #fff);
-  border: 1px solid var(--border-color, #444);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-  overflow: hidden;
-  font-family: sans-serif;
-  z-index: 1000;
-  pointer-events: auto;
-}
-.mag-panel-header[data-v-687c6e82] {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 12px;
-  background: rgba(255,255,255,0.05);
-  border-bottom: 1px solid rgba(255,255,255,0.1);
-  cursor: grab;
-}
-.mag-panel-header[data-v-687c6e82]:active {
-  cursor: grabbing;
-}
-.mag-panel-title[data-v-687c6e82] {
-  font-weight: bold;
-}
-.mag-panel-controls[data-v-687c6e82] {
-  display: flex;
-  gap: 4px;
-}
-.mag-panel-controls button[data-v-687c6e82] {
-  background: transparent;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 4px;
-}
-.mag-panel-controls button[data-v-687c6e82]:hover {
-  background: rgba(255,255,255,0.1);
-}
-.mag-panel-controls button.active[data-v-687c6e82] {
-  background: rgba(59, 130, 246, 0.3);
-}
-.mag-panel-content[data-v-687c6e82] {
-  padding: 12px;
-  max-height: 400px;
-  overflow-y: auto;
-}
-.mag-node-info h3[data-v-687c6e82] {
-  margin-top: 0;
-  margin-bottom: 10px;
-  border-bottom: 1px solid rgba(255,255,255,0.1);
-  padding-bottom: 5px;
-}
-.mag-property-grid[data-v-687c6e82] {
-  display: grid;
-  gap: 4px;
-}
-.mag-prop-row[data-v-687c6e82] {
-  display: flex;
-  justify-content: space-between;
-}
-.mag-prop-label[data-v-687c6e82] {
-  opacity: 0.7;
-}
-.mag-empty-state[data-v-687c6e82] {
-  opacity: 0.6;
-  text-align: center;
-  padding: 20px;
-}
-.theme-light[data-v-687c6e82] {
-  background: #fff;
-  color: #333;
-  border-color: #ccc;
-}
				`@@ -1 +0,0 @@`
				`{"version":3,"file":"_plugin-vue_export-helper.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}`