trim app down to barebones, add runtime language switcher

README.md

@@ -38,7 +38,7 @@ Note that you can't use Electron or NodeJS native libraries in this case. Please
 ## To build for development
 
 ``` bash
-npm start
+npm start:electron
 ```
 
 Voila! You can use your Angular + Electron app in a local development environment with hot reload !
@@ -51,7 +51,7 @@ You can deactivate "Developer Tools" by commenting `win.webContents.openDevTools
 
 |Command|Description|
 |--|--|
-|`npm run ng:serve:web`| Execute the app in the browser |
+|`npm run start`| Execute the app in the browser |
 |`npm run build`| Build the app. Your built files are in the /dist folder. |
 |`npm run build:prod`| Build the app with Angular aot. Your built files are in the /dist folder. |
 |`npm run electron:local`| Builds your application and start electron

src/app/@theme/components/footer/footer.component.ts

@@ -1,17 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Social, socials } from '../../../constants';
 
 @Component({
  selector: 'ngx-footer',
  styleUrls: ['./footer.component.scss'],
  template: `
- <span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>
  <div class="socials">
- <a href="#" target="_blank" class="ion ion-social-github"></a>
- <a href="#" target="_blank" class="ion ion-social-facebook"></a>
- <a href="#" target="_blank" class="ion ion-social-twitter"></a>
- <a href="#" target="_blank" class="ion ion-social-linkedin"></a>
+ <a *ngFor="let social of socials" [href]="social.url" target="_blank" [ngClass]="social.classes"></a>
  </div>
  `,
 })
-export class FooterComponent {
+export class FooterComponent implements OnInit {
+ socials: Social[];
+
+ ngOnInit() {
+ this.socials = socials;
+ }
 }

src/app/@theme/components/header/header.component.html

@@ -9,19 +9,23 @@
 </div>
 
 <div class="header-container">
- <ngx-layout-direction-switcher></ngx-layout-direction-switcher>
  <nb-actions
  size="medium"
  [class.right]="position === 'normal'"
  [class.left]="position === 'inverse'">
- <nb-action icon="nb-gear" class="toggle-layout" (click)="toggleSettings()"></nb-action>
- <nb-action *nbIsGranted="['view', 'user']" >
- <nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
- </nb-action>
- <nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
- <nb-action class="control-item" icon="nb-email"></nb-action>
  <nb-action class="control-item">
  <nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
  </nb-action>
+ <nb-action class="control-item">
+ <div [(ngModel)]="radioModel" ngbRadioGroup
+ class="btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
+ <label ngbButtonLabel class="btn btn-tn btn-outline-primary " (click)="changeLanguage('en')">
+ <input ngbButton type="radio" value="left"> English
+ </label>
+ <label ngbButtonLabel class="btn btn-tn btn-outline-primary" (click)="changeLanguage('cn')">
+ <input ngbButton type="radio" value="right"> Chinese
+ </label>
+ </div>
+ </nb-action>
  </nb-actions>
 </div>

src/app/@theme/components/header/header.component.ts

@@ -1,50 +1,38 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 import { NbMenuService, NbSidebarService } from '@nebular/theme';
-import { UserService } from '../../../@core/data/users.service';
+import { TranslateService } from '@ngx-translate/core';
 import { AnalyticsService } from '../../../@core/utils/analytics.service';
 
 @Component({
  selector: 'ngx-header',
  styleUrls: ['./header.component.scss'],
  templateUrl: './header.component.html',
 })
-export class HeaderComponent implements OnInit {
-
-
+export class HeaderComponent {
  @Input() position = 'normal';
 
- user: any;
-
- userMenu = [{ title: 'Profile' }, { title: 'Log out' }];
-
  constructor(
  private sidebarService: NbSidebarService,
  private menuService: NbMenuService,
- private userService: UserService,
- private analyticsService: AnalyticsService
+ private analyticsService: AnalyticsService,
+ private translate: TranslateService,
  ) { }
 
- ngOnInit() {
- this.userService.getUsers()
- .subscribe((users: any) => this.user = users.nick);
- }
-
  toggleSidebar(): boolean {
  this.sidebarService.toggle(true, 'menu-sidebar');
  return false;
  }
 
- toggleSettings(): boolean {
- this.sidebarService.toggle(false, 'settings-sidebar');
- return false;
- }
-
  goToHome() {
  this.menuService.navigateHome();
  }
 
  startSearch() {
  this.analyticsService.trackEvent('startSearch');
  }
+
+ changeLanguage(lang: string) {
+ this.translate.use(lang);
+ }
 }

src/app/@theme/layouts/sample/sample.layout.ts

@@ -25,11 +25,6 @@ import { StateService } from '../../../@core/data/state.service';
  tag="menu-sidebar"
  responsive
  [end]="sidebar.id === 'end'">
- <nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
- <a href="#" class="btn btn-hero-success main-btn">
- <i class="ion ion-social-github"></i> <span>Support Us</span>
- </a>
- </nb-sidebar-header>
  <ng-content select="nb-menu"></ng-content>
  </nb-sidebar>
 

src/app/app.component.ts

@@ -10,22 +10,17 @@ import { AnalyticsService } from './@core/utils/analytics.service';
 })
 export class AppComponent implements OnInit {
  constructor(
- public electronService: ElectronService,
- public translate: TranslateService,
+ private electronService: ElectronService,
+ private translate: TranslateService,
  private analytics: AnalyticsService
  ) {
 
- translate.addLangs(['en', 'fr', 'cn']);
- translate.setDefaultLang('en');
- const browserLang = translate.getBrowserLang();
- translate.use(browserLang.match(/en|fr|cn/) ? browserLang : 'en');
+ this.translate.setDefaultLang('en');
 
- console.log('AppConfig', AppConfig);
-
- if (electronService.isElectron()) {
+ if (this.electronService.isElectron()) {
  console.log('Mode electron');
- console.log('Electron ipcRenderer', electronService.ipcRenderer);
- console.log('NodeJS childProcess', electronService.childProcess);
+ console.log('Electron ipcRenderer', this.electronService.ipcRenderer);
+ console.log('NodeJS childProcess', this.electronService.childProcess);
  } else {
  console.log('Mode web');
  }

src/app/constants.ts

@@ -0,0 +1,30 @@
+interface Social {
+ title: string;
+ url: string;
+ classes: string;
+}
+
+const twitter: Social = {
+ title: "twitter",
+ url: "https://www.twitter.com",
+ classes: "ion ion-social-twitter",
+};
+
+const facebook: Social = {
+ title: "facebook",
+ url: "https://www.facebook.com",
+ classes: "ion ion-social-facebook",
+};
+
+const linkedIn: Social = {
+ title: "linkedin",
+ url: "https://www.linkedin.com",
+ classes: "ion ion-social-linkedin",
+};
+
+const socials: Social[] = [twitter, facebook, linkedIn];
+
+export {
+ socials,
+ Social,
+}

src/app/pages/home/home.component.html

@@ -0,0 +1,3 @@
+<div class="row">
+ Hello. This is Home
+</div>