JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: added dropzone styling for object browser

Browse Source 
Added greyed out dropzone styling for object browser.

Issue:
https://github.com/storj/storj/issues/5970

Change-Id: I9770a9d3fb90f6aaf659885f3c3cafed7af89e1d
This commit is contained in:
Vitalii 2023-06-19 17:03:14 +03:00
parent 98f4f249b2
commit 9374edfac9
2 changed files with 86 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
web/satellite/src/components/browser/Dropzone.vue Normal file
View File

@ -0,0 +1,62 @@
// Copyright (C) 2023 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="dropzone" @mouseout="close" @mouseleave="close" @dragleave.self="close">
<div class="dropzone__message">
<p class="dropzone__message__text">
Drop your files to put it into the “{{ bucket }}” bucket.
</p>
</div>
<p class="dropzone__info">Drag and drop files here to upload</p>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
bucket: string
close: () => void
}>();
</script>
<style scoped lang="scss">
.dropzone {
z-index: 1;
position: fixed;
inset: 0;
background: rgb(0 0 0 / 35%);
border: 1px dashed var(--c-white);
display: flex;
align-items: center;
justify-content: center;
&__message {
padding: 10px 24px;
background: var(--c-green-1);
border: 1px solid var(--c-green-5);
border-radius: 8px;
position: absolute;
top: 24px;
pointer-events: none;
&__text {
font-family: 'font_medium', sans-serif;
font-size: 14px;
line-height: 20px;
color: var(--c-green-5);
text-align: center;
}
}
&__info {
font-family: 'font_bold', sans-serif;
font-size: 40px;
line-height: 50px;
text-align: center;
max-width: 380px;
color: var(--c-white);
text-shadow: 0 7px 20px 0 rgb(0 0 0 / 15%);
pointer-events: none;
}
}
</style>

26
web/satellite/src/components/browser/FileBrowser.vue
View File

@ -9,8 +9,10 @@
v-cloak
class="div-responsive"
@drop.prevent="upload"
@dragover.prevent
@dragover.prevent="showDropzone"
>
<Dropzone v-if="isOver" :bucket="bucketName" :close="hideDropzone" />
<bread-crumbs @onUpdate="onRouteChange" @bucketClick="goToBuckets" />
<div class="tile-action-bar">
@ -219,6 +221,7 @@ import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
import VTable from '@/components/common/VTable.vue';
import MultiplePassphraseBanner from '@/components/browser/MultiplePassphrasesBanner.vue';
import UpEntry from '@/components/browser/UpEntry.vue';
import Dropzone from '@/components/browser/Dropzone.vue';
import FileIcon from '@/../static/images/objects/file.svg';
import BlackArrowExpand from '@/../static/images/common/BlackArrowExpand.svg';
@ -239,6 +242,7 @@ const fileInput = ref<HTMLInputElement>();
const fetchingFilesSpinner = ref<boolean>(false);
const isUploadDropDownShown = ref<boolean>(false);
const isBannerShown = ref<boolean>(true);
const isOver = ref<boolean>(false);
/**
* Retrieve the pathMatch from the current route.
*/
@ -442,8 +446,12 @@ function filename(file: BrowserObject): string {
* Upload the current selected or dragged-and-dropped file.
*/
async function upload(e: Event): Promise<void> {
if (isOver.value) {
isOver.value = false;
}
await obStore.upload({ e });
await analytics.eventTriggered(AnalyticsEvent.OBJECT_UPLOADED);
analytics.eventTriggered(AnalyticsEvent.OBJECT_UPLOADED);
const target = e.target as HTMLInputElement;
target.value = '';
}
@ -494,6 +502,20 @@ function toggleUploadDropdown(): void {
isUploadDropDownShown.value = !isUploadDropDownShown.value;
}
/**
* Makes dropzone visible.
*/
function showDropzone(): void {
isOver.value = true;
}
/**
* Hides dropzone.
*/
function hideDropzone(): void {
isOver.value = false;
}
/**
* Closes upload options dropdown.
*/