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

README.md

@@ -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

src/App.vue

@@ -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>

src/components/TheSearchBar.vue

@@ -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>

src/components/downloads/TheDownloadBar.vue

@@ -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
+			<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
 			</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
 			</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'

src/styles/scss/_middle-section.scss

@@ -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 {