Skip to content

Commit

Permalink
[#70187] frontend: implement download dropdown for packages
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaciejWas
MaciejWas committed Dec 13, 2024
1 parent 5997c5a commit 47da626
Show file tree
Hide file tree
Showing 4 changed files with 170 additions and 26 deletions.
4 changes: 2 additions & 2 deletions frontend/src/components/Dropdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,12 +156,12 @@ td {
transform: scale(1);
}
tbody tr:hover {
.table-holder tbody tr:hover {
background: var(--gray-400);
cursor: pointer;
}
tbody tr:active {
.table-holder tbody tr:active {
background: var(--gray-500);
}
Expand Down
188 changes: 166 additions & 22 deletions frontend/src/components/packages/PackagesList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,19 +138,67 @@ Component wraps functionality for displaying and working with rdfm packages.
<div class="value">{{ pckg.driver }}</div>
</td>
<!-- TODO: Display metadata of the package -->
<td class="entry buttons">
<button
class="action-button red"
@click="openRemovePackagePopup(pckg.id)"
>
Remove
</button>
<button
class="action-button gray"
@click="downloadPackage(pckg.id)"
>
Download
</button>
<td class="entry">
<div class="buttons">
<div class="drdn-wrapper" style="position: relative">
<button id="main-button" class="action-button gray">
Download
<span class="caret-down"> <CaretDown /> </span>
<span class="caret-up"> <CaretUp /> </span>
</button>
<div class="drdn">
<button
class="action-button gray"
@click="
(e) =>
download(pckg.id).then(() =>
(e.target as HTMLElement).blur(),
)
"
>
<svg
width="20"
height="20"
viewBox="1 1 17 17"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 13L6 9L7.0625 7.9375L9.25 10.125V3H10.75V10.125L12.9375 7.9375L14 9L10 13ZM5.49417 16C5.08139 16 4.72917 15.8531 4.4375 15.5594C4.14583 15.2656 4 14.9125 4 14.5V13H5.5V14.5H14.5V13H16V14.5C16 14.9125 15.8531 15.2656 15.5592 15.5594C15.2653 15.8531 14.9119 16 14.4992 16H5.49417Z"
/>
</svg>
Direct download
</button>
<button
class="action-button gray"
@click="
(e) =>
copyDownloadLink(pckg.id).then(() =>
(e.target as HTMLElement).blur(),
)
"
>
<svg
width="20"
height="20"
viewBox="1 1 17 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 14H6C4.89333 14 3.95 13.6095 3.17 12.8285C2.39 12.0477 2 11.1033 2 9.99521C2 8.88729 2.39 7.94444 3.17 7.16667C3.95 6.38889 4.89333 6 6 6H9V7.5H6C5.30556 7.5 4.71528 7.74306 4.22917 8.22917C3.74306 8.71528 3.5 9.30556 3.5 10C3.5 10.6944 3.74306 11.2847 4.22917 11.7708C4.71528 12.2569 5.30556 12.5 6 12.5H9V14ZM7 10.75V9.25H13V10.75H7ZM11 14V12.5H14C14.6944 12.5 15.2847 12.2569 15.7708 11.7708C16.2569 11.2847 16.5 10.6944 16.5 10C16.5 9.30556 16.2569 8.71528 15.7708 8.22917C15.2847 7.74306 14.6944 7.5 14 7.5H11V6H14C15.1067 6 16.05 6.39049 16.83 7.17146C17.61 7.95229 18 8.89674 18 10.0048C18 11.1127 17.61 12.0556 16.83 12.8333C16.05 13.6111 15.1067 14 14 14H11Z"
/>
</svg>
Copy link
</button>
</div>
</div>
<button
class="action-button red"
@click="openRemovePackagePopup(pckg.id)"
>
Remove
</button>
</div>
</td>
</tr>
</tbody>
Expand All @@ -171,12 +219,93 @@ Component wraps functionality for displaying and working with rdfm packages.
}
}

.entry.buttons {
/* Default state */
.drdn-wrapper {
user-select: none;
position: relative;
display: inline-block;

.caret-up,
.caret-down {
display: inline-block;
}

.caret-up {
display: none;
}

.drdn {
display: none;

color: var(--gray-1000);
background-color: var(--gray-100);
border: 2px solid var(--gray-400);
border-radius: 5px;

position: absolute;
top: 100%;
right: 5px;
width: max-content;
z-index: 100;

padding: 0px;
padding-top: 10px;
padding-bottom: 10px;

.action-button {
margin: 0px !important;
width: 100%;
border: 0px;
display: flex;
align-items: center;
text-align: left;
color: var(--gray-900);

&:hover {
color: var(--gray-1000);

svg {
fill: var(--gray-1000);
}
}

svg {
margin-right: 10px;
fill: var(--gray-900);
}
}
}

#main-button {
cursor: pointer;
}
}

/* Focused state */
.drdn-wrapper:focus-within {
.caret-up {
display: inline-block;
}

.caret-down {
display: none;
}

#main-button {
pointer-events: none;
cursor: pointer;
color: var(--gray-900);
}

.drdn {
display: block;
}
}

.buttons {
button {
float: right;
width: 105px;
text-align: center !important;
margin-left: 10px !important;
margin: 5px !important;
width: 130px;
}
}
</style>
Expand All @@ -195,6 +324,8 @@ import {
downloadPackageRequest,
type NewPackageData,
} from './packages';
import CaretDown from '@/images/CaretDown.vue';
import CaretUp from '@/images/CaretUp.vue';

export enum PackagePopupOpen {
AddPackage,
Expand All @@ -207,6 +338,8 @@ export default {
BlurPanel,
RemovePopup,
TitleBar,
CaretDown,
CaretUp,
},
setup() {
let intervalID: undefined | number = undefined;
Expand Down Expand Up @@ -302,15 +435,25 @@ export default {
// Download package functionality
// =======================

const downloadPackage = async (packageId: number) => {
const getPackageDownloadUrl = async (packageId: number) => {
const { success, message } = await downloadPackageRequest(packageId);
if (!success) {
if (!success || !message) {
notifications.notifyError({
headline: 'Error when downloading the package:',
msg: message || 'Could not get the download link',
});
throw new Error('Error when downloading the package');
}
window.open(message!);
return message;
};

const download = (packageId: number) =>
getPackageDownloadUrl(packageId).then((url) => window.open(url));

const copyDownloadLink = async (packageId: number) => {
const downloadUrl = await getPackageDownloadUrl(packageId);
navigator.clipboard.writeText(downloadUrl);
notifications.notifySuccess({ headline: 'Download link copied!' });
};

// =======================
Expand Down Expand Up @@ -349,7 +492,8 @@ export default {
closeAddPackagePopup,
closeRemovePackagePopup,
openAddPackagePopup,
downloadPackage,
copyDownloadLink,
download,
};
},
};
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/images/CaretDown.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="16" height="16" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3_193)">
<mask id="path-1-inside-1_3_193" fill="white">
<path
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/images/CaretUp.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="16" height="16" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_9_59)">
<path
d="M8.92891 6.66224L7.99558 5.7289L8.92891 6.66224ZM11.9912 9.73332L11.0667 10.6578L8.00442 7.59557L7.99558 7.59557L4.93333 10.6578L4.00884 9.73332L8 5.74216L8.92449 6.66666L11.9912 9.73332ZM4.93775 10.6711L4.00442 9.73774L4.93775 10.6711Z"
Expand Down

0 comments on commit 47da626

Please sign in to comment.