rails_modal_manager 1.0.35 → 1.0.37

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 72c527ec9681356bcf4c0f3b9fd1d8c337a31764a79ff1a57801ec28bdc1cfef
-  data.tar.gz: c333ca2a7be2f4140f76e81ad5ad4d028524a90c7155001cfec70b4f064d511a
+  metadata.gz: ed4634070e4b9c7e76f0f1e884c88ce98641828e3bc7e7bf59db8a402365029a
+  data.tar.gz: 4656c4b397fecedf19b386e104ac81173365ab59cc5266a32e0bf0a38f0505e9
 SHA512:
-  metadata.gz: 0dd3f943bd13e8227f971ae76a52438b505a7412a684bd50c5ffcd56249dc6c4d38216b5f1bd690f640731c478a9fb7ec68ef857f8df697d7c02748f6487eccc
-  data.tar.gz: 5b3198913d43cdf59998c1602babdd3bbbae1ecb4976983a218a664d8ca57f0946e686fdfe51ec2e1c6c3a6b02397f199a4a96494812cedc9387ab4338d29681
+  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));
 }
@@ -1561,58 +1565,6 @@
   }
 }
 
-/* MD, LG, XL 사이즈는 768px이 아닌 각자의 min-width 기준으로 모바일 스타일 적용
-   - MD: 960px 이상에서는 데스크톱 스타일 유지
-   - LG: 1152px 이상에서는 데스크톱 스타일 유지
-   - XL: 1344px 이상에서는 데스크톱 스타일 유지
-*/
-@media (min-width: 769px) {
-  /* MD: 769px ~ 960px 범위에서도 min-width 적용 */
-  .rmm-modal.rmm-size-md {
-    width: 50% !important;
-    min-width: min(960px, calc(100vw - 40px)) !important;
-    max-width: calc(100vw - 40px) !important;
-    left: 50% !important;
-    right: auto !important;
-  }
-  .rmm-modal.rmm-size-md.rmm-position-center {
-    transform: translate(-50%, -50%) !important;
-  }
-  .rmm-modal.rmm-size-md.rmm-position-center.rmm-active {
-    transform: translate(-50%, -50%) scale(1) !important;
-  }
-
-  /* LG: 769px ~ 1152px 범위에서도 min-width 적용 */
-  .rmm-modal.rmm-size-lg {
-    width: 60% !important;
-    min-width: min(1152px, calc(100vw - 40px)) !important;
-    max-width: calc(100vw - 40px) !important;
-    left: 50% !important;
-    right: auto !important;
-  }
-  .rmm-modal.rmm-size-lg.rmm-position-center {
-    transform: translate(-50%, -50%) !important;
-  }
-  .rmm-modal.rmm-size-lg.rmm-position-center.rmm-active {
-    transform: translate(-50%, -50%) scale(1) !important;
-  }
-
-  /* XL: 769px ~ 1344px 범위에서도 min-width 적용 */
-  .rmm-modal.rmm-size-xl {
-    width: 70% !important;
-    min-width: min(1344px, calc(100vw - 40px)) !important;
-    max-width: calc(100vw - 40px) !important;
-    left: 50% !important;
-    right: auto !important;
-  }
-  .rmm-modal.rmm-size-xl.rmm-position-center {
-    transform: translate(-50%, -50%) !important;
-  }
-  .rmm-modal.rmm-size-xl.rmm-position-center.rmm-active {
-    transform: translate(-50%, -50%) scale(1) !important;
-  }
-}
-
 /* ============================================
    Drag Handle
    ============================================ */
@@ -1732,3 +1684,55 @@
   opacity: 0.5;
   transition: opacity 0.2s ease;
 }
+
+/* ============================================
+   PC Size Fixes (min-width: 769px)
+   - 중간 크기 브라우저에서도 min-width 적용
+   - :not(.rmm-dragging):not(.rmm-custom-position)으로 드래그 중/후 제외
+   ============================================ */
+@media (min-width: 769px) {
+  /* MD: 769px ~ 960px 범위에서도 min-width 적용 */
+  .rmm-modal.rmm-size-md:not(.rmm-dragging):not(.rmm-custom-position) {
+    width: 50% !important;
+    min-width: min(960px, calc(100vw - 40px)) !important;
+    max-width: calc(100vw - 40px) !important;
+    left: 50% !important;
+    right: auto !important;
+  }
+  .rmm-modal.rmm-size-md.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position) {
+    transform: translate(-50%, -50%) !important;
+  }
+  .rmm-modal.rmm-size-md.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position) {
+    transform: translate(-50%, -50%) scale(1) !important;
+  }
+
+  /* LG: 769px ~ 1152px 범위에서도 min-width 적용 */
+  .rmm-modal.rmm-size-lg:not(.rmm-dragging):not(.rmm-custom-position) {
+    width: 60% !important;
+    min-width: min(1152px, calc(100vw - 40px)) !important;
+    max-width: calc(100vw - 40px) !important;
+    left: 50% !important;
+    right: auto !important;
+  }
+  .rmm-modal.rmm-size-lg.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position) {
+    transform: translate(-50%, -50%) !important;
+  }
+  .rmm-modal.rmm-size-lg.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position) {
+    transform: translate(-50%, -50%) scale(1) !important;
+  }
+
+  /* XL: 769px ~ 1344px 범위에서도 min-width 적용 */
+  .rmm-modal.rmm-size-xl:not(.rmm-dragging):not(.rmm-custom-position) {
+    width: 70% !important;
+    min-width: min(1344px, calc(100vw - 40px)) !important;
+    max-width: calc(100vw - 40px) !important;
+    left: 50% !important;
+    right: auto !important;
+  }
+  .rmm-modal.rmm-size-xl.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position) {
+    transform: translate(-50%, -50%) !important;
+  }
+  .rmm-modal.rmm-size-xl.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position) {
+    transform: translate(-50%, -50%) scale(1) !important;
+  }
+}

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)}`
@@ -394,10 +398,18 @@ export default class extends Controller {
     // Reset sidebar and submenu to first item before hiding
     this.resetSidebarAndSubmenu()
 
+    // 닫기 애니메이션 시작 (현재 위치에서 닫힘)
     modal.classList.remove('rmm-active')
     if (overlay) overlay.classList.remove('rmm-active')
 
     setTimeout(() => {
+      // 애니메이션 완료 후 드래그로 인한 커스텀 위치 클래스 및 인라인 스타일 제거
+      modal.classList.remove('rmm-custom-position')
+      modal.classList.remove('rmm-dragging')
+      modal.style.top = ''
+      modal.style.left = ''
+      modal.style.transform = ''
+
       // Reset openValue to false so modal can be reopened
       // Use a flag to prevent openValueChanged from triggering close again
       this._closingProgrammatically = true
@@ -464,17 +476,34 @@ export default class extends Controller {
 
     // For full size, explicitly set full screen styles
     if (config.size === 'full' || config.isMaximized) {
-      modal.style.width = '100%'
-      modal.style.height = '100%'
-      modal.style.minWidth = '100%'
-      modal.style.maxHeight = '100%'
-      modal.style.top = '0'
-      modal.style.left = '0'
-      modal.style.right = '0'
-      modal.style.bottom = '0'
-      modal.style.transform = 'none'
-      modal.style.borderRadius = '0'
-      modal.style.margin = '0'
+      // 최소화된 모달이 있는지 store에서 확인하여 taskbar 높이 계산
+      const minimizedGroups = modalStore.getMinimizedModalGroups()
+      const hasMinimizedModals = minimizedGroups.length > 0
+      // CSS 변수에서 taskbar 높이 가져오기 (기본값 48px)
+      const taskbarHeight = hasMinimizedModals
+        ? parseInt(getComputedStyle(document.documentElement).getPropertyValue('--rmm-taskbar-height') || '48', 10)
+        : 0
+
+      // CSS !important를 덮어쓰기 위해 setProperty 사용
+      modal.style.setProperty('width', '100%', 'important')
+      modal.style.setProperty('min-width', '100%', 'important')
+      modal.style.setProperty('top', '0', 'important')
+      modal.style.setProperty('left', '0', 'important')
+      modal.style.setProperty('right', '0', 'important')
+      modal.style.setProperty('transform', 'none', 'important')
+      modal.style.setProperty('border-radius', '0', 'important')
+      modal.style.setProperty('margin', '0', 'important')
+
+      if (taskbarHeight > 0) {
+        // taskbar가 있으면 그 위까지만 표시
+        modal.style.setProperty('height', `calc(100% - ${taskbarHeight}px)`, 'important')
+        modal.style.setProperty('max-height', `calc(100% - ${taskbarHeight}px)`, 'important')
+        modal.style.setProperty('bottom', `${taskbarHeight}px`, 'important')
+      } else {
+        modal.style.setProperty('height', '100%', 'important')
+        modal.style.setProperty('max-height', '100%', 'important')
+        modal.style.setProperty('bottom', '0', 'important')
+      }
     } else {
       // Reset full-size specific styles
       modal.style.borderRadius = ''
@@ -595,6 +624,7 @@ export default class extends Controller {
       historyStackManager.moveToTop('modal', this.effectiveModalId)
     }
     this.isDragging = true
+    this.element.classList.add('rmm-dragging')
 
     const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
     const clientY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY
@@ -637,6 +667,9 @@ export default class extends Controller {
 
   handleDragEnd() {
     this.isDragging = false
+    this.element.classList.remove('rmm-dragging')
+    // 드래그 후 위치 유지를 위해 custom-position 클래스 추가
+    this.element.classList.add('rmm-custom-position')
 
     this.element.style.transition = ''
 

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.35"
+  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.35
+  version: 1.0.37
 platform: ruby
 authors:
 - reshacs