#328087 #328043 Add the "dots menu" to Android and unstyled version for iOS and move the delete button there.

2017-02-03 14:16:02 +02:00 · 2017-02-03 14:16:02 +02:00 · ddc18e719f
--- a/app/events/edit-event/edit-event.component.css
+++ b/app/events/edit-event/edit-event.component.css
@ -2,8 +2,3 @@
  height: 100%;
  background-color: #fff;
 }
-
-.btn-delete {
-  color: red;
-  text-align: right;
-}
--- a/app/events/edit-event/edit-event.component.ts
+++ b/app/events/edit-event/edit-event.component.ts
@ -77,24 +77,6 @@ export class EditEventComponent implements OnInit {
            });
    }

-    delete() {
-        this._alertsService.askConfirmation(`Delete event "${this.event.Name}"?`)
-            .then(() => {
-                return this._eventsService.deleteById(this.event.Id);
-            })
-            .then(() => {
-                return this._alertsService.showSuccess(`Deleted "${this.event.Name}" successfully.`)
-            })
-            .then(() => {
-                this._routerExtensions.navigate(['/events']);
-            })
-            .catch(err => {
-                if (err) {
-                    this._alertsService.showError(err.message);
-                }
-            });
-    }
-
    onCancel() {
        this._routerExtensions.back();
    }
--- a/app/events/edit-event/edit-event.template.html
+++ b/app/events/edit-event/edit-event.template.html
@ -11,7 +11,6 @@
    <ScrollView class="cntnr">
        <StackLayout *ngIf="event">
            <editable-event [event]="event"></editable-event>
-            <Label class="btn-delete" text="Delete event" (tap)="delete()"></Label>
        </StackLayout>
        <ScrollView>
            <ActivityIndicator [busy]="!event" [visibility]="event ? 'collapse' : 'visible'" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>
--- a/app/events/event-details/event-details.component.ts
+++ b/app/events/event-details/event-details.component.ts
@ -30,6 +30,7 @@ export class EventDetailsComponent implements OnInit {
    isPastEvent = false;
    registeredUsersExpanded = false;
    isAndroid: boolean = false;
+    iosPopupOpen: boolean = false;

    private _eventId: string = null;
    private _countByDate: any;
@ -52,6 +53,14 @@ export class EventDetailsComponent implements OnInit {
        this.isAndroid = this._platform.isAndroid;
    }

+    showIf(shouldShow: boolean) {
+        return shouldShow ? 'visible' : 'collapse';
+    }
+
+    toggleIosPopup() {
+        this.iosPopupOpen = !this.iosPopupOpen;
+    }
+
    ngOnInit() {
        this._page.actionBar.title = '';
        this._route.params.subscribe(p => {
@ -83,11 +92,6 @@ export class EventDetailsComponent implements OnInit {
        });
    }

-    private _updateCountsByDate() {
-        return this._eventsService.getDateChoicesVotes(this.event.Id)
-            .then(result => this._countByDate = result.countByDate);
-    }
-
    onEdit() {
        this._routerExtensions.navigate([`/events/${this.event.Id}/edit`]);
    }
@ -96,6 +100,14 @@ export class EventDetailsComponent implements OnInit {
        return this._currentUser && this.event && this.event.Owner === this._currentUser.Id;
    }

+    deleteEvent() {
+        this._alertsService.askConfirmation(`Delete event "${this.event.Name}"?`)
+            .then(() => this._eventsService.deleteById(this.event.Id))
+            .then(() => this._alertsService.showSuccess(`Deleted "${this.event.Name}" successfully.`))
+            .then(() => this._routerExtensions.navigate(['/events']))
+            .catch(err => err && this._alertsService.showError(err.message));
+    }
+
    register() {
        let dateSelectionPromise: Promise<string[]> = null;

@ -205,6 +217,11 @@ export class EventDetailsComponent implements OnInit {
            .catch(err => err && this._alertsService.showError(err.message));
    }

+    private _updateCountsByDate() {
+        return this._eventsService.getDateChoicesVotes(this.event.Id)
+            .then(result => this._countByDate = result.countByDate);
+    }
+
    private _openDateSelectionModal(isChangeVote = false) {
        let opts: ModalDialogOptions = {
            context: {
--- a/app/events/event-details/event-details.template.html
+++ b/app/events/event-details/event-details.template.html
@ -10,20 +10,25 @@
                    <Label class="button if" text="&#x65;"></Label>
                </StackLayout>
            </ActionItem>
-            <ActionItem *ngIf="alreadyRegistered" (tap)="unregister()" ios.position="right">
-                <StackLayout>
-                    <Label text="X"></Label>
-                </StackLayout>
-            </ActionItem>
+            <ActionItem *ngIf="isAndroid" [visibility]="showIf(event && alreadyRegistered && !event.EventDate)" (tap)="changeVote()" ios.systemIcon="19" ios.position="right" text="Change Date Vote" android.position="popup"></ActionItem>
+            <ActionItem *ngIf="isAndroid" [visibility]="showIf(alreadyRegistered)" ios.systemIcon="14" (tap)="unregister()" ios.position="right" text="Unregister" android.position="popup"></ActionItem>
+            <ActionItem *ngIf="isAndroid" [visibility]="showIf(canEdit())" ios.systemIcon="16" (tap)="deleteEvent()" ios.position="right" text="Delete Event" android.position="popup"></ActionItem>
+
+            <ActionItem *ngIf="!isAndroid" (tap)="toggleIosPopup()" ios.systemIcon="9" ios.position="right"></ActionItem>
        </ActionBarExtension>

        <StackLayout *ngIf="event">
+            <StackLayout *ngIf="!isAndroid && iosPopupOpen">
+                <Label *ngIf="event && alreadyRegistered && !event.EventDate" (tap)="changeVote()" text="Change Date Vote"></Label>
+                <Label *ngIf="alreadyRegistered" (tap)="unregister()" text="Unregister"></Label>
+                <Label *ngIf="canEdit()" (tap)="deleteEvent()" text="Delete Event"></Label>
+            </StackLayout>
+            
            <Label *ngIf="alreadyRegistered" text="Registered"></Label>
            <photo-picker [url]="event.ImageUrl" [type]="'event'" [noImageIcon]="'&#x77;'" [noImageText]="'No image available'"></photo-picker>

            <StackLayout class="info-container">
                <Label *ngIf="canRegister()" text="Register" (tap)="register()" class="btn btn-primary"></Label>
-                <Label *ngIf="alreadyRegistered && !event.EventDate" text="Change Date Vote" (tap)="changeVote()" class="btn btn-primary"></Label>

                <StackLayout class="info-wrapper">
                    <GridLayout columns="auto, auto, *" rows="auto, auto">
--- a/app/events/event-registration-modal/event-registration-modal.component.css
+++ b/app/events/event-registration-modal/event-registration-modal.component.css
@ -1,4 +1,8 @@
 .reg-modal {
  padding-left: 20;
  padding-right: 20;
-}
+}
+
+.date-options-list {
+   height: 40%;
+}
--- a/app/events/event-registration-modal/event-registration-modal.template.html
+++ b/app/events/event-registration-modal/event-registration-modal.template.html
@ -1,6 +1,6 @@
 <app-modal (ok)="onOk($event)" (cancel)="onCancel($event)" [title]="title" [buttons]="{ ok: 'Submit', cancel: 'Maybe later' }">
    <StackLayout class="reg-modal">
-        <ListView [items]="availableDates" separatorColor="transparent">
+        <ListView class="date-options-list" [items]="availableDates" separatorColor="transparent">
            <template let-option="item" class="form">
                <StackLayout orientation="horizontal" class="input-field switch-field">
                    <Switch class="switch" [(ngModel)]="option.isSelected"></Switch>
--- a/app/users/login/login.template.html
+++ b/app/users/login/login.template.html
@ -7,7 +7,7 @@
            <TextField hint="Display Name" [(ngModel)]="user.DisplayName" ></TextField>
        </StackLayout>
        <StackLayout class="input-field">
-            <TextField hint="Email" autocorrect="false" autocapitalizationType="none" [(ngModel)]="user.Username" ></TextField>
+            <TextField hint="Email" autocorrect="false" autocapitalizationType="none" [(ngModel)]="user.Username" keyboardType="email"></TextField>
        </StackLayout>
        <StackLayout class="input-field">
            <TextField hint="Password" secure="true" [(ngModel)]="user.Password" ></TextField>
--- a/package.json
+++ b/package.json
@ -21,16 +21,16 @@
    "@angular/platform-browser": "2.1.0",
    "@angular/platform-browser-dynamic": "2.1.0",
    "@angular/router": "3.1.0",
-    "nativescript-angular": "1.1.0",
-    "nativescript-telerik-ui": "^1.4.1",
-    "reflect-metadata": "~0.1.8",
-    "tns-core-modules": "2.4.4",
-    "rxjs": "5.0.0-beta.12",
    "everlive-sdk": "1.9.1",
-    "nativescript-theme-core": "^0.1.3",
+    "nativescript-angular": "1.1.0",
    "nativescript-imagepicker": "^2.4.1",
    "nativescript-permissions": "^1.2.0",
-    "nativescript-push-notifications": "0.1.0"
+    "nativescript-push-notifications": "0.1.0",
+    "nativescript-telerik-ui": "^1.4.1",
+    "nativescript-theme-core": "^0.1.3",
+    "reflect-metadata": "~0.1.8",
+    "rxjs": "5.0.0-beta.12",
+    "tns-core-modules": "2.4.4"
  },
  "devDependencies": {
    "babel-traverse": "6.18.0",
@ -41,4 +41,4 @@
    "typescript": "^2.0.6",
    "zone.js": "~0.6.21"
  }
-}
+}