rails_modal_manager 1.0.36 → 1.0.37

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1e33e1757e9bc78d6b4e0b801af55ce709813f195254eb3196b8f8394a6afcce
-  data.tar.gz: 81818160c6846429dccc642893a95d2c98f0274406aaae378eff2a6e73ff2163
+  metadata.gz: ed4634070e4b9c7e76f0f1e884c88ce98641828e3bc7e7bf59db8a402365029a
+  data.tar.gz: 4656c4b397fecedf19b386e104ac81173365ab59cc5266a32e0bf0a38f0505e9
 SHA512:
-  metadata.gz: 2b826a9937d346a5163902fd6d6a47ba22816c99ffdcf52710cbe09f3feca7b2bc571b818eb0229f7092fd2615cda1772f7dd01a8a49bf817e454487179b5790
-  data.tar.gz: 05bf7a6f7cdbe61b203a44735b597bcd9a57b5fe9eff65b3779eb332cb63ead249118b4175ef52c1f363e0d68726434cc79225e1a540c5d95e0552c1e1917cbc
+  metadata.gz: 82fa5ef91503bf5476c50e41f3479d25b896ced5af72ab064fbffe4ce7b1c5fe431bbfa17a7d67ad8eee077dae139be36f5d774785e0006975b2d38f17478852
+  data.tar.gz: e70cb55620dc62d709ea81ba20950b4b98626816a1792f96e9fece6faee8b0301c3b953ed68d39cc598edc94c3f3cfeba0fe8d788122de19f70829a92518298a

data/README.md

@@ -3,7 +3,7 @@
 Rails 애플리케이션을 위한 고급 모달 매니저입니다.
 `@reshacs/react-modal-manager`에서 포팅되었습니다.
 
-**Version:** 1.0.33
+**Version:** 1.0.37
 
 ---
 
@@ -798,6 +798,19 @@ MIT License
 
 ## 변경 이력
 
+### v1.0.37
+
+- **커스텀 헤더 색상 옵션 추가**:
+  - `header_bg`: 헤더 배경색 (단색 또는 그라디언트)
+  - `header_text`: 타이틀, 버튼 아이콘, 드래그 핸들 색상
+  - `header_border`: 헤더 하단 보더 색상
+  - `header_close_btn_hover`: 닫기 버튼 hover 시 배경색
+- **기본 Depth별 헤더 색상 변경** (라이트 모드):
+  - Depth 0 (부모): `#3b82f6` (파란색, 그라디언트 제거)
+  - Depth 1 (자식): `#0ea5e9` (하늘색)
+  - Depth 2 (손자): `#06b6d4` (청록색)
+  - Depth 3+ (증손자): `#64748B` (회색)
+
 ### v1.0.33
 
 - **Taskbar 기능 대폭 개선**:

data/app/assets/stylesheets/rails_modal_manager.css

@@ -24,13 +24,13 @@
   --rmm-header-height: 56px;
 
   /* Header - Depth Colors (Parent/Child/Grandchild) */
-  --rmm-header-bg-depth-0: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --rmm-header-bg-depth-0: #3b82f6;
   --rmm-header-text-depth-0: #ffffff;
-  --rmm-header-bg-depth-1: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+  --rmm-header-bg-depth-1: #0ea5e9;
   --rmm-header-text-depth-1: #ffffff;
-  --rmm-header-bg-depth-2: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
+  --rmm-header-bg-depth-2: #06b6d4;
   --rmm-header-text-depth-2: #ffffff;
-  --rmm-header-bg-depth-3: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
+  --rmm-header-bg-depth-3: #64748B;
   --rmm-header-text-depth-3: #ffffff;
 
   /* Footer */
@@ -639,6 +639,10 @@
   background: var(--rmm-custom-header-btn-hover, rgba(255, 255, 255, 0.15));
 }
 
+.rmm-modal.rmm-custom-header .rmm-header-btn.rmm-close-btn:hover {
+  background: var(--rmm-custom-header-close-btn-hover, rgba(239, 68, 68, 0.9));
+}
+
 .rmm-modal.rmm-custom-header .rmm-drag-handle {
   color: var(--rmm-custom-header-text, var(--rmm-header-text));
 }

data/app/javascript/rails_modal_manager/controllers/rmm_modal_controller.js

@@ -41,6 +41,7 @@ export default class extends Controller {
     headerBg: String,        // Custom header background color (e.g., "#3b82f6" or "linear-gradient(135deg, #667eea, #764ba2)")
     headerText: String,      // Custom header text color (e.g., "#ffffff")
     headerBorder: String,    // Custom header border color (e.g., "#2563eb")
+    headerCloseBtnHover: String,  // Custom close button hover background color (e.g., "rgba(239, 68, 68, 0.9)")
   }
 
   connect() {
@@ -365,7 +366,7 @@ export default class extends Controller {
     modal.classList.remove('rmm-depth-0', 'rmm-depth-1', 'rmm-depth-2', 'rmm-depth-3')
 
     // Check for custom header colors
-    const hasCustomHeader = this.hasHeaderBgValue || this.hasHeaderTextValue || this.hasHeaderBorderValue
+    const hasCustomHeader = this.hasHeaderBgValue || this.hasHeaderTextValue || this.hasHeaderBorderValue || this.hasHeaderCloseBtnHoverValue
 
     if (hasCustomHeader) {
       // Apply custom header colors via CSS variables
@@ -380,6 +381,9 @@ export default class extends Controller {
       if (this.hasHeaderBorderValue && this.headerBorderValue) {
         modal.style.setProperty('--rmm-custom-header-border', this.headerBorderValue)
       }
+      if (this.hasHeaderCloseBtnHoverValue && this.headerCloseBtnHoverValue) {
+        modal.style.setProperty('--rmm-custom-header-close-btn-hover', this.headerCloseBtnHoverValue)
+      }
     } else {
       // Apply depth class (only if no custom header colors)
       const depthClass = `rmm-depth-${Math.min(depth, 3)}`

data/app/views/rails_modal_manager/_modal.html.erb

@@ -45,6 +45,7 @@
     header_bg: String - Custom header background (e.g., "#3b82f6" or "linear-gradient(135deg, #667eea, #764ba2)")
     header_text: String - Custom header text color (e.g., "#ffffff")
     header_border: String - Custom header border color (e.g., "#2563eb")
+    header_close_btn_hover: String - Custom close button hover background color (e.g., "rgba(239, 68, 68, 0.9)")
 %>
 <%
   # Default values
@@ -92,6 +93,7 @@
   header_bg ||= nil
   header_text ||= nil
   header_border ||= nil
+  header_close_btn_hover ||= nil
 
   # Build CSS classes
   modal_classes = ["rmm-modal", "rmm-size-#{size}", "rmm-position-#{position}"]
@@ -131,6 +133,7 @@
   data_attrs[:rmm_modal_header_bg_value] = header_bg if header_bg
   data_attrs[:rmm_modal_header_text_value] = header_text if header_text
   data_attrs[:rmm_modal_header_border_value] = header_border if header_border
+  data_attrs[:rmm_modal_header_close_btn_hover_value] = header_close_btn_hover if header_close_btn_hover
   data_attrs.merge!(extra_data)
 %>
 

data/lib/rails_modal_manager/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsModalManager
-  VERSION = "1.0.36"
+  VERSION = "1.0.37"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_modal_manager
 version: !ruby/object:Gem::Version
-  version: 1.0.36
+  version: 1.0.37
 platform: ruby
 authors:
 - reshacs