tanshu/barker
1
0 Fork 0
Code Issues 1 Pull Requests Releases 4 Activity

Chore: Moved the formatting to the main style sheet because it was used everywhere.

Browse Source 
Also, moved to sass to get theme colors from the material design library
This commit is contained in:
tanshu committed 2023-03-18 23:29:10 +05:30
1 parent d39712a347
commit 4e4cebf5d4
32 files changed
+367 -451
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

bookie/src/app/sales/bills/bills.component.css
-77
View File
@@ -1,77 +0,0 @@
.square-button {
min-width: 150px;
max-width: 150px;
min-height: 150px;
}
.right-align {
display: flex;
justify-content: flex-end;
}
table {
width: 100%;
}
.mat-column-select {
flex: 0 0 60px;
}
.grey900 {
background-color: #1b5e20;
color: #ffffff;
font-size: 1.2em;
}
.grey700 {
background-color: #388e3c;
color: #ffffff;
}
.grey500 {
background-color: #4caf50;
color: #000000;
}
.grey300 {
background-color: #81c784;
color: #000000;
}
.blue400 {
background-color: #42a5f5;
color: #000000;
}
.blue800 {
background-color: #1565c0;
color: #ffffff;
}
.red100 {
background-color: #ffcdd2;
color: #000000;
}
.deep-purple-50 {
background-color: #ede7f6;
color: #000000;
}
.deep-purple-100 {
background-color: #d1c4e9;
color: #000000;
}
.deep-purple-200 {
background-color: #b39ddb;
color: #000000;
}
.yellow300 {
background-color: #fff176;
}
.yellow-for-hh-printed {
background-color: #f7ca18;
}
bookie/src/app/sales/bills/bills.component.html
+80 -56
View File
@@ -72,83 +72,107 @@
<ng-container matColumnDef="quantity">
<mat-header-cell *matHeaderCellDef>Quantity</mat-header-cell>
<mat-cell *matCellDef="let row" class="right-align">
<button mat-icon-button (click)="subtractOne(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
<mat-icon class="del">indeterminate_check_box</mat-icon>
<button
mat-icon-button
class="small-icon-button"
(click)="subtractOne(row)"
[disabled]="row.isPrinted"
*ngIf="!row.isKot"
>
<mat-icon>indeterminate_check_box</mat-icon>
</button>
<button mat-icon-button (click)="quantity(row)" [disabled]="rowQuantityDisabled(row)" *ngIf="!row.isKot">
<button
mat-icon-button
class="small-icon-button"
(click)="quantity(row)"
[disabled]="rowQuantityDisabled(row)"
*ngIf="!row.isKot"
>
{{ row.quantity }}
</button>
<button mat-icon-button (click)="addOne(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
<mat-icon class="del">control_point</mat-icon>
<button
mat-icon-button
class="small-icon-button"
(click)="addOne(row)"
[disabled]="row.isPrinted"
*ngIf="!row.isKot"
>
<mat-icon>control_point</mat-icon>
</button>
<button mat-icon-button (click)="removeItem(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
<mat-icon class="del">cancel</mat-icon>
</button>
<button mat-icon-button (click)="modifier(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
<mat-icon class="del">assignment</mat-icon>
<button
mat-icon-button
class="small-icon-button"
(click)="modifier(row)"
[disabled]="row.isPrinted"
*ngIf="!row.isKot"
>
<mat-icon>assignment</mat-icon>
</button>
<button mat-icon-button (click)="moveKot(row)" [disabled]="row.isKot && !row.kotId" *ngIf="row.isKot">
<mat-icon class="del">open_in_new</mat-icon>
</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="gross-title">
<mat-footer-cell *matFooterCellDef class="grey300 bold">Gross</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="gross-amount">
<mat-footer-cell *matFooterCellDef class="grey300 bold right-align">{{
bs.grossAmount | async | currency : 'INR'
}}</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="hh-title">
<mat-footer-cell *matFooterCellDef class="grey300 bold">Happy Hour Discount</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="hh-amount">
<mat-footer-cell *matFooterCellDef class="grey300 bold right-align">{{
bs.hhAmount | async | currency : 'INR'
}}</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="discount-title">
<mat-footer-cell *matFooterCellDef class="grey500 bold">Discount</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="discount-amount">
<mat-footer-cell *matFooterCellDef class="grey500 bold right-align">{{
bs.discountAmount | async | currency : 'INR'
}}</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="tax-title">
<mat-footer-cell *matFooterCellDef class="grey700 bold">Tax</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="tax-amount">
<mat-footer-cell *matFooterCellDef class="grey700 bold right-align">{{
bs.taxAmount | async | currency : 'INR'
}}</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="amount-title">
<mat-footer-cell *matFooterCellDef class="grey900">Amount</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="amount-amount">
<mat-footer-cell *matFooterCellDef class="grey900 bold right-align">{{
bs.amount | async | currency : 'INR'
}}</mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="['bill-no-title', 'bill-no-details']"></mat-header-row>
<mat-header-row *matHeaderRowDef="['time-title', 'time-details']"></mat-header-row>
<mat-header-row *matHeaderRowDef="['table-title', 'table-details']"></mat-header-row>
<mat-row
*matRowDef="let row; columns: displayedColumns"
[class.blue400]="row.isOldKot"
[class.blue800]="row.isNewKot"
[class.red100]="row.isPrinted && !row.isHappyHour"
[class.yellow300]="row.isHappyHour && !row.isPrinted"
[class.yellow-for-hh-printed]="row.isPrinted && row.isHappyHour"
[class.old-kot]="row.isOldKot"
[class.new-kot]="row.isNewKot"
[class.is-printed]="row.isPrinted && !row.isHappyHour"
[class.hh-new]="row.isHappyHour && !row.isPrinted"
[class.hh-printed]="row.isPrinted && row.isHappyHour"
></mat-row>
<mat-footer-row *matFooterRowDef="['gross-title', 'gross-amount']"></mat-footer-row>
<ng-container matColumnDef="gross-title">
<mat-footer-cell *matFooterCellDef class="bold">Gross</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="gross-amount">
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
bs.grossAmount | async | currency : 'INR'
}}</mat-footer-cell>
</ng-container>
<mat-footer-row *matFooterRowDef="['hh-title', 'hh-amount']"></mat-footer-row>
<ng-container matColumnDef="hh-title">
<mat-footer-cell *matFooterCellDef class="bold">Happy Hour Discount</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="hh-amount">
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
bs.hhAmount | async | currency : 'INR'
}}</mat-footer-cell>
</ng-container>
<mat-footer-row *matFooterRowDef="['discount-title', 'discount-amount']"></mat-footer-row>
<ng-container matColumnDef="discount-title">
<mat-footer-cell *matFooterCellDef class="bold">Discount</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="discount-amount">
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
bs.discountAmount | async | currency : 'INR'
}}</mat-footer-cell>
</ng-container>
<mat-footer-row *matFooterRowDef="['tax-title', 'tax-amount']"></mat-footer-row>
<ng-container matColumnDef="tax-title">
<mat-footer-cell *matFooterCellDef class="bold">Tax</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="tax-amount">
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
bs.taxAmount | async | currency : 'INR'
}}</mat-footer-cell>
</ng-container>
<mat-footer-row *matFooterRowDef="['amount-title', 'amount-amount']"></mat-footer-row>
<ng-container matColumnDef="amount-title">
<mat-footer-cell *matFooterCellDef>Amount</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="amount-amount">
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
bs.amount | async | currency : 'INR'
}}</mat-footer-cell>
</ng-container>
</table>
</mat-card-content>
</mat-card>
bookie/src/app/sales/bills/bills.component.sass
+111
View File
@@ -0,0 +1,111 @@
@use '@angular/material' as mat
$my-grey: mat.define-palette(mat.$grey-palette)
$my-green: mat.define-palette(mat.$green-palette)
.right-align
display: flex
justify-content: flex-end
table
width: 100%
.mat-column-select
flex: 0 0 60px
.grey900, .mat-column-amount-title, .mat-column-amount-amount
background-color: #1b5e20
color: #ffffff
font-size: 1.2em
// color: mat.get-color-from-palette($my-grey, '900-contrast')
// background: mat.get-color-from-palette($my-grey, 900)
.grey700, .mat-column-tax-title, .mat-column-tax-amount
background-color: #388e3c
color: #ffffff
// color: mat.get-color-from-palette($my-grey, '900-contrast')
// background: mat.get-color-from-palette($my-grey, 900)
.grey500, .mat-column-discount-title, .mat-column-discount-amount
background-color: #4caf50
color: #000000
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.grey300, .mat-column-hh-title, .mat-column-hh-amount, .mat-column-gross-title, .mat-column-gross-amount
background-color: #81c784
color: #000000
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.blue400, .old-kot
background-color: #42a5f5
color: #ffffff
// color: mat.get-color-from-palette($my-green, 700)
// background-color: mat.get-color-from-palette($my-green, 500)
.blue800, .new-kot
background-color: #1565c0
color: #ffffff
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.red100, .is-printed
// background-color: #ffcdd2
// color: #000000
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.deep-purple-50
background-color: #ede7f6
color: #000000
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.deep-purple-100
background-color: #d1c4e9
color: #000000
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.deep-purple-200
background-color: #b39ddb
color: #000000
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.yellow300, .hh-new
background-color: #fff176
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.hh-printed
background-color: #f7ca18
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
// https://github.com/btxtiger/mat-icon-button-sizes
$button-size: 32px
$icon-size: 19px
.small-icon-button
width: $button-size !important
height: $button-size !important
padding: 0px !important
display: inline-flex !important
align-items: center
justify-content: center
font-size: $icon-size !important
& > *[role=img]
width: $icon-size
height: $icon-size
font-size: $icon-size
svg
width: $icon-size
height: $icon-size
.mat-mdc-button-touch-target
width: $button-size !important
height: $button-size !important
bookie/src/app/sales/bills/bills.component.ts
+1 -5
View File
@@ -27,7 +27,7 @@ import { VoucherType } from './voucher-type';
@Component({
selector: 'app-bills',
templateUrl: './bills.component.html',
styleUrls: ['./bills.component.css'],
styleUrls: ['./bills.component.sass'],
})
export class BillsComponent implements OnInit {
dataSource: BillsDataSource = new BillsDataSource(this.bs.dataObs);
@@ -196,10 +196,6 @@ export class BillsComponent implements OnInit {
this.bs.subtractOne(item, canEdit);
}
removeItem(item: BillViewItem): void {
this.bs.removeItem(item);
}
modifier(item: BillViewItem): void {
this.bs.modifier(item);
}