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 { .input_group .input_group_text {
margin-bottom: 7px; margin-bottom: 7px;
} }
.with_checkbox + .input_group {
margin-top: 10px;
}

View File

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