Skip to content

Commit

Permalink
tweak: cfx-ui: update dependencies, fix web
Browse files Browse the repository at this point in the history
  • Loading branch information
@blattersturm
blattersturm committed Apr 19, 2020
1 parent 80d4861 commit 39eabb6
Show file tree
Hide file tree
Showing 33 changed files with 2,318 additions and 1,387 deletions.
2 changes: 1 addition & 1 deletion ext/cfx-ui/angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
"style": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
Expand Down
48 changes: 24 additions & 24 deletions ext/cfx-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,33 +11,33 @@
},
"private": true,
"dependencies": {
"@angular-builders/custom-webpack": "^8.2.0",
"@angular-builders/custom-webpack": "^9.1.0",
"@angular-builders/dev-server": "^7.3.1",
"@angular-devkit/architect": "^0.900.0-rc.7",
"@angular/animations": "^9.0.0-rc.7",
"@angular/common": "^9.0.0-rc.7",
"@angular/compiler": "^9.0.0-rc.7",
"@angular/core": "^9.0.0-rc.7",
"@angular/forms": "^9.0.0-rc.7",
"@angular-devkit/architect": "^0.901.1",
"@angular/animations": "^9.1.2",
"@angular/common": "^9.1.2",
"@angular/compiler": "^9.1.2",
"@angular/core": "^9.1.2",
"@angular/forms": "^9.1.2",
"@angular/http": "^7.2.15",
"@angular/platform-browser": "^9.0.0-rc.7",
"@angular/platform-browser-dynamic": "^9.0.0-rc.7",
"@angular/platform-server": "^9.0.0-rc.7",
"@angular/router": "^9.0.0-rc.7",
"@angular/platform-browser": "^9.1.2",
"@angular/platform-browser-dynamic": "^9.1.2",
"@angular/platform-server": "^9.1.2",
"@angular/router": "^9.1.2",
"@fortawesome/fontawesome-free": "^5.12.0",
"@nguniversal/express-engine": "^7.1.1",
"@nguniversal/module-map-ngfactory-loader": "^7.1.1",
"@ngx-meta/core": "^7.0.0",
"@nguniversal/express-engine": "^9.1.0",
"@nguniversal/module-map-ngfactory-loader": "^8.2.6",
"@ngx-meta/core": "^8.0.2",
"@types/autolinker": "^0.24.28",
"@types/cldrjs": "^0.4.20",
"@types/color": "^3.0.0",
"@types/js-md5": "0.4.2",
"@types/node-forge": "^0.8.4",
"@types/offscreencanvas": "^2019.6.0",
"adaptivecards": "^1.2.0",
"angular-l10n": "^8.0.0",
"angular-l10n": "^9.2.0",
"angular2-moment": "^1.9.0",
"angulartics2": "^7.5.2",
"angulartics2": "^9.0.0",
"autolinker": "^3.1.0",
"balloon-css": "^1.0.0",
"bulma": "0.7.5",
Expand All @@ -57,28 +57,28 @@
"js-md5": "0.7.3",
"mini-css-extract-plugin": "^0.8.0",
"ngx-linky": "^2.1.0",
"ngx-virtual-scroller": "^3.0.2",
"ngx-virtual-scroller": "^4.0.3",
"node-forge": "^0.8.5",
"postcss-import": "^12.0.1",
"protobufjs": "^6.8.8",
"query-string": "^6.8.1",
"reconnecting-websocket": "^4.1.10",
"resolve-url-loader": "^3.1.0",
"rxjs": "^6.5.4",
"rxjs": "^6.5.5",
"rxjs-compat": "^6.5.2",
"ts-loader": "5.3.3",
"ts-loader": "7.0.0",
"tslib": "^1.10.0",
"unicode-substring": "^1.0.0",
"webpack": "4.41.2",
"webpack-dev-server": "^3.7.2",
"worker-loader": "^2.0.0",
"xml-js": "^1.6.11",
"zone.js": "~0.10.2"
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.900.0-rc.7",
"@angular/cli": "9.0.0-rc.7",
"@angular/compiler-cli": "^9.0.0-rc.7",
"@angular-devkit/build-angular": "^0.901.1",
"@angular/cli": "9.1.1",
"@angular/compiler-cli": "^9.1.2",
"@types/jasmine": "3.3.13",
"@types/node": "^13.1.2",
"codelyzer": "^5.1.2",
Expand All @@ -87,4 +87,4 @@
"typescript": "3.6.4",
"webpack-cli": "^3.3.5"
}
}
}
14 changes: 7 additions & 7 deletions ext/cfx-ui/src/app/app-nav.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
<span translate>
<span l10nTranslate>
#BottomNav_Home
</span>
</a>
Expand All @@ -24,7 +24,7 @@
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
<span translate>
<span l10nTranslate>
#BottomNav_Servers
</span>
</a>
Expand All @@ -34,7 +34,7 @@
routerLinkActive="active"
*ngIf="gameName !== 'rdr3'"
>
<span translate>
<span l10nTranslate>
#ServerList_Premium
</span>
</a>
Expand All @@ -44,7 +44,7 @@
routerLinkActive="active"
*ngIf="gameName !== 'rdr3'"
>
<span translate>
<span l10nTranslate>
#ServerList_History
</span>
</a>
Expand All @@ -54,7 +54,7 @@
routerLinkActive="active"
*ngIf="gameName !== 'rdr3'"
>
<span translate>
<span l10nTranslate>
#ServerList_Favorites
</span>
</a>
Expand All @@ -63,7 +63,7 @@
class="nav-item subnav-item"
routerLinkActive="active"
>
<span translate>
<span l10nTranslate>
#ServerList_DirectConnect
</span>
</a>
Expand All @@ -82,7 +82,7 @@
[routerLink]="['/settings']"
routerLinkActive="active"
>
<span translate>
<span l10nTranslate>
#BottomNav_Settings
</span>
</a>
Expand Down
10 changes: 4 additions & 6 deletions ext/cfx-ui/src/app/app-nav.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { Component, Output, EventEmitter } from '@angular/core';
import { Component, Output, EventEmitter, Inject } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Router, NavigationEnd } from '@angular/router';
import { GameService } from './game.service';
import { Server } from './servers/server'
import { Translation, TranslationService } from 'angular-l10n';
import { ChangelogService } from './changelogs.service';
import { L10N_LOCALE, L10nLocale } from 'angular-l10n';

@Component({
moduleId: module.id,
selector: 'app-nav',
templateUrl: 'app-nav.component.html',
styleUrls: ['app-nav.component.scss']
})
export class AppNavComponent extends Translation {
export class AppNavComponent {
nickname = '';
devMode = false;
localhostPort = '';
Expand All @@ -28,13 +28,11 @@ export class AppNavComponent extends Translation {

constructor(
private gameService: GameService,
public translation: TranslationService,
@Inject(L10N_LOCALE) public locale: L10nLocale,
private domSanitizer: DomSanitizer,
private changelog: ChangelogService,
router: Router
) {
super();

this.nickname = gameService.nickname;
this.devMode = gameService.devMode;
this.localhostPort = gameService.localhostPort;
Expand Down
31 changes: 17 additions & 14 deletions ext/cfx-ui/src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,6 @@ div.theRoot {
display: none !important;
}

.webapp ::ng-deep servers-container, .webapp ::ng-deep app-servers-detail {
height: calc(100vh - 4vh);
margin-top: 2vh;
}

.webapp ::ng-deep app-servers-detail {
padding-bottom: 0px;
}
Expand All @@ -50,7 +45,19 @@ div.theRoot {

@media only screen and (min-width: 700px) {
.webapp ::ng-deep servers-container article {
height: calc(100vh - 4vh - 5.5vh - 200px) !important;
height: calc(96vh - 4vh - 4vh - 2.5vh - 5vh - 200px) !important;
}
}

@media only screen and (max-width: 700px) {
.webapp ::ng-deep .app-root {
width: 100vw;
height: 100vh;
}

.webapp ::ng-deep servers-container, .webapp ::ng-deep app-servers-detail {
height: calc(100vh) !important;
margin-top: 0vh !important;
}
}

Expand All @@ -77,18 +84,14 @@ $blurSize: 20px;
}
}

.webapp ::ng-deep #bg {
display: block !important;
}

* {
@include themeIsHost() using ($theme) {
#bg {
background-image: var(--my-background-image);
}
}
}

.webapp {
@include themeIsHost() using ($theme) {
#bg {
filter: gtv($theme, acrylicBlur);
}
}
}
40 changes: 21 additions & 19 deletions ext/cfx-ui/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { Component, OnInit, NgZone } from '@angular/core';

import { Translation, LocaleService, TranslationService } from 'angular-l10n';
import { Component, OnInit, NgZone, Inject } from '@angular/core';

import { GameService } from './game.service';
import { TrackingService } from './tracking.service';
Expand All @@ -10,13 +8,14 @@ import { Router, NavigationStart } from '@angular/router';
import { interval } from 'rxjs';
import { startWith, map, distinctUntilChanged, filter, take, tap, takeUntil } from 'rxjs/operators';
import { ServersService } from './servers/servers.service';
import { L10N_LOCALE, L10nLocale, L10nTranslationService } from 'angular-l10n';

@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent extends Translation implements OnInit {
export class AppComponent implements OnInit {
overlayActive = false;
minModeSetUp = false;
changelogShown = false;
Expand All @@ -31,23 +30,17 @@ export class AppComponent extends Translation implements OnInit {
return this.minMode ? 'url(' + this.gameService.minmodeBlob['art:backgroundImage'] + ')' : '';
}

constructor(public locale: LocaleService,
public translation: TranslationService,
constructor(@Inject(L10N_LOCALE) public locale: L10nLocale,
public l10nService: L10nTranslationService,
public gameService: GameService,
private trackingService: TrackingService,
private router: Router,
private zone: NgZone,
private serversService: ServersService) {
super();

this.locale.init();

this.translation.init();

this.gameService.init();

this.gameService.languageChange.subscribe(value => {
this.locale.setCurrentLanguage(value);
this.l10nService.setLocale({ language: value });
})

this.gameService.minModeChanged.subscribe((value: boolean) => {
Expand All @@ -62,6 +55,18 @@ export class AppComponent extends Translation implements OnInit {
this.minModeSetUp = true;
});

const settle = () => {
this.serversService.onInitialized();

(<HTMLDivElement>document.querySelector('.spinny')).style.display = 'none';
(<HTMLDivElement>document.querySelector('app-root')).style.opacity = '1';
};

if (environment.web) {
settle();
return;
}

// reused snippet from https://dev.to/herodevs/route-fully-rendered-detection-in-angular-2nh4
this.zone.runOutsideAngular(() => {
// Check very regularly to see if the pending macrotasks have all cleared
Expand All @@ -77,10 +82,7 @@ export class AppComponent extends Translation implements OnInit {
// Complete the observable after it emits the first result
take(1),
tap(stateStable => {
this.serversService.onInitialized();

(<HTMLDivElement>document.querySelector('.spinny')).style.display = 'none';
(<HTMLDivElement>document.querySelector('app-root')).style.opacity = '1';
settle();
})
).subscribe();
});
Expand Down Expand Up @@ -108,8 +110,8 @@ export class AppComponent extends Translation implements OnInit {
});

const lang = this.gameService.language;
if (lang && this.locale.getAvailableLanguages().includes(lang)) {
this.locale.setCurrentLanguage(lang);
if (lang && this.l10nService.getAvailableLanguages().includes(lang)) {
this.l10nService.setLocale({ language: lang });
}
}

Expand Down
Loading

0 comments on commit 39eabb6

Please sign in to comment.