evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added icons to settings tab, started compressing settings list, made sidebar a bit faster

Browse Source
This commit is contained in:
Roberto Tonino 2020-05-15 21:32:50 +02:00
parent 370609d284
commit f371aa157a
7 changed files with 42469 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/modules/sidebar.css
View File

@ -8,7 +8,7 @@
left: 0; left: 0;
background-color: var(--panels-background); background-color: var(--panels-background);
color: var(--panels-text); color: var(--panels-text);
transition: width 125ms ease-in-out 150ms; transition: width 125ms ease-in-out 75ms;
z-index: 999; z-index: 999;
} }

53
public/css/modules/tabs/settings-tab.css
View File

@ -36,7 +36,15 @@
padding: 6px 0px; padding: 6px 0px;
} }
.settings_group { #spotify-icon {
width: 24px;
height: 24px;
fill: #1db954;
margin-right: 15px;
}
/* Settings group */
.settings-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -45,10 +53,51 @@
padding-bottom: 20px; padding-bottom: 20px;
} }
.settings_group > * { .settings-group > * {
margin-bottom: 15px; margin-bottom: 15px;
} }
/* Settings group header */
.settings-group__header {
font-size: 1.5rem;
margin-bottom: 25px;
}
.settings-group__header--with-icon {
display: inline-flex;
align-items: center;
}
.settings-group__header--with-icon i.material-icons {
margin-right: 15px;
}
/* Settings container */
.settings-container {
display: flex;
}
.settings-container__half > *,
.settings-container__third > * {
margin-bottom: 15px;
}
.settings-container__half {
width: 50%;
}
.settings-container__third {
width: 33%;
}
.settings-container__third--only-checkbox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
}
/* Input group */
.input_group { .input_group {
margin-bottom: 25px; margin-bottom: 25px;
} }

44
public/css/vendor/material-icons.css vendored
View File

@ -1,28 +1,28 @@
/* fallback */ /* fallback */
@font-face { @font-face {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(../../fonts/icons/MaterialIcons-Regular.eot); /* For IE6-8 */ src: url(../../fonts/icons/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'), src: local('Material Icons'), local('MaterialIcons-Regular'),
local('MaterialIcons-Regular'), url(../../fonts/icons/MaterialIcons-Regular.woff2) format('woff2'),
url(../../fonts/icons/MaterialIcons-Regular.woff2) format('woff2'), url(../../fonts/icons/MaterialIcons-Regular.woff) format('woff'),
url(../../fonts/icons/MaterialIcons-Regular.woff) format('woff'), url(../../fonts/icons/MaterialIcons-Regular.ttf) format('truetype');
url(../../fonts/icons/MaterialIcons-Regular.ttf) format('truetype');
} }
.material-icons { .material-icons {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-size: 24px; font-size: 24px;
line-height: 1; line-height: 1;
letter-spacing: normal; letter-spacing: normal;
text-transform: none; text-transform: none;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
word-wrap: normal; word-wrap: normal;
direction: ltr; direction: ltr;
-webkit-font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased; font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
} }

430
public/index.html
View File

@ -581,19 +581,10 @@ <h2 class="page_heading">Settings</h2>
<button id="settings_btn_logout" @click="logout">Logout</button> <button id="settings_btn_logout" @click="logout">Logout</button>
</div> </div>
<div class="settings_group"> <div class="settings-group">
<!-- <label class="with_checkbox"> <h3 class="settings-group__header settings-group__header--with-icon">
<input type="checkbox" v-model="changeDarkMode"> <i class="material-icons">person</i>Login
<span class="checkbox_text">Dark Mode</span> </h3>
</label> -->
<label class="with_checkbox">
<input type="checkbox" v-model="changeSlimDownloads">
<span class="checkbox_text">Slim download tab</span>
</label>
</div>
<div class="settings_group">
<h3>Login</h3>
<div class="inline-flex"> <div class="inline-flex">
<input autocomplete="off" type="password" id="login_input_arl" ref="loginInput" placeholder="ARL" /> <input autocomplete="off" type="password" id="login_input_arl" ref="loginInput" placeholder="ARL" />
<button id="settings_btn_copyArl" @click="copyARLtoClipboard"> <button id="settings_btn_copyArl" @click="copyARLtoClipboard">
@ -606,13 +597,27 @@ <h3>Login</h3>
<button id="settings_btn_updateArl" @click="login" style="width:100%;">Update ARL</button> <button id="settings_btn_updateArl" @click="login" style="width:100%;">Update ARL</button>
</div> </div>
<div class="settings_group"> <div class="settings-group">
<h3>Download Path</h3> <h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">web</i>Appearance
</h3>
<label class="with_checkbox">
<input type="checkbox" v-model="changeSlimDownloads">
<span class="checkbox_text">Slim download tab</span>
</label>
</div>
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">folder</i>Download Path
</h3>
<input type="text" v-model="settings.downloadLocation"> <input type="text" v-model="settings.downloadLocation">
</div> </div>
<div class="settings_group"> <div class="settings-group">
<h3>Templates</h3> <h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">font_download</i>Templates
</h3>
<p>Trackname template</p> <p>Trackname template</p>
<input type="text" v-model="settings.tracknameTemplate"> <input type="text" v-model="settings.tracknameTemplate">
@ -624,37 +629,43 @@ <h3>Templates</h3>
<input type="text" v-model="settings.playlistTracknameTemplate"> <input type="text" v-model="settings.playlistTracknameTemplate">
</div> </div>
<div class="settings_group"> <div class="settings-group">
<h3>Folders</h3> <h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">create_new_folder</i>Folders
</h3>
<div class="settings-container">
<div class="settings-container__third">
<label class="with_checkbox">
<input type="checkbox" v-model="settings.createPlaylistFolder">
<span class="checkbox_text">Create folder for playlist</span>
</label>
<div class="input_group" v-if="settings.createPlaylistFolder">
<p class="input_group_text">Playlist folder template</p>
<input type="text" v-model="settings.playlistNameTemplate">
</div>
</div>
<div class="settings-container__third">
<label class="with_checkbox">
<input type="checkbox" v-model="settings.createArtistFolder">
<span class="checkbox_text">Create folder for artist</span>
</label>
<label class="with_checkbox"> <div class="input_group" v-if="settings.createArtistFolder">
<input type="checkbox" v-model="settings.createPlaylistFolder"> <p class="input_group_text">Artist folder template</p>
<span class="checkbox_text">Create folder for playlist</span> <input type="text" v-model="settings.artistNameTemplate">
</label> </div>
</div>
<div class="settings-container__third">
<label class="with_checkbox">
<input type="checkbox" v-model="settings.createAlbumFolder">
<span class="checkbox_text">Create folder for album</span>
</label>
<div class="input_group" v-if="settings.createPlaylistFolder"> <div class="input_group" v-if="settings.createAlbumFolder">
<p class="input_group_text">Playlist folder template</p> <p class="input_group_text">Album folder template</p>
<input type="text" v-model="settings.playlistNameTemplate"> <input type="text" v-model="settings.albumNameTemplate">
</div> </div>
</div>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.createArtistFolder">
<span class="checkbox_text">Create folder for artist</span>
</label>
<div class="input_group" v-if="settings.createArtistFolder">
<p class="input_group_text">Artist folder template</p>
<input type="text" v-model="settings.artistNameTemplate">
</div>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.createAlbumFolder">
<span class="checkbox_text">Create folder for album</span>
</label>
<div class="input_group" v-if="settings.createAlbumFolder">
<p class="input_group_text">Album folder template</p>
<input type="text" v-model="settings.albumNameTemplate">
</div> </div>
<label class="with_checkbox"> <label class="with_checkbox">
@ -673,27 +684,37 @@ <h3>Folders</h3>
</label> </label>
</div> </div>
<div class="settings_group"> <div class="settings-group">
<h3>Track titles</h3> <h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">title</i>Track titles
</h3>
<label class="with_checkbox"> <div class="settings-container">
<input type="checkbox" v-model="settings.padTracks"> <div class="settings-container__third settings-container__third--only-checkbox">
<span class="checkbox_text">Pad tracks</span> <label class="with_checkbox">
</label> <input type="checkbox" v-model="settings.padTracks">
<span class="checkbox_text">Pad tracks</span>
<div class="input_group"> </label>
<p class="input_group_text">Overwrite padding size</p> </div>
<input type="number" v-model="settings.paddingSize"> <div class="settings-container__third">
</div> <div class="input_group">
<p class="input_group_text">Overwrite padding size</p>
<div class="input_group"> <input type="number" v-model="settings.paddingSize">
<p class="input_group_text">Illegal Character replacer</p> </div>
<input type="text" v-model="settings.illegalCharacterReplacer"> </div>
<div class="settings-container__third">
<div class="input_group">
<p class="input_group_text">Illegal Character replacer</p>
<input type="text" v-model="settings.illegalCharacterReplacer">
</div>
</div>
</div> </div>
</div> </div>
<div class="settings_group"> <div class="settings-group">
<h3>Downloads</h3> <h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">get_app</i>Downloads
</h3>
<div class="input_group"> <div class="input_group">
<p class="input_group_text">Concurrent Downloads</p> <p class="input_group_text">Concurrent Downloads</p>
@ -709,39 +730,47 @@ <h3>Downloads</h3>
</select> </select>
</div> </div>
<label class="with_checkbox"> <div class="settings-container">
<input type="checkbox" v-model="settings.fallbackBitrate"> <div class="settings-container__third settings-container__third--only-checkbox">
<span class="checkbox_text">Bitrate fallback</span> <label class="with_checkbox">
</label> <input type="checkbox" v-model="settings.fallbackBitrate">
<span class="checkbox_text">Bitrate fallback</span>
</label>
<label class="with_checkbox"> <label class="with_checkbox">
<input type="checkbox" v-model="settings.fallbackSearch"> <input type="checkbox" v-model="settings.fallbackSearch">
<span class="checkbox_text">Search fallback</span> <span class="checkbox_text">Search fallback</span>
</label> </label>
</div>
<div class="settings-container__third settings-container__third--only-checkbox">
<label class="with_checkbox">
<input type="checkbox" v-model="settings.logErrors">
<span class="checkbox_text">Create log file for errors</span>
</label>
<label class="with_checkbox"> <label class="with_checkbox">
<input type="checkbox" v-model="settings.logErrors"> <input type="checkbox" v-model="settings.logSearched">
<span class="checkbox_text">Create log file for errors</span> <span class="checkbox_text">Create log file for searched tracks</span>
</label> </label>
</div>
<div class="settings-container__third settings-container__third--only-checkbox">
<label class="with_checkbox">
<input type="checkbox" v-model="settings.createM3U8File">
<span class="checkbox_text">Create playlist file</span>
</label>
<label class="with_checkbox"> <label class="with_checkbox">
<input type="checkbox" v-model="settings.logSearched"> <input type="checkbox" v-model="settings.syncedLyrics">
<span class="checkbox_text">Create log file for searched tracks</span> <span class="checkbox_text">Create .lyr files (Sync Lyrics)</span>
</label> </label>
</div>
<label class="with_checkbox"> </div>
<input type="checkbox" v-model="settings.createM3U8File">
<span class="checkbox_text">Create playlist file</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.syncedLyrics">
<span class="checkbox_text">Create .lyr files (Sync Lyrics)</span>
</label>
</div> </div>
<div class="settings_group"> <div class="settings-group">
<h3>Album covers</h3> <h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">album</i>Album covers
</h3>
<label class="with_checkbox"> <label class="with_checkbox">
<input type="checkbox" v-model="settings.saveArtwork"> <input type="checkbox" v-model="settings.saveArtwork">
@ -784,8 +813,116 @@ <h3>Album covers</h3>
</div> </div>
</div> </div>
<div class="settings_group"> <div class="settings-group">
<h3>Other</h3> <h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons" style="width: 1em; height: 1em;">bookmarks</i>Which tags to save
</h3>
<div class="settings-container">
<div class="settings-container__half">
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.title">
<span class="checkbox_text">Title</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.artist">
<span class="checkbox_text">Artists</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.album">
<span class="checkbox_text">Album</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.cover">
<span class="checkbox_text">Cover</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.trackNumber">
<span class="checkbox_text">Track Number</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.trackTotal">
<span class="checkbox_text">Track Total</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.discNumber">
<span class="checkbox_text">Disc Number</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.discTotal">
<span class="checkbox_text">Disc Total</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.albumArtist">
<span class="checkbox_text">Album Artist</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.genre">
<span class="checkbox_text">Genre</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.year">
<span class="checkbox_text">Year</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.date">
<span class="checkbox_text">Date</span>
</label>
</div>
<div class="settings-container__half">
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.explicit">
<span class="checkbox_text">Explicit Lyrics</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.isrc">
<span class="checkbox_text">ISRC</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.length">
<span class="checkbox_text">Track Length</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.barcode">
<span class="checkbox_text">Album Barcode (UPC)</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.bpm">
<span class="checkbox_text">BPM</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.replayGain">
<span class="checkbox_text">Replay Gain</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.label">
<span class="checkbox_text">Album Label</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.lyrics">
<span class="checkbox_text">Unsynchronized Lyrics</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.copyright">
<span class="checkbox_text">Copyright</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.composer">
<span class="checkbox_text">Composer</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.involvedPeople">
<span class="checkbox_text">Involved People</span>
</label>
</div>
</div>
</div>
<div class="settings-group">
<h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">list</i>Other
</h3>
<label class="with_checkbox"> <label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.savePlaylistAsCompilation"> <input type="checkbox" v-model="settings.tags.savePlaylistAsCompilation">
@ -871,104 +1008,15 @@ <h3>Other</h3>
</div> </div>
</div> </div>
<div class="settings_group"> <div class="settings-group">
<h3>Which tags to save</h3> <h3 class="settings-group__header settings-group__header--with-icon">
<label class="with_checkbox"> <svg id="spotify-icon" enable-background="new 0 0 24 24" viewBox="0 0 24 24"
<input type="checkbox" v-model="settings.tags.title"> xmlns="http://www.w3.org/2000/svg">
<span class="checkbox_text">Title</span> <path
</label> d="m12 24c6.624 0 12-5.376 12-12s-5.376-12-12-12-12 5.376-12 12 5.376 12 12 12zm4.872-6.344v.001c-.807 0-3.356-2.828-10.52-1.36-.189.049-.436.126-.576.126-.915 0-1.09-1.369-.106-1.578 3.963-.875 8.013-.798 11.467 1.268.824.526.474 1.543-.265 1.543zm1.303-3.173c-.113-.03-.08.069-.597-.203-3.025-1.79-7.533-2.512-11.545-1.423-.232.063-.358.126-.576.126-1.071 0-1.355-1.611-.188-1.94 4.716-1.325 9.775-.552 13.297 1.543.392.232.547.533.547.953-.005.522-.411.944-.938.944zm-13.627-7.485c4.523-1.324 11.368-.906 15.624 1.578 1.091.629.662 2.22-.498 2.22l-.001-.001c-.252 0-.407-.063-.625-.189-3.443-2.056-9.604-2.549-13.59-1.436-.175.048-.393.125-.625.125-.639 0-1.127-.499-1.127-1.142 0-.657.407-1.029.842-1.155z" />
<label class="with_checkbox"> </svg>
<input type="checkbox" v-model="settings.tags.artist"> Spotify Features
<span class="checkbox_text">Artists</span> </h3>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.album">
<span class="checkbox_text">Album</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.cover">
<span class="checkbox_text">Cover</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.trackNumber">
<span class="checkbox_text">Track Number</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.trackTotal">
<span class="checkbox_text">Track Total</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.discNumber">
<span class="checkbox_text">Disc Number</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.discTotal">
<span class="checkbox_text">Disc Total</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.albumArtist">
<span class="checkbox_text">Album Artist</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.genre">
<span class="checkbox_text">Genre</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.year">
<span class="checkbox_text">Year</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.date">
<span class="checkbox_text">Date</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.explicit">
<span class="checkbox_text">Explicit Lyrics</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.isrc">
<span class="checkbox_text">ISRC</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.length">
<span class="checkbox_text">Track Length</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.barcode">
<span class="checkbox_text">Album Barcode (UPC)</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.bpm">
<span class="checkbox_text">BPM</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.replayGain">
<span class="checkbox_text">Replay Gain</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.label">
<span class="checkbox_text">Album Label</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.lyrics">
<span class="checkbox_text">Unsynchronized Lyrics</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.copyright">
<span class="checkbox_text">Copyright</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.composer">
<span class="checkbox_text">Composer</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.involvedPeople">
<span class="checkbox_text">Involved People</span>
</label>
</div>
<div class="settings_group">
<h3>Spotify Features</h3>
<div class="input_group"> <div class="input_group">
<p class="input_group_text">Spotify clientID</p> <p class="input_group_text">Spotify clientID</p>

42157
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

2
public/js/bundle.js.map
View File

File diff suppressed because one or more lines are too long

4
src/js/modules/components/main-search.js
View File

@ -81,10 +81,10 @@ const MainSearch = new Vue({
document.getElementById(`search_${section.toLowerCase()}_tab`).click() document.getElementById(`search_${section.toLowerCase()}_tab`).click()
} }
}, },
addToQueue: function (e) { addToQueue(e) {
Downloads.sendAddToQueue(e.currentTarget.dataset.link) Downloads.sendAddToQueue(e.currentTarget.dataset.link)
}, },
openQualityModal: function (e) { openQualityModal(e) {
QualityModal.open(e.currentTarget.dataset.link) QualityModal.open(e.currentTarget.dataset.link)
}, },
numberWithDots: Utils.numberWithDots, numberWithDots: Utils.numberWithDots,