Fixed alignment with select inputs since angular/components#2124 is n…

…ow resolved.
zlogic · Nov 19, 2017 · 2bf9cb2 · 2bf9cb2
1 parent 9899321
commit 2bf9cb2
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 28 deletions.
diff --git a/app/style.scss b/app/style.scss
@@ -23,12 +23,6 @@ html, body {
   color: mat-color($accent);
 }
 
-/* TODO: remove this once https://github.com/angular/material2/issues/2124 is fixed */
-.mat-select {
-  padding-top: 10px;
-}
-/* End TODO */
-
 button.my-fab {
   position: fixed;
   right: 32px;
@@ -51,7 +45,7 @@ button.my-fab {
 }
 
 .large-card {
-  width: 400px;
+  width: 420px;
 }
 
 .small-card {

diff --git a/app/templates/components/analytics.pug b/app/templates/components/analytics.pug
@@ -21,12 +21,12 @@ div(class="card-container")
     mat-card-title #{__('Report configuration')}
     mat-card-content
       section
-        mat-input-container
+        mat-form-field
           input(matInput, [matDatepicker]="startDatePicker", placeholder=__("Start date"), [(ngModel)]="startDate")
           mat-datepicker-toggle(matSuffix, type="button", [for]="startDatePicker")
         mat-datepicker(#startDatePicker)
-      section
-        mat-input-container
+        span &nbsp;
+        mat-form-field
           input(matInput, [matDatepicker]="endDatePicker", placeholder=__("End date"), [(ngModel)]="endDate")
           mat-datepicker-toggle(matSuffix, type="button", [for]="endDatePicker")
         mat-datepicker(#endDatePicker)

diff --git a/app/templates/components/transactioneditor.pug b/app/templates/components/transactioneditor.pug
@@ -22,14 +22,15 @@ form(style="layout: flex;", [formGroup]="transactionForm", (ngSubmit)="submitEdi
     mat-card-content(formArrayName="FinanceTransactionComponents")
       div(*ngFor="let component of getComponentsGroup().controls; let i=index", [formGroupName]="i")
         div(style="display: flex;")
-          mat-select(placeholder=__("Account"), formControlName="AccountId", [(ngModel)]="transaction.FinanceTransactionComponents[i].AccountId")
-            mat-option(*ngFor="let account of visibleAccounts", [value]="account.id")
-              | {{account.name}}
+          mat-form-field
+            mat-select(placeholder=__("Account"), formControlName="AccountId", [(ngModel)]="transaction.FinanceTransactionComponents[i].AccountId")
+              mat-option(*ngFor="let account of visibleAccounts", [value]="account.id")
+                | {{account.name}}
           span &nbsp;
           mat-input-container
             input(matInput, type="text", style="text-align:right;", placeholder=__('Amount'), formControlName="amount", [(ngModel)]="transaction.FinanceTransactionComponents[i].amount")
-          span(style="align-self: center;padding-left: 5px;")
-            |  {{getCurrency(i)}}
+            span(matSuffix)
+              | &nbsp;{{getCurrency(i)}}
           span(style="flex: 1 1 auto;")
           button(mat-icon-button, type="button", [matMenuTriggerFor]="componentMenu", style="align-self: flex-start;", aria-label="#{__('Open menu')}")
             mat-icon more_vert

diff --git a/app/templates/components/transactions.pug b/app/templates/components/transactions.pug
@@ -6,27 +6,25 @@ div(class="card-container")
     mat-card-title #{__('Filter and sorting')}
     mat-card-content
       form([formGroup]="filterForm", autocomplete="off", novalidate)
-        div
-          button(mat-icon-button, type="button", aria-label="#{__('Sort by description')}", (click)="transactionsService.applySort('description')")
+        mat-form-field
+          input(matInput, type="text", placeholder=__('Description filter'), formControlName="filterDescription", [(ngModel)]="transactionsService.filterDescription")
+          button(matPrefix, mat-icon-button, type="button", aria-label="#{__('Sort by description')}", (click)="transactionsService.applySort('description')")
             mat-icon(*ngIf="transactionsService.sortColumn !== 'description'; else sortDescription") sort
             ng-template(#sortDescription)
               mat-icon(*ngIf="transactionsService.sortAsc") arrow_drop_up
               mat-icon(*ngIf="!transactionsService.sortAsc") arrow_drop_down
-          mat-input-container
-            input(matInput, type="text", placeholder=__('Description filter'), formControlName="filterDescription", [(ngModel)]="transactionsService.filterDescription")
-        div
-          button(mat-icon-button,type="button",  aria-label="#{__('Sort by date')}", (click)="transactionsService.applySort('date')")
+        span &nbsp;
+        mat-form-field
+          input(matInput, [matDatepicker]="picker", placeholder=__("Date filter"), formControlName="filterDate", [(ngModel)]="transactionsService.filterDate")
+          button(matPrefix, mat-icon-button,type="button", aria-label="#{__('Sort by date')}", (click)="transactionsService.applySort('date')")
             mat-icon(*ngIf="transactionsService.sortColumn !== 'date'; else sortDate") sort
             ng-template(#sortDate)
               mat-icon(*ngIf="transactionsService.sortAsc") arrow_drop_up
               mat-icon(*ngIf="!transactionsService.sortAsc") arrow_drop_down
-          mat-input-container
-            input(matInput, [matDatepicker]="picker", placeholder=__("Date filter"), formControlName="filterDate", [(ngModel)]="transactionsService.filterDate")
-            mat-datepicker-toggle(matSuffix, type="button", [for]="picker")
-          mat-datepicker(#picker)
-        div
-          tag-input(placeholder=__("Tags filter"), secondaryPlaceholder=__("Tags filter"), formControlName="filterTags", [(ngModel)]="transactionsService.filterTags", [modelAsStrings]="true")
-            tag-input-dropdown([showDropdownIfEmpty]="true", [autocompleteItems]="tagsService.tags")
+          mat-datepicker-toggle(matSuffix, type="button", [for]="picker")
+        mat-datepicker(#picker)
+        tag-input(placeholder=__("Tags filter"), secondaryPlaceholder=__("Tags filter"), formControlName="filterTags", [(ngModel)]="transactionsService.filterTags", [modelAsStrings]="true")
+          tag-input-dropdown([showDropdownIfEmpty]="true", [autocompleteItems]="tagsService.tags")
 div(class="card-container", infiniteScroll, (scrolled)="transactionsService.nextPage()", [infiniteScrollDisabled]="transactionsService.isLoadingNextPage() || transactionsService.isLastPage()", [immediateCheck]="true")
   ng-container(*ngFor="let transaction of transactionsService.transactions")
     transaction-editor(*ngIf="isEditing(transaction); else elseBlock", [transaction]="transaction", (done)="stopEditing()")