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

feat: added keybinding to toggle download bar; style: search bar

Browse Source
This commit is contained in:
Roberto Tonino 2020-09-26 21:48:55 +02:00
parent acdd702c66
commit 7ce1ddb6dd
7 changed files with 78 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -15,6 +15,7 @@ You can find more informations about deemix at https://deemix.app/
- `CTRL+SHIFT+Backspace` deletes all the search bar content
- `CTRL+F` focuses the search bar
- `CTRL+B` toggles the download bar
- `ALT+Left` goes back to the previous page, if present (like would happen in the browser)
- `ALT+Right` goes forward to the next page, if present (like would happen in the browser)
- Custom context menu: on certain elements, like download buttons or album covers, when opening the context menu, a custom one with more options will appear instead of the default one

2
public/css/style.css
View File

File diff suppressed because one or more lines are too long

2
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

6
src/App.vue
View File

@ -7,7 +7,7 @@
<TheSearchBar />
<TheContent />
</div>
<TheDownloadBar class="downlaods" />
<TheDownloadBar />
</div>
<BaseLoadingPlaceholder id="start_app_placeholder" text="Connecting to the server..." />
@ -30,10 +30,6 @@
flex-direction: column;
margin-left: 48px;
}
.downlaods {
flex-basis: 32px;
}
</style>
<script>

59
src/components/TheSearchBar.vue
View File

@ -19,6 +19,62 @@
</header>
</template>
<style lang="scss">
$icon-dimension: 2rem;
$searchbar-height: 45px;
#search {
background-color: var(--secondary-background);
padding: 0 1em;
display: flex;
align-items: center;
border: 1px solid transparent;
transition: border 200ms ease-in-out;
border-radius: 15px;
margin: 10px 10px 20px 10px;
&:focus-within {
border: 1px solid var(--foreground);
}
.search__icon {
width: $icon-dimension;
height: $icon-dimension;
i {
font-size: $icon-dimension;
color: var(--foreground);
}
}
#searchbar {
height: $searchbar-height;
padding-left: 0.5em;
border: 0px;
border-radius: 0px;
background-color: var(--secondary-background);
color: var(--foreground);
font-size: 1.2rem;
font-family: 'Open Sans';
font-weight: 300;
margin-bottom: 0;
&:focus {
outline: none;
}
// Removing Chrome autofill color
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;
box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;
}
}
}
</style>
<script>
import { isValidURL } from '@/utils/utils'
import { sendAddToQueue } from '@/utils/downloads'
@ -112,5 +168,4 @@ export default {
}
</script>
<style>
</style>

32
src/components/downloads/TheDownloadBar.vue
View File

@ -5,7 +5,7 @@
@transitionend="$refs.container.style.transition = ''"
ref="container"
:data-label="$t('downloads')"
aria-label="downloads"
aria-label="downloads"
>
<div id="download_tab_drag_handler" @mousedown.prevent="startDrag" ref="dragHandler"></div>
<i
@ -17,7 +17,6 @@
></i>
<div id="queue_buttons">
<i
id="open_downloads_folder"
v-if="clientMode"
class="material-icons download_bar_icon"
:title="$t('globals.open_downloads_folder')"
@ -25,20 +24,10 @@
>
folder_open
</i>
<i
id="clean_queue"
class="material-icons download_bar_icon"
@click="cleanQueue"
:title="$t('globals.clean_queue_hint')"
>
<i class="material-icons download_bar_icon" @click="cleanQueue" :title="$t('globals.clean_queue_hint')">
clear_all
</i>
<i
id="cancel_queue"
class="material-icons download_bar_icon"
@click="cancelQueue"
:title="$t('globals.cancel_queue_hint')"
>
<i class="material-icons download_bar_icon" @click="cancelQueue" :title="$t('globals.cancel_queue_hint')">
delete_sweep
</i>
</div>
@ -88,6 +77,19 @@ export default {
clientMode: 'getClientMode'
})
},
created() {
const checkIfToggleBar = keyEvent => {
if (!(keyEvent.ctrlKey && keyEvent.key === 'b')) return
this.toggleDownloadTab()
}
document.addEventListener('keyup', checkIfToggleBar)
this.$on('hook:destroyed', () => {
document.removeEventListener('keyup', checkIfToggleBar)
})
},
mounted() {
socket.on('startDownload', this.startDownload)
socket.on('startConversion', this.startConversion)
@ -264,7 +266,7 @@ export default {
this.queueComplete = []
},
toggleDownloadTab(clickEvent) {
toggleDownloadTab() {
this.setTabWidth()
this.$refs.container.style.transition = 'all 250ms ease-in-out'

49
src/styles/scss/_middle-section.scss
View File

@ -1,58 +1,9 @@
/* Center section */
$icon-dimension: 2rem;
$searchbar-height: calc(2rem + 1em);
#search {
background-color: var(--secondary-background);
width: 100%;
padding: 0 1em;
margin-bottom: 20px;
margin-right: 32px;
display: flex;
align-items: center;
border: 1px solid transparent;
transition: border 200ms ease-in-out;
.search__icon {
width: $icon-dimension;
height: $icon-dimension;
i {
font-size: $icon-dimension;
color: var(--foreground);
@include remove-selection-background;
}
}
&:focus-within {
border: 1px solid var(--foreground);
}
#searchbar {
height: $searchbar-height;
padding-left: 0.5em;
border: 0px;
border-radius: 0px;
background-color: var(--secondary-background);
color: var(--foreground);
font-size: 2rem;
font-family: 'Open Sans';
font-weight: 300;
&:focus {
outline: none;
}
// Removing Chrome autofill color
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;
box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;
}
}
}
#container {