diff --git a/resources/views/rd/planning-design/index.blade.php b/resources/views/rd/planning-design/index.blade.php index 5c2be821..79450106 100644 --- a/resources/views/rd/planning-design/index.blade.php +++ b/resources/views/rd/planning-design/index.blade.php @@ -748,10 +748,10 @@ } .sb-tpl-trigger:hover { border-color: var(--pc-indigo); color: var(--pc-indigo); } .sb-tpl-panel { - position: absolute; top: 100%; right: 0; margin-top: 4px; z-index: 100; - width: 360px; max-height: 480px; background: #fff; + position: fixed; z-index: 9990; + width: 380px; max-height: 520px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; - box-shadow: 0 12px 32px rgba(0,0,0,0.12); display: flex; flex-direction: column; + box-shadow: 0 12px 32px rgba(0,0,0,0.15); display: flex; flex-direction: column; } .sb-tpl-tabs { display: flex; border-bottom: 1px solid #e2e8f0; @@ -1429,8 +1429,8 @@
{{-- Template Dropdown --}}
- -
+ +
๊ธฐ๋ณธ ํ…œํ”Œ๋ฆฟ
๋‚ด ํ…œํ”Œ๋ฆฟ
@@ -2997,6 +2997,30 @@ function planningCanvas() { localStorage.setItem('sb_custom_templates', JSON.stringify(this.sbCustomTemplates)); }, + sbToggleTplPanel() { + this.sbTplOpen = !this.sbTplOpen; + if (this.sbTplOpen) { + this.$nextTick(() => { + const btn = this.$refs.sbTplBtn; + const panel = this.$refs.sbTplPanel; + if (!btn || !panel) return; + const r = btn.getBoundingClientRect(); + const pw = 380; + const ww = window.innerWidth; + const wh = window.innerHeight; + // ๊ฐ€๋กœ: ๋ฒ„ํŠผ ์˜ค๋ฅธ์ชฝ ๋ ๊ธฐ์ค€, ํ™”๋ฉด ๋ฐ–์ด๋ฉด ์™ผ์ชฝ์œผ๋กœ ์ด๋™ + let left = r.right - pw; + if (left < 8) left = 8; + if (left + pw > ww - 8) left = ww - pw - 8; + // ์„ธ๋กœ: ๋ฒ„ํŠผ ์•„๋ž˜, ๊ณต๊ฐ„ ๋ถ€์กฑํ•˜๋ฉด ์œ„๋กœ + let top = r.bottom + 4; + if (top + 520 > wh) top = Math.max(8, r.top - 520 - 4); + panel.style.left = left + 'px'; + panel.style.top = top + 'px'; + }); + } + }, + sbEditMenu() { // deep copy menuTree โ†’ draft (+ _open ํ”Œ๋ž˜๊ทธ ์ถ”๊ฐ€) this.sbMenuDraft = JSON.parse(JSON.stringify(this.sb.menuTree)).map(m => {