Route based subviews

src/components/ExpandableCard.vue

@@ -64,15 +64,6 @@
  @Prop({default: false})
  showSort: boolean | undefined;
 
- @Prop({default: false})
- manualSortUp: boolean | undefined;
-
- @Prop({default: false})
- manualSortDown: boolean | undefined;
-
- @Prop({default: false})
- darkTheme: boolean | undefined;
-
  @Prop({default: true})
  enabled: boolean | undefined;
 

src/components/mixins/SplashMixin.vue

@@ -87,7 +87,7 @@ export default class SplashMixin extends Vue {
  }
 
  async moveToNextScreen() {
- this.$router.push({ path: '/profiles' });
+ this.$router.push({name: 'profiles'});
  }
 }
 </script>

src/components/navigation/NavigationMenu.vue

@@ -14,44 +14,44 @@
  <p class="menu-label">Mods</p>
  <ul class="menu-list">
  <li>
- <!-- Strange bug seemingly caused by CSS Grid display. Children @click is not being passed up to parent. -->
- <!-- Due to this, the click event must be applied to all children. Parent container also binds click to account for margins. -->
- <a href="#" data-ref="installed" @click="emitClick($event.target)"
- class="tagged-link" :class="[view === 'installed' ? 'is-active' : '']">
- <i class="fas fa-folder tagged-link__icon icon--margin-right" data-ref="installed" @click.prevent.stop="emitClick($event.target)"/>
- <span class="tagged-link__content margin-right margin-right--half-width" data-ref="installed" @click.prevent.stop="emitClick($event.target)">Installed</span>
- <span class="tag tagged-link__tag" :class="[{'is-link': view !== 'installed'}]"
- data-ref="installed" @click.prevent.stop="emitClick($event.target)">{{localModList.length}}</span>
- </a>
+ <router-link :to="{name: 'manager.installed'}" class="tagged-link">
+ <i class="fas fa-folder tagged-link__icon icon--margin-right" />
+ <span class="tagged-link__content">Installed</span>
+ <span :class="getTagLinkClasses('manager.installed')">{{localModList.length}}</span>
+ </router-link>
  </li>
  <li>
- <a href="#" data-ref="online" @click="emitClick($event.target)"
- class="tagged-link" :class="[view === 'online' ? 'is-active' : '']">
- <i class="fas fa-globe tagged-link__icon icon--margin-right" data-ref="online" @click.prevent.stop="emitClick($event.target)"/>
- <span class="tagged-link__content margin-right margin-right--half-width" data-ref="online" @click.prevent.stop="emitClick($event.target)">Online</span>
- <i data-ref="downloads" class="tag tagged-link__tag fas fa-download is-primary margin-right margin-right--half-width" @click.prevent.stop="emitClick($event.target)"></i>
- <span class="tag tagged-link__tag" :class="[{'is-link': view !== 'online'}]"
- data-ref="online" @click.prevent.stop="emitClick($event.target)">{{thunderstoreModList.length}}</span>
- </a>
+ <router-link :to="{name: 'manager.online'}"
+ :class="['tagged-link', {'is-active': $route.name === 'downloads'}]">
+ <i class="fas fa-globe tagged-link__icon icon--margin-right" />
+ <span class="tagged-link__content">Online</span>
+
+ <router-link :to="{name: 'downloads'}" class="margin-right--half-width">
+ <i class="tag fas fa-download is-primary" />
+ </router-link>
+ <span :class="getTagLinkClasses('manager.online')">{{thunderstoreModList.length}}</span>
+ </router-link>
  </li>
  </ul>
  <p class='menu-label'>Other</p>
  <ul class='menu-list'>
  <li>
- <a href="#" :class="[view === 'config-editor' ? 'is-active' : '']" data-ref="config-editor" @click="emitClick($event.target)">
- <i class="fas fa-edit icon--margin-right"/>Config editor
- </a>
+ <router-link :to="{name: 'config-editor'}">
+ <i class="fas fa-edit icon--margin-right" />
+ Config editor
+ </router-link>
  </li>
  <li>
- <a href="#" :class="[view === 'settings' ? 'is-active' : '']"
- data-ref="settings" @click="emitClick($event.target)">
- <i class="fas fa-cog icon--margin-right"/>Settings
- </a>
+ <router-link :to="{name: 'manager.settings'}">
+  <i class="fas fa-cog icon--margin-right" />
+ Settings
+ </router-link>
  </li>
  <li>
- <a href="#" :class="[view === 'help' ? 'is-active' : '']"
- data-ref="help" @click="emitClick($event.target)">
- <i class="fas fa-question-circle icon--margin-right"/>Help</a>
+ <router-link :to="{name: 'help'}">
+ <i class="fas fa-question-circle icon--margin-right" />
+ Help
+ </router-link>
  </li>
  </ul>
  <slot></slot>
@@ -62,15 +62,12 @@
 
 <script lang="ts">
 
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Vue } from 'vue-property-decorator';
 import R2Error from '../../model/errors/R2Error';
-import ManagerSettings from '../../r2mm/manager/ManagerSettings';
 import ManifestV2 from '../../model/ManifestV2';
-import ManagerInformation from '../../_managerinf/ManagerInformation';
 import Game from '../../model/game/Game';
 import GameManager from '../../model/game/GameManager';
 import Profile from '../../model/Profile';
-import { PackageLoader } from '../../model/installing/PackageLoader';
 import {
  LaunchMode,
  launch,
@@ -80,65 +77,58 @@ import {
  } from '../../utils/LaunchUtils';
 
 @Component
- export default class NavigationMenu extends Vue {
+export default class NavigationMenu extends Vue {
+ private activeGame!: Game;
+ private contextProfile: Profile | null = null;
+ private LaunchMode = LaunchMode;
 
-  private activeGame!: Game;
- private contextProfile: Profile | null = null;
-  private LaunchMode = LaunchMode;
+ get thunderstoreModList() {
+ return this.$store.state.thunderstoreModList || [];
+ }
 
- @Prop({default: ""})
- private view!: string;
+ get localModList(): ManifestV2[] {
+ return this.$store.state.localModList || [];
+ }
 
- get settings() {
- return ManagerSettings.getSingleton(this.activeGame);
- }
+ getTagLinkClasses(routeName: string) {
+ const base = ["tag", "tagged-link__tag"];
+ return this.$route.name === routeName ? base : [...base, "is-link"];
+ }
 
- get thunderstoreModList() {
- return this.$store.state.thunderstoreModList || [];
- }
+ async launch(mode: LaunchMode) {
+ try {
+ await setGameDirIfUnset(this.activeGame);
+ await throwIfNoGameDir(this.activeGame);
 
- get localModList(): ManifestV2[] {
- return this.$store.state.localModList || [];
- }
+  if (mode === LaunchMode.MODDED) {
+  await linkProfileFiles(this.activeGame, this.contextProfile!);
+  }
 
- get appName(): string {
- return ManagerInformation.APP_NAME;
+ this.$store.commit("openGameRunningModal");
+ await launch(this.activeGame, this.contextProfile!, mode);
+ } catch (error) {
+ if (error instanceof R2Error) {
+ this.$store.commit("closeGameRunningModal");
+ this.$emit("error", error);
+ } else {
+ throw error;
+ }
  }
 
- get canShowConfigEditor() {
- return this.activeGame.packageLoader === PackageLoader.BEPINEX;
- }
+ }
 
- emitClick(element: any) {
- this.$emit("clicked-" + element.getAttribute("data-ref"));
- }
+ created() {
+ this.activeGame = GameManager.activeGame;
+ this.contextProfile = Profile.getActiveProfile();
+ }
+}
 
- async launch(mode: LaunchMode) {
- try {
- await setGameDirIfUnset(this.activeGame);
- await throwIfNoGameDir(this.activeGame);
-
- if (mode === LaunchMode.MODDED) {
- await linkProfileFiles(this.activeGame, this.contextProfile!);
- }
-
- this.$store.commit("openGameRunningModal");
- await launch(this.activeGame, this.contextProfile!, mode);
- } catch (error) {
- if (error instanceof R2Error) {
- this.$store.commit("closeGameRunningModal");
- this.$emit("error", error);
- } else {
- throw error;
- }
- }
+</script>
 
- }
+<style lang="scss" scoped>
 
- created() {
- this.activeGame = GameManager.activeGame;
- this.contextProfile = Profile.getActiveProfile();
- }
- }
+.menu-list::v-deep a a {
+ padding: 0;
+}
 
-</script>
+</style>

src/components/settings-components/SettingsView.vue

@@ -334,7 +334,7 @@ import UtilityMixin from '../mixins/UtilityMixin.vue';
  'fa-gamepad',
  async () => {
  await ManagerSettings.resetDefaults();
- await this.$router.push("/");
+ await this.$router.push({name: 'index'});
  }
  ),
  new SettingsRow(

src/components/views/LocalModList.vue

@@ -123,9 +123,6 @@
  :description="key.description"
  :funkyMode="funkyMode"
  :showSort="canShowSortIcons()"
- :manualSortUp="index > 0"
- :manualSortDown="index < searchableModList.length - 1"
- :darkTheme="darkTheme"
  :expandedByDefault="cardExpanded"
  :enabled="key.isEnabled()">
  <template v-slot:title>
@@ -233,7 +230,6 @@ import Game from '../../model/game/Game';
 import ConflictManagementProvider from '../../providers/generic/installing/ConflictManagementProvider';
 import Draggable from 'vuedraggable';
 import DonateButton from '../../components/buttons/DonateButton.vue';
-import Timeout = NodeJS.Timeout;
 
 @Component({
  components: {
@@ -250,15 +246,8 @@ import Timeout = NodeJS.Timeout;
  settings: ManagerSettings = new ManagerSettings();
 
  private cardExpanded: boolean = false;
- private darkTheme: boolean = false;
  private funkyMode: boolean = false;
 
- private updatedSettings() {
- this.cardExpanded = this.settings.getContext().global.expandedCards;
- this.darkTheme = this.settings.getContext().global.darkTheme;
- this.funkyMode = this.settings.getContext().global.funkyModeEnabled;
- }
-
  get modifiableModList(): ManifestV2[] {
  return ModListSort.sortLocalModList(this.$store.state.localModList, this.sortDirection,
  this.sortDisabledPosition, this.sortOrder);
@@ -282,7 +271,6 @@ import Timeout = NodeJS.Timeout;
 
  // Context
  private contextProfile: Profile | null = null;
- private settingsUpdateTimer: Timeout | null = null;
 
  get draggableList() {
  return [...this.searchableModList]
@@ -631,19 +619,9 @@ import Timeout = NodeJS.Timeout;
  this.settings = await ManagerSettings.getSingleton(this.activeGame);
  this.contextProfile = Profile.getActiveProfile();
  this.filterModList();
- if (this.settingsUpdateTimer !== null) {
- clearInterval(this.settingsUpdateTimer);
- }
- this.settingsUpdateTimer = setInterval(async () => {
- this.updatedSettings();
- }, 100);
- }
 
- destroyed() {
- if (this.settingsUpdateTimer !== null) {
- clearInterval(this.settingsUpdateTimer);
- this.settingsUpdateTimer = null;
- }
+ this.cardExpanded = this.settings.getContext().global.expandedCards;
+ this.funkyMode = this.settings.getContext().global.funkyModeEnabled;
  }
 
  emitError(error: R2Error) {

src/components/views/OnlineModList.vue

@@ -6,7 +6,6 @@
  :id="index"
  :description="key.getVersions()[0].getDescription()"
  :funkyMode="funkyMode"
- :darkTheme="darkTheme"
  :expandedByDefault="cardExpanded">
  <template v-slot:title>
  <span v-if="key.isPinned()" class='has-tooltip-left'
@@ -71,7 +70,6 @@ import DownloadModModal from './DownloadModModal.vue';
 import ManifestV2 from '../../model/ManifestV2';
 import R2Error from '../../model/errors/R2Error';
 import DonateButton from '../../components/buttons/DonateButton.vue';
-import Timeout = NodeJS.Timeout;
 
 @Component({
  components: {
@@ -89,17 +87,8 @@ export default class OnlineModList extends Vue {
  settings: ManagerSettings = new ManagerSettings();
 
  private cardExpanded: boolean = false;
- private darkTheme: boolean = false;
  private funkyMode: boolean = false;
 
- private settingsUpdateTimer: Timeout | null = null;
-
- private updatedSettings() {
- this.cardExpanded = this.settings.getContext().global.expandedCards;
- this.darkTheme = this.settings.getContext().global.darkTheme;
- this.funkyMode = this.settings.getContext().global.funkyModeEnabled;
- }
-
  get localModList(): ManifestV2[] {
  return this.$store.state.localModList;
  }
@@ -139,20 +128,8 @@ export default class OnlineModList extends Vue {
 
  async created() {
  this.settings = await ManagerSettings.getSingleton(GameManager.activeGame);
-
- if (this.settingsUpdateTimer !== null) {
- clearInterval(this.settingsUpdateTimer);
- }
- this.settingsUpdateTimer = setInterval(async () => {
- this.updatedSettings();
- }, 100);
- }
-
- destroyed() {
- if (this.settingsUpdateTimer !== null) {
- clearInterval(this.settingsUpdateTimer);
- this.settingsUpdateTimer = null;
- }
+ this.cardExpanded = this.settings.getContext().global.expandedCards;
+ this.funkyMode = this.settings.getContext().global.funkyModeEnabled;
  }
 
 }

src/pages/ConfigEditor.vue

@@ -1,13 +1,7 @@
 <template>
  <div class='columns'>
  <div class="column non-selectable" :class="navbarClass">
- <NavigationMenu view="config-editor"
- @clicked-installed="route('installed')"
- @clicked-online="route('online')"
- @clicked-settings="route('settings')"
- @clicked-help="goto('/help')"
- @clicked-downloads="goto('/downloads')"
- />
+ <NavigationMenu />
  </div>
  <div class="column" :class="contentClass">
  <ConfigSelectionLayout v-show="editing === null" @edit="bindEdit($event)"/>
@@ -48,14 +42,6 @@
  this.editing = editing;
  }
 
- route(ref: string) {
- this.$router.replace(`/manager?view=${ref}`);
- }
-
- goto(ref: string) {
- this.$router.replace(ref);
- }
-
  }
 
 </script>