Skip to content

Commit 711d118

Browse files
lexCoder2lexCoder2
committed
styles withdraw
1 parent e12e62e commit 711d118

6 files changed

Lines changed: 225 additions & 162 deletions

File tree

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -679,17 +679,17 @@ <h3>{{ "LOGIN.CAMERA_SCAN_TITLE" | translate }}</h3>
679679
#withdrawAmount
680680
step="0.01"
681681
min="0.01"
682-
class="form-control"
682+
class="form-control withdraw-amount-input"
683683
[placeholder]="'WITHDRAW.AMOUNT_PLACEHOLDER' | translate"
684684
/>
685685
</div>
686686

687-
<div class="form-group">
687+
<div class="form-group withdraw-reason-group">
688688
<label for="withdrawReason">{{ "WITHDRAW.REASON" | translate }} *</label>
689689
<textarea
690690
id="withdrawReason"
691691
#withdrawReason
692-
rows="3"
692+
rows="2"
693693
class="form-control"
694694
[placeholder]="'WITHDRAW.REASON_PLACEHOLDER' | translate"
695695
required

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

Lines changed: 77 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1201,7 +1201,6 @@
12011201
padding: $spacing-sm;
12021202
border-top: 1px solid var(--border-color);
12031203
background: $gray-50;
1204-
margin: 0 (-$spacing-lg) (-$spacing-lg);
12051204
border-radius: 0 0 $radius-lg $radius-lg;
12061205

12071206
.btn {
@@ -1222,12 +1221,25 @@
12221221

12231222
// Withdrawal Modal Content Specific Styles
12241223
.withdraw-modal-content {
1224+
padding: 0;
1225+
max-height: none;
1226+
12251227
.withdraw-info {
1228+
margin-bottom: $spacing-md;
1229+
1230+
> p {
1231+
margin-bottom: $spacing-md;
1232+
font-size: $font-size-sm;
1233+
color: var(--text-secondary);
1234+
line-height: $line-height-normal;
1235+
}
1236+
12261237
.current-cash-info {
1227-
margin-top: $spacing-md;
1238+
margin-top: 0;
1239+
margin-bottom: $spacing-md;
12281240
background: $white;
12291241
border-radius: $radius-md;
1230-
padding: $spacing-md;
1242+
padding: $spacing-sm $spacing-md;
12311243
box-shadow: var(--shadow-neumorphic-sm);
12321244

12331245
.info-row {
@@ -1236,7 +1248,7 @@
12361248
align-items: center;
12371249

12381250
.label {
1239-
font-size: $font-size-base;
1251+
font-size: $font-size-sm;
12401252
color: var(--text-secondary);
12411253
font-weight: $font-weight-medium;
12421254
display: flex;
@@ -1245,22 +1257,74 @@
12451257

12461258
&::before {
12471259
content: "💰";
1248-
font-size: 1.1rem;
1260+
font-size: 1rem;
12491261
}
12501262
}
12511263

12521264
.value {
1253-
font-size: $font-size-2xl;
1265+
font-size: $font-size-xl;
12541266
font-weight: $font-weight-bold;
12551267
color: $success-dark;
12561268
letter-spacing: -0.5px;
12571269
}
12581270
}
12591271
}
1272+
1273+
label {
1274+
display: flex;
1275+
align-items: center;
1276+
gap: $spacing-xs;
1277+
font-size: $font-size-sm;
1278+
font-weight: $font-weight-semibold;
1279+
color: var(--text-primary);
1280+
margin-bottom: $spacing-xs;
1281+
margin-top: $spacing-sm;
1282+
}
1283+
1284+
.withdraw-amount-input {
1285+
width: 100%;
1286+
padding: $spacing-md $spacing-lg;
1287+
border: 2px solid var(--border-color);
1288+
border-radius: $radius-lg;
1289+
font-size: $font-size-3xl;
1290+
font-weight: $font-weight-bold;
1291+
font-family: $font-family-base;
1292+
color: $danger;
1293+
background: $white;
1294+
text-align: center;
1295+
letter-spacing: -0.5px;
1296+
transition: all $transition-base;
1297+
box-shadow: var(--shadow-neumorphic-inset);
1298+
1299+
&:hover {
1300+
border-color: $danger-light;
1301+
}
1302+
1303+
&:focus {
1304+
outline: none;
1305+
border-color: $danger;
1306+
box-shadow:
1307+
0 0 0 3px rgba($danger, 0.15),
1308+
var(--shadow-neumorphic-inset);
1309+
}
1310+
1311+
&::placeholder {
1312+
color: var(--text-light);
1313+
font-size: $font-size-base;
1314+
font-weight: $font-weight-normal;
1315+
}
1316+
1317+
&::-webkit-inner-spin-button,
1318+
&::-webkit-outer-spin-button {
1319+
opacity: 1;
1320+
height: 40px;
1321+
}
1322+
}
12601323
}
12611324

1262-
.form-group {
1325+
.withdraw-reason-group {
12631326
position: relative;
1327+
margin-bottom: 0;
12641328

12651329
label {
12661330
display: flex;
@@ -1280,15 +1344,18 @@
12801344

12811345
.form-control {
12821346
width: 100%;
1283-
padding: $spacing-md;
1347+
padding: $spacing-sm $spacing-md;
12841348
border: 2px solid var(--border-color);
12851349
border-radius: $radius-md;
1286-
font-size: $font-size-base;
1350+
font-size: $font-size-sm;
12871351
font-family: $font-family-base;
12881352
color: var(--text-primary);
12891353
background: $white;
12901354
transition: all $transition-base;
12911355
box-shadow: var(--shadow-neumorphic-inset);
1356+
resize: none;
1357+
min-height: 60px;
1358+
line-height: $line-height-normal;
12921359

12931360
&:hover {
12941361
border-color: $border-dark;
@@ -1305,22 +1372,9 @@
13051372
&::placeholder {
13061373
color: var(--text-light);
13071374
font-style: italic;
1375+
font-size: $font-size-xs;
13081376
}
13091377
}
1310-
1311-
input[type="number"] {
1312-
&::-webkit-inner-spin-button,
1313-
&::-webkit-outer-spin-button {
1314-
opacity: 1;
1315-
}
1316-
}
1317-
1318-
textarea.form-control {
1319-
resize: vertical;
1320-
min-height: 90px;
1321-
line-height: $line-height-normal;
1322-
font-family: $font-family-base;
1323-
}
13241378
}
13251379
}
13261380

‎src/app/components/layout/layout.component.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export class LayoutComponent implements OnInit, OnDestroy {
6363
private cdr = inject(ChangeDetectorRef);
6464

6565
@ViewChild("switchQrInput") switchQrInputRef!: ElementRef<HTMLInputElement>;
66+
@ViewChild("withdrawAmount") withdrawAmountRef!: ElementRef<HTMLInputElement>;
6667

6768
currentUser: User | null = null;
6869
currentRegister: Register | null = null;
@@ -721,6 +722,9 @@ export class LayoutComponent implements OnInit, OnDestroy {
721722
openWithdrawModal(): void {
722723
this.showUserDropdown = false;
723724
this.showWithdrawModal = true;
725+
setTimeout(() => {
726+
this.withdrawAmountRef?.nativeElement.focus();
727+
}, 100);
724728
}
725729

726730
processWithdraw(amount: string, reason: string): void {

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

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -46,20 +46,6 @@
4646
<i class="fas fa-undo-alt"></i>
4747
<span>{{ "POS.ACTIONS.RETURNS" | translate }}</span>
4848
</button>
49-
50-
<!-- Print Receipt Toggle -->
51-
<div class="print-toggle">
52-
<i class="fas fa-receipt"></i>
53-
<span class="toggle-label">{{ "POS.ACTIONS.PRINT" | translate }}</span>
54-
<label class="toggle-switch">
55-
<input
56-
type="checkbox"
57-
[(ngModel)]="printReceiptsEnabled"
58-
(ngModelChange)="onPrintToggleChange()"
59-
/>
60-
<span class="toggle-slider"></span>
61-
</label>
62-
</div>
6349
</div>
6450

6551
<!-- Search Results Component -->

‎src/app/services/receipt-generator.service.ts‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export interface ReceiptConfig {
9898
/** Predefined paper sizes */
9999
export const PAPER_SIZES: Record<string, PaperConfig> = {
100100
"58mm": { widthMm: 58, widthPx: 420, dpi: 300, margin: 6 },
101-
"80mm": { widthMm: 80, widthPx: 600, dpi: 300, margin: 8 },
101+
"80mm": { widthMm: 80, widthPx: 576, dpi: 300, margin: 10 },
102102
A4: { widthMm: 210, widthPx: 2480, dpi: 300, margin: 40 },
103103
};
104104

@@ -142,11 +142,17 @@ export const DEFAULT_RECEIPT_CONFIG: ReceiptConfig = {
142142
/** Default receipt configuration for 80mm thermal printer */
143143
export const DEFAULT_80MM_CONFIG: ReceiptConfig = {
144144
paper: PAPER_SIZES["80mm"],
145-
font: { ...DEFAULT_FONT_CONFIG, baseSize: 10, headerSize: 12 },
145+
font: {
146+
...DEFAULT_FONT_CONFIG,
147+
baseSize: 13,
148+
headerSize: 16,
149+
titleSize: 12,
150+
smallSize: 10,
151+
},
146152
style: DEFAULT_STYLE_CONFIG,
147-
barcode: DEFAULT_BARCODE_CONFIG,
153+
barcode: { ...DEFAULT_BARCODE_CONFIG, scale: 1.5, height: 40 },
148154
plainTextMode: false,
149-
charsPerLine: 42,
155+
charsPerLine: 48,
150156
};
151157

152158
// ============================================================================
@@ -569,10 +575,10 @@ export class ReceiptGeneratorService {
569575
const { paper, font, style } = config;
570576

571577
// Scale down width for screen display - use realistic phone/tablet width
572-
// 58mm paper ≈ 200px (realistic phone width for receipt)
573-
// 80mm paper ≈ 280px (slightly wider for larger printer)
578+
// 58mm paper ≈ 140px (realistic phone width for receipt)
579+
// 80mm paper ≈ 200px (wider for larger printer)
574580
const displayWidth =
575-
paper.widthMm === 58 ? 140 : paper.widthMm === 80 ? 170 : 160;
581+
paper.widthMm === 58 ? 140 : paper.widthMm === 80 ? 200 : 160;
576582

577583
return `
578584
* {
@@ -660,18 +666,18 @@ export class ReceiptGeneratorService {
660666
}
661667
662668
.col-qty {
663-
width: 18%;
669+
width: ${paper.widthMm === 80 ? "15%" : "18%"};
664670
text-align: center;
665671
}
666672
667673
.col-desc {
668-
width: 50%;
674+
width: ${paper.widthMm === 80 ? "55%" : "50%"};
669675
word-break: break-word;
670676
overflow-wrap: break-word;
671677
}
672678
673679
.col-price {
674-
width: 32%;
680+
width: ${paper.widthMm === 80 ? "30%" : "32%"};
675681
text-align: right;
676682
}
677683

0 commit comments

Comments
 (0)