feat(menu): add context menu

Closes #3

src/app/modules/settings/item/settings-item.component.ts

@@ -17,13 +17,13 @@ import {AlertController} from '@ionic/angular';
 import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
 import {
   SCLanguage,
+  SCLanguageCode,
   SCSetting,
   SCSettingValue,
   SCSettingValues,
   SCThingTranslator,
   SCTranslations,
 } from '@openstapps/core';
-import {Logger} from '@openstapps/logger';
 import {SettingsProvider} from '../settings.provider';
 
 /**
@@ -34,6 +34,12 @@ import {SettingsProvider} from '../settings.provider';
   templateUrl: 'settings-item.html',
 })
 export class SettingsItemComponent implements OnInit {
+
+  /**
+   * If set the setting will be shown as compact view
+   */
+  @Input() compactView = false;
+
   /**
    * Flag for workaround for selected 'select option' not updating translation
    */
@@ -107,8 +113,6 @@ export class SettingsItemComponent implements OnInit {
    * NgInit
    */
   ngOnInit(): void {
-    Logger.log(JSON.stringify(this.setting));
-
     this.translatedSetting = this.translator.translate(this.setting);
   }
 
@@ -136,7 +140,7 @@ export class SettingsItemComponent implements OnInit {
       // handle general settings, with special actions
       switch (this.setting.name) {
         case 'language':
-          this.translateService.use(this.setting.value.toString());
+          this.translateService.use(this.setting.value as SCLanguageCode);
           break;
         case 'geoLocation':
           if (!!this.setting.value) {
@@ -146,7 +150,9 @@ export class SettingsItemComponent implements OnInit {
         default:
       }
       await this.settingsProvider
-        .setSettingValue(this.setting.categories[0], this.setting.name, this.setting.value);
+        .setSettingValue(this.setting.categories[0],
+          this.setting.name,
+          this.setting.value);
     } else {
       // reset setting
       this.setting.value =

src/app/modules/settings/item/settings-item.html

@@ -1,9 +1,12 @@
 <ion-card *ngIf="setting">
   <ion-card-header>
-    <span>{{ translatedSetting.name() | titlecase }}</span>
+    <span>
+      {{ translatedSetting.name() | titlecase }}
+      <ion-icon *ngIf="compactView" name="information-circle-outline" (click)="presentAlert(translator.translate(setting).name(), translator.translate(setting).description())"></ion-icon>
+    </span>
   </ion-card-header>
   <ion-card-content>
-    <ion-note>{{ translatedSetting.description() }}</ion-note>
+    <ion-note *ngIf="!compactView">{{ translatedSetting.description() }}</ion-note>
 
     <div [ngSwitch]="setting.inputType" *ngIf="isVisible" >
       <ion-item *ngSwitchCase="'number'">