implement list header

Author: Ihor Khomiak

app/components/list/list.component.css

@@ -17,4 +17,11 @@
 .indicator-container {
     width: 100%; 
     height: 100%;
+}
+
+.header-label {
+    color: #909da6;
+    font-weight: bold;
+    font-size: 9pt;
+    vertical-align: center;
 }

app/components/list/list.component.html

@@ -1,32 +1,53 @@
 <AbsoluteLayout class="main-container">
-    <PullToRefresh (refresh)="reloadList($event)" 
+	<StackLayout class="main-container">
+		<GridLayout height="15"
+					columns="*, 80, 100, 80">
+			<Label col="0"
+				   text="Quantity"
+				   textAlignment="center"
+				   class="header-label"></Label>
+			<Label col="1"
+				   text="Date"
+				   textAlignment="center"
+				   class="header-label"></Label>
+			<Label col="2"
+				   text="Tag"
+				   textAlignment="center"
+				   class="header-label"></Label>
+			<Label col="3"
+				   text="Is Faforite"
+				   textAlignment="center"
+				   class="header-label"></Label>
+		</GridLayout>
+		<PullToRefresh (refresh)="reloadList($event)" 
                    class="main-container">
-        <ListView [items]="items"
-                #list
-                class="list-group">
-            <ng-template let-item="item">
-                <GridLayout row="0" 
-                            columns="*, 80, 100, 80">
-                    <Label [nsRouterLink]="['/cost', item.id]" 
-                            [text]="item.quantity"
-                            class="list-group-item"
-                            col="0"></Label>
-                    <Label [nsRouterLink]="['/cost', item.id]" 
-                            [text]="getDateValue(item)"
-                            class="list-group-item-date"
-                            col="1"></Label>             
-                    <Label [nsRouterLink]="['/cost', item.id]" 
-                            [text]="item.type"
-                            class="tag-item"
-                            col="2"></Label>    
-                    <Label [nsRouterLink]="['/cost', item.id]" 
-                            [text]="item.isFavorite === true ? 'Favorite' : 'Not Favorite'"
-                            class="list-group-item-favorite"
-                            col="3"></Label>              
-                </GridLayout>
-            </ng-template>
-        </ListView>
-    </PullToRefresh>
+			<ListView [items]="items"
+					#list
+					class="list-group">
+				<ng-template let-item="item">
+					<GridLayout row="0" 
+								columns="*, 80, 100, 80">
+						<Label [nsRouterLink]="['/cost', item.id]" 
+								[text]="item.quantity"
+								class="list-group-item"
+								col="0"></Label>
+						<Label [nsRouterLink]="['/cost', item.id]" 
+								[text]="getDateValue(item)"
+								class="list-group-item-date"
+								col="1"></Label>             
+						<Label [nsRouterLink]="['/cost', item.id]" 
+								[text]="item.type"
+								class="tag-item"
+								col="2"></Label>    
+						<Label [nsRouterLink]="['/cost', item.id]" 
+								[text]="item.isFavorite === true ? 'Favorite' : 'Not Favorite'"
+								class="list-group-item-favorite"
+								col="3"></Label>              
+					</GridLayout>
+				</ng-template>
+			</ListView>
+		</PullToRefresh>
+	</StackLayout>
     <StackLayout verticalAlignment="center" 
                  class="indicator-container">
         <ActivityIndicator [busy]="isLoading"