sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-31 09:37:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merged PR 329: #1069 Update Button Sizing

Browse Source 
#1069 Update Button Sizing

Related work items: #1069
This commit is contained in:
Sebastian Neumair
2020-09-24 12:07:21 +00:00
committed by Lorenz Hilpert
parent 8a94ea3d82 725307c022
commit 3be12ad944
3 changed files with 58 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
apps/sales/src/app/modules/shelf/pages/shelf-order-details/shelf-order-details.component.html
View File

@@ -1,8 +1,16 @@
<div class="isa-card isa-border-bottom-radius-0">
<div class="isa-flex isa-align-items-center isa-justify-content-space-between">
<app-shelf-details-customer-features [customerNumber]="(orderDetailsCard$ | async)?.customerNumber">
<div
class="isa-flex isa-align-items-center isa-justify-content-space-between"
>
<app-shelf-details-customer-features
[customerNumber]="(orderDetailsCard$ | async)?.customerNumber"
>
</app-shelf-details-customer-features>
<button type="button" class="isa-btn isa-btn-secondary isa-mr-n10" (click)="navigateToDetails()">
<button
type="button"
class="isa-btn isa-btn-secondary isa-mr-n10"
(click)="navigateToDetails()"
>
Bearbeiten
</button>
</div>
@@ -13,8 +21,14 @@
(changePickUpDeadline)="changePickupDeadline($event)"
>
</app-shelf-order-details-card>
<div class="isa-flex isa-flex-direction-row-reverse isa-mb-n10" *ngIf="partialPickup">
<div class="isa-flex isa-flex-direction-column" *ngIf="orderItems$ | async; let orderItems">
<div
class="isa-flex isa-flex-direction-row-reverse isa-mb-n10"
*ngIf="partialPickup"
>
<div
class="isa-flex isa-flex-direction-column"
*ngIf="orderItems$ | async; let orderItems"
>
<button
type="button"
class="isa-btn isa-btn-secondary isa-mr-n10 isa-mb-7"
@@ -31,14 +45,20 @@
>
Alle entfernen
</button>
<span class="isa-text-right"> {{ selectedForPartialPickup.size }} von {{ orderItems?.length }} Titel </span>
<span class="isa-text-right">
{{ selectedForPartialPickup.size }} von {{ orderItems?.length }} Titel
</span>
</div>
</div>
</div>
<ng-container *ngFor="let orderItem of orderItems$ | async">
<div class="order-item-features" *ngIf="orderItem.features">
<div class="order-item-feature" *ngIf="orderItem.features.prebooked">
<lib-icon *ngIf="orderItem.features?.prebooked" name="tag_icon_preorder" height="48px"></lib-icon>
<lib-icon
*ngIf="orderItem.features?.prebooked"
name="tag_icon_preorder"
height="48px"
></lib-icon>
</div>
</div>
<div class="isa-card isa-mt-2 isa-border-radius-0">
@@ -51,7 +71,10 @@
>
</app-shelf-order-item-details>
<div class="isa-flex isa-justify-content-flex-end isa-mt-7">
<button class="isa-btn isa-btn-secondary isa-p-0" (click)="navigateToHistory(orderItem)">
<button
class="isa-btn isa-btn-secondary isa-p-0"
(click)="navigateToHistory(orderItem)"
>
Historie
</button>
</div>
@@ -60,7 +83,9 @@
<div
class="isa-card isa-mt-2 isa-border-radius-0"
[class.isa-border-radius-0]="showArrivedAndPrintCta$ | async"
[class.isa-border-top-radius-0]="(showArrivedAndPrintCta$ | async) === false"
[class.isa-border-top-radius-0]="
(showArrivedAndPrintCta$ | async) === false
"
>
<app-shelf-order-details-comment
[comment]="orderItem.specialComment"
@@ -72,14 +97,19 @@
<!-- CTAs für Bestellt -->
<ng-container *ngIf="showArrivedAndPrintCta$ | async">
<div class="isa-card isa-mt-2 isa-border-top-radius-0">
<app-shelf-order-details-shelf-tags #shelfDetailsTag></app-shelf-order-details-shelf-tags>
<app-shelf-order-details-shelf-tags
#shelfDetailsTag
></app-shelf-order-details-shelf-tags>
</div>
<div class="cta-sticky isa-my-28 isa-text-center">
<button
type="button"
class="isa-btn isa-btn-primary isa-btn-pill isa-btn-medium"
[disabled]="shelfDetailsTag.selected === shelfDetailsTag.customValue.value && shelfDetailsTag.customValue.invalid"
class="isa-btn isa-btn-primary isa-btn-pill isa-btn-xl"
[disabled]="
shelfDetailsTag.selected === shelfDetailsTag.customValue.value &&
shelfDetailsTag.customValue.invalid
"
(click)="
changeProcessingStatus(128, {
compartmentInfo: shelfDetailsTag.selected,
@@ -95,14 +125,19 @@
<!-- CTAs für Eingetroffen -->
<ng-container *ngIf="showArrivedCta$ | async">
<div class="isa-card isa-mt-2 isa-border-top-radius-0">
<app-shelf-order-details-shelf-tags #shelfDetailsTag></app-shelf-order-details-shelf-tags>
<app-shelf-order-details-shelf-tags
#shelfDetailsTag
></app-shelf-order-details-shelf-tags>
</div>
<div class="cta-sticky isa-my-28 isa-text-center">
<button
type="button"
class="isa-btn isa-btn-primary isa-btn-pill isa-btn-medium"
[disabled]="shelfDetailsTag.selected === shelfDetailsTag.customValue.value && shelfDetailsTag.customValue.invalid"
class="isa-btn isa-btn-primary isa-btn-pill isa-btn-xl"
[disabled]="
shelfDetailsTag.selected === shelfDetailsTag.customValue.value &&
shelfDetailsTag.customValue.invalid
"
(click)="
changeProcessingStatus(128, {
compartmentInfo: shelfDetailsTag.selected,
@@ -119,7 +154,7 @@
<button
*ngIf="(showPickUpPartialCollectCta$ | async) && !partialPickup"
type="button"
class="isa-btn isa-btn-outline-primary isa-btn-pill isa-btn-medium isa-mr-10"
class="isa-btn isa-btn-outline-primary isa-btn-pill isa-btn-xl isa-mr-10"
(click)="activatePartialPickup()"
>
Teilabholung
@@ -127,19 +162,19 @@
<button
*ngIf="showPickUpCta$ | async"
type="button"
class="isa-btn isa-btn-primary isa-btn-pill isa-btn-medium"
class="isa-btn isa-btn-primary isa-btn-pill isa-btn-xl"
(click)="changeProcessingStatus(256)"
>
abgeholt
</button>
<!-- <button *ngIf="showAddToRemissionListCta$ | async" type="button"
class="isa-btn isa-btn-outline-primary isa-btn-pill isa-btn-medium isa-mr-10" (click)="addToRemissionList()">
class="isa-btn isa-btn-outline-primary isa-btn-pill isa-btn-xl isa-mr-10" (click)="addToRemissionList()">
Remissionsliste hinzufügen
</button> -->
<button
*ngIf="showBackToStoreCta$ | async"
type="button"
class="isa-btn isa-btn-primary isa-btn-pill isa-btn-medium"
class="isa-btn isa-btn-primary isa-btn-pill isa-btn-xl"
(click)="changeProcessingStatus(262144)"
>
ans Lager
@@ -147,7 +182,7 @@
<button
*ngIf="showReOrderCta$ | async"
type="button"
class="isa-btn isa-btn-primary isa-btn-pill isa-btn-medium"
class="isa-btn isa-btn-primary isa-btn-pill isa-btn-xl"
(click)="changeProcessingStatus(8192)"
>
nachbestellen

3
apps/sales/src/scss/_variables.scss
View File

@@ -74,8 +74,9 @@ $button-line-height-l: 21px;
$button-line-height-xl: 21px;
$button-padding: 0.25rem 0.5rem;
$button-padding-l: 0.5rem 0.75rem;
$button-padding-xl: 1rem 1.25rem;
$button-padding-xl: 18px 27px 20px 27px;
$button-border-radius: 5px;
$button-border-radius-xl: 29px;
$button-pill-radius: 50rem;
$button-disabled-color: #89949e;

1
apps/sales/src/scss/modules/_button.scss
View File

@@ -27,6 +27,7 @@
font-size: $button-font-size-xl;
line-height: $button-line-height-xl;
padding: $button-padding-xl;
border-radius: $button-border-radius-xl;
}
.isa-btn-pill {