Skip to content

Commit 9988227

Browse files
lexCoder2lexCoder2
committed
pos styles fixes
1 parent 7670549 commit 9988227

9 files changed

Lines changed: 398 additions & 34 deletions

File tree

‎src/app/components/cart/cart.component.html‎

Lines changed: 82 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -80,15 +80,13 @@ <h4 class="item-name">{{ item.product.name }}</h4>
8080
item.product.price | appCurrency
8181
}}</span>
8282
</div>
83+
<div class="item-subtotal">
84+
<span class="subtotal-amount">{{
85+
getItemSubtotal(item) | appCurrency
86+
}}</span>
87+
</div>
8388
</div>
8489
</div>
85-
<button
86-
class="remove-btn"
87-
(click)="onRemoveItem(item.product._id!)"
88-
title="{{ 'CART.REMOVE_ITEM' | translate }}"
89-
>
90-
<i class="fas fa-times"></i>
91-
</button>
9290
<div class="item-details">
9391
<div class="item-quantity-controls">
9492
<button
@@ -107,6 +105,22 @@ <h4 class="item-name">{{ item.product.name }}</h4>
107105
<i class="fas fa-plus"></i>
108106
</button>
109107
</div>
108+
<div class="item-actions">
109+
<button
110+
class="action-btn edit-btn"
111+
(click)="openPriceEditor(item)"
112+
title="{{ 'CART.EDIT_PRICE' | translate }}"
113+
>
114+
<i class="fas fa-edit"></i>
115+
</button>
116+
<button
117+
class="action-btn remove-btn"
118+
(click)="onRemoveItem(item.product._id!)"
119+
title="{{ 'CART.REMOVE_ITEM' | translate }}"
120+
>
121+
<i class="fas fa-times"></i>
122+
</button>
123+
</div>
110124
</div>
111125
</div>
112126
}
@@ -116,13 +130,36 @@ <h4 class="item-name">{{ item.product.name }}</h4>
116130

117131
<div class="cart-footer">
118132
<div class="cart-summary">
119-
<div class="summary-row">
120-
<span>{{ "CART.SUMMARY.ITEMS" | translate }}</span>
121-
<span>{{ getTotalItems() }}x</span>
133+
<div class="summary-row discount-row">
134+
<span>{{ "CART.SUMMARY.DISCOUNT" | translate }}</span>
135+
<div class="discount-controls">
136+
<input
137+
type="number"
138+
[ngModel]="discountAmount()"
139+
(ngModelChange)="discountAmount.set($event)"
140+
class="discount-input"
141+
placeholder="0.00"
142+
min="0"
143+
step="0.01"
144+
/>
145+
<button class="discount-btn" (click)="applyDiscount()">
146+
<i class="fas fa-check"></i>
147+
</button>
148+
</div>
122149
</div>
150+
@if (discountAmount() > 0) {
151+
<div class="summary-row">
152+
<span>{{ "CART.SUMMARY.DISCOUNT_AMOUNT" | translate }}</span>
153+
<span class="discount-amount"
154+
>-{{ discountAmount() | appCurrency }}</span
155+
>
156+
</div>
157+
}
123158
<div class="summary-row total">
124159
<span>{{ "CART.SUMMARY.TOTAL" | translate }}</span>
125-
<span class="total-amount">{{ calculateTotal() | appCurrency }}</span>
160+
<span class="total-amount">{{
161+
calculateSubtotal() | appCurrency
162+
}}</span>
126163
</div>
127164
</div>
128165
<div class="quick-pay">
@@ -161,6 +198,40 @@ <h4 class="item-name">{{ item.product.name }}</h4>
161198
</div>
162199
</aside>
163200

201+
<!-- Price Editor Modal -->
202+
@if (showPriceEditor()) {
203+
<div class="modal-overlay" (click)="closePriceEditor()">
204+
<div
205+
class="modal-content price-editor-modal"
206+
(click)="$event.stopPropagation()"
207+
>
208+
<div class="modal-header">
209+
<h3>
210+
<i class="fas fa-tag"></i>
211+
{{ "CART.EDIT_PRICE_TITLE" | translate }}
212+
</h3>
213+
<button class="close-modal-btn" (click)="closePriceEditor()">
214+
<i class="fas fa-times"></i>
215+
</button>
216+
</div>
217+
<div class="modal-body price-editor-body">
218+
@if (editingItem()) {
219+
<div class="item-being-edited">
220+
<p class="current-price">
221+
{{ "CART.CURRENT_PRICE" | translate }}:
222+
<strong>{{ editingItem()!.product.price | appCurrency }}</strong>
223+
</p>
224+
</div>
225+
}
226+
<app-calculator
227+
(addItem)="onPriceChanged($event)"
228+
[lastItemPrice]="editingItem()!.product.price ?? null"
229+
></app-calculator>
230+
</div>
231+
</div>
232+
</div>
233+
}
234+
164235
<!-- Close Tab Confirmation Modal -->
165236
@if (showCloseConfirmation()) {
166237
<div class="modal-overlay" (click)="cancelCloseTab()">

‎src/app/components/cart/cart.component.scss‎

Lines changed: 198 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,8 @@
266266
.item-header {
267267
display: flex;
268268
justify-content: space-between;
269-
align-items: flex-start;
269+
align-items: center;
270+
gap: $spacing-lg;
270271
margin-bottom: 0.5rem;
271272

272273
.item-title {
@@ -288,6 +289,19 @@
288289
color: var(--text-secondary);
289290
opacity: 0.9;
290291
}
292+
293+
.item-subtotal {
294+
display: flex;
295+
flex-direction: column;
296+
align-items: flex-end;
297+
gap: 0.25rem;
298+
299+
.subtotal-amount {
300+
font-size: 1rem;
301+
font-weight: 500;
302+
color: $primary;
303+
}
304+
}
291305
}
292306

293307
.remove-btn {
@@ -323,12 +337,14 @@
323337
.item-quantity-controls {
324338
display: inline-flex;
325339
align-items: center;
326-
gap: 0.375rem;
340+
gap: $spacing-xs;
327341
}
328342

329343
.qty-btn {
330344
width: 28px;
331345
height: 28px;
346+
min-width: 28px;
347+
min-height: 28px;
332348
border-radius: $radius-lg;
333349
border: none;
334350
background: var(--bg-tertiary);
@@ -372,6 +388,47 @@
372388
color: $gray-700;
373389
font-size: 0.95rem;
374390
}
391+
392+
.item-actions {
393+
display: flex;
394+
gap: 0.5rem;
395+
margin-left: 0.75rem;
396+
}
397+
398+
.action-btn {
399+
width: 28px;
400+
height: 28px;
401+
border-radius: 50%;
402+
border: none;
403+
background: transparent;
404+
color: $gray-400;
405+
cursor: pointer;
406+
display: flex;
407+
align-items: center;
408+
justify-content: center;
409+
font-size: 0.75rem;
410+
flex-shrink: 0;
411+
transition: all 0.2s;
412+
padding: 0;
413+
414+
&:hover {
415+
transform: scale(1.1);
416+
}
417+
418+
&.edit-btn {
419+
&:hover {
420+
background: #bee3f8;
421+
color: #2c5aa0;
422+
}
423+
}
424+
425+
&.remove-btn {
426+
&:hover {
427+
background: #feb2b2;
428+
color: #e53e3e;
429+
}
430+
}
431+
}
375432
}
376433
}
377434

@@ -391,6 +448,66 @@
391448
color: $gray-600;
392449
font-size: 0.95rem;
393450

451+
&.discount-row {
452+
padding: 0.75rem 0;
453+
border-top: 1px solid var(--border-color);
454+
margin-top: 0.5rem;
455+
align-items: flex-start;
456+
457+
.discount-controls {
458+
display: flex;
459+
gap: 0.375rem;
460+
flex: 1;
461+
max-width: 240px;
462+
463+
.discount-input {
464+
flex: 1;
465+
padding: 0.375rem 0.5rem;
466+
border: 1px solid var(--border-color);
467+
border-radius: 6px;
468+
background: white;
469+
color: $gray-700;
470+
font-size: 0.9rem;
471+
font-weight: 500;
472+
text-align: right;
473+
474+
&::placeholder {
475+
color: $gray-400;
476+
}
477+
478+
&:focus {
479+
outline: none;
480+
border-color: $primary;
481+
box-shadow: 0 0 0 2px rgba($primary, 0.1);
482+
}
483+
}
484+
485+
.discount-btn {
486+
padding: 0.375rem 0.75rem;
487+
border: none;
488+
border-radius: 6px;
489+
background: $success;
490+
color: white;
491+
cursor: pointer;
492+
font-size: 0.85rem;
493+
transition: all 0.2s;
494+
display: flex;
495+
align-items: center;
496+
justify-content: center;
497+
flex-shrink: 0;
498+
499+
&:hover {
500+
background: darken($success, 10%);
501+
transform: translateY(-1px);
502+
}
503+
504+
&:active {
505+
transform: translateY(0);
506+
}
507+
}
508+
}
509+
}
510+
394511
&.total {
395512
padding: 0.75rem 0;
396513
border-top: 1px solid var(--border-color);
@@ -404,6 +521,11 @@
404521
font-size: 1.25rem;
405522
}
406523
}
524+
525+
.discount-amount {
526+
color: $success;
527+
font-weight: 600;
528+
}
407529
}
408530
}
409531

@@ -638,3 +760,77 @@
638760
}
639761
}
640762
}
763+
764+
// Price Editor Modal
765+
.price-editor-modal {
766+
max-width: 400px;
767+
width: 90%;
768+
769+
.modal-header {
770+
display: flex;
771+
align-items: center;
772+
justify-content: space-between;
773+
border-bottom: 1px solid var(--border-color);
774+
padding-bottom: 1rem;
775+
776+
h3 {
777+
display: flex;
778+
align-items: center;
779+
gap: 0.75rem;
780+
margin: 0;
781+
font-size: 1.1rem;
782+
color: $gray-700;
783+
}
784+
785+
.close-modal-btn {
786+
width: 32px;
787+
height: 32px;
788+
border: none;
789+
background: transparent;
790+
color: $gray-400;
791+
cursor: pointer;
792+
display: flex;
793+
align-items: center;
794+
justify-content: center;
795+
border-radius: 50%;
796+
font-size: 1rem;
797+
transition: all 0.2s;
798+
padding: 0;
799+
800+
&:hover {
801+
background: var(--bg-tertiary);
802+
color: $gray-600;
803+
}
804+
}
805+
}
806+
807+
.price-editor-body {
808+
padding: 1.5rem 0;
809+
display: flex;
810+
flex-direction: column;
811+
gap: 1rem;
812+
813+
.item-being-edited {
814+
padding: 0.75rem 1rem;
815+
background: var(--bg-tertiary);
816+
border-radius: 8px;
817+
border-left: 4px solid $primary;
818+
819+
.current-price {
820+
margin: 0;
821+
font-size: 0.95rem;
822+
color: $gray-600;
823+
824+
strong {
825+
color: $gray-700;
826+
font-size: 1.1rem;
827+
}
828+
}
829+
}
830+
831+
::ng-deep app-calculator {
832+
display: flex;
833+
justify-content: center;
834+
}
835+
}
836+
}

0 commit comments

Comments
 (0)