diff --git a/frontend/src/assets/buttons.css b/frontend/src/assets/buttons.css index 95d4a37..7d85266 100644 --- a/frontend/src/assets/buttons.css +++ b/frontend/src/assets/buttons.css @@ -63,4 +63,9 @@ &.small-padding { padding: 0.25em; } + + &[disabled] { + opacity: 40%; + pointer-events: none; + } } diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index 392cdb6..6cd37c1 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -8,6 +8,7 @@ @import './popup.css'; @import './buttons.css'; @import './tags.css'; +@import './progress-bar.css'; @import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,600;1,14..32,600&display=swap'); diff --git a/frontend/src/assets/progress-bar.css b/frontend/src/assets/progress-bar.css new file mode 100644 index 0000000..656105c --- /dev/null +++ b/frontend/src/assets/progress-bar.css @@ -0,0 +1,23 @@ +.progress-bar { + height: 5px; + background-color: var(--accent-100); + overflow: hidden; + position: relative; +} + +.progress-bar span { + width: 100px; + position: absolute; + height: 5px; + background-color: var(--accent-800); + animation: progress-bar-animation 1s infinite linear; +} + +@keyframes progress-bar-animation { + 0% { + left: -100px; + } + 100% { + left: 140%; + } +} diff --git a/frontend/src/components/packages/PackagesList.vue b/frontend/src/components/packages/PackagesList.vue index 461407e..00fe045 100644 --- a/frontend/src/components/packages/PackagesList.vue +++ b/frontend/src/components/packages/PackagesList.vue @@ -47,13 +47,25 @@ Component wraps functionality for displaying and working with rdfm packages.
+ + @@ -178,6 +190,7 @@ export default { // ======================= // Add package functionality // ======================= + const uploadInProgress = ref(false); const uploadedPackageFile: Ref