Version 1.6.5: Optimizations für responsive userlist

config.xml

@@ -1,8 +1,8 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="io.ionic.starter" version="1.6.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="io.ionic.starter" version="1.6.5" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>METAsocket</name>
     <description>WowApp's awesome instant messenger for the whole Greifentanzgeschwader</description>
-    <author email="webmaster@sabolli.de" href="https://sabolli.de/metasocket/">sabolli</author>
+    <author email="webmaster@sabolli.de" href="https://sabolli.de/wow/metasocket/">sabolli</author>
     <content src="index.html" />
     <access origin="*" />
     <allow-intent href="http://*/*" />

src/app/app.config.ts

@@ -1,4 +1,4 @@
 export default class AppConfig
 {
-  public static readonly VERSION: string = '1.6.0';
+  public static readonly VERSION: string = '1.6.5';
 }

src/app/chat/chat.component.html

@@ -20,6 +20,8 @@
   </div>
 </div>
 
+<div #sidebarBackground id="sidebar-background" (click)="pushAwaySidebar()"></div>
+
 <div #sidebar id="sidebar" (touchmove)="onSidebarTouch($event)" (touchend)="onTouchEnd()">
   <div id="userlist">
     <div *ngFor="let user of userList" class="user">

src/app/chat/chat.component.ts

@@ -36,6 +36,7 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
 
   @ViewChild('chat') chat: ElementRef;
   @ViewChild('sidebar') sidebar: ElementRef;
+  @ViewChild('sidebarBackground') sidebarBackground: ElementRef;
   @ViewChild('chatPostArea') chatPostArea: ElementRef;
   @ViewChild('errorMessage') errorMessage: ElementRef;
   @ViewChild('chatTextArea') chatTextArea: ElementRef;
@@ -64,6 +65,7 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
     this.url = Setting.URL;
     this.websocketService.setListener(this);
     this.websocketService.initializeSocket(AppStorage.getChatToken());
+    this.backgroundMode.setDefaults({silent: true});
     this.backgroundMode.enable();
     this.backgroundMode.disableBatteryOptimizations();
     this.backgroundMode.disableWebViewOptimizations();
@@ -253,8 +255,8 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
     if (this.getTouchEvent(event) === -1) {
       event.preventDefault();
 
-      this.chat.nativeElement.id = 'chat-swiped-out';
       this.sidebar.nativeElement.id = 'sidebar-swiped-in';
+      this.sidebarBackground.nativeElement.id = 'sidebar-background-visible';
 
       this.isSwiping = true;
 
@@ -274,24 +276,10 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
     }
 
     if (this.getTouchEvent(event) === 1) {
-      this.chat.nativeElement.id = 'chat-swiped-in';
+      this.pushAwaySidebar();
-      this.sidebar.nativeElement.id = 'sidebar-swiped-out';
-
-      this.isSwiping = true;
-
-      setTimeout(
-        () => {
-          this.isSwiping = false;
-          },
-        500
-      );
     }
   }
 
-  onTouchStart(event: TouchEvent): void
-  {
-  }
-
   onTouchEnd(): void
   {
     this.lastTouchX = null;
@@ -415,6 +403,13 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
           }
         }
       );
+
+    setTimeout(
+      () => {
+        this.checkVersion();
+      },
+      1000 * 60 * 60 * 24
+    );
   }
 
   private getTouchEvent(event: TouchEvent): number
@@ -531,6 +526,23 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
     this.buttonSend.nativeElement.disabled = true;
   }
 
+  pushAwaySidebar(): void
+  {
+    this.sidebar.nativeElement.id = 'sidebar-swiped-out';
+    this.sidebarBackground.nativeElement.classList.add('sidebar-fadeout');
+
+    this.isSwiping = true;
+
+    setTimeout(
+      () => {
+        this.isSwiping = false;
+        this.sidebarBackground.nativeElement.classList.remove('sidebar-fadeout');
+        this.sidebarBackground.nativeElement.id = 'sidebar-background';
+      },
+      500
+    );
+  }
+
   private sortUserList(): void
   {
     this.userList.sort(

src/app/login/login.component.html

@@ -6,7 +6,7 @@
     <form>
       <label>
         Username
-        <input #loginName name="username" [(ngModel)] = "username" required autofocus>
+        <input #loginName name="username" [(ngModel)] = "username" (click)="selectUsername()" required autofocus>
       </label>
 
       <label>

src/app/login/login.component.ts

@@ -99,4 +99,10 @@ export class LoginComponent implements OnInit {
       }
     );
   }
+
+  selectUsername(): void
+  {
+    this.usernameElement.nativeElement.selectionStart = 0;
+    this.usernameElement.nativeElement.selectionEnd = this.username.length;
+  }
 }

src/global.scss

@@ -8,6 +8,11 @@
   to { background-color: rgba(0, 0, 0, 0.5) }
 }
 
+@keyframes sidebar-background-exit {
+  from { background-color: rgba(0, 0, 0, 0.5) }
+  to { background-color: rgba(0, 0, 0, 0) }
+}
+
 @keyframes chat-swipe-in {
   from {left: -100%}
   to {left: 0}
@@ -19,13 +24,13 @@
 }
 
 @keyframes sidebar-swipe-in {
-  from {left: 100%}
+  from {right: -350px}
-  to {left: 0}
+  to {right: 0}
 }
 
 @keyframes sidebar-swipe-out {
-  from {left: 0}
+  from {right: 0}
-  to {left: 100%}
+  to {right: -350px}
 }
 
 @keyframes fullscreen-notification-window-entrance {
@@ -367,6 +372,10 @@ a.notification-button {
   padding: 20px;
 }
 
+#sidebar-background {
+  display: none;
+}
+
 #userlist {
   width: 100%;
   height: 100%;
@@ -404,14 +413,15 @@ a.notification-button {
 
 @media only screen and (max-width: 800px) {
   #sidebar, #sidebar-swiped-in, #sidebar-swiped-out {
-    width: 100%;
+    max-width: 100%;
     height: 100%;
-    left: 100%;
+    right: -350px;
     animation-duration: 0.5s;
+    box-shadow: 0 0 20px black;
   }
 
   #sidebar-swiped-in {
-    left: 0;
+    right: 0;
     animation-name: sidebar-swipe-in;
   }
 
@@ -419,6 +429,26 @@ a.notification-button {
     animation-name: sidebar-swipe-out
   }
 
+  #sidebar-background, #sidebar-background-visible {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  #sidebar-background-visible {
+    display: block;
+    animation-name: fullscreen-notification-entrance;
+    animation-duration: 0.5s;
+  }
+
+  .sidebar-fadeout {
+    animation-name: sidebar-background-exit !important;
+    animation-duration: 0.5s;
+  }
+
   #chat, #chat-swiped-in, #chat-swiped-out {
     width: 100%;
     top: 0;