Merge pull request #165 from zurdi15/develop

v1.6.5

CHANGELOG.md

@@ -1,3 +1,12 @@
+# v1.6.5 (_12-04-2023_)
+
+## Added
+ - Multiple games gallery display modes
+## Changed
+ - Some fixes and improvements
+
+<br>
+
 # v1.6.4 (_12-04-2023_)
 
 ## Added

frontend/.env

@@ -1 +1 @@
-VITE_ROMM_VERSION=1.6.4
+VITE_ROMM_VERSION=1.6.5

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "romm",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "private": true,
   "scripts": {
     "dev": "vite --host",

frontend/src/App.vue

@@ -25,7 +25,7 @@ emitter.on('refresh', () => { refresh.value = !refresh.value })
     <platforms-drawer :key="refresh"/>
 
     <v-main>
-      <v-container fluid>
+      <v-container class="pa-0" fluid>
         <router-view :key="refresh"/>
       </v-container>
     </v-main>

frontend/src/components/AppBar/Base.vue

@@ -2,9 +2,10 @@
 import { ref, inject } from "vue"
 import RomMIcon from '@/components/AppBar/RomMIcon.vue'
 import PlatformsBtn from '@/components/AppBar/PlatformsBtn.vue'
+import UploadBtn from '@/components/AppBar/UploadBtn.vue'
 import SearchBar from '@/components/AppBar/SearchBar.vue'
+import GalleryViewBtn from '@/components/AppBar/GalleryViewBtn.vue'
 import SettingsBtn from '@/components/AppBar/SettingsBtn.vue'
-import UploadBtn from '@/components/AppBar/UploadBtn.vue'
 
 // Props
 const scanning = ref(false)
@@ -34,6 +35,7 @@ emitter.on('scanning', (s) => { scanning.value = s })
         <search-bar/>
 
         <template v-slot:append>
+            <gallery-view-btn/>
             <settings-btn/>
         </template>
 

frontend/src/components/AppBar/GalleryViewBtn.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { ref, inject } from "vue"
+import { views } from '@/utils/utils.js'
+
+// Event listeners bus
+const emitter = inject('emitter')
+const currentView = ref(JSON.parse(localStorage.getItem('currentView')) || 0)
+
+// Functions
+function changeView() {
+    if(currentView.value == 2){currentView.value = 0}
+    else{currentView.value = currentView.value + 1}
+    emitter.emit('currentView', currentView.value)
+    localStorage.setItem('currentView', currentView.value)
+}
+</script>
+
+<template>
+    <v-app-bar-nav-icon
+        @click="changeView()"
+        class="ma-2"
+        rounded="0">
+        <v-icon :icon="views[currentView]['icon']"/>
+    </v-app-bar-nav-icon>
+</template>

frontend/src/components/AppBar/PlatformsBtn.vue

@@ -16,7 +16,8 @@ emitter.on('selectedPlatform', (p) => { selectedPlatform.value = p })
         rounded="0"
         icon>
         <v-avatar rounded="0">
-            <v-img :src="'/assets/platforms/'+selectedPlatform.slug+'.ico'"/>
+            <v-img v-show="selectedPlatform != ''" :src="'/assets/platforms/'+selectedPlatform.slug+'.ico'"/>
+            <v-icon v-show="selectedPlatform == ''" icon="mdi-menu"/>
         </v-avatar>
     </v-btn>
 </template>

frontend/src/components/GameCard/ActionBar.vue → frontend/src/components/GameEntry/Card/ActionBar.vue

@@ -17,19 +17,19 @@ const emitter = inject('emitter')
                 <v-btn
                     @click="downloadRom(rom, emitter)"
                     icon="mdi-download"
-                    size="small"
+                    size="x-small"
                     variant="text"/>
                 <v-btn
                     @click="downloadSave(rom, emitter)"
                     icon="mdi-content-save-all"
-                    size="small"
+                    size="x-small"
                     variant="text"
                     :disabled="!saveFiles"/>
             </v-col>
             <v-btn
                 @click=""
                 icon="mdi-dots-vertical"
-                size="small"
+                size="x-small"
                 variant="text"
                 :disabled="!saveFiles"/>
         </v-row>

frontend/src/components/GameCard/Base.vue → frontend/src/components/GameEntry/Card/Base.vue

@@ -1,6 +1,6 @@
 <script setup>
-import ActionBar from '@/components/GameCard/ActionBar.vue'
-import Cover from '@/components/GameCard/Cover.vue'
+import ActionBar from '@/components/GameEntry/Card/ActionBar.vue'
+import Cover from '@/components/GameEntry/Card/Cover.vue'
 
 // Props
 const props = defineProps(['rom'])
@@ -21,15 +21,6 @@ const props = defineProps(['rom'])
 </template>
 
 <style scoped>
-.v-card .rom-title{
-    transition: opacity .4s ease-in-out;
-}
-.rom-title.on-hover {
-    opacity: 1;
-}
-.rom-title:not(.on-hover) {
-    opacity: 0.85;
-}
 .v-card.on-hover {
     opacity: 1;
 }

frontend/src/components/GameCard/Cover.vue → frontend/src/components/GameEntry/Card/Cover.vue

@@ -1,26 +1,20 @@
 <script setup>
 import { inject } from 'vue'
 import { useRouter } from 'vue-router'
+import { selectRom } from '@/utils/utils.js'
 
 // Props
-const props = defineProps(['rom', 'isHovering', 'hoverProps'])
+const props = defineProps(['rom', 'isHovering', 'hoverProps', 'size'])
 const forceImgReload = Date.now()
 const router = useRouter()
 
 // Event listeners bus
 const emitter = inject('emitter')
-
-// Functions
-async function selectRom(rom) {   
-    localStorage.setItem('currentRom', JSON.stringify(rom))
-    await router.push(import.meta.env.BASE_URL+'details')
-    emitter.emit('currentRom', rom)
-}
 </script>
 
 <template>
     <v-img 
-        @click="selectRom(rom)"
+        @click="selectRom(rom, emitter, router)"
         v-bind="hoverProps"
         :src="'/assets'+rom.path_cover_l+'?reload='+forceImgReload"
         :lazy-src="'/assets'+rom.path_cover_s+'?reload='+forceImgReload"
@@ -34,7 +28,7 @@ async function selectRom(rom) {
         <v-expand-transition>
             <div 
                 v-if="isHovering || !rom.has_cover"
-                class="rom-title d-flex transition-fast-in-fast-out bg-secondary text-caption-1">
+                class="rom-title d-flex transition-fast-in-fast-out bg-secondary text-caption">
                 <v-list-item>{{ rom.file_name }}</v-list-item>
             </div>
         </v-expand-transition>
@@ -53,4 +47,16 @@ async function selectRom(rom) {
             </v-chip>
         </div>
     </v-img>
-</template>
+</template>
+
+<style scoped>
+.v-card .rom-title{
+    transition: opacity .4s ease-in-out;
+}
+.rom-title.on-hover {
+    opacity: 1;
+}
+.rom-title:not(.on-hover) {
+    opacity: 0.85;
+}
+</style>

frontend/src/components/GameEntry/ListItem/Base.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { ref, inject } from 'vue'
+import { useRouter } from 'vue-router'
+import { selectRom, downloadRom, downloadSave } from '@/utils/utils.js'
+
+// Props
+const props = defineProps(['rom'])
+const forceImgReload = Date.now()
+const router = useRouter()
+const saveFiles = ref(false)
+
+// Event listeners bus
+const emitter = inject('emitter')
+</script>
+
+<template>
+    <v-list-item 
+        @:click="selectRom(rom, emitter, router)"
+        :value="rom.file_name"
+        :key="rom.file_name"
+        class="pa-2">
+        <v-row class="text-subtitle-2">
+            <v-col md="3" lg="3"><p>{{ rom.name }}</p></v-col>
+            <v-col md="3" lg="4" class="hidden-sm-and-down"><p>{{ rom.file_name }}</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>{{ rom.p_slug }}</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>{{ rom.file_size }} MB</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>{{ rom.region }}</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>{{ rom.revision }}</p></v-col>
+        </v-row>
+        <template v-slot:prepend>
+            <v-avatar :rounded="0" class="ml-3">
+                <v-img
+                    :src="'/assets'+rom.path_cover_l+'?reload='+forceImgReload"
+                    :lazy-src="'/assets'+rom.path_cover_s+'?reload='+forceImgReload"
+                    min-height="100"/>
+            </v-avatar>
+        </template>
+        <template v-slot:append>
+            <v-col class="pa-0 ml-1">
+            <v-btn
+                @click="downloadRom(rom, emitter)"
+                icon="mdi-download"
+                size="x-small"
+                variant="text"/>
+            <v-btn
+                @click="downloadSave(rom, emitter)"
+                icon="mdi-content-save-all"
+                size="x-small"
+                variant="text"
+                :disabled="!saveFiles"/>
+            </v-col>
+            <v-btn
+                @click=""
+                icon="mdi-dots-vertical"
+                size="x-small"
+                variant="text"
+                class="mr-3"
+                :disabled="!saveFiles"/>
+        </template>
+    </v-list-item>
+</template>

frontend/src/components/GameEntry/ListItem/Header.vue

@@ -0,0 +1,20 @@
+<template>
+    <v-list-item class="pl-2 pr-2 pb-2 ml-3 mr-3 text-body-1">
+        <v-row class="">
+            <v-col cols="3"><p>Name</p></v-col>
+            <v-col cols="4" class="hidden-sm-and-down"><p>File</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>Platform</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>Size</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>Region</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>Revision</p></v-col>
+        </v-row>
+        <template v-slot:prepend><v-avatar/></template>
+        <template v-slot:append>
+            <v-col class="pa-0 ml-1">
+                <v-btn disabled size="x-small" variant="text"/>
+                <v-btn size="x-small" variant="text" disabled/>
+            </v-col>
+            <v-btn size="x-small" variant="text" disabled/>
+        </template>
+    </v-list-item>
+</template>

frontend/src/components/PlatformsDrawer/Platform.vue

@@ -21,10 +21,7 @@ async function selectPlatform(platform){
 </script>
 
 <template>
-    <v-list-item
-        :value="platform.slug"
-        :key="platform"
-        @:click="selectPlatform(platform)" class="pt-4 pb-4">
+    <v-list-item :value="platform.slug" :key="platform" @:click="selectPlatform(platform)" class="pt-4 pb-4">
         <p class="text-subtitle-2 text-truncate">{{ rail ? '' : platform.name }}</p>
         <template v-slot:prepend>
             <v-avatar :rounded="0"><v-img :src="'/assets/platforms/'+platform.slug+'.ico'"></v-img></v-avatar>

frontend/src/components/SettingsDrawer/Base.vue

@@ -27,7 +27,7 @@ emitter.on('toggleSettings', () => { settingsDrawer.value = !settingsDrawer.valu
         <v-divider class="border-opacity-100" :thickness="2"/>
 
         <scan/>
-
+        
         <template v-slot:append>
             <v-divider class="border-opacity-25"/>
             <theme-toggle/>

frontend/src/utils/utils.js

@@ -3,6 +3,13 @@ import { toRaw } from "vue"
 import { saveAs } from 'file-saver'
 
 
+
+export async function selectRom(rom, emitter, router) { 
+    localStorage.setItem('currentRom', JSON.stringify(rom))
+    await router.push(import.meta.env.BASE_URL+'details')
+    emitter.emit('currentRom', rom)
+}
+
 export async function downloadRom(rom, emitter, filesToDownload=[]) {
     emitter.emit('snackbarScan', {'msg': "Downloading "+rom.file_name+"...", 'icon': 'mdi-download', 'color': 'green'})
     if(rom.multi){
@@ -32,4 +39,10 @@ export async function downloadRom(rom, emitter, filesToDownload=[]) {
 
 export async function downloadSave(rom, emitter) { console.log("Downloading "+rom.file_name+" save file") }
 
-export function normalizeString(s) { return s.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,"") }
+export function normalizeString(s) { return s.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,"") }
+
+export const views = {
+    0:{'view': 'small', 'icon': 'mdi-view-module', 'size-lg': 1, 'size-md': 2, 'size-sm': 2, 'size-xs': 3, 'size-cols': 4},
+    1:{'view': 'big', 'icon': 'mdi-view-list', 'size-lg': 2, 'size-md': 3, 'size-sm': 3, 'size-xs': 6, 'size-cols': 6},
+    2:{'view': 'list', 'icon': 'mdi-view-comfy', 'size-lg': 1, 'size-md': 2, 'size-sm': 2, 'size-xs': 3, 'size-cols': 4}
+}

frontend/src/views/Details.vue

@@ -75,7 +75,7 @@ async function deleteRom() {
 </script>
 
 <template>
-    <v-row class="text-body-1 justify-center">
+    <v-row class="text-body-1 justify-center pa-5">
         <v-col cols="8" xs="8" sm="4" md="3" lg="2">
             <v-container class="pa-0" fluid>
                 <v-row>