Merge pull request #177 from zurdi15/develop

v1.7.1

CHANGELOG.md

@@ -1,3 +1,14 @@
+# v1.7.1 (_15-04-2023_)
+
+## Added
+ - New UI feel with the new RomM color palette
+## Changed
+ - Roms size is now human readable
+## Fixed
+ - Fixed a bug where multi file roms could break the scan if the rom name have a dot.
+
+<br>
+
 # v1.7 (_14-04-2023_)
 
 ## Added
@@ -7,6 +18,8 @@
  - Rom details page revamped
  - RomM logo revamped
 
+<br>
+
 # v1.6.5 (_12-04-2023_)
 
 ## Added

backend/src/alembic/versions/1.7.1_.py

@@ -0,0 +1,28 @@
+"""empty message
+
+Revision ID: 1.7.1
+Revises: 1.6.3
+Create Date: 2023-04-15 02:28:24.023871
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '1.7.1'
+down_revision = '1.6.3'
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('roms', sa.Column('file_size_units', sa.String(length=10), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('roms', 'file_size_units')
+    # ### end Alembic commands ###

backend/src/models/rom.py

@@ -18,6 +18,7 @@ class Rom(BaseModel):
     file_extension = Column(String(length=10), default="")
     file_path = Column(String(length=1000), default="")
     file_size = Column(Float, default=0.0)
+    file_size_units = Column(String(length=10), default="")
 
     name = Column(String(length=350), default="")
     r_slug = Column(String(length=100), default="")

backend/src/utils/fs.py

@@ -127,20 +127,27 @@ def parse_tags(file_name: str) -> tuple:
     return reg, rev, other_tags
 
 
-def _get_file_extension(file: str) -> str:
-    return file.split('.')[-1] if '.' in file else ''
+def _get_file_extension(rom: dict) -> str:
+    return rom['file'].split('.')[-1] if not rom['multi'] else ''
 
 
 def _get_rom_files(multi: bool, rom: str, roms_path: str) -> list[str]:
     return [] if not multi else _exclude_multi_roms_parts(list(os.walk(f"{roms_path}/{rom}"))[0][2])
 
 
+def _convert_size_human_readable(size, decimals=2) -> tuple:
+    for unit in ['B', 'KB', 'MB', 'GB', 'TB', 'PB']:
+        if size < 1024.0 or unit == 'PB': break
+        size /= 1024.0
+    return round(size, 2), unit
+
+
 def _get_file_size(multi: bool, rom: str, files: list, roms_path:str) -> str:
     files: list = [f"{roms_path}/{rom}"] if not multi else [f"{roms_path}/{rom}/{file}" for file in files]
-    total_size: float = 0.0
+    total_size: int = 0
     for file in files:
-        total_size += round(os.stat(file).st_size / (1024 * 1024), 2)
-    return str(total_size)
+        total_size += os.stat(file).st_size
+    return _convert_size_human_readable(total_size)
 
 
 def get_roms(p_slug: str, full_scan: bool, only_amount: bool = False) -> list[dict]:
@@ -167,10 +174,11 @@ def get_roms(p_slug: str, full_scan: bool, only_amount: bool = False) -> list[di
     for rom in fs_roms:
         if rom['file'] in db_roms and not full_scan and not rom['multi']: continue
         reg, rev, other_tags = parse_tags(rom['file'])
-        file_extension: str = _get_file_extension(rom['file'])
+        file_extension: str = _get_file_extension(rom)
         files: list = _get_rom_files(rom['multi'], rom['file'], roms_path)
-        file_size: str = _get_file_size(rom['multi'], rom['file'], files, roms_path)
-        roms.append({'file_name': rom['file'], 'file_path': roms_path, 'multi': rom['multi'], 'files': files, 'file_size': file_size, 'file_extension': file_extension,
+        file_size, file_size_units = _get_file_size(rom['multi'], rom['file'], files, roms_path)
+        roms.append({'file_name': rom['file'], 'file_path': roms_path, 'multi': rom['multi'],
+                     'files': files, 'file_size': file_size, 'file_size_units': file_size_units, 'file_extension': file_extension,
                      'region': reg, 'revision': rev, 'tags': other_tags})
     return roms
 

frontend/.env

@@ -1 +1 @@
-VITE_ROMM_VERSION=1.7
+VITE_ROMM_VERSION=1.7.1

frontend/package.json

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

frontend/src/App.vue

@@ -7,7 +7,7 @@ import SettingsDrawer from '@/components/SettingsDrawer/Base.vue'
 import Notification from '@/components/Notification.vue'
 
 // Props
-useTheme().global.name.value = localStorage.getItem('theme') || 'dark'
+useTheme().global.name.value = localStorage.getItem('theme') || 'rommDark'
 const refresh = ref(false)
 
 // Event listeners bus
@@ -18,7 +18,7 @@ emitter.on('refresh', () => { refresh.value = !refresh.value })
 <template>
   <v-app>
 
-    <settings-drawer />
+    <settings-drawer/>
 
     <app-bar/>
 
@@ -58,4 +58,25 @@ emitter.on('refresh', () => { refresh.value = !refresh.value })
   background-color: #808080;
   border-radius: 5px;
 }
+
+rommDark {
+  primary:      #161b22;
+  secondary:    #a452fe;
+  background:   #0d1117;
+
+  notification: #0d1117;
+  surface:      #161b22;
+  tooltip:      #161b22;
+  chip:         #161b22;
+  
+  rommAccent1:  #a452fe;
+  rommAccent2:  #9a00ea;
+  rommAccent3:  #7b00e1;
+  rommAccent4:  #702bcf;
+  rommAccent5:  #3808a4;
+  rommWhite:    #fefdfe;
+  rommBlack:    #000000;
+  rommRed:      #da3633;
+}
+
 </style>

frontend/src/components/AppBar/Base.vue

@@ -25,9 +25,9 @@ async function goHome(){
 
     <v-app-bar class="elevation-3">
 
-        <v-progress-linear :active="scanning" :indeterminate="true" absolute/>
+        <v-progress-linear color="secondary" :active="scanning" :indeterminate="true" absolute/>
 
-        <v-avatar size="100" class="ml-3 home-btn hidden-sm-and-down" @click="goHome()"><v-img src="/assets/romm.svg"></v-img></v-avatar>
+        <v-avatar size="100" class="ml-3 home-btn hidden-sm-and-down" @click="goHome()"><v-img src="/assets/romm_complete.svg"></v-img></v-avatar>
             
         <platforms-btn/>
         

frontend/src/components/GameDetails/BackgroundHeader.vue

@@ -0,0 +1,22 @@
+<script setup>
+const props = defineProps(['rom'])
+</script>
+
+<template>
+    <v-card class="header-background" position="absolute" rounded="0" flat>
+        <v-img :src="'/assets'+rom.path_cover_l+'?reload='+Date.now()" class="header-background-img" cover/>
+    </v-card>
+</template>
+
+<style scoped>
+.header-background {
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    max-height: 330px;
+}
+.header-background-img {
+    -webkit-filter: blur(15px);
+    filter: blur(15px);
+}
+</style>

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

@@ -1,6 +1,6 @@
 <script setup>
-import ActionBar from '@/components/GameEntry/Card/ActionBar.vue'
-import Cover from '@/components/GameEntry/Card/Cover.vue'
+import ActionBar from '@/components/GameGallery/Card/ActionBar.vue'
+import Cover from '@/components/GameGallery/Card/Cover.vue'
 
 // Props
 const props = defineProps(['rom'])

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

@@ -22,28 +22,28 @@ const emitter = inject('emitter')
         cover>
         <template v-slot:placeholder>
             <div class="d-flex align-center justify-center fill-height">
-                <v-progress-circular indeterminate/>
+                <v-progress-circular color="secondary" indeterminate/>
             </div>
         </template>
         <v-expand-transition>
             <div 
                 v-if="isHovering || !rom.has_cover"
-                class="rom-title d-flex transition-fast-in-fast-out bg-secondary text-caption">
+                class="rom-title d-flex transition-fast-in-fast-out bg-tooltip text-caption">
                 <v-list-item>{{ rom.file_name }}</v-list-item>
             </div>
         </v-expand-transition>
         <v-chip-group class="pl-1 pt-0">
             <v-chip
                 v-show="rom.region"
-                class="bg-primary"
                 size="x-small"
+                class="bg-chip"
                 label>
                 {{ rom.region }}
             </v-chip>
             <v-chip
                 v-show="rom.revision"
-                class="bg-primary"
                 size="x-small"
+                class="bg-chip"
                 label>
                 {{ rom.revision }}
             </v-chip>

frontend/src/components/GameEntry/ListItem/Item.vue → frontend/src/components/GameGallery/ListItem/Item.vue

@@ -23,7 +23,7 @@ const emitter = inject('emitter')
             <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.file_size }} {{ rom.file_size_units }}</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>

frontend/src/components/GameGallery/NoRoms.vue

@@ -0,0 +1,10 @@
+<script setup>
+// Props
+const props = defineProps(['noRoms'])
+</script>
+
+<template>
+    <v-row v-if="noRoms" class="d-flex justify-center align-center mt-16">
+        <div class="text-h6">Feels cold here... <v-icon>mdi-emoticon-sad</v-icon></div>
+    </v-row>
+</template>

frontend/src/components/Notification.vue

@@ -14,7 +14,7 @@ emitter.on('snackbarScan', (snackbar) => {
 </script>
 
 <template>
-    <v-snackbar v-model="snackbarShow" :timeout="4000" location="top" class="mt-4">
+    <v-snackbar v-model="snackbarShow" :timeout="4000" location="top" class="mt-4" color="notification">
         <v-icon :icon="snackbarStatus.icon" :color="snackbarStatus.color" class="ml-2 mr-2"/>
         {{ snackbarStatus.msg }}
         <template v-slot:actions>

frontend/src/components/PlatformsDrawer/Base.vue

@@ -39,14 +39,16 @@ emitter.emit('selectedPlatform', selectedPlatform.value)
 
         <v-list>
             <v-row @click="goHome()" class="justify-center hidden-md-and-up">
-                <v-img src="/assets/romm.svg" class="home-btn justify-center"></v-img>
+                <v-img v-show="!rail" src="/assets/romm_complete.svg" class="home-btn justify-center"/>
+                <v-img v-show="rail" src="/assets/romm.svg" class="home-btn justify-center"/>
             </v-row>
             <v-divider class="border-opacity-25 hidden-md-and-up"/>
 
             <platform v-for="platform in platforms" :platform="platform" :rail="rail"/>
         </v-list>
         
         <template v-slot:append>
+            <v-divider class="border-opacity-25" :thickness="1"/>
             <rail-btn :rail="rail"/>
         </template>
 
@@ -55,7 +57,7 @@ emitter.emit('selectedPlatform', selectedPlatform.value)
 </template>
 
 <style scoped>
-.home-btn {
+.home-btn{
     width: 100px;
     height: 100px;
     cursor: pointer;

frontend/src/components/SettingsDrawer/Base.vue

@@ -19,10 +19,11 @@ emitter.on('toggleSettings', () => { settingsDrawer.value = !settingsDrawer.valu
         v-model="settingsDrawer"
         location="right"
         width="270"
+        class="bg-background"
         temporary
         floating>
 
-        <settings-header/>
+        <settings-header class="bg-primary"/>
 
         <v-divider class="border-opacity-100" :thickness="2"/>
 
@@ -32,7 +33,7 @@ emitter.on('toggleSettings', () => { settingsDrawer.value = !settingsDrawer.valu
             <v-divider class="border-opacity-25"/>
             <theme-toggle/>
             <v-divider class="border-opacity-25"/>
-            <version-label/>
+            <version-label class="bg-primary"/>
         </template>
 
     </v-navigation-drawer>

frontend/src/components/SettingsDrawer/Header.vue

@@ -7,7 +7,7 @@ const emitter = inject('emitter')
 
 <template>
     <v-list-item
-        class="text-h5 d-flex align-center justify-center font-weight-bold bg-primary pt-4 pb-4 pl-7">
+        class="text-h5 d-flex align-center justify-center font-weight-bold pt-4 pb-4 pl-7">
         Settings
         <v-btn
             title="close settings"

frontend/src/components/SettingsDrawer/Scan.vue

@@ -54,14 +54,14 @@ async function scan() {
                         @click="scan()"
                         :disabled="scanning"
                         prepend-icon="mdi-magnify-scan"
-                        class="ml-7"
-                        color="secondary"
+                        class="ml-7 bg-scanBtn"
                         rounded="0" 
                         inset>
                         <p v-if="!scanning">Scan</p>
                         <v-progress-circular
                             v-show="scanning"
                             class="ml-2"
+                            color="secondary"
                             :width="2"
                             :size="20"
                             indeterminate/>

frontend/src/components/SettingsDrawer/ThemeToggle.vue

@@ -4,12 +4,12 @@ import { useTheme } from "vuetify"
 
 // Props
 const theme = useTheme()
-const darkMode = (localStorage.getItem('theme') == 'light') ? ref(false) : ref(true)
+const darkMode = (localStorage.getItem('theme') == 'rommLight') ? ref(false) : ref(true)
 
 // Functions
 function toggleTheme() {
-    theme.global.name.value = darkMode.value ? "dark" : "light"
-    darkMode.value ? localStorage.setItem('theme', 'dark') : localStorage.setItem('theme', 'light')
+    theme.global.name.value = darkMode.value ? "rommDark" : "rommLight"
+    darkMode.value ? localStorage.setItem('theme', 'rommDark') : localStorage.setItem('theme', 'rommLight')
 }
 </script>
 

frontend/src/components/SettingsDrawer/VersionLabel.vue

@@ -4,6 +4,6 @@ const ROMM_VERSION = import.meta.env.VITE_ROMM_VERSION
 
 <template>
     <v-list-item class="d-flex justify-center alignt-center text-body-2">
-        <p>RomM v{{ ROMM_VERSION }}</p>
+        <span class="text-secondary">RomM</span><span> v{{ ROMM_VERSION }}</span>
     </v-list-item>
 </template>