Compare commits
2 Commits
3cb9090248
...
1e9dda64a6
| Author | SHA1 | Date | |
|---|---|---|---|
|
1e9dda64a6 | ||
|
|
82ef064e5e |
@ -5,10 +5,12 @@
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||||
z-index: 9999;
|
||||
z-index: 99999;
|
||||
overflow-y: auto;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dev-header {
|
||||
@ -46,30 +48,13 @@
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.close-dev-btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #ff4757;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.close-dev-btn:hover {
|
||||
background: #ff3742;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.dev-content {
|
||||
padding: 30px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dev-section {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { LightningElement, track } from 'lwc';
|
||||
|
||||
export default class DevelopmentPage extends LightningElement {
|
||||
@track showDevPage = false;
|
||||
@track showDevPage = true; // Always visible by default
|
||||
@track currentStep = 1;
|
||||
@track selectedTemplateId = '';
|
||||
@track selectedPropertyId = '';
|
||||
@ -9,9 +9,9 @@ export default class DevelopmentPage extends LightningElement {
|
||||
@track currentTimestamp = '';
|
||||
@track debugMode = false;
|
||||
|
||||
// V-key click counter
|
||||
vKeyCount = 0;
|
||||
vKeyTimeout = null;
|
||||
// K-key click counter for closing development mode
|
||||
kKeyCount = 0;
|
||||
kKeyTimeout = null;
|
||||
|
||||
connectedCallback() {
|
||||
this.updateTimestamp();
|
||||
@ -20,8 +20,8 @@ export default class DevelopmentPage extends LightningElement {
|
||||
|
||||
disconnectedCallback() {
|
||||
this.removeKeyListener();
|
||||
if (this.vKeyTimeout) {
|
||||
clearTimeout(this.vKeyTimeout);
|
||||
if (this.kKeyTimeout) {
|
||||
clearTimeout(this.kKeyTimeout);
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,36 +34,28 @@ export default class DevelopmentPage extends LightningElement {
|
||||
}
|
||||
|
||||
handleKeyPress(event) {
|
||||
// Only listen for 'V' key (case insensitive)
|
||||
if (event.key.toLowerCase() === 'v') {
|
||||
this.vKeyCount++;
|
||||
// Only listen for 'K' key (case insensitive) - completely silent
|
||||
if (event.key.toLowerCase() === 'k') {
|
||||
this.kKeyCount++;
|
||||
|
||||
// Clear any existing timeout
|
||||
if (this.vKeyTimeout) {
|
||||
clearTimeout(this.vKeyTimeout);
|
||||
if (this.kKeyTimeout) {
|
||||
clearTimeout(this.kKeyTimeout);
|
||||
}
|
||||
|
||||
// Reset counter after 3 seconds of inactivity
|
||||
this.vKeyTimeout = setTimeout(() => {
|
||||
this.vKeyCount = 0;
|
||||
this.kKeyTimeout = setTimeout(() => {
|
||||
this.kKeyCount = 0;
|
||||
}, 3000);
|
||||
|
||||
// Hide dev page after 4 V key presses
|
||||
if (this.vKeyCount >= 4) {
|
||||
// Close dev page after 5 K key presses (silent)
|
||||
if (this.kKeyCount >= 5) {
|
||||
this.showDevPage = false;
|
||||
this.vKeyCount = 0; // Reset counter
|
||||
this.kKeyCount = 0; // Reset counter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
closeDevPage() {
|
||||
this.showDevPage = false;
|
||||
this.vKeyCount = 0;
|
||||
if (this.vKeyTimeout) {
|
||||
clearTimeout(this.vKeyTimeout);
|
||||
}
|
||||
}
|
||||
|
||||
updateTimestamp() {
|
||||
this.currentTimestamp = new Date().toLocaleString();
|
||||
}
|
||||
|
||||
@ -14015,4 +14015,198 @@ img[draggable="true"] {
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== MODAL ANIMATIONS ===== */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.data-type-option:hover {
|
||||
border-color: #007bff !important;
|
||||
background: #f0f8ff !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,123,255,0.15);
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: #f5f5f5 !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.btn:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* ===== PDF GENERATION STYLING ===== */
|
||||
@media print {
|
||||
.brochure-page {
|
||||
page-break-before: always;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
overflow: hidden;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
background: white !important;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
|
||||
}
|
||||
|
||||
/* Ensure newly added pages maintain A4 dimensions */
|
||||
.brochure-page.a4 {
|
||||
width: 210mm !important;
|
||||
height: 297mm !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
background: white !important;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
|
||||
}
|
||||
|
||||
/* Ensure all brochure pages have consistent A4 dimensions */
|
||||
.brochure {
|
||||
width: 210mm !important;
|
||||
height: 297mm !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
background: white !important;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
|
||||
}
|
||||
|
||||
/* Page break handling */
|
||||
.page-break {
|
||||
page-break-before: always !important;
|
||||
height: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.brochure-page:first-child {
|
||||
page-break-before: avoid;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
color: white !important;
|
||||
padding: 20px !important;
|
||||
margin-bottom: 20px !important;
|
||||
border-radius: 10px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 20px !important;
|
||||
background: white !important;
|
||||
border-radius: 10px !important;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
background: #003366 !important;
|
||||
color: white !important;
|
||||
padding: 20px !important;
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: center !important;
|
||||
margin-top: 20px !important;
|
||||
position: absolute !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
/* Template-specific footer colors for PDF */
|
||||
.brochure-page[data-template="modern-home-template"] .page-footer {
|
||||
background: #003366 !important;
|
||||
}
|
||||
|
||||
.brochure-page[data-template="grand-oak-villa-template"] .page-footer {
|
||||
background: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.brochure-page[data-template="serenity-house-template"] .page-footer {
|
||||
background: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.brochure-page[data-template="luxury-mansion-template"] .page-footer {
|
||||
background: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.content-section h2 {
|
||||
color: #495057 !important;
|
||||
border-bottom: 2px solid #e9ecef !important;
|
||||
padding-bottom: 10px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.content-section p {
|
||||
color: #6c757d !important;
|
||||
line-height: 1.6 !important;
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 20px !important;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
padding: 10px 0 !important;
|
||||
}
|
||||
|
||||
.feature-item i {
|
||||
color: #28a745 !important;
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 15px !important;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
background: #f8f9fa !important;
|
||||
border: 2px dashed #dee2e6 !important;
|
||||
padding: 20px !important;
|
||||
text-align: center !important;
|
||||
color: #6c757d !important;
|
||||
height: 100% !important;
|
||||
min-height: 250px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
break-inside: avoid !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
|
||||
.gallery-item img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== END OF STYLES ===== */
|
||||
|
||||
@ -1187,6 +1187,12 @@
|
||||
Image
|
||||
</button>
|
||||
</div>
|
||||
<div class="toolbar-group">
|
||||
<button class="toolbar-button" onclick={addNewPageWithDataType}>
|
||||
<lightning-icon icon-name="utility:page" size="x-small"></lightning-icon>
|
||||
Add Page
|
||||
</button>
|
||||
</div>
|
||||
<div class="toolbar-group">
|
||||
<button class="toolbar-button" onclick={toggleSelectorMode}>
|
||||
<lightning-icon icon-name="utility:target" size="x-small"></lightning-icon>
|
||||
@ -1236,8 +1242,9 @@
|
||||
← Back
|
||||
</button>
|
||||
</div>
|
||||
<!-- Page Size Options -->
|
||||
<div class="page-size-section">
|
||||
<!-- Page Size Options and Generate PDF Button -->
|
||||
<div class="page-size-section" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<label class="page-size-label">Page Size:</label>
|
||||
<div class="page-size-options">
|
||||
<label class="page-size-option">
|
||||
@ -1245,16 +1252,16 @@
|
||||
onchange={handlePageSizeChange}>
|
||||
<span class="page-size-text">A4</span>
|
||||
</label>
|
||||
<!-- <label class="page-size-option">
|
||||
<label class="page-size-option">
|
||||
<input type="radio" name="pageSize" value="A3" onchange={handlePageSizeChange}>
|
||||
<span class="page-size-text">A3</span>
|
||||
</label> -->
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generate PDF Button -->
|
||||
<div class="generate-pdf-section">
|
||||
<button class="btn btn-primary generate-pdf-btn" onclick={generatePdfSimple} disabled={isGeneratingPdf}>
|
||||
<template if:true={showGeneratePdfButton}>
|
||||
<button class="btn btn-primary generate-pdf-btn" onclick={generatePdfSimple} disabled={isGeneratingPdf} style="margin-left: 20px;">
|
||||
<template if:false={isGeneratingPdf}>
|
||||
<span class="btn-icon">📄</span>
|
||||
Generate PDF
|
||||
@ -1264,7 +1271,9 @@
|
||||
Wait, our AI is generating the report...
|
||||
</template>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Viewport Toolbar - Removed for cleaner interface -->
|
||||
@ -1283,15 +1292,6 @@
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template if:false={previewPages}>
|
||||
<div class="preview-page" data-page-size={selectedPageSize} data-page-number="1">
|
||||
<div class="enhanced-editor-content" contenteditable="true" onkeyup={handleContentChangeWithDynamicSizing}
|
||||
onpaste={handleContentChangeWithDynamicSizing} ondragover={handleEditorDragOver} ondrop={handleEditorDrop}>
|
||||
<!-- Template content will be loaded here -->
|
||||
{htmlContent}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<template if:false={hasPropertyImages}>
|
||||
<div class="floating-placeholder" data-preview-only="true" style="position: absolute; bottom: 12px; left: 12px; display: flex; align-items: center; gap: 8px; z-index: 2000; pointer-events: none;">
|
||||
@ -1309,6 +1309,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Image Review Modal -->
|
||||
<div if:true={showImageReview} class="image-review-overlay">
|
||||
<div class="image-review-modal">
|
||||
@ -1592,9 +1593,49 @@
|
||||
</div>
|
||||
<div class="new-section-modal-actions">
|
||||
<button class="btn btn-secondary" onclick={closeNewSectionModal}>Cancel</button>
|
||||
<button class="btn btn-primary" onclick={insertNewSection} disabled={insertSectionDisabled}>
|
||||
Add Section
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Type Selection Modal -->
|
||||
<div if:true={showDataTypeModal} class="data-type-modal-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease-out;">
|
||||
<div class="data-type-modal" style="background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); max-width: 700px; width: 90%; max-height: 85vh; overflow-y: auto; position: relative; animation: slideIn 0.3s ease-out; border: 1px solid #e0e0e0;">
|
||||
<div class="data-type-modal-header" style="padding: 24px 24px 16px 24px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center;">
|
||||
<h3 style="margin: 0; font-size: 24px; font-weight: 600; color: #333;">Select Page Type</h3>
|
||||
<button class="close-btn" onclick={closeDataTypeModal} style="background: none; border: none; font-size: 24px; color: #666; cursor: pointer; padding: 4px; border-radius: 4px; transition: all 0.2s;">✕</button>
|
||||
</div>
|
||||
<div class="data-type-modal-content" style="padding: 24px;">
|
||||
<div class="data-type-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;">
|
||||
<div class="data-type-option" onclick={handleDataTypeSelection} data-type="text" style="border: 2px solid #e0e0e0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s ease; background: #fafafa; hover:border-color: #007bff; hover:background: #f0f8ff;">
|
||||
<div class="data-type-icon" style="font-size: 32px; margin-bottom: 12px;">📝</div>
|
||||
<div class="data-type-title" style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px;">Text Page</div>
|
||||
<div class="data-type-description" style="font-size: 14px; color: #666; line-height: 1.4;">Add a text-focused page for detailed content</div>
|
||||
</div>
|
||||
<div class="data-type-option" onclick={handleDataTypeSelection} data-type="gallery" style="border: 2px solid #e0e0e0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s ease; background: #fafafa; hover:border-color: #007bff; hover:background: #f0f8ff;">
|
||||
<div class="data-type-icon" style="font-size: 32px; margin-bottom: 12px;">🖼️</div>
|
||||
<div class="data-type-title" style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px;">Gallery Page</div>
|
||||
<div class="data-type-description" style="font-size: 14px; color: #666; line-height: 1.4;">Add an image gallery page</div>
|
||||
</div>
|
||||
<div class="data-type-option" onclick={handleDataTypeSelection} data-type="features" style="border: 2px solid #e0e0e0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s ease; background: #fafafa; hover:border-color: #007bff; hover:background: #f0f8ff;">
|
||||
<div class="data-type-icon" style="font-size: 32px; margin-bottom: 12px;">✨</div>
|
||||
<div class="data-type-title" style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px;">Features Page</div>
|
||||
<div class="data-type-description" style="font-size: 14px; color: #666; line-height: 1.4;">Add a features and amenities page</div>
|
||||
</div>
|
||||
<div class="data-type-option" onclick={handleDataTypeSelection} data-type="contact" style="border: 2px solid #e0e0e0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s ease; background: #fafafa; hover:border-color: #007bff; hover:background: #f0f8ff;">
|
||||
<div class="data-type-icon" style="font-size: 32px; margin-bottom: 12px;">📞</div>
|
||||
<div class="data-type-title" style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px;">Contact Page</div>
|
||||
<div class="data-type-description" style="font-size: 14px; color: #666; line-height: 1.4;">Add a contact information page</div>
|
||||
</div>
|
||||
<div class="data-type-option" onclick={handleDataTypeSelection} data-type="blank" style="border: 2px solid #e0e0e0; border-radius: 12px; padding: 20px; cursor: pointer; transition: all 0.3s ease; background: #fafafa; hover:border-color: #007bff; hover:background: #f0f8ff;">
|
||||
<div class="data-type-icon" style="font-size: 32px; margin-bottom: 12px;">📄</div>
|
||||
<div class="data-type-title" style="font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px;">Blank Page</div>
|
||||
<div class="data-type-description" style="font-size: 14px; color: #666; line-height: 1.4;">Add a blank page for custom content</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-type-modal-actions" style="padding: 16px 24px 24px 24px; border-top: 1px solid #e0e0e0; display: flex; justify-content: flex-end; gap: 12px;">
|
||||
<button class="btn btn-secondary" onclick={closeDataTypeModal} style="padding: 10px 20px; border: 1px solid #ccc; background: white; color: #333; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500;">Cancel</button>
|
||||
<button class="btn btn-primary" onclick={addPageWithSelectedDataType} disabled={selectedDataTypeDisabled} style="padding: 10px 20px; border: none; background: #007bff; color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500;">Add Page</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user