Browse Source

Version 1.6.5: Optimizations für responsive userlist

master
Mal 3 years ago
parent
commit
9164f3e9f9
  1. 4
      config.xml
  2. 2
      src/app/app.config.ts
  3. 2
      src/app/chat/chat.component.html
  4. 44
      src/app/chat/chat.component.ts
  5. 2
      src/app/login/login.component.html
  6. 6
      src/app/login/login.component.ts
  7. 44
      src/global.scss

4
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://*/*" />

2
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';
}

2
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">

44
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.sidebar.nativeElement.id = 'sidebar-swiped-out';
this.isSwiping = true;
setTimeout(
() => {
this.isSwiping = false;
},
500
);
this.pushAwaySidebar();
}
}
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(

2
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>

6
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;
}
}

44
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%}
to {left: 0}
from {right: -350px}
to {right: 0}
}
@keyframes sidebar-swipe-out {
from {left: 0}
to {left: 100%}
from {right: 0}
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;

Loading…
Cancel
Save