Made some tweeks to the UI

README.md

@@ -5,33 +5,33 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
 ## What's left to do?
 
 - [ ] Use Vue app-wide
-  - First step: rewrite the app in Single File Components way ✅
+  - [X] First step: rewrite the app in Single File Components way
-  - Second step: Implement routing for the whole app using Vue Router ⚒
+  - [ ] Second step: Implement routing for the whole app using Vue Router ⚒
-  - Third step: Remove jQuery
+  - [ ] Third step: Remove jQuery
 - [ ] Implement custom contextmenu ⚒
-  - Copy and paste functions ✅
+  - [X] Copy and paste functions
-  - Copy Link where possible ✅
+  - [X] Copy Link where possible
-  - Download Quality ✅
+  - [X] Download Quality
-  - Copy Image URL where possible ✅
+  - [X] Copy Image URL where possible
-  - Resolve cut/copy/paste compatibility issues
+  - [ ] Resolve cut/copy/paste compatibility issues
 - [ ] Make i18n async (https://kazupon.github.io/vue-i18n/guide/lazy-loading.html)
   - Use ES2020 async imports, if possible
 - [ ] Make the UI look coherent
-  - Style buttons
+  - [ ] Style buttons
-  - Style text inputs
+  - [ ] Style text inputs
-  - Style checkboxes
+  - [ ] Style checkboxes
 - [ ] Search tab
-	- Better placeholer before search
+	- [ ] Better placeholer before search
 - [ ] Link Analyzer
-	- Better placeholer before analyzing and error feedback
+	- [ ] Better placeholer before analyzing and error feedback
 - [ ] Settings tab
-	- Maybe tabbing the section for easy navigation
+  - [ ] Variable selector near template inputs
-	- Could use a carousel, but it's not worth adding a new dep
+  - Maybe tabbing the section for easy navigation
-  - Variable selector near template inputs
+  - Could use a carousel, but it's not worth adding a new dep
 - [ ] Block selection where it's not needed (keep only titles artists albums labels and useful data)
   - There's a SASS mixin for this. Need to use it in the proper classes
 - [ ] Better feedback for socket.io possible errors
-- [ ] Remove images size limit and add warning if > 1200
+- [X] Remove images size limit and add warning if > 1200
 - ?
 
 # License

src/components/TheDownloadTab.vue

@@ -15,9 +15,7 @@
 			:title="$t('globals.toggle_download_tab_hint')"
 		></i>
 		<div id="queue_buttons">
-			<i id="open_downloads_folder" class="material-icons download_bar_icon hide" @click="openDownloadsFolder">
+			<i id="open_downloads_folder" class="material-icons download_bar_icon hide" :title="$t('globals.open_downloads_folder')" @click="openDownloadsFolder">folder_open</i>
-				folder_open
-			</i>
 			<i id="clean_queue" class="material-icons download_bar_icon" @click="cleanQueue" :title="$t('globals.clean_queue_hint')">clear_all</i>
 			<i id="cancel_queue" class="material-icons download_bar_icon" @click="cancelQueue" :title="$t('globals.cancel_queue_hint')">delete_sweep</i>
 		</div>

src/components/TheSettingsTab.vue

@@ -273,12 +273,14 @@
 
 			<div class="input_group">
 				<p class="input_group_text">{{ $t('settings.covers.localArtworkSize') }}</p>
-				<input type="number" min="100" max="1800" step="100" v-model.number="settings.localArtworkSize" />
+				<input type="number" min="100" max="10000" step="100" v-model.number="settings.localArtworkSize" />
+				<p v-if="settings.localArtworkSize > 1200" class="input_group_text" style="opacity: 0.75; color: #ffcc22;">⚠️ {{ $t('settings.covers.imageSizeWarning') }}</p>
 			</div>
 
 			<div class="input_group">
 				<p class="input_group_text">{{ $t('settings.covers.embeddedArtworkSize') }}</p>
-				<input type="number" min="100" max="1800" step="100" v-model.number="settings.embeddedArtworkSize" />
+				<input type="number" min="100" max="10000" step="100" v-model.number="settings.embeddedArtworkSize" />
+				<p v-if="settings.embeddedArtworkSize > 1200" class="input_group_text" style="opacity: 0.75; color: #ffcc22;">⚠️ {{ $t('settings.covers.imageSizeWarning') }}</p>
 			</div>
 
 			<div class="input_group">

src/components/TheSidebar.vue

@@ -9,11 +9,11 @@
 			<span class="main_tablinks_text">{{ $t('sidebar.search') }}</span>
 		</span>
 		<span id="main_charts_tablink" class="main_tablinks" role="link" aria-label="charts">
-			<i class="material-icons side_icon">bubble_chart</i>
+			<i class="material-icons side_icon">show_chart</i>
 			<span class="main_tablinks_text">{{ $t('sidebar.charts') }}</span>
 		</span>
 		<span id="main_favorites_tablink" class="main_tablinks" role="link" aria-label="favorites">
-			<i class="material-icons side_icon">album</i>
+			<i class="material-icons side_icon">star</i>
 			<span class="main_tablinks_text">{{ $t('sidebar.favorites') }}</span>
 		</span>
 		<span id="main_analyzer_tablink" class="main_tablinks" role="link" aria-label="link analyzer">
@@ -173,4 +173,3 @@ export default {
 	}
 }
 </script>
-

src/lang/en.js

@@ -11,6 +11,7 @@ const en = {
 		toggle_download_tab_hint: 'Expand/Collapse',
 		clean_queue_hint: 'Clear Finished',
 		cancel_queue_hint: 'Cancel All',
+		open_downloads_folder: 'Open Downloads Folder',
 		cut: 'cut',
 		copy: 'copy',
 		copyLink: 'copy link',
@@ -251,7 +252,8 @@ const en = {
 				png: 'A png image',
 				both: 'Both a jpeg and a png'
 			},
-			jpegImageQuality: 'JPEG image quality'
+			jpegImageQuality: 'JPEG image quality',
+			imageSizeWarning: 'Anything above x1200 is not officialy used by Deezer, you may encounter issues'
 		},
 		tags: {
 			head: 'Which tags to save',

src/lang/it.js

@@ -11,6 +11,7 @@ const it = {
 		toggle_download_tab_hint: 'Espandi/Riduci',
 		clean_queue_hint: 'Pulisci Lista',
 		cancel_queue_hint: 'Cancella tutti i download',
+		open_downloads_folder: 'Apri la cartella di download',
 		cut: 'taglia',
 		copy: 'copia',
 		copyLink: 'copia link',
@@ -253,7 +254,8 @@ const it = {
 				png: 'In png',
 				both: 'Sia in jpeg che in png'
 			},
-			jpegImageQuality: 'Qualità immagine JPEG'
+			jpegImageQuality: 'Qualità immagine JPEG',
+			imageSizeWarning: 'Dimensioni maggiori di x1200 non sono usate ufficialmente da Deezer, potresti incontrare problemi'
 		},
 		tags: {
 			head: 'Quali tag salvare',