#330394 Add CSS class for icon images. Add it to photo-picker component and remove the css class from all other screens. Fix timestamp on group join requests resolution screen for resent requests.

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

@@ -27,15 +27,6 @@ TextView {
   height: 200;
 }
 
-.user >>> .no-image,
-.user >>> Image {
-  width: 30;
-  height: 30;
-  margin-right: 5;
-  border-radius: 15;
-  background-color: rgba(0, 0, 0, .35);
-}
-
 .date .label,
 .group .label,
 .user .label {

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

@@ -40,6 +40,8 @@ export class EditableEventComponent implements OnInit {
         }
         this._markSelectedGroupIfPresent(this.event, this.userGroups);
         this._handleEventDatesIfPresent(this.event);
+        this._usersService.currentUser()
+            .then(u => this.currentUser = u);
     }
 
     onAddDateOption(date: Date) {

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

@@ -47,11 +47,6 @@
             </StackLayout>
         </StackLayout>
 
-        <StackLayout *ngIf="currentUser" class="input-field user">
-            <Label class="label" text="Organizer"></Label>
-            <user-display [users]="currentUser" [showNames]="true"></user-display>
-        </StackLayout>
-
         <StackLayout *ngIf="!event.RegistrationCompleted" class="input-field switch-field">
             <Label class="label" text="Visibility"></Label>
             <GridLayout columns="*, 65" class="switch-wrp border-bottom">
@@ -59,5 +54,10 @@
                 <Switch col="1" class="switch" [(ngModel)]="event.OpenForRegistration"></Switch>
             </GridLayout>
         </StackLayout>
+
+        <StackLayout *ngIf="currentUser" class="input-field user">
+            <Label class="label" text="Organizer"></Label>
+            <user-display [users]="currentUser" [showNames]="true"></user-display>
+        </StackLayout>
     </StackLayout>
 </StackLayout>

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

@@ -38,18 +38,6 @@
   margin-left: 0;
 }
 
-/* this is angular2 syntax :| */
-.registered-users-wrapper >>> Image,
-.organizer >>> Image,
-.registered-users-wrapper >>> .no-image,
-.organizer >>> .no-image {
-  width: 30;
-  height: 30;
-  margin-right: 5;
-  border-radius: 15;
-  background-color: rgba(0, 0, 0, .35);
-}
-
 .vote,
 .info-label,
 .votes-count,

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

@@ -27,15 +27,6 @@ TextView {
   height: 200;
 }
 
-.user >>> .no-image,
-.user >>> Image {
-  width: 30;
-  height: 30;
-  margin-right: 5;
-  border-radius: 15;
-  background-color: rgba(0, 0, 0, .35);
-}
-
 .user .label {
   margin-bottom: 5;
 }

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

@@ -57,15 +57,6 @@
   border-width: 0;
 }
 
-.members-wrapper >>> .no-image,
-.members-wrapper >>> Image {
-  width: 30;
-  height: 30;
-  margin-right: 5;
-  border-radius: 15;
-  background-color: rgba(0, 0, 0, .35);
-}
-
 .join-group {
   margin: 15;
 }

app/groups/group-join-requests/group-join-requests.template.html

@@ -16,7 +16,7 @@
                 <GridLayout columns="*, 75" *ngFor="let req of requests" class="item">
                     <StackLayout col="0" orientation="horizontal">
                         <user-display class="user-display" [users]="req.Applicant" [showNames]="true"></user-display>
-                        <Label class="time-since-creation" [text]="getTimeSinceCreation(req.CreatedAt)"></Label>
+                        <Label class="time-since-creation" [text]="getTimeSinceCreation(req.ModifiedAt)"></Label>
                     </StackLayout>
                     <StackLayout col="1" class="resolve" *ngIf="!req.Resolved" orientation="horizontal">
                         <StackLayout class=" btn-resolve no" (tap)="resolve(req, false)">

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

@@ -76,15 +76,6 @@
   vertical-align: middle;
 }
 
-.event-organiser >>> Image,
-.event-organiser >>> .no-image {
-  width: 30;
-  height: 30;
-  margin-right: 5;
-  border-radius: 15;
-  background-color: rgba(0, 0, 0, .35);
-}
-
 .event-organiser >>> .user-name,
 .user-name,
 .group {

app/shared/photo-picker/photo-picker.component.css

@@ -49,3 +49,11 @@
 .container.large AbsoluteLayout .text {
   color: rgba(255, 255, 255, .5);
 }
+
+.user.no-image {
+  width: 30;
+  height: 30;
+  margin-right: 5;
+  border-radius: 15;
+  background-color: rgba(0, 0, 0, .35);
+}

app/shared/photo-picker/photo-picker.template.html

@@ -1,9 +1,9 @@
 <StackLayout *ngIf="!resizedUrl">
-    <StackLayout class="no-image editable" *ngIf="editable" (tap)="onEdit()" [ngClass]="{ 'large': !isSmall }">
+    <StackLayout class="{{type}} no-image editable" *ngIf="editable" (tap)="onEdit()" [ngClass]="{ 'large': !isSmall }">
         <Label class="icon if" *ngIf="noImageIcon" [text]="noImageIcon"></Label>
         <Label class="text" *ngIf="noImageText || !isSmall" [text]="noImageText"></Label>
     </StackLayout>
-    <StackLayout class="no-image" *ngIf="!editable" [ngClass]="{ 'large': !isSmall }">
+    <StackLayout class="{{type}} no-image" *ngIf="!editable" [ngClass]="{ 'large': !isSmall }">
         <Label class="icon if" *ngIf="noImageIcon" [text]="noImageIcon"></Label>
         <Label class="text" *ngIf="noImageText || !isSmall" [text]="noImageText"></Label>
     </StackLayout>

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

@@ -1,12 +1,3 @@
-/* this is angular2 syntax :| */
-.list-wrapper >>> Image {
-  width: 30;
-  height: 30;
-  margin-right: 5;
-  border-radius: 15;
-  background-color: rgba(0, 0, 0, .35);
-}
-
 .user-image,
 .user-name {
   vertical-align: middle;

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

@@ -12,7 +12,7 @@ export class UserDisplayComponent implements OnInit {
     private _users: User[] = [];
     
     @Input('withImages') imgCount: number = null;
-    @Input() showNames: boolean = false;
+    @Input() showNames: boolean;
 
     @Input() set users(newValue: User[]) {
         this._users = [].concat(newValue);
@@ -42,6 +42,6 @@ export class UserDisplayComponent implements OnInit {
     }
 
     shouldShowNames() {
-        return this.showNames || this.users.length === 1;
+        return this.showNames || (this.showNames !== false && this.users.length === 1);
     }
 }

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

@@ -11,12 +11,3 @@
   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);
-}