updated styles of settings tab

This commit is contained in:
Roberto Tonino 2020-05-05 21:53:13 +02:00
parent 89da9b2d13
commit d5b782fda9
2 changed files with 122 additions and 82 deletions

View File

@ -65,3 +65,7 @@
.input_group .input_group_text {
margin-bottom: 7px;
}
.with_checkbox + .input_group {
margin-top: 10px;
}

View File

@ -617,112 +617,136 @@ <h3>Folders</h3>
<div class="settings_group">
<h3>Track titles</h3>
<div>
<p>Pad tracks</p>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.padTracks">
</div>
<div>
<p>Overwrite padding size</p>
<span class="checkbox_text">Pad tracks</span>
</label>
<div class="input_group">
<p class="input_group_text">Overwrite padding size</p>
<input type="number" v-model="settings.paddingSize">
</div>
<div>
<p>Illegal Character replacer</p>
<input type="text" v-model="settings.illegalCharacterReplacer">
<div class="input_group">
<p class="input_group_text">Illegal Character replacer</p>
<input type="number" v-model="settings.illegalCharacterReplacer">
</div>
</div>
<div class="settings_group">
<h3>Downloads</h3>
<div>
<p>Concurrent Downloads</p>
<input type="number" v-model.number="settings.queueConcurrency">
<div class="input_group">
<p class="input_group_text">Concurrent Downloads</p>
<input type="number" v-model="settings.queueConcurrency">
</div>
<div>
<p>Preferred Bitrate</p>
<div class="input_group">
<p class="input_group_text">Preferred Bitrate</p>
<select v-model="settings.maxBitrate">
<option value="9">FLAC 1411kbps</option>
<option value="3">MP3 320kbps</option>
<option value="1">MP3 128kbps</option>
</select>
</div>
<div>
<p>Bitrate fallback</p>
<input type="checkbox" v-model="settings.fallbackBitrate">
</div>
<div>
<p>Search fallback</p>
<input type="checkbox" v-model="settings.fallbackSearch">
</div>
<div>
<p>Create log file for errors</p>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.fallbackBitrate">
<span class="checkbox_text">Bitrate fallback</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.fallbackSearch">
<span class="checkbox_text">Search fallback</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.logErrors">
</div>
<div>
<p>Create log file for searched tracks</p>
<span class="checkbox_text">Create log file for errors</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.logSearched">
</div>
<div>
<p>Create playlist file</p>
<span class="checkbox_text">Create log file for searched tracks</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.createM3U8File">
</div>
<div>
<p>Create .lyr files (Sync Lyrics)</p>
<span class="checkbox_text">Create playlist file</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.syncedLyrics">
</div>
<span class="checkbox_text">Create .lyr files (Sync Lyrics)</span>
</label>
</div>
<div class="settings_group">
<h3>Album covers</h3>
<div>
<p>Save covers</p>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.saveArtwork">
</div>
<div>
<p>Cover name template</p>
<span class="checkbox_text">Save covers</span>
</label>
<div class="input_group">
<p class="input_group_text">Cover name template</p>
<input type="text" v-model="settings.coverImageTemplate">
</div>
<div>
<p>Save artist image</p>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.saveArtworkArtist">
</div>
<div>
<p>Artist image name template</p>
<span class="checkbox_text">Save artist image</span>
</label>
<div class="input_group">
<p class="input_group_text">Artist image name template</p>
<input type="text" v-model="settings.artistImageTemplate">
</div>
<div>
<p>Local artwork size</p>
<div class="input_group">
<p class="input_group_text">Local artwork size</p>
<input type="number" min="100" max="1800" step="100" v-model.number="settings.localArtworkSize">
</div>
<div>
<p>Embedded artwork size</p>
<div class="input_group">
<p class="input_group_text">Embedded artwork size</p>
<input type="number" min="100" max="1800" step="100" v-model.number="settings.embeddedArtworkSize">
</div>
<div>
<p>Save images as png</p>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.PNGcovers">
</div>
<div>
<p>JPEG image quality</p>
<span class="checkbox_text">Save images as png</span>
</label>
<div class="input_group">
<p class="input_group_text">JPEG image quality</p>
<input type="number" min="1" max="100" v-model.number="settings.jpegImageQuality">
</div>
</div>
<div class="settings_group">
<div>
<p>Save playlists as compilation</p>
<h3>Other</h3>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.savePlaylistAsCompilation">
</div>
<div>
<p>Use null separator</p>
<span class="checkbox_text">Save playlists as compilation</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.useNullSeparator">
</div>
<div>
<p>Save ID3v1 as well</p>
<span class="checkbox_text">Use null separator</span>
</label>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.tags.saveID3v1">
</div>
<div>
<p>How would you like to separate your artists?</p>
<span class="checkbox_text">Save ID3v1 as well</span>
</label>
<div class="input_group">
<p class="input_group_text">How would you like to separate your artists?</p>
<select v-model="settings.tags.multitagSeparator">
<option value="default">Using standard specification</option>
<option value="andFeat">Using & and feat.</option>
@ -735,12 +759,14 @@ <h3>Album covers</h3>
<option value="; ">Using "; "</option>
</select>
</div>
<div>
<p>Remove album version from track title</p>
<label class="with_checkbox">
<input type="checkbox" v-model="settings.removeAlbumVersion">
</div>
<div>
<p>Date format for FLAC files</p>
<span class="checkbox_text">Remove album version from track title</span>
</label>
<div class="input_group">
<p class="input_group_text">Date format for FLAC files</p>
<select v-model="settings.dateFormat">
<option value="Y-M-D">YYYY-MM-DD</option>
<option value="Y-D-M">YYYY-DD-MM</option>
@ -749,16 +775,18 @@ <h3>Album covers</h3>
<option value="Y">YYYY</option>
</select>
</div>
<div>
<p>What should I do with featured artists</p>
<div class="input_group">
<p class="input_group_text">What should I do with featured artists?</p>
<select v-model="settings.featuredToTitle">
<option value="0">Nothing</option>
<option value="1">Remove it from the title</option>
<option value="2">Move it to the title</option>
</select>
</div>
<div>
<p>Title casing</p>
<div class="input_group">
<p class="input_group_text">Title casing</p>
<select v-model="settings.titleCasing">
<option value="nothing">Keep unchanged</option>
<option value="lower">lowercase</option>
@ -767,8 +795,9 @@ <h3>Album covers</h3>
<option value="sentence">Like a sentence</option>
</select>
</div>
<div>
<p>Artist casing</p>
<div class="input_group">
<p class="input_group_text">Artist casing</p>
<select v-model="settings.artistCasing">
<option value="nothing">Keep unchanged</option>
<option value="lower">lowercase</option>
@ -777,12 +806,14 @@ <h3>Album covers</h3>
<option value="sentence">Like a sentence</option>
</select>
</div>
<div>
<p>Command to execute after download</p>
<div class="input_group">
<p class="input_group_text">Command to execute after download</p>
<p class="secondary-text">Leave blank for no action</p>
<input type="text" v-model="settings.executeCommand">
</div>
</div>
<div class="settings_group">
<h3>Which tags to save</h3>
<label class="with_checkbox">
@ -878,21 +909,26 @@ <h3>Which tags to save</h3>
<span class="checkbox_text">Involved People</span>
</label>
</div>
<div class="settings_group">
<h3>Spotify Features</h3>
<div>
<p>Spotify clientID</p>
<div class="input_group">
<p class="input_group_text">Spotify clientID</p>
<input type="text" v-model="spotifyFeatures.clientId">
</div>
<div>
<p>Spotify Client Secret</p>
<div class="input_group">
<p class="input_group_text">Spotify Client Secret</p>
<input type="password" v-model="spotifyFeatures.clientSecret">
</div>
<div>
<p>Spotify username</p>
<div class="input_group">
<p class="input_group_text">Spotify username</p>
<input type="text" v-model="spotifyUser">
</div>
</div>
<footer>
<button @click="resetSettings">Reset to Default</button>
<button @click="saveSettings">Save</button>