web/satellite: common table component applied to file browser
Fixes https://github.com/storj/storj/issues/4991 Change-Id: I7731c0425e16aa6ef75d06be83fc74aaafd1f2ab
This commit is contained in:
Lizzy Thomson
parent
a4166548a7
commit
b7e9d04af7
@ -35,6 +35,7 @@
|
||||
"vue-chartjs": "3.5.1",
|
||||
"vue-class-component": "7.2.6",
|
||||
"vue-clipboard2": "0.3.3",
|
||||
"vue-fragment": "1.6.0",
|
||||
"vue-property-decorator": "9.1.2",
|
||||
"vue-recaptcha": "1.3.0",
|
||||
"vue-router": "3.5.3",
|
||||
@ -17925,6 +17926,14 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-fragment": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-fragment/-/vue-fragment-1.6.0.tgz",
|
||||
"integrity": "sha512-a5T8ZZZK/EQzgVShEl374HbobUJ0a7v12BzOzS6Z/wd/5EE/5SffcyHC+7bf9hP3L7Yc0hhY/GhMdwFQ25O/8A==",
|
||||
"peerDependencies": {
|
||||
"vue": "^2.5.16"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-hot-reload-api": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
|
||||
@ -32543,6 +32552,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-fragment": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-fragment/-/vue-fragment-1.6.0.tgz",
|
||||
"integrity": "sha512-a5T8ZZZK/EQzgVShEl374HbobUJ0a7v12BzOzS6Z/wd/5EE/5SffcyHC+7bf9hP3L7Yc0hhY/GhMdwFQ25O/8A==",
|
||||
"requires": {}
|
||||
},
|
||||
"vue-hot-reload-api": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
"vue-chartjs": "3.5.1",
|
||||
"vue-class-component": "7.2.6",
|
||||
"vue-clipboard2": "0.3.3",
|
||||
"vue-fragment": "1.6.0",
|
||||
"vue-property-decorator": "9.1.2",
|
||||
"vue-recaptcha": "1.3.0",
|
||||
"vue-router": "3.5.3",
|
||||
|
||||
@ -90,160 +90,150 @@
|
||||
<bread-crumbs />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<table class="table table-fixed table-hover no-selection">
|
||||
<v-table class="file-browser-table">
|
||||
<template #head>
|
||||
<file-browser-header />
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="file in formattedFilesUploading"
|
||||
:key="file.ETag"
|
||||
scope="row"
|
||||
</template>
|
||||
<template #body>
|
||||
<tr
|
||||
v-for="file in formattedFilesUploading"
|
||||
:key="file.ETag"
|
||||
scope="row"
|
||||
>
|
||||
<td
|
||||
class="upload-text"
|
||||
aria-roledescription="file-uploading"
|
||||
>
|
||||
<td
|
||||
class="upload-text"
|
||||
aria-roledescription="file-uploading"
|
||||
>
|
||||
<span>
|
||||
<svg
|
||||
width="21"
|
||||
height="18"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="bi bi-file-earmark ml-2 mr-1"
|
||||
>
|
||||
<path
|
||||
d="M4 0h5.5v1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h1V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"
|
||||
/>
|
||||
<path
|
||||
d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 0 1 9.5 3z"
|
||||
/>
|
||||
</svg>
|
||||
{{ filename(file) }}
|
||||
</span>
|
||||
</td>
|
||||
<td aria-roledescription="progress-bar">
|
||||
<div class="progress">
|
||||
<div
|
||||
class="progress-bar"
|
||||
role="progressbar"
|
||||
:style="{
|
||||
width: `${file.progress}%`
|
||||
}"
|
||||
>
|
||||
{{ file.progress }}%
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-danger btn-sm"
|
||||
@click="cancelUpload(file.Key)"
|
||||
<span>
|
||||
<svg
|
||||
width="21"
|
||||
height="18"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="bi bi-file-earmark ml-2 mr-1"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</td>
|
||||
<td />
|
||||
</tr>
|
||||
|
||||
<tr v-if="filesUploadingLength">
|
||||
<div class="files-uploading-count my-3">
|
||||
<path
|
||||
d="M4 0h5.5v1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h1V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"
|
||||
/>
|
||||
<path
|
||||
d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 0 1 9.5 3z"
|
||||
/>
|
||||
</svg>
|
||||
{{ filename(file) }}
|
||||
</span>
|
||||
</td>
|
||||
<td aria-roledescription="progress-bar">
|
||||
<div class="progress">
|
||||
<div
|
||||
class="px-2"
|
||||
aria-roledescription="files-uploading-count"
|
||||
class="progress-bar"
|
||||
role="progressbar"
|
||||
:style="{
|
||||
width: `${file.progress}%`
|
||||
}"
|
||||
>
|
||||
{{ formattedFilesWaitingToBeUploaded }}
|
||||
waiting to be uploaded...
|
||||
{{ file.progress }}%
|
||||
</div>
|
||||
</div>
|
||||
</tr>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-danger btn-sm"
|
||||
@click="cancelUpload(file.Key)"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</td>
|
||||
<td />
|
||||
</tr>
|
||||
|
||||
<tr v-if="path.length > 0">
|
||||
<td class="px-3">
|
||||
<router-link to="../">
|
||||
<a
|
||||
id="navigate-back"
|
||||
href="javascript:null"
|
||||
class="px-2 font-weight-bold"
|
||||
@click="back"
|
||||
>..</a>
|
||||
</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="filesUploadingLength">
|
||||
<div class="files-uploading-count my-3">
|
||||
<div
|
||||
class="px-2"
|
||||
aria-roledescription="files-uploading-count"
|
||||
>
|
||||
{{ formattedFilesWaitingToBeUploaded }}
|
||||
waiting to be uploaded...
|
||||
</div>
|
||||
</div>
|
||||
</tr>
|
||||
|
||||
<tr
|
||||
v-if="showCreateFolderInput"
|
||||
class="new-folder-row"
|
||||
>
|
||||
<td span="3">
|
||||
<input
|
||||
v-model="createFolderInput"
|
||||
class="form-control input-folder"
|
||||
:class="{
|
||||
'folder-input':
|
||||
createFolderInput.length > 0 &&
|
||||
!createFolderEnabled
|
||||
}"
|
||||
type="text"
|
||||
placeholder="Name of the folder"
|
||||
@keypress.enter="createFolder"
|
||||
>
|
||||
</td>
|
||||
<td span="3">
|
||||
<button
|
||||
type="button"
|
||||
:disabled="!createFolderEnabled"
|
||||
class="btn btn-primary btn-sm px-4"
|
||||
@click="createFolder"
|
||||
>
|
||||
Save Folder
|
||||
</button>
|
||||
<span class="mx-1" />
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-light btn-sm px-4"
|
||||
@click="cancelFolderCreation"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</td>
|
||||
<td span="3" />
|
||||
<td span="3">
|
||||
<div
|
||||
v-if="creatingFolderSpinner"
|
||||
class="spinner-border"
|
||||
role="status"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="path.length > 0">
|
||||
<td class="px-3">
|
||||
<router-link to="../">
|
||||
<a
|
||||
id="navigate-back"
|
||||
href="javascript:null"
|
||||
class="px-2 font-weight-bold"
|
||||
@click="back"
|
||||
>..</a>
|
||||
</router-link>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<file-entry
|
||||
v-for="file in folders"
|
||||
:key="file.Key"
|
||||
:path="path"
|
||||
:file="file"
|
||||
/>
|
||||
<tr
|
||||
v-if="showCreateFolderInput"
|
||||
class="new-folder-row"
|
||||
>
|
||||
<td span="3">
|
||||
<input
|
||||
v-model="createFolderInput"
|
||||
class="form-control input-folder"
|
||||
:class="{
|
||||
'folder-input':
|
||||
createFolderInput.length > 0 &&
|
||||
!createFolderEnabled
|
||||
}"
|
||||
type="text"
|
||||
placeholder="Name of the folder"
|
||||
@keypress.enter="createFolder"
|
||||
>
|
||||
</td>
|
||||
<td span="3">
|
||||
<button
|
||||
type="button"
|
||||
:disabled="!createFolderEnabled"
|
||||
class="btn btn-primary btn-sm px-4"
|
||||
@click="createFolder"
|
||||
>
|
||||
Save Folder
|
||||
</button>
|
||||
<span class="mx-1" />
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-light btn-sm px-4"
|
||||
@click="cancelFolderCreation"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</td>
|
||||
<td span="3" />
|
||||
<td span="3">
|
||||
<div
|
||||
v-if="creatingFolderSpinner"
|
||||
class="spinner-border"
|
||||
role="status"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<file-entry
|
||||
v-for="file in singleFiles"
|
||||
:key="file.Key"
|
||||
:path="path"
|
||||
:file="file"
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="fetchingFilesSpinner"
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<div class="spinner-border" />
|
||||
</div>
|
||||
<file-entry
|
||||
v-for="file in folders"
|
||||
:key="file.Key"
|
||||
:path="path"
|
||||
:file="file"
|
||||
/>
|
||||
|
||||
<file-entry
|
||||
v-for="file in singleFiles"
|
||||
:key="file.Key"
|
||||
:path="path"
|
||||
:file="file"
|
||||
/>
|
||||
</template>
|
||||
</v-table>
|
||||
<div
|
||||
v-if="displayUpload"
|
||||
class="upload-help"
|
||||
@ -401,6 +391,12 @@
|
||||
Drop Files Here to Upload
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="fetchingFilesSpinner"
|
||||
class="d-flex justify-content-center"
|
||||
>
|
||||
<div class="spinner-border" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<file-modal v-if="showFileModal" />
|
||||
@ -426,6 +422,7 @@ import { BrowserFile } from "@/types/browser";
|
||||
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
|
||||
import { RouteConfig } from "@/router";
|
||||
import BucketSettingsNav from "@/components/objects/BucketSettingsNav.vue";
|
||||
import VTable from '@/components/common/VTable.vue';
|
||||
|
||||
// @vue/component
|
||||
@Component({
|
||||
@ -433,6 +430,7 @@ import BucketSettingsNav from "@/components/objects/BucketSettingsNav.vue";
|
||||
BucketSettingsNav,
|
||||
FileEntry,
|
||||
BreadCrumbs,
|
||||
VTable,
|
||||
FileBrowserHeader,
|
||||
FileModal,
|
||||
FileShareModal,
|
||||
@ -810,10 +808,6 @@ export default class FileBrowser extends Vue {
|
||||
<style scoped lang="scss">
|
||||
@import './scoped-bootstrap.css';
|
||||
|
||||
.white-background {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.file-browser {
|
||||
min-height: 500px;
|
||||
}
|
||||
@ -822,27 +816,15 @@ export default class FileBrowser extends Vue {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
tbody {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.table-fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.table-heading {
|
||||
color: #768394;
|
||||
border-top: 0;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
padding-left: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.path {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.file-browser-table {
|
||||
padding: 0 12px 24px;
|
||||
}
|
||||
|
||||
.upload-help {
|
||||
font-size: 1.75rem;
|
||||
text-align: center;
|
||||
|
||||
@ -2,222 +2,225 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="table-heading w-50"
|
||||
scope="col"
|
||||
@mouseover="mouseOverName"
|
||||
@mouseleave="mouseLeave"
|
||||
@click="sortByName"
|
||||
>
|
||||
Name
|
||||
<span v-if="showNameArrow">
|
||||
<a v-if="nameDesc" class="arrow">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
class="bi bi-arrow-down-short down-arrow"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a v-else class="arrow">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
class="bi bi-arrow-up-short"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="table-heading w-25"
|
||||
scope="col"
|
||||
@mouseover="mouseOverSize"
|
||||
@mouseleave="mouseLeave"
|
||||
@click="sortBySize"
|
||||
>
|
||||
Size
|
||||
<span v-if="showSizeArrow">
|
||||
<a v-if="sizeDesc" class="arrow">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
class="bi bi-arrow-down-short down-arrow"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a v-else class="arrow">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
class="bi bi-arrow-up-short"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="table-heading"
|
||||
scope="col"
|
||||
@mouseover="mouseOverDate"
|
||||
@mouseleave="mouseLeave"
|
||||
@click="sortByDate"
|
||||
>
|
||||
Upload Date
|
||||
<span v-if="showDateArrow">
|
||||
<a v-if="dateDesc" class="arrow">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
class="bi bi-arrow-down-short down-arrow"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a v-else class="arrow">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
class="bi bi-arrow-up-short"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</th>
|
||||
<th class="table-heading" scope="col">
|
||||
<div class="dropleft">
|
||||
<a
|
||||
v-if="filesToDelete"
|
||||
id="header-delete"
|
||||
class="d-flex justify-content-end"
|
||||
@click="deleteSelectedDropdown"
|
||||
<fragment>
|
||||
<th
|
||||
class="w-50"
|
||||
scope="col"
|
||||
@mouseover="mouseOverName"
|
||||
@mouseleave="mouseLeave"
|
||||
@click="sortByName"
|
||||
>
|
||||
Name
|
||||
<span v-if="showNameArrow">
|
||||
<a v-if="nameDesc" class="arrow">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
class="bi bi-arrow-down-short down-arrow"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
class="bi bi-trash"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<div
|
||||
v-if="displayDropdown"
|
||||
class="dropdown-menu shadow show"
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a v-else class="arrow">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
class="bi bi-arrow-up-short"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<div>
|
||||
<p class="deletion-confirmation px-5 pt-3">
|
||||
Are you sure?
|
||||
</p>
|
||||
<div class="d-flex">
|
||||
<button
|
||||
class="dropdown-item trash p-3 action"
|
||||
type="button"
|
||||
@click="confirmDeleteSelection"
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="file-browser-heading w-25"
|
||||
scope="col"
|
||||
@mouseover="mouseOverSize"
|
||||
@mouseleave="mouseLeave"
|
||||
@click="sortBySize"
|
||||
>
|
||||
Size
|
||||
<span v-if="showSizeArrow">
|
||||
<a v-if="sizeDesc" class="arrow">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
class="bi bi-arrow-down-short down-arrow"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a v-else class="arrow">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
class="bi bi-arrow-up-short"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="file-browser-heading"
|
||||
scope="col"
|
||||
@mouseover="mouseOverDate"
|
||||
@mouseleave="mouseLeave"
|
||||
@click="sortByDate"
|
||||
>
|
||||
Upload Date
|
||||
<span v-if="showDateArrow">
|
||||
<a v-if="dateDesc" class="arrow">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
class="bi bi-arrow-down-short down-arrow"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<a v-else class="arrow">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="currentColor"
|
||||
class="bi bi-arrow-up-short"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</th>
|
||||
<th scope="col" class="overflow-override">
|
||||
<div class="dropleft">
|
||||
<a
|
||||
v-if="filesToDelete"
|
||||
id="header-delete"
|
||||
class="d-flex justify-content-end"
|
||||
@click="deleteSelectedDropdown"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="currentColor"
|
||||
class="bi bi-trash"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<div
|
||||
v-if="displayDropdown"
|
||||
class="dropdown-menu shadow show"
|
||||
>
|
||||
<div>
|
||||
<p class="deletion-confirmation px-5 pt-3">
|
||||
Are you sure?
|
||||
</p>
|
||||
<div class="d-flex">
|
||||
<button
|
||||
class="dropdown-item trash p-3 action"
|
||||
type="button"
|
||||
@click="confirmDeleteSelection"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="red"
|
||||
class="bi bi-trash"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="red"
|
||||
class="bi bi-trash"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
|
||||
/>
|
||||
</svg>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
class="dropdown-item p-3 action"
|
||||
type="button"
|
||||
@click="cancelDeleteSelection"
|
||||
<path
|
||||
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
|
||||
/>
|
||||
</svg>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
class="dropdown-item p-3 action"
|
||||
type="button"
|
||||
@click="cancelDeleteSelection"
|
||||
>
|
||||
<svg
|
||||
width="2em"
|
||||
height="2em"
|
||||
viewBox="0 0 16 16"
|
||||
class="bi bi-x mr-1"
|
||||
fill="green"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<svg
|
||||
width="2em"
|
||||
height="2em"
|
||||
viewBox="0 0 16 16"
|
||||
class="bi bi-x mr-1"
|
||||
fill="green"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
|
||||
/>
|
||||
</svg>
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
|
||||
/>
|
||||
</svg>
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</div>
|
||||
</th>
|
||||
</fragment>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { Fragment } from 'vue-fragment';
|
||||
|
||||
// @vue/component
|
||||
@Component
|
||||
@Component({
|
||||
components: {
|
||||
Fragment
|
||||
},
|
||||
})
|
||||
export default class FileBrowserHeader extends Vue {
|
||||
private hover = "";
|
||||
|
||||
@ -412,18 +415,20 @@ th {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.file-browser-heading {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
cursor: pointer;
|
||||
color: #768394;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
th.overflow-override {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-heading {
|
||||
cursor: pointer;
|
||||
color: #768394;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -36,7 +36,6 @@ export default class MiddleTruncate extends Vue {
|
||||
&:hover {
|
||||
max-width: unset;
|
||||
min-width: auto;
|
||||
background-color: #efefee;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user