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

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

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+SHIFT+Backspace` deletes all the search bar content
- `CTRL+F` focuses the search bar - `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+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) - `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 - 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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

@ -19,6 +19,62 @@
</header> </header>
</template> </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> <script>
import { isValidURL } from '@/utils/utils' import { isValidURL } from '@/utils/utils'
import { sendAddToQueue } from '@/utils/downloads' import { sendAddToQueue } from '@/utils/downloads'
@ -112,5 +168,4 @@ export default {
} }
</script> </script>
<style>
</style>

View File

@ -17,7 +17,6 @@
></i> ></i>
<div id="queue_buttons"> <div id="queue_buttons">
<i <i
id="open_downloads_folder"
v-if="clientMode" v-if="clientMode"
class="material-icons download_bar_icon" class="material-icons download_bar_icon"
:title="$t('globals.open_downloads_folder')" :title="$t('globals.open_downloads_folder')"
@ -25,20 +24,10 @@
> >
folder_open folder_open
</i> </i>
<i <i class="material-icons download_bar_icon" @click="cleanQueue" :title="$t('globals.clean_queue_hint')">
id="clean_queue"
class="material-icons download_bar_icon"
@click="cleanQueue"
:title="$t('globals.clean_queue_hint')"
>
clear_all clear_all
</i> </i>
<i <i class="material-icons download_bar_icon" @click="cancelQueue" :title="$t('globals.cancel_queue_hint')">
id="cancel_queue"
class="material-icons download_bar_icon"
@click="cancelQueue"
:title="$t('globals.cancel_queue_hint')"
>
delete_sweep delete_sweep
</i> </i>
</div> </div>
@ -88,6 +77,19 @@ export default {
clientMode: 'getClientMode' 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() { mounted() {
socket.on('startDownload', this.startDownload) socket.on('startDownload', this.startDownload)
socket.on('startConversion', this.startConversion) socket.on('startConversion', this.startConversion)
@ -264,7 +266,7 @@ export default {
this.queueComplete = [] this.queueComplete = []
}, },
toggleDownloadTab(clickEvent) { toggleDownloadTab() {
this.setTabWidth() this.setTabWidth()
this.$refs.container.style.transition = 'all 250ms ease-in-out' this.$refs.container.style.transition = 'all 250ms ease-in-out'

View File

@ -1,58 +1,9 @@
/* Center section */
$icon-dimension: 2rem;
$searchbar-height: calc(2rem + 1em);
#search { #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 { .search__icon {
width: $icon-dimension;
height: $icon-dimension;
i { i {
font-size: $icon-dimension;
color: var(--foreground);
@include remove-selection-background; @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 { #container {