#327414 Add Event Participants and Group Members styles

app/app.css

@@ -151,3 +151,10 @@ ActivityIndicator {
 .drawer .logo {
   width: 140;
 }
+
+.list-separator {
+  border-width: 0;
+  border-bottom-width: 1;
+  border-color: #c8c7cc;
+  height: 1;
+}

app/events/event-participants/event-participants.component.css

@@ -1,4 +1,23 @@
 .cntnr {
   height: 100%;
-    background-color: green;
+  background-color: #fff;
+}
+
+.content {
+  padding: 20;
+}
+
+.info-label {
+  margin-bottom: 10;
+  font-size: 12;
+  color: #F4550F;
+  text-transform: uppercase;
+}
+
+.group-wrp {
+  margin-bottom: 30;
+}
+
+.no-voters {
+  padding: 10 0;
 }

app/events/event-participants/event-participants.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { RouterExtensions } from 'nativescript-angular/router';
+import { Page } from 'ui/page';
 
 import { AlertService, PlatformService, UsersService, EventsService, EventRegistrationsService } from '../../services';
 import { User, Event, EventRegistration } from '../../shared/models';
@@ -28,7 +29,8 @@ export class EventParticipantsComponent implements OnInit {
         private _eventsService: EventsService,
         private _platform: PlatformService,
         private _routerExtensions: RouterExtensions,
-        private _regsService: EventRegistrationsService
+        private _regsService: EventRegistrationsService,
+        private _page: Page
     ) {
         this.isAndroid = this._platform.isAndroid;
     }
@@ -41,11 +43,15 @@ export class EventParticipantsComponent implements OnInit {
                 .then(p => this.participants = p);
 
             let eventPrm = this._eventsService.getById(eventId)
-                .then(e => this.event = e);
+                .then(e => {
+                    this.event = e;
+                    this._page.actionBar.title = 'Participants for ' + this.event.Name;
+                });
 
             let regsPrm = this._regsService.getForEvent(eventId)
                 .then(r => this.registrations = r);
 
+
             Promise.all<any>([eventPrm, participantsPrm, regsPrm])
                 .then(() => {
                     this._groupParticipantsByDate();

app/events/event-participants/event-participants.template.html

@@ -1,28 +1,23 @@
 <StackLayout class="cntnr">
     <ActionBarExtension>
-    	<NavigationButton *ngIf="isAndroid"android.systemIcon="ic_menu_back" (tap)="onBack()"></NavigationButton>
+        <NavigationButton *ngIf="isAndroid" icon="res://icon_back" (tap)="onBack()"></NavigationButton>
         <ActionItem *ngIf="!isAndroid" ios.systemIcon="1" ios.position="left" (tap)="onBack()"></ActionItem>
-        <ActionItem>
-            <StackLayout class="actionbar-title-wrp">
-                <Label [text]="event && event.Name && ('Participants for ' + event.Name)" class="actionbar-title"></Label>
-            </StackLayout>
-        </ActionItem>
         <!--<ActionItem (tap)="onAdd()" *ngIf="canAdd"
             ios.systemIcon="4" android.systemIcon="ic_menu_add"
             ios.position="right">
         </ActionItem>-->
     </ActionBarExtension>
 
-    <StackLayout *ngIf="eventDates.length">
-        <StackLayout *ngFor="let date of eventDates">
-            <Label [text]="date | date:dateFormat" textWrap="true" textWrap="true"></Label>
+    <StackLayout *ngIf="eventDates.length" class="content">
+        <StackLayout *ngFor="let date of eventDates" class="group-wrp">
+            <Label class="info-label" [text]="date | date:dateFormat" textWrap="true" textWrap="true"></Label>
             <user-list *ngIf="hasVoters(date)" [users]="getParticipants(date)"></user-list>
-            <Label *ngIf="!hasVoters(date)" text="Nobody voted for this date" textWrap="true"></Label>
+            <Label *ngIf="!hasVoters(date)" text="Nobody voted for this date" textWrap="true" class="no-voters"></Label>
         </StackLayout>
 
         <StackLayout *ngIf="hasOldDates()">
-            <Label text="Dates that were deprecated" textWrap="true"></Label>
-            <Label *ngFor="let date of getOldDates()" [text]="date | date:dateFormat" textWrap="true"></Label>
+            <Label class="info-label" text="Dates that were deprecated" textWrap="true"></Label>
+            <Label *ngFor="let date of getOldDates()" [text]="date | date:dateFormat" textWrap="true" class="no-voters"></Label>
         </StackLayout>
     </StackLayout>
 

app/groups/group-members/group-members.component.css

@@ -1,4 +1,12 @@
 .cntnr {
   height: 100%;
-    background-color: green;
+  background-color: #fff;
+}
+
+.content {
+  padding: 20;
+}
+
+.no-admin {
+  padding: 10 0;
 }

app/groups/group-members/group-members.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { RouterExtensions } from 'nativescript-angular/router';
+import { Page } from 'ui/page';
 
 import { GroupsService, AlertService, PlatformService, UsersService } from '../../services';
 import { User, Group } from '../../shared/models';
@@ -26,7 +27,8 @@ export class GroupMembersComponent implements OnInit {
         private _groupsService: GroupsService,
         private _usersService: UsersService,
         private _platform: PlatformService,
-        private _routerExtensions: RouterExtensions
+        private _routerExtensions: RouterExtensions,
+        private _page: Page
     ) {
         this.isAndroid = this._platform.isAndroid;
     }
@@ -35,7 +37,10 @@ export class GroupMembersComponent implements OnInit {
         this._route.params.subscribe(p => {
             this._groupId = p['id'];
             let groupPrm = this._groupsService.getById(this._groupId)
-                .then(g => this.group = g);
+                .then(g => {
+                    this.group = g;
+                    this._page.actionBar.title = 'Members of ' + this.group.Name;
+                });
             let membersPrm = this._groupsService.getGroupMembers(this._groupId)
                 .then(members => this.members = members);
 

app/groups/group-members/group-members.template.html

@@ -2,20 +2,15 @@
     <ActionBarExtension>
         <NavigationButton *ngIf="isAndroid"android.systemIcon="ic_menu_back" (tap)="onBack()"></NavigationButton>
         <ActionItem *ngIf="!isAndroid" ios.systemIcon="1" ios.position="left" (tap)="onBack()"></ActionItem>
-        <ActionItem>
-            <StackLayout class="actionbar-title-wrp">
-                <Label [text]="group && group.Name && ('Members of ' + group.Name)" class="actionbar-title"></Label>
-            </StackLayout>
-        </ActionItem>
         <ActionItem (tap)="onAdd()" *ngIf="canAdd"
             ios.systemIcon="4" android.systemIcon="ic_menu_add"
             ios.position="right">
         </ActionItem>
     </ActionBarExtension>
 
-    <StackLayout *ngIf="members">
+    <StackLayout *ngIf="members" class="content">
         <user-list *ngIf="members" [users]="members"></user-list>
-        <Label *ngIf="noAdmin" text="Group administrator is not a member."></Label>
+        <Label *ngIf="noAdmin" text="Group administrator is not a member." class="no-admin"></Label>
     </StackLayout>
 
     <ScrollView class="cntnr">

app/shared/user-display/user-display.component.css

@@ -7,11 +7,12 @@
   background-color: rgba(0, 0, 0, .35);
 }
 
-/* no image styles should go here, i guess */
-.list-wrapper >>> .icon {
-  /*font-size: 22;
+.user-image,
+.user-name {
   vertical-align: middle;
-  text-align: center;
-  color: rgba(255, 255, 255, .5);
-  background-color: rgba(0, 0, 0, .05);*/
+}
+
+.user-name {
+  margin-left: 5;
+  color: #000;
 }

app/shared/user-list/user-list.component.css

@@ -0,0 +1,22 @@
+.item {
+  padding: 10 0;
+}
+
+.user-display,
+.organizer {
+  vertical-align: middle;
+}
+
+.organizer {
+  margin-left: 5;
+  font-size: 12;
+}
+
+.user-display >>> Image,
+.user-display >>> .no-image {
+  width: 30;
+  height: 30;
+  margin-right: 5;
+  border-radius: 15;
+  background-color: rgba(0, 0, 0, .35);
+}

app/shared/user-list/user-list.template.html

@@ -1,9 +1,12 @@
 <StackLayout>
-    <ListView [items]="users" separatorColor="gray">
+    <ListView [items]="users" separatorColor="transparent">
         <template let-user="item">
-            <StackLayout orientation="horizontal">
-                <user-display [users]="[user]" [showNames]="true"></user-display>
-                <Label *ngIf="user._label" [text]="getUserLabel(user)" textWrap="true"></Label>
+            <StackLayout>
+                <StackLayout orientation="horizontal" class="item">
+                    <user-display class="user-display" [users]="[user]" [showNames]="true"></user-display>
+                    <Label class="organizer" *ngIf="user._label" [text]="getUserLabel(user)" textWrap="true"></Label>
+                </StackLayout>
+                <Label class="list-separator" text=""></Label>
             </StackLayout>
         </template>
     </ListView>