Skip to content

Commit

Permalink
Improve saving options
Browse files Browse the repository at this point in the history
  • Loading branch information
@sondreb
sondreb committed Nov 17, 2024
1 parent 35898a9 commit 2e068b1
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 78 deletions.
122 changes: 77 additions & 45 deletions src/app/photo-collage/photo-collage.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,71 +158,103 @@ canvas {
background: rgba(0, 200, 0, 1) !important;
}

.save-group {
position: relative;
display: inline-block;
.save-group,
.save-options,
.size-buttons {
display: none;
}

.save-group:hover .save-options,
.save-options:hover {
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}

.save-options {
display: none;
position: absolute;
bottom: calc(100% + 2px); /* Changed from 5px to 2px for closer proximity */
left: 0;
right: 0;
flex-direction: column;
gap: 5px;
background: rgba(0, 0, 0, 0.8);
padding: 5px;
border-radius: 10px;
padding-bottom: 8px;
margin-bottom: 0; /* Removed margin-bottom */
.modal {
background: white;
border-radius: 12px;
padding: 20px;
width: 90%;
max-width: 400px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Add a small connecting element to visually link the options with the button */
.save-options:after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid rgba(0, 0, 0, 0.8);
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.size-btn {
padding: 5px 10px !important;
font-size: 12px !important;
background: rgba(128, 128, 128, 0.9) !important;
.modal-header h2 {
margin: 0;
color: #333;
font-size: 20px;
}

.size-btn:hover {
background: rgba(128, 128, 128, 1) !important;
.close-btn {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
padding: 0 8px;
color: #666;
}

.size-btn.active {
background: rgba(0, 123, 255, 0.9) !important;
.close-btn:hover {
color: #333;
}

.size-btn.active:hover {
background: rgba(0, 123, 255, 1) !important;
.modal-content p {
margin: 0 0 15px 0;
color: #666;
}

.size-label {
color: white;
font-size: 12px;
text-align: center;
.size-options {
display: flex;
flex-direction: column;
gap: 10px;
}

.size-buttons {
.size-option {
display: flex;
gap: 5px;
justify-content: center;
flex-direction: column;
align-items: flex-start;
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
background: white;
cursor: pointer;
transition: all 0.2s;
}

.size-option:hover {
background: #f8f8f8;
border-color: #0066cc;
}

.size-option strong {
font-size: 16px;
color: #333;
margin-bottom: 4px;
}

.size-option span {
font-size: 12px;
color: #666;
}

.size-option .pixels {
color: #999;
margin-top: 4px;
}

/* Media query for touch devices */
Expand Down
43 changes: 20 additions & 23 deletions src/app/photo-collage/photo-collage.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,32 +43,29 @@
style="display: none">
<div class="controls">
<button (click)="fileInput.click()">Add Photos</button>
<div class="save-group">
<div class="save-options">
<div class="size-label">Size:</div>
<div class="size-buttons">
<button
(click)="setSaveSize('normal')"
[class.active]="saveSize === 'normal'"
class="size-btn">
Normal
</button>
<button
(click)="setSaveSize('medium')"
[class.active]="saveSize === 'medium'"
class="size-btn">
Medium
</button>
<button
(click)="setSaveSize('large')"
[class.active]="saveSize === 'large'"
class="size-btn">
Large
<button (click)="showSaveOptions()">Save Collage</button>
<button (click)="resetCollage()">Reset</button>
</div>

<!-- Save Dialog -->
<div class="modal-overlay" *ngIf="showSaveDialog" (click)="closeSaveDialog()">
<div class="modal" (click)="$event.stopPropagation()">
<div class="modal-header">
<h2>Save Collage</h2>
<button class="close-btn" (click)="closeSaveDialog()">×</button>
</div>
<div class="modal-content">
<p>Choose output size:</p>
<div class="size-options">
<button *ngFor="let option of sizeOptions"
class="size-option"
(click)="saveWithSize(option.id)">
<strong>{{option.name}}</strong>
<span>{{option.description}}</span>
<span class="pixels">{{canvas.width * option.scale}}×{{canvas.height * option.scale}}px</span>
</button>
</div>
</div>
<button (click)="saveCollage()">Save Collage ({{saveSize}})</button>
</div>
<button (click)="resetCollage()">Reset</button>
</div>
</div>
35 changes: 25 additions & 10 deletions src/app/photo-collage/photo-collage.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,28 @@ export class PhotoCollageComponent implements AfterViewInit, OnDestroy {
controlsPosition = { x: 0, y: 0 };
private isOnControls = false;
private imageCache: Map<string, HTMLImageElement> = new Map();
saveSize: 'normal' | 'medium' | 'large' = 'medium';
saveSize: 'small' | 'normal' | 'medium' | 'large' = 'medium';
showSaveDialog = false;
sizeOptions = [
{ id: 'small', name: 'Small', scale: 1, description: '1x - Original Size' },
{ id: 'normal', name: 'Normal', scale: 2, description: '2x - Good for sharing' },
{ id: 'medium', name: 'Medium', scale: 3, description: '3x - Great for prints' },
{ id: 'large', name: 'Large', scale: 6, description: '6x - Maximum quality' }
] as const;

showSaveOptions() {
this.showSaveDialog = true;
}

saveWithSize(size: 'small' | 'normal' | 'medium' | 'large') {
this.saveSize = size;
this.saveCollage();
this.showSaveDialog = false;
}

closeSaveDialog() {
this.showSaveDialog = false;
}

presets: CollagePreset[] = [
{
Expand Down Expand Up @@ -212,15 +233,9 @@ export class PhotoCollageComponent implements AfterViewInit, OnDestroy {
}

saveCollage() {
// Adjust scale based on selected size
const scales = {
normal: 2,
medium: 3,
large: 6
};
const scale = scales[this.saveSize];
const option = this.sizeOptions.find(opt => opt.id === this.saveSize);
const scale = option?.scale || 3; // Default to medium if not found

// Rest of the saveCollage method remains the same
const tempCanvas = document.createElement('canvas');
tempCanvas.width = this.canvas.width * scale;
tempCanvas.height = this.canvas.height * scale;
Expand Down Expand Up @@ -264,7 +279,7 @@ export class PhotoCollageComponent implements AfterViewInit, OnDestroy {
link.click();
}

setSaveSize(size: 'normal' | 'medium' | 'large') {
setSaveSize(size: 'small' | 'normal' | 'medium' | 'large') {
this.saveSize = size;
}

Expand Down

0 comments on commit 2e068b1

Please sign in to comment.