feat: Add modal with info about application (#26)

rucken · Mar 7, 2019 · 306a4ad · 306a4ad
1 parent c9ca04b
commit 306a4ad
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 5 deletions.
diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html
@@ -18,8 +18,10 @@
                     [title]="title"
                     [showSignIn]="!(currentUser$ | async)"
                     [showSignOut]="currentUser$ | async"
+                    [showAbout]="true"
                     (signIn)="onSignIn()"
                     (signOut)="onSignOut()"
+                    (about)="onAbout()"
                     #navbar>
                 </app-navbar>
             </ion-content>

diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts
@@ -6,7 +6,7 @@ import { AlertController, Platform } from '@ionic/angular';
 import { AlertInput } from '@ionic/core';
 import { MetaService } from '@ngx-meta/core';
 import { TranslateService } from '@ngx-translate/core';
-import { AuthModalComponent, AuthModalService, AuthService, ILanguagesItem, LangService, RedirectUrlDto, TokenService, User, UserTokenDto } from '@rucken/core';
+import { AuthModalComponent, AuthModalService, AuthService, ILanguagesItem, LangService, ModalsService, RedirectUrlDto, TokenService, User, UserTokenDto } from '@rucken/core';
 import { GroupsService, NavbarComponent, PermissionsService } from '@rucken/ionic';
 import { BindIoInner } from 'ngx-bind-io';
 import { Observable, Subject } from 'rxjs';
@@ -44,6 +44,7 @@ export class AppComponent implements OnInit, OnDestroy {
     private _tokenService: TokenService,
     private _groupsService: GroupsService,
     private _permissionsService: PermissionsService,
+    private _modalsService: ModalsService,
     @Inject(PLATFORM_ID) private _platformId: Object
   ) {
     this._authModalService.signInInfoMessage = config.authModal.signInInfoMessage;
@@ -151,4 +152,10 @@ export class AppComponent implements OnInit, OnDestroy {
   onSignInError(modal: AuthModalComponent, error: any) {
     this._authModalService.onSignInError(modal, error);
   }
+  onAbout(data?: any): void {
+    this._modalsService.info({
+      title: config.app.title,
+      message: config.app.description
+    });
+  }
 }
diff --git a/apps/demo/src/app/i18n/ru.i18n.ts b/apps/demo/src/app/i18n/ru.i18n.ts
@@ -3,7 +3,7 @@ export const RuI18n = {
   Cancel: 'Отмена',
   Select: 'Выбрать',
   'Rucken: Ionic': 'Rucken: Ионик',
-  'Admin UI for Ionic4 with Angular7+ mobile application based on Rucken template': 'Мобильное приложение с админкой на Ionic4 и Angular7 + на основе шаблона Rucken',
+  'Admin UI for Ionic4 with Angular7+ mobile application based on Rucken template': 'Мобильное приложение с админкой на Ionic4 и Angular7+ на основе шаблона Rucken',
   Russian: 'Русский',
   English: 'Английский',
   'Demo users:': 'Демо пользователи:',

diff --git a/apps/demo/src/app/i18n/ru.po b/apps/demo/src/app/i18n/ru.po
@@ -25,7 +25,7 @@ msgid "Rucken: Ionic"
 msgstr "Rucken: Ионик"
 
 msgid "Admin UI for Ionic4 with Angular7+ mobile application based on Rucken template"
-msgstr "Мобильное приложение с админкой на Ionic4 и Angular7 + на основе шаблона Rucken"
+msgstr "Мобильное приложение с админкой на Ionic4 и Angular7+ на основе шаблона Rucken"
 
 msgid "Russian"
 msgstr "Русский"

diff --git a/libs/rucken/ionic/src/i18n/template.pot b/libs/rucken/ionic/src/i18n/template.pot
@@ -94,5 +94,8 @@ msgstr ""
 msgid "Error Log"
 msgstr ""
 
+msgid "About"
+msgstr ""
+
 msgid "Sign in"
 msgstr ""
diff --git a/libs/rucken/ionic/src/lib/components/navbar/navbar.component.html b/libs/rucken/ionic/src/lib/components/navbar/navbar.component.html
@@ -4,14 +4,26 @@
         *ngFor="let item of leftRoutes$ | async">
         <ng-container *ngTemplateOutlet="(menuItemTemplate?menuItemTemplate:defaultMenuItemTemplate);context:{item:item}"></ng-container>
     </ion-menu-toggle>
+    <ion-menu-toggle auto-hide="false">
+        <ion-item
+            [button]="true"
+            (click)="onAboutClick($event)"
+            *ngIf="showAbout">
+            <ion-icon
+                slot="start"
+                [name]="aboutIcon">
+            </ion-icon>
+            <ion-label>{{'About' | translate}}</ion-label>
+        </ion-item>
+    </ion-menu-toggle>
     <ion-menu-toggle auto-hide="false">
         <ion-item
             [button]="true"
             (click)="onSignOutClick($event)"
             *ngIf="showSignOut">
             <ion-icon
                 slot="start"
-                name="log-out">
+                [name]="signOutIcon">
             </ion-icon>
             <ion-label>{{'Sign out' | translate}}</ion-label>
         </ion-item>
@@ -23,7 +35,7 @@
             *ngIf="showSignIn">
             <ion-icon
                 slot="start"
-                name="contact">
+                [name]="signInIcon">
             </ion-icon>
             <ion-label>{{'Sign in' | translate}}</ion-label>
         </ion-item>

diff --git a/libs/rucken/ionic/src/lib/components/navbar/navbar.component.ts b/libs/rucken/ionic/src/lib/components/navbar/navbar.component.ts
@@ -17,17 +17,29 @@ export class NavbarComponent {
   @Input()
   menuItemTemplate: TemplateRef<any> = undefined;
 
+  @Input()
+  signInIcon = 'contact';
+  @Input()
+  signOutIcon = 'log-out';
+  @Input()
+  aboutIcon = 'information-circle';
+
   @Input()
   showSignIn: boolean = undefined;
   @Input()
   showSignOut: boolean = undefined;
+  @Input()
+  showAbout: boolean = undefined;
+
   @Input()
   title: string = undefined;
 
   @Output()
   signIn = new EventEmitter();
   @Output()
   signOut = new EventEmitter();
+  @Output()
+  about = new EventEmitter();
 
   @BindObservable()
   @Input()
@@ -79,4 +91,10 @@ export class NavbarComponent {
     }
     this.signOut.emit(signOutData);
   }
+  onAboutClick(aboutData?: any) {
+    if (isDevMode() && this.about.observers.length === 0) {
+      console.warn('No subscribers found for "about"', this);
+    }
+    this.about.emit(aboutData);
+  }
 }