a4 stable
This commit is contained in:
parent
1e9dda64a6
commit
55c207b3cf
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<CspTrustedSite xmlns="http://soap.sforce.com/2006/04/metadata">
|
||||
<context>Communities</context>
|
||||
<description>Font Awesome CDN Trusted Site</description>
|
||||
<endpointUrl>https://cdnjs.cloudflare.com</endpointUrl>
|
||||
<isActive>true</isActive>
|
||||
</CspTrustedSite>
|
||||
@ -48,6 +48,43 @@
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.dev-exit-section {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dev-input {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
padding: 8px 12px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
outline: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.dev-input:focus {
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.dev-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
.dev-content {
|
||||
padding: 30px;
|
||||
|
||||
@ -3,6 +3,15 @@
|
||||
<div class="dev-header">
|
||||
<h1>🚧 Development Area 🚧</h1>
|
||||
<p class="dev-warning">UNDER DEVELOPMENT - DO NOT TEST</p>
|
||||
<div class="dev-exit-section">
|
||||
<input
|
||||
type="text"
|
||||
class="dev-input"
|
||||
value={tbizzInput}
|
||||
onchange={handleTbizzInputChange}
|
||||
onkeydown={handleKeyPress}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dev-content">
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
import { LightningElement, track } from 'lwc';
|
||||
|
||||
export default class DevelopmentPage extends LightningElement {
|
||||
@track showDevPage = true; // Always visible by default
|
||||
@track showDevPage = true; // Visible by default, hidden when tbizz is entered
|
||||
@track currentStep = 1;
|
||||
@track selectedTemplateId = '';
|
||||
@track selectedPropertyId = '';
|
||||
@track selectedPageSize = 'A4';
|
||||
@track currentTimestamp = '';
|
||||
@track debugMode = false;
|
||||
@track tbizzInput = ''; // Input field value for tbizz
|
||||
|
||||
// K-key click counter for closing development mode
|
||||
kKeyCount = 0;
|
||||
kKeyTimeout = null;
|
||||
// tbizz sequence detection for opening development mode
|
||||
tbizzSequence = '';
|
||||
tbizzTimeout = null;
|
||||
|
||||
connectedCallback() {
|
||||
this.updateTimestamp();
|
||||
@ -20,8 +21,8 @@ export default class DevelopmentPage extends LightningElement {
|
||||
|
||||
disconnectedCallback() {
|
||||
this.removeKeyListener();
|
||||
if (this.kKeyTimeout) {
|
||||
clearTimeout(this.kKeyTimeout);
|
||||
if (this.tbizzTimeout) {
|
||||
clearTimeout(this.tbizzTimeout);
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,28 +35,20 @@ export default class DevelopmentPage extends LightningElement {
|
||||
}
|
||||
|
||||
handleKeyPress(event) {
|
||||
// Only listen for 'K' key (case insensitive) - completely silent
|
||||
if (event.key.toLowerCase() === 'k') {
|
||||
this.kKeyCount++;
|
||||
|
||||
// Clear any existing timeout
|
||||
if (this.kKeyTimeout) {
|
||||
clearTimeout(this.kKeyTimeout);
|
||||
}
|
||||
|
||||
// Reset counter after 3 seconds of inactivity
|
||||
this.kKeyTimeout = setTimeout(() => {
|
||||
this.kKeyCount = 0;
|
||||
}, 3000);
|
||||
|
||||
// Close dev page after 5 K key presses (silent)
|
||||
if (this.kKeyCount >= 5) {
|
||||
// Listen for Enter key to check bweixx input
|
||||
if (event.key === 'Enter') {
|
||||
if (this.tbizzInput.toLowerCase() === 'bweixx') {
|
||||
this.showDevPage = false;
|
||||
this.kKeyCount = 0; // Reset counter
|
||||
this.tbizzInput = ''; // Clear input
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle input field changes
|
||||
handleTbizzInputChange(event) {
|
||||
this.tbizzInput = event.target.value;
|
||||
}
|
||||
|
||||
updateTimestamp() {
|
||||
this.currentTimestamp = new Date().toLocaleString();
|
||||
}
|
||||
|
||||
@ -9265,12 +9265,28 @@ late particularay
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* Header Controls Line - All buttons in a single row */
|
||||
.header-controls-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Responsive design for header controls */
|
||||
@media (max-width: 768px) {
|
||||
.header-controls-line {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.page-size-group {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -9292,12 +9308,12 @@ late particularay
|
||||
box-shadow: 0 4px 20px rgba(40, 167, 69, 0.1);
|
||||
}
|
||||
|
||||
/* Page Size Section */
|
||||
.page-size-section {
|
||||
/* Page Size Group - Updated for single line layout */
|
||||
.page-size-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.page-size-label {
|
||||
@ -14200,6 +14216,103 @@ img[draggable="true"] {
|
||||
break-inside: avoid !important;
|
||||
page-break-inside: avoid !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- DRAG AND DROP STYLES --- */
|
||||
.draggable-gallery-item {
|
||||
position: relative;
|
||||
cursor: move;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.draggable-gallery-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.draggable-gallery-item.dragging {
|
||||
opacity: 0.5;
|
||||
transform: rotate(5deg);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.draggable-gallery-item.drag-over {
|
||||
border: 2px dashed #007bff;
|
||||
background-color: rgba(0, 123, 255, 0.1);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.draggable-gallery-item img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.draggable-gallery-item:hover .drag-handle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.no-images {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Drag and drop for gallery grids */
|
||||
.gallery-grid .draggable-gallery-item {
|
||||
height: 100%;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.gallery-grid .draggable-gallery-item img {
|
||||
height: 100%;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
/* Draggable Gallery Section */
|
||||
.draggable-gallery-section {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
border: 2px dashed #dee2e6;
|
||||
}
|
||||
|
||||
.draggable-gallery-section .gallery-title {
|
||||
color: #007bff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.draggable-gallery-section .gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.gallery-item img {
|
||||
width: 100% !important;
|
||||
@ -14207,6 +14320,38 @@ img[draggable="true"] {
|
||||
object-fit: cover !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Viewport Scrollbars - Only for viewport, not PDF */
|
||||
@media screen {
|
||||
.brochure-page {
|
||||
overflow-y: auto;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.brochure-page::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.brochure-page::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.brochure-page::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.brochure-page::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* Hide scrollbars in print/PDF */
|
||||
@media print {
|
||||
.brochure-page {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== END OF STYLES ===== */
|
||||
|
||||
@ -143,6 +143,30 @@
|
||||
<div class="gallery-item g-item-4" style="background-image:url('https://images.unsplash.com/photo-1595526114035-0d45ed16433d?auto=format&fit=crop&w=800&q=80');"><span>Bathroom</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Draggable Gallery Section -->
|
||||
<template if:true={realPropertyImages}>
|
||||
<section class="draggable-gallery-section">
|
||||
<h2 class="gallery-title">Drag to Reorder Images</h2>
|
||||
<div class="gallery-grid">
|
||||
<template for:each={realPropertyImages} for:item="img" for:index="index">
|
||||
<div key={img.Id} class="draggable-gallery-item"
|
||||
draggable="true"
|
||||
data-index={index}
|
||||
ondragstart={handleDragStart}
|
||||
ondragend={handleDragEnd}
|
||||
ondragover={handleDragOver}
|
||||
ondragleave={handleDragLeave}
|
||||
ondrop={handleDrop}>
|
||||
<img src={img.url} alt={img.title} />
|
||||
<div class="drag-handle">
|
||||
<i class="fa-solid fa-grip-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<div class="agent-footer">
|
||||
<div class="agent-info">
|
||||
@ -1236,15 +1260,15 @@
|
||||
<div class="editor-right">
|
||||
<!-- Page Size and PDF Generation Header -->
|
||||
<div class="template-header-area">
|
||||
<!-- New Back Button -->
|
||||
<div class="header-left-actions">
|
||||
<!-- All buttons in a single line -->
|
||||
<div class="header-controls-line">
|
||||
<!-- Back Button -->
|
||||
<button class="btn btn-secondary" onclick={previousStep} title="Back">
|
||||
← Back
|
||||
</button>
|
||||
</div>
|
||||
<!-- 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;">
|
||||
|
||||
<!-- Page Size Options -->
|
||||
<div class="page-size-group">
|
||||
<label class="page-size-label">Page Size:</label>
|
||||
<div class="page-size-options">
|
||||
<label class="page-size-option">
|
||||
@ -1261,7 +1285,7 @@
|
||||
|
||||
<!-- Generate PDF Button -->
|
||||
<template if:true={showGeneratePdfButton}>
|
||||
<button class="btn btn-primary generate-pdf-btn" onclick={generatePdfSimple} disabled={isGeneratingPdf} style="margin-left: 20px;">
|
||||
<button class="btn btn-primary generate-pdf-btn" onclick={generatePdfSimple} disabled={isGeneratingPdf}>
|
||||
<template if:false={isGeneratingPdf}>
|
||||
<span class="btn-icon">📄</span>
|
||||
Generate PDF
|
||||
@ -1273,7 +1297,6 @@
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Viewport Toolbar - Removed for cleaner interface -->
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user