web/satellite: added dropzone styling for object browser
Added greyed out dropzone styling for object browser. Issue: https://github.com/storj/storj/issues/5970 Change-Id: I9770a9d3fb90f6aaf659885f3c3cafed7af89e1d
This commit is contained in:
parent
98f4f249b2
commit
9374edfac9
62
web/satellite/src/components/browser/Dropzone.vue
Normal file
62
web/satellite/src/components/browser/Dropzone.vue
Normal 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>
|
@ -9,8 +9,10 @@
|
|||||||
v-cloak
|
v-cloak
|
||||||
class="div-responsive"
|
class="div-responsive"
|
||||||
@drop.prevent="upload"
|
@drop.prevent="upload"
|
||||||
@dragover.prevent
|
@dragover.prevent="showDropzone"
|
||||||
>
|
>
|
||||||
|
<Dropzone v-if="isOver" :bucket="bucketName" :close="hideDropzone" />
|
||||||
|
|
||||||
<bread-crumbs @onUpdate="onRouteChange" @bucketClick="goToBuckets" />
|
<bread-crumbs @onUpdate="onRouteChange" @bucketClick="goToBuckets" />
|
||||||
|
|
||||||
<div class="tile-action-bar">
|
<div class="tile-action-bar">
|
||||||
@ -219,6 +221,7 @@ import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
|
|||||||
import VTable from '@/components/common/VTable.vue';
|
import VTable from '@/components/common/VTable.vue';
|
||||||
import MultiplePassphraseBanner from '@/components/browser/MultiplePassphrasesBanner.vue';
|
import MultiplePassphraseBanner from '@/components/browser/MultiplePassphrasesBanner.vue';
|
||||||
import UpEntry from '@/components/browser/UpEntry.vue';
|
import UpEntry from '@/components/browser/UpEntry.vue';
|
||||||
|
import Dropzone from '@/components/browser/Dropzone.vue';
|
||||||
|
|
||||||
import FileIcon from '@/../static/images/objects/file.svg';
|
import FileIcon from '@/../static/images/objects/file.svg';
|
||||||
import BlackArrowExpand from '@/../static/images/common/BlackArrowExpand.svg';
|
import BlackArrowExpand from '@/../static/images/common/BlackArrowExpand.svg';
|
||||||
@ -239,6 +242,7 @@ const fileInput = ref<HTMLInputElement>();
|
|||||||
const fetchingFilesSpinner = ref<boolean>(false);
|
const fetchingFilesSpinner = ref<boolean>(false);
|
||||||
const isUploadDropDownShown = ref<boolean>(false);
|
const isUploadDropDownShown = ref<boolean>(false);
|
||||||
const isBannerShown = ref<boolean>(true);
|
const isBannerShown = ref<boolean>(true);
|
||||||
|
const isOver = ref<boolean>(false);
|
||||||
/**
|
/**
|
||||||
* Retrieve the pathMatch from the current route.
|
* 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.
|
* Upload the current selected or dragged-and-dropped file.
|
||||||
*/
|
*/
|
||||||
async function upload(e: Event): Promise<void> {
|
async function upload(e: Event): Promise<void> {
|
||||||
|
if (isOver.value) {
|
||||||
|
isOver.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
await obStore.upload({ e });
|
await obStore.upload({ e });
|
||||||
await analytics.eventTriggered(AnalyticsEvent.OBJECT_UPLOADED);
|
analytics.eventTriggered(AnalyticsEvent.OBJECT_UPLOADED);
|
||||||
const target = e.target as HTMLInputElement;
|
const target = e.target as HTMLInputElement;
|
||||||
target.value = '';
|
target.value = '';
|
||||||
}
|
}
|
||||||
@ -494,6 +502,20 @@ function toggleUploadDropdown(): void {
|
|||||||
isUploadDropDownShown.value = !isUploadDropDownShown.value;
|
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.
|
* Closes upload options dropdown.
|
||||||
*/
|
*/
|
||||||
|
Loading…
Reference in New Issue
Block a user