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

style: unified accent color and changed its name to primary-color; style: back button; style: added btn css component

Browse Source
This commit is contained in:
Roberto Tonino
2020-10-10 20:03:19 +02:00
parent 8d51cfa7f7
commit c1c585de3c
22 changed files with 156 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/downloads/QueueItem.vue
View File

@@ -171,7 +171,7 @@ export default {
},
barStyle() {
let width = 0
let backgroundColor = 'var(--accent-color)'
let backgroundColor = 'var(--primary-color)'
if (this.hasFails) {
// Orange

35
src/components/globals/BackButton.vue
View File

@@ -1,34 +1,17 @@
<template>
<button class="top-back-button" @click="$router.back()">
<i class="material-icons mirrored md-36">forward</i>
<button
class="btn-primary border-transparent border-solid absolute flex items-center justify-center p-1 m-0 w-16 h-16 rounded-full"
@click="$router.back()"
>
<i class="material-icons mirrored text-4xl text-white">forward</i>
</button>
</template>
<style lang="scss" scoped>
$button-dimension: 4rem;
$button-separator: 10px;
<style scoped>
button {
top: 10px;
left: 10px;
.top-back-button {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: $button-separator;
left: $button-separator;
min-width: unset;
width: $button-dimension;
height: $button-dimension;
background: var(--secondary-background);
border-radius: 50%;
padding: 0.25rem;
margin: 0;
transition: background 200ms ease-in-out;
&:hover {
background: var(--accent-color);
}
}
</style>

4
src/components/globals/ConfirmModal.vue
View File

@@ -4,8 +4,8 @@
<h1 style="flex: 1">{{ titleText }}</h1>
<div class="confirm-area">
<button class="no-hover"></button>
<button class="btn-red no-hover"></button>
<button class="no-hover">Text</button>
<button class="no-hover bg-red-600">Text</button>
</div>
</div>

31
src/components/globals/TheContextMenu.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="context-menu" v-show="menuOpen" ref="contextMenu" :style="{ top: yPos, left: xPos }">
<button
class="menu-option"
class="btn menu-option"
v-for="option of sortedOptions"
:key="option.label"
v-show="option.show"
@@ -252,9 +252,9 @@ export default {
// Resetting buttons only for this component (because the style is scoped)
button {
color: var(--accent-text);
color: var(--primary-text);
color: unset;
background-color: var(--accent-color);
background-color: var(--primary-color);
background-color: unset;
min-width: unset;
position: unset;
@@ -274,31 +274,6 @@ button {
outline: none;
}
&[disabled] {
background-color: unset;
color: unset;
opacity: unset;
}
&.selective {
background-color: unset;
color: unset;
&.active {
background-color: unset;
color: unset;
}
}
&.with_icon {
display: unset;
align-items: unset;
i {
margin-left: unset;
}
}
&:active {
background-color: unset;
transform: unset;

24
src/components/globals/TheQualityModal.vue
View File

@@ -1,17 +1,23 @@
<template>
<div id="modal_quality" class="smallmodal" v-show="open" @click="tryToDownloadTrack($event)" ref="modal">
<div class="smallmodal-content">
<button class="quality-button" data-quality-value="9">{{ $t('globals.download', {thing: 'FLAC'}) }}</button>
<button class="quality-button" data-quality-value="3">{{ $t('globals.download', {thing: 'MP3 320kbps'}) }}</button>
<button class="quality-button" data-quality-value="1">{{ $t('globals.download', {thing: 'MP3 128kbps'}) }}</button>
<button class="quality-button" data-quality-value="15">
{{ $t('globals.download', {thing: '360 Reality Audio [HQ]'}) }}
<button class="btn btn-primary quality-button" data-quality-value="9">
{{ $t('globals.download', { thing: 'FLAC' }) }}
</button>
<button class="quality-button" data-quality-value="14">
{{ $t('globals.download', {thing: '360 Reality Audio [MQ]'}) }}
<button class="btn btn-primary quality-button" data-quality-value="3">
{{ $t('globals.download', { thing: 'MP3 320kbps' }) }}
</button>
<button class="quality-button" data-quality-value="13">
{{ $t('globals.download', {thing: '360 Reality Audio [LQ]'}) }}
<button class="btn btn-primary quality-button" data-quality-value="1">
{{ $t('globals.download', { thing: 'MP3 128kbps' }) }}
</button>
<button class="btn btn-primary quality-button" data-quality-value="15">
{{ $t('globals.download', { thing: '360 Reality Audio [HQ]' }) }}
</button>
<button class="btn btn-primary quality-button" data-quality-value="14">
{{ $t('globals.download', { thing: '360 Reality Audio [MQ]' }) }}
</button>
<button class="btn btn-primary quality-button" data-quality-value="13">
{{ $t('globals.download', { thing: '360 Reality Audio [LQ]' }) }}
</button>
</div>
</div>

2
src/components/pages/Artist.vue
View File

@@ -19,7 +19,7 @@
<button
v-for="(item, name) in body"
:key="name"
class="selective"
class="btn btn-primary"
:class="{ active: name === currentTab }"
:href="'#artist_' + name"
@click="changeTab(name)"

4
src/components/pages/Charts.vue
View File

@@ -35,8 +35,8 @@
</div>
</div>
<div v-else id="charts_table">
<button @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button>
<button @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
<button class="btn btn-primary" @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button>
<button class="btn btn-primary" @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
{{ $t('charts.download') }}
</button>
<table class="table table--charts">

2
src/components/pages/Favorites.vue
View File

@@ -25,7 +25,7 @@
</div>
</div>
<button v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType">
<button class="btn btn-primary" v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType">
{{ $t('globals.downloadAll', { thing: $tc(`globals.listTabs.${activeTab}`, 2) }) }}
</button>

19
src/components/pages/Settings.vue
View File

@@ -9,7 +9,9 @@
<strong place="username" id="settings_username" ref="username">{{ user.name || 'not logged' }}</strong>
</i18n>
<button id="settings_btn_logout" @click="logout">{{ $t('settings.login.logout') }}</button>
<button class="btn btn-primary" id="settings_btn_logout" @click="logout">
{{ $t('settings.login.logout') }}
</button>
<select v-if="accounts.length" id="family_account" v-model="accountNum" @change="changeAccount">
<option v-for="(account, i) in accounts" :key="account" :value="i.toString()">{{ account.BLOG_NAME }}</option>
@@ -29,7 +31,7 @@
ref="loginInput"
placeholder="ARL"
/>
<button id="settings_btn_copyArl" class="only_icon" @click="copyARLtoClipboard">
<button id="settings_btn_copyArl" class="btn btn-primary btn-only-icon ml-2" @click="copyARLtoClipboard">
<i class="material-icons">assignment</i>
</button>
</div>
@@ -39,7 +41,7 @@
<a id="settings_btn_applogin" v-if="clientMode" href="#" @click="appLogin">
{{ $t('settings.login.login') }}
</a>
<button id="settings_btn_updateArl" @click="login" style="width: 100%">
<button class="btn btn-primary" id="settings_btn_updateArl" @click="login" style="width: 100%">
{{ $t('settings.login.arl.update') }}
</button>
</div>
@@ -78,7 +80,12 @@
</h3>
<div class="inline-flex">
<input autocomplete="off" type="text" v-model="settings.downloadLocation" />
<button id="select_downloads_folder" v-if="clientMode" class="only_icon" @click="selectDownloadFolder">
<button
id="select_downloads_folder"
v-if="clientMode"
class="btn btn-primary btn-only-icon ml-2"
@click="selectDownloadFolder"
>
<i class="material-icons">folder</i>
</button>
</div>
@@ -611,8 +618,8 @@
</div>
<footer>
<button @click="resetSettings">{{ $t('settings.reset') }}</button>
<button @click="saveSettings">{{ $t('settings.save') }}</button>
<button class="btn btn-primary mr-2" @click="resetSettings">{{ $t('settings.reset') }}</button>
<button class="btn btn-primary" @click="saveSettings">{{ $t('settings.save') }}</button>
</footer>
</div>
</template>

6
src/components/pages/Tracklist.vue
View File

@@ -134,11 +134,11 @@
</table>
<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px">{{ label }}</span>
<footer>
<button @click.stop="addToQueue" :data-link="link">
<button class="btn btn-primary mr-2" @click.stop="addToQueue" :data-link="link">
{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
</button>
<button class="with_icon" @click.stop="addToQueue" :data-link="selectedLinks()">
{{ $t('tracklist.downloadSelection') }}<i class="material-icons">file_download</i>
<button class="btn btn-primary flex items-center" @click.stop="addToQueue" :data-link="selectedLinks()">
{{ $t('tracklist.downloadSelection') }}<i class="material-icons ml-2">file_download</i>
</button>
</footer>
</div>