started re-organization of settings tab
This commit is contained in:
Roberto Tonino
parent
f5455ab580
commit
97986372fe
@ -1,7 +1,7 @@
|
||||
/* Normalizing */
|
||||
* {
|
||||
/* Normalizing */
|
||||
/* margin: 0; */
|
||||
/* padding: 0; */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@ -20,12 +20,12 @@ img.circle {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transition: .5s ease;
|
||||
transition: 0.5s ease;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.cover_container .download_overlay {
|
||||
transition: .5s ease;
|
||||
transition: 0.5s ease;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -44,7 +44,7 @@ img.circle {
|
||||
}
|
||||
|
||||
.cover_container:hover .coverart {
|
||||
opacity: 0.75
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.cover_container:hover .download_overlay {
|
||||
@ -66,7 +66,8 @@ table {
|
||||
-webkit-border-vertical-spacing: 0px;
|
||||
}
|
||||
|
||||
table td, table th {
|
||||
table td,
|
||||
table th {
|
||||
padding: 4px 12px 4px 5px;
|
||||
vertical-align: middle;
|
||||
border: 0px black solid;
|
||||
@ -80,7 +81,7 @@ table tr:nth-child(even) {
|
||||
background-color: var(--secondary-background);
|
||||
border: 0px black solid;
|
||||
}
|
||||
th{
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -105,7 +106,7 @@ p,
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.inline-flex .right{
|
||||
.inline-flex .right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@ -155,9 +156,9 @@ button.with_icon i {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="number"] {
|
||||
input[type='text'],
|
||||
input[type='password'],
|
||||
input[type='number'] {
|
||||
width: calc(100% - 16px);
|
||||
border: 0px solid black;
|
||||
line-height: 36px;
|
||||
@ -168,7 +169,7 @@ input[type="number"] {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
select{
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
@ -191,7 +192,7 @@ input[type='checkbox'] {
|
||||
appearance: none;
|
||||
background-color: none;
|
||||
border: 2px solid black;
|
||||
opacity: .50;
|
||||
opacity: 0.5;
|
||||
border-radius: 2px;
|
||||
padding: 7px;
|
||||
margin: 3px;
|
||||
@ -230,13 +231,23 @@ input[type='checkbox']:checked {
|
||||
.tab {
|
||||
margin: 16px 0px;
|
||||
}
|
||||
th.sortable{
|
||||
th.sortable {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
th.sort-asc:after {content: "\25b2";font-size: 0.7em;padding-left: 3px;line-height: 0.7em;}
|
||||
th.sort-desc:after {content: "\25bc";font-size: 0.7em;padding-left: 3px;line-height: 0.7em;}
|
||||
.fab{
|
||||
th.sort-asc:after {
|
||||
content: '\25b2';
|
||||
font-size: 0.7em;
|
||||
padding-left: 3px;
|
||||
line-height: 0.7em;
|
||||
}
|
||||
th.sort-desc:after {
|
||||
content: '\25bc';
|
||||
font-size: 0.7em;
|
||||
padding-left: 3px;
|
||||
line-height: 0.7em;
|
||||
}
|
||||
.fab {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 28px;
|
||||
@ -245,7 +256,7 @@ th.sort-desc:after {content: "\25bc";font-size: 0.7em;padding-left: 3px;line-hei
|
||||
color: var(--accent-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.fab i{
|
||||
.fab i {
|
||||
font-size: 24px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
5
public/css/modules/home-tab.css
Normal file
5
public/css/modules/home-tab.css
Normal file
@ -0,0 +1,5 @@
|
||||
.top-tracks-position {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
@ -1,4 +1,31 @@
|
||||
/* Settings */
|
||||
#settings_heading {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
#settings_picture {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
#logged_in_info {
|
||||
height: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#logged_in_info.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#log_info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#open_login_prompt {
|
||||
margin: 8px 0px;
|
||||
}
|
||||
@ -18,7 +45,15 @@
|
||||
padding: 6px 0px;
|
||||
}
|
||||
|
||||
#logged_in_info {
|
||||
display: none;
|
||||
margin-bottom: 12px;
|
||||
.settings_group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-top: 1px solid #8f8f8f; /* Need less opacity */
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.settings_group > * {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@ -16,3 +16,4 @@
|
||||
@import './modules/download-tab.css';
|
||||
@import './modules/track-preview.css';
|
||||
@import './modules/tracklist-tab.css';
|
||||
@import './modules/home-tab.css';
|
||||
|
||||
@ -253,6 +253,7 @@ <h1>Home</h1>
|
||||
<h2>Top Tracks</h2>
|
||||
<table>
|
||||
<tr v-for="track in tracks" class="track_row">
|
||||
<td class="top-tracks-position" :class="{ first: track.position === 1 }">{{ track.position }}</td>
|
||||
<td style="width: 48px; text-align: center;">
|
||||
<a href="#" @click="playPausePreview" :class="'rounded' + (track.preview ? ' single-cover' : '')"
|
||||
:data-preview="track.preview"><i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave"
|
||||
@ -275,8 +276,7 @@ <h2>Top Tracks</h2>
|
||||
<div v-if="albums.length">
|
||||
<h2>Top Albums</h2>
|
||||
<div class="release_grid">
|
||||
<div v-for="release in albums" class="release clickable" @click="albumView"
|
||||
:data-id="release.id">
|
||||
<div v-for="release in albums" class="release clickable" @click="albumView" :data-id="release.id">
|
||||
<div class="cover_container">
|
||||
<img class="rounded coverart" :src="release.cover_medium">
|
||||
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
||||
@ -291,8 +291,7 @@ <h2>Top Albums</h2>
|
||||
<div v-if="artists.length">
|
||||
<h2>Top Artists</h2>
|
||||
<div class="release_grid">
|
||||
<div v-for="release in artists" class="release clickable" @click="artistView"
|
||||
:data-id="release.id">
|
||||
<div v-for="release in artists" class="release clickable" @click="artistView" :data-id="release.id">
|
||||
<div class="cover_container">
|
||||
<img class="circle coverart" :src="release.picture_medium">
|
||||
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
||||
@ -306,8 +305,7 @@ <h2>Top Artists</h2>
|
||||
<div v-if="playlists.length">
|
||||
<h2>Top Playlists</h2>
|
||||
<div class="release_grid">
|
||||
<div v-for="release in playlists" class="release clickable" @click="playlistView"
|
||||
:data-id="release.id">
|
||||
<div v-for="release in playlists" class="release clickable" @click="playlistView" :data-id="release.id">
|
||||
<div class="cover_container">
|
||||
<img class="rounded coverart" :src="release.picture_medium">
|
||||
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
||||
@ -381,76 +379,96 @@ <h2>{{ subtitle }}</h2>
|
||||
</div>
|
||||
|
||||
<div id="settings_tab" class="main_tabcontent fixed_footer">
|
||||
<h1>Settings</h1>
|
||||
<div id="logged_in_info" class="inline-flex">
|
||||
<img id="settings_picture" src="" alt="Profile Picture" class="circle"
|
||||
style="width: 125px;height:125px; margin-right: 12px;" />
|
||||
<div>
|
||||
<p>You are logged in as <b id="settings_username"></b></p>
|
||||
<h2 id="settings_heading">Settings</h2>
|
||||
|
||||
<div id="logged_in_info">
|
||||
<img id="settings_picture" src="" alt="Profile Picture" class="circle" />
|
||||
<p>You are logged in as <strong id="settings_username"></strong></p>
|
||||
<button id="settings_btn_logout" @click="logout">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings_group">
|
||||
<h3>ARL</h3>
|
||||
<div class="inline-flex">
|
||||
<input autocomplete="off" type="password" id="login_input_arl" ref="loginInput" placeholder="ARL" />
|
||||
<button id="settings_btn_copyArl" @click="copyARLtoClipboard"><i
|
||||
class="material-icons">assignment</i></button>
|
||||
<button id="settings_btn_copyArl" @click="copyARLtoClipboard">
|
||||
<i class="material-icons">assignment</i>
|
||||
</button>
|
||||
</div>
|
||||
<p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I
|
||||
get my own ARL?</a></p>
|
||||
<p><button id="settings_btn_updateArl" @click="login" style="width:100%;">Update ARL</button></p>
|
||||
<div id="settings_generic_tab">
|
||||
<div class="input_group">
|
||||
<p>Download Path</p>
|
||||
<a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">
|
||||
How do I get my own ARL?
|
||||
</a>
|
||||
<button id="settings_btn_updateArl" @click="login" style="width:100%;">Update ARL</button>
|
||||
</div>
|
||||
|
||||
<div class="settings_group">
|
||||
<h3>Download Path</h3>
|
||||
<input type="text" v-model="settings.downloadLocation">
|
||||
</div>
|
||||
<div class="input_group">
|
||||
|
||||
<div class="settings_group">
|
||||
<h3>Templates</h3>
|
||||
|
||||
<p>Trackname template</p>
|
||||
<input type="text" v-model="settings.tracknameTemplate">
|
||||
</div>
|
||||
<div class="input_group">
|
||||
|
||||
<p>Album track template</p>
|
||||
<input type="text" v-model="settings.albumTracknameTemplate">
|
||||
</div>
|
||||
<div class="input_group">
|
||||
|
||||
<p>Playlist track template</p>
|
||||
<input type="text" v-model="settings.playlistTracknameTemplate">
|
||||
</div>
|
||||
<div class="input_group">
|
||||
<p>Create folder for playlist</p>
|
||||
<input type="checkbox" v-model="settings.createPlaylistFolder">
|
||||
</div>
|
||||
<div class="input_group" v-if="settings.createPlaylistFolder">
|
||||
|
||||
<div class="settings_group">
|
||||
<h3>Folders</h3>
|
||||
|
||||
|
||||
<label><input type="checkbox" v-model="settings.createPlaylistFolder">Create folder for playlist</label>
|
||||
|
||||
<div v-if="settings.createPlaylistFolder">
|
||||
<p>Playlist folder template</p>
|
||||
<input type="text" v-model="settings.playlistNameTemplate">
|
||||
</div>
|
||||
<div class="input_group">
|
||||
|
||||
<div>
|
||||
<p>Create folder for artist</p>
|
||||
<input type="checkbox" v-model="settings.createArtistFolder">
|
||||
</div>
|
||||
<div class="input_group" v-if="settings.createArtistFolder">
|
||||
|
||||
<div v-if="settings.createArtistFolder">
|
||||
<p>Artist folder template</p>
|
||||
<input type="text" v-model="settings.artistNameTemplate">
|
||||
</div>
|
||||
<div class="input_group">
|
||||
|
||||
<div>
|
||||
<p>Create folder for album</p>
|
||||
<input type="checkbox" v-model="settings.createAlbumFolder">
|
||||
</div>
|
||||
<div class="input_group" v-if="settings.createAlbumFolder">
|
||||
|
||||
<div v-if="settings.createAlbumFolder">
|
||||
<p>Album folder template</p>
|
||||
<input type="text" v-model="settings.albumNameTemplate">
|
||||
</div>
|
||||
<div class="input_group">
|
||||
|
||||
<div>
|
||||
<p>Create folder for CDs</p>
|
||||
<input type="checkbox" v-model="settings.createCDFolder">
|
||||
</div>
|
||||
<div class="input_group">
|
||||
|
||||
<div>
|
||||
<p>Create folder structure for playlists</p>
|
||||
<input type="checkbox" v-model="settings.createStructurePlaylist">
|
||||
</div>
|
||||
<div class="input_group">
|
||||
|
||||
<div>
|
||||
<p>Create folder structure for singles</p>
|
||||
<input type="checkbox" v-model="settings.createSingleFolder">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="settings_generic_tab">
|
||||
|
||||
|
||||
<div class="input_group">
|
||||
<p>Pad tracks</p>
|
||||
<input type="checkbox" v-model="settings.padTracks">
|
||||
|
||||
@ -33,7 +33,8 @@ socket.on('logged_in', function (data) {
|
||||
'src',
|
||||
`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
|
||||
)
|
||||
$('#logged_in_info').show()
|
||||
// $('#logged_in_info').show()
|
||||
document.getElementById('logged_in_info').classList.remove('hide')
|
||||
}
|
||||
break
|
||||
case 2:
|
||||
@ -44,7 +45,8 @@ socket.on('logged_in', function (data) {
|
||||
'src',
|
||||
`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
|
||||
)
|
||||
$('#logged_in_info').show()
|
||||
// $('#logged_in_info').show()
|
||||
document.getElementById('logged_in_info').classList.remove('hide')
|
||||
}
|
||||
break
|
||||
case 0:
|
||||
@ -52,7 +54,8 @@ socket.on('logged_in', function (data) {
|
||||
localStorage.removeItem('arl')
|
||||
$('#login_input_arl').val('')
|
||||
$('#open_login_prompt').show()
|
||||
$('#logged_in_info').hide()
|
||||
document.getElementById('logged_in_info').classList.add('hide')
|
||||
// $('#logged_in_info').hide()
|
||||
$('#settings_username').text('Not Logged')
|
||||
$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
|
||||
break
|
||||
@ -64,7 +67,8 @@ socket.on('logged_out', function () {
|
||||
localStorage.removeItem('arl')
|
||||
$('#login_input_arl').val('')
|
||||
$('#open_login_prompt').show()
|
||||
$('#logged_in_info').hide()
|
||||
document.getElementById('logged_in_info').classList.add('hide')
|
||||
// $('#logged_in_info').hide()
|
||||
$('#settings_username').text('Not Logged')
|
||||
$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
|
||||
})
|
||||
|
||||
@ -23,12 +23,11 @@ const HomeTab = new Vue({
|
||||
previewMouseLeave: TrackPreview.previewMouseLeave,
|
||||
numberWithDots: Utils.numberWithDots,
|
||||
convertDuration: Utils.convertDuration,
|
||||
addToQueue: function (e) {
|
||||
addToQueue(e) {
|
||||
e.stopPropagation()
|
||||
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
|
||||
},
|
||||
openQualityModal: function (e) {
|
||||
e.preventDefault()
|
||||
openQualityModal(e) {
|
||||
QualityModal.open(e.currentTarget.dataset.link)
|
||||
},
|
||||
initHome(data) {
|
||||
|
||||
@ -15,6 +15,9 @@ window.windows_stack = []
|
||||
/* ===== Locals ===== */
|
||||
let currentStack = {}
|
||||
|
||||
// Exporting this function out of the default export
|
||||
// because it's used in components that are needed
|
||||
// in this file too
|
||||
export function artistView(ev) {
|
||||
let id = ev.currentTarget.dataset.id
|
||||
ArtistTab.reset()
|
||||
@ -22,6 +25,9 @@ export function artistView(ev) {
|
||||
showTab('artist', id)
|
||||
}
|
||||
|
||||
// Exporting this function out of the default export
|
||||
// because it's used in components that are needed
|
||||
// in this file too
|
||||
export function albumView(ev) {
|
||||
let id = ev.currentTarget.dataset.id
|
||||
TracklistTab.reset()
|
||||
@ -29,6 +35,9 @@ export function albumView(ev) {
|
||||
showTab('album', id)
|
||||
}
|
||||
|
||||
// Exporting this function out of the default export
|
||||
// because it's used in components that are needed
|
||||
// in this file too
|
||||
export function playlistView(ev) {
|
||||
let id = ev.currentTarget.dataset.id
|
||||
TracklistTab.reset()
|
||||
@ -145,8 +154,6 @@ function changeTab(sidebarEl, section, tabName) {
|
||||
search_selected = tabName
|
||||
}
|
||||
|
||||
// window[section + '_selected'] = tabName
|
||||
|
||||
// Not choosing .currentTarget beacuse the event
|
||||
// is delegated
|
||||
sidebarEl.classList.add('active')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user