diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 177682c..57923b8 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -539,6 +539,14 @@ } } }, + "@ng-bootstrap/ng-bootstrap": { + "version": "5.0.0-rc.1", + "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-5.0.0-rc.1.tgz", + "integrity": "sha512-LRbA+qCbsY3rnXQiFbDG6M0fyDOi6n4MadUUrrnI6DyNAsH+uAg2twxkjXhkizUD6+XihpvR6AMsQ91T3Bndaw==", + "requires": { + "tslib": "^1.9.0" + } + }, "@ngtools/webpack": { "version": "8.0.3", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-8.0.3.tgz", @@ -1694,6 +1702,11 @@ "multicast-dns-service-types": "^1.1.0" } }, + "bootstrap": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", + "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/frontend/package.json b/frontend/package.json index eab73bd..b8cc8d4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -21,6 +21,7 @@ "@angular/platform-browser": "~8.0.1", "@angular/platform-browser-dynamic": "~8.0.1", "@angular/router": "~8.0.1", + "@ng-bootstrap/ng-bootstrap": "^5.0.0-rc.1", "@ngu/carousel": "^1.5.5", "angular-vertical-tabs": "github:SamuelMarks/angular-vertical-material-tabs", "hammerjs": "^2.0.8", diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 13c876d..7e0b24c 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -4,7 +4,22 @@ import { MatFormFieldModule } from '@angular/material/form-field'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { MatTooltipModule, MatSlideToggleModule, MatButtonToggleModule, MatChipsModule, MatProgressBarModule, MatMenuModule, MatGridListModule, MatButtonModule, MatCardModule, MatIconModule, MatToolbarModule, MatDialogModule, MatProgressSpinnerModule, MatListModule} from '@angular/material'; +import { + MatTooltipModule, + MatSlideToggleModule, + MatButtonToggleModule, + MatChipsModule, + MatProgressBarModule, + MatMenuModule, + MatGridListModule, + MatButtonModule, + MatCardModule, + MatIconModule, + MatToolbarModule, + MatDialogModule, + MatProgressSpinnerModule, + MatListModule, +} from '@angular/material'; import { HttpClientModule } from '@angular/common/http'; import { SetupComponent } from './setup/setup.component'; import { SetupStep1Component } from './setup-step1/setup-step1.component'; @@ -27,7 +42,7 @@ import { ToolsComponent } from './tools/tools.component'; import { RemoteUploadComponent } from './remote-upload/remote-upload.component'; import { DownloadIndicatorComponent } from './download-indicator/download-indicator.component'; import { ScrollDispatchModule } from '@angular/cdk/scrolling'; -import { DragDropDirective } from "./drag-drop.directive"; +import { DragDropDirective } from "./directives/drag-drop.directive"; import { DragDropModule } from '@angular/cdk/drag-drop'; import { AddEditPlaylistDialogComponent } from './add-edit-playlist-dialog/add-edit-playlist-dialog.component'; import { FormsModule } from '@angular/forms'; @@ -38,6 +53,7 @@ import { BrowserNavComponent } from './browser-nav/browser-nav.component'; import { FastClickDirective } from './directives/fast-click.directive'; import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component'; import { MainModsComponent } from './main-mods/main-mods.component'; +import {NgbModule} from "@ng-bootstrap/ng-bootstrap"; @NgModule({ declarations: [ @@ -98,7 +114,9 @@ import { MainModsComponent } from './main-mods/main-mods.component'; MatInputModule, MatTooltipModule, MatSlideToggleModule, - MatListModule + MatListModule, + FlexLayoutModule, + NgbModule ], providers:[ ], bootstrap: [AppComponent] diff --git a/frontend/src/app/drag-drop.directive.ts b/frontend/src/app/directives/drag-drop.directive.ts similarity index 100% rename from frontend/src/app/drag-drop.directive.ts rename to frontend/src/app/directives/drag-drop.directive.ts diff --git a/frontend/src/app/main-mods/main-mods.component.html b/frontend/src/app/main-mods/main-mods.component.html index f4435b1..7cadf9c 100644 --- a/frontend/src/app/main-mods/main-mods.component.html +++ b/frontend/src/app/main-mods/main-mods.component.html @@ -1,34 +1,55 @@ -
No Mods!
-
- - - - - -
- {{mod.ID}} -
- -
{{mod.Category}}
- - {{mod?.Name}} - {{mod?.Author}} - - -
{{mod?.Description}}
- - -

More Information

- - -
Mod {{ (mod.Status == 'Installed')?"Active":"Inactive"}}:
-
-
- - -
- - - - -
\ No newline at end of file + +
+ + +
+
+
+

Created by: {{ selectedMod.Author }}

+

{{ selectedMod.Description }}

+ + More Info +
+
+ +
+ + +
+ settings +
+ Mod Management + Manage all mods available for the quest here. Install, uninstall, and configure mods.. + + +
+
+
No Mods!
+
+ + + +
+ {{ mod.ID }} +
+

{{ mod.Name }}

+ {{ mod.Category }} +
+
+ By {{ mod.Author }} +
+

{{ mod.Description }}

+

More Information

+
+
+
Mod {{ (mod.Status == 'Installed')?"Active":"Inactive"}}:
+
+
+ + +
+
+ + +
+
diff --git a/frontend/src/app/main-mods/main-mods.component.scss b/frontend/src/app/main-mods/main-mods.component.scss index 5a71695..49e9db2 100644 --- a/frontend/src/app/main-mods/main-mods.component.scss +++ b/frontend/src/app/main-mods/main-mods.component.scss @@ -4,6 +4,7 @@ overflow-y: auto; margin-left: 300px; } + .modUrl { position: absolute; bottom: 0px; @@ -22,20 +23,17 @@ .header { margin-top: 20px; } + .modclass { - height: 20px; - padding-left: 7px; - padding-right: 7px; - padding-top: 2px; - padding-bottom: 2px; - box-shadow: 0px 1px 2px 0px #000000; - font-size: 16px; + height: 30px; + padding: 2px 7px; + font-size: 16px; font-weight: bold; font-style: italic; float: left; position: absolute; top: 5px; - right: 0px; + right: 0; } .modclass.Saber { background-color: darkred; @@ -51,7 +49,7 @@ .content { font-style: italic; - margin-left: 15px; + margin-left: 15px; margin-right: 15px; text-align: justify; } @@ -74,11 +72,41 @@ bottom: 10px; color: darkgray; } -.mod { - // display: flex; - width: 380px; - margin-bottom: 20px; - margin-left: 6px; + +.selected { + background-color: #828282 !important; + color: white; +} + +mat-list-item { + cursor: pointer; + position: relative; + left: 0; + background-color: #404040; + margin: .5em; + padding: .3em 0 .9em; + height: 1.6em; + border-radius: 4px; +} + +mat-list-item.selected:hover { + background-color: #636363 !important; + color: white; +} +mat-list-item:hover { + background-color: #474747; + left: .1em; +} + +.mod-name { + font-size: 25px !important; + font-weight: bold; + margin-bottom: 0; +} + +.mod-author { + font-weight: bold; + font-style: italic; } .toggleContainer { @@ -100,4 +128,8 @@ } .description { font-size: 12px; -} \ No newline at end of file +} + +.description { + font-size: 13px; +} diff --git a/frontend/src/app/main-mods/main-mods.component.ts b/frontend/src/app/main-mods/main-mods.component.ts index 5fbddeb..d29b38c 100644 --- a/frontend/src/app/main-mods/main-mods.component.ts +++ b/frontend/src/app/main-mods/main-mods.component.ts @@ -1,14 +1,15 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit, ViewEncapsulation} from '@angular/core'; import { ConfigService } from '../services/config.service'; import { BeatOnApiService } from '../services/beat-on-api.service'; import { HostMessageService } from '../services/host-message.service'; import { QuestomConfig } from '../models/QuestomConfig'; import { BeatOnConfig } from '../models/BeatOnConfig'; -import { ModDefinition, ModStatusType } from '../models/ModDefinition'; +import {ModCategory, ModDefinition, ModStatusType} from '../models/ModDefinition'; import { ClientSetModStatus } from '../models/ClientSetModStatus'; import { MatSlideToggleChange } from '@angular/material'; import { HostActionResponse } from '../models/HostActionResponse'; import { ECANCELED } from 'constants'; +import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; @Component({ selector: 'app-main-mods', @@ -19,12 +20,34 @@ export class MainModsComponent implements OnInit { config : QuestomConfig = {Mods: []}; modSwitchInProgress : boolean = false; modIDBeingSwitched : string = null; - constructor(private configSvc : ConfigService, private beatOnApi : BeatOnApiService, private msgSvc : HostMessageService) { + selectedMod: ModDefinition; + opened: boolean; + constructor(private configSvc : ConfigService, private beatOnApi : BeatOnApiService, private msgSvc : HostMessageService, private modalService: NgbModal) { this.configSvc.configUpdated.subscribe((cfg : BeatOnConfig)=> { this.config = cfg.Config; }); } ngOnInit() { - this.configSvc.getConfig().subscribe((cfg : BeatOnConfig) => { this.config = cfg.Config; }); + this.configSvc.getConfig().subscribe((cfg : BeatOnConfig) => { + // this.config = cfg.Config; + var saberMod = new ModDefinition(); + saberMod.TargetBeatSaberVersion = "1.0.0" + saberMod.ID = "1" + saberMod.Author = "Yuuki" + saberMod.Name = "Custom Sabers" + saberMod.InfoUrl = "http://www.google.com" + saberMod.Description = "Change the color of your sabers! Choose between a wide spectrum of colors and jam with your favorite mix!" + saberMod.Category = ModCategory.Saber + this.config.Mods.push(saberMod) + var randomSongSelect = new ModDefinition(); + randomSongSelect.TargetBeatSaberVersion = "1.0.0" + randomSongSelect.ID = "2" + randomSongSelect.Author = "Yuuki" + randomSongSelect.Name = "Random Song Selection" + randomSongSelect.InfoUrl = "http://www.google.com" + randomSongSelect.Description = "Tired of deciding what song to play? This mod gives you the ability to randomly select a song from your long list of maps you'll probably never get to." + randomSongSelect.Category = ModCategory.Gameplay + this.config.Mods.push(randomSongSelect) + }); } toggleMod(ev : MatSlideToggleChange, mod : ModDefinition) { @@ -45,19 +68,24 @@ export class MainModsComponent implements OnInit { //todo: show error console.log("mod id "+ msg.ModID + " did not switch properly"); } - + } }); this.msgSvc.sendClientMessage(msg); - + } getModSwitch(mod) { console.log("getting mod status for mod id " + mod.ID); if (mod == null) return false; - if ((mod.Status != 'Installed' && mod.ID != this.modIDBeingSwitched) || (mod.Status == 'Installed' && mod.ID == this.modIDBeingSwitched)) - return false; - return true; + return !((mod.Status != 'Installed' && mod.ID != this.modIDBeingSwitched) || (mod.Status == 'Installed' && mod.ID == this.modIDBeingSwitched)); } + onSelect(mod : ModDefinition): void{ + this.selectedMod = mod; + } + + openModal(modal){ + this.modalService.open(modal, { windowClass: 'modal right fade', size: 'xl', container: '#mod-list'}); + } } diff --git a/frontend/src/assets/css/modal.scss b/frontend/src/assets/css/modal.scss new file mode 100644 index 0000000..101ce63 --- /dev/null +++ b/frontend/src/assets/css/modal.scss @@ -0,0 +1,49 @@ +#mod-list{ + position: absolute; +} + +.modal.left .modal-dialog, +.modal.right .modal-dialog { + position: absolute; + margin: auto; + width: 30%; + height: 100%; + -webkit-transform: translate3d(0%, 0, 0); + -ms-transform: translate3d(0%, 0, 0); + -o-transform: translate3d(0%, 0, 0); + transform: translate3d(0%, 0, 0); +} + +.modal.left .modal-content, +.modal.right .modal-content { + height: 100%; + overflow-y: auto; +} + +.modal.left .modal-body, +.modal.right .modal-body { + padding: 15px 15px 80px; +} + +.modal.right.fade .modal-dialog { + right: -320px; + -webkit-transition: opacity 0.3s linear, right 0.3s ease-out; + -moz-transition: opacity 0.3s linear, right 0.3s ease-out; + -o-transition: opacity 0.3s linear, right 0.3s ease-out; + transition: opacity 0.3s linear, right 0.3s ease-out; +} + +.modal.right.fade.in .modal-dialog { + right: 0; +} + +/* ----- MODAL STYLE ----- */ +.modal-content { + border-radius: 0; + border: none; +} + +.modal-header { + border-bottom-color: #eeeeee; + background-color: #fafafa; +} diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index f4209eb..403ef07 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,6 +1,9 @@ /* You can add global styles to this file, and also import other style files */ @import '~ngx-toastr/toastr'; +@import '~bootstrap/dist/css/bootstrap.css'; +@import url("./assets/css/modal.scss"); + html, body { height: 100%; } body { background-color: #424242; margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } @@ -9,6 +12,6 @@ body { background-color: #424242; margin: 0; font-family: Roboto, "Helvetica Neu .browserNavMenu { height: 40px; max-width: 600px !important; - + margin-left: -200px; -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..cb87b3f --- /dev/null +++ b/package-lock.json @@ -0,0 +1,48 @@ +{ + "requires": true, + "lockfileVersion": 1, + "dependencies": { + "@angular/common": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-8.1.0.tgz", + "integrity": "sha512-m5oEBPSy5nE+4SZTu3XchJhKT/u73NnJIS3+41xRsF5aX/1p8uNHkhJR7kcJmlVa7BZNr4byl8bGsYjX0CCpVg==", + "requires": { + "tslib": "^1.9.0" + } + }, + "@angular/core": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-8.1.0.tgz", + "integrity": "sha512-GviWJjOu6LJMYNbukdSK35VaXvSrp5LTNd0FbXoBQF+mhVVV/8cG4hTKKjxG1xwWXI5E1t5U4aUKXrKUNJ1sQg==", + "requires": { + "tslib": "^1.9.0" + } + }, + "@angular/flex-layout": { + "version": "8.0.0-beta.26", + "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-8.0.0-beta.26.tgz", + "integrity": "sha512-lXDLlMSNQhidW0grvisIsj/3gqLuYyN2MvABuRYybnFTc233sXGZuOAaulqq663LA0/DP/GNcz6a+A4ZAAlmPA==", + "requires": { + "tslib": "^1.7.1" + } + }, + "ngx-smart-modal": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/ngx-smart-modal/-/ngx-smart-modal-7.1.1.tgz", + "integrity": "sha512-o7Cea8eqdBzzmxh2xX0KoSui7abReCGeInSal6Um6ZeidYnxwcUf9bA2G1LF6sjjO2WhnGshAIaSRQqfqAJ3TA==" + }, + "rxjs": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.2.tgz", + "integrity": "sha512-HUb7j3kvb7p7eCUHE3FqjoDsC1xfZQ4AHFWfTKSpZ+sAhhz5X1WX0ZuUqWbzB2QhSLp3DoLUG+hMdEDKqWo2Zg==", + "requires": { + "tslib": "^1.9.0" + } + }, + "tslib": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz", + "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==" + } + } +}