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-chartjs": "3.5.1",
|
||||||
"vue-class-component": "7.2.6",
|
"vue-class-component": "7.2.6",
|
||||||
"vue-clipboard2": "0.3.3",
|
"vue-clipboard2": "0.3.3",
|
||||||
|
"vue-fragment": "1.6.0",
|
||||||
"vue-property-decorator": "9.1.2",
|
"vue-property-decorator": "9.1.2",
|
||||||
"vue-recaptcha": "1.3.0",
|
"vue-recaptcha": "1.3.0",
|
||||||
"vue-router": "3.5.3",
|
"vue-router": "3.5.3",
|
||||||
@ -17925,6 +17926,14 @@
|
|||||||
"node": ">=10"
|
"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": {
|
"node_modules/vue-hot-reload-api": {
|
||||||
"version": "2.3.4",
|
"version": "2.3.4",
|
||||||
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
|
"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": {
|
"vue-hot-reload-api": {
|
||||||
"version": "2.3.4",
|
"version": "2.3.4",
|
||||||
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
|
"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-chartjs": "3.5.1",
|
||||||
"vue-class-component": "7.2.6",
|
"vue-class-component": "7.2.6",
|
||||||
"vue-clipboard2": "0.3.3",
|
"vue-clipboard2": "0.3.3",
|
||||||
|
"vue-fragment": "1.6.0",
|
||||||
"vue-property-decorator": "9.1.2",
|
"vue-property-decorator": "9.1.2",
|
||||||
"vue-recaptcha": "1.3.0",
|
"vue-recaptcha": "1.3.0",
|
||||||
"vue-router": "3.5.3",
|
"vue-router": "3.5.3",
|
||||||
|
|||||||
@ -90,160 +90,150 @@
|
|||||||
<bread-crumbs />
|
<bread-crumbs />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<v-table class="file-browser-table">
|
||||||
<div>
|
<template #head>
|
||||||
<table class="table table-fixed table-hover no-selection">
|
|
||||||
<file-browser-header />
|
<file-browser-header />
|
||||||
|
</template>
|
||||||
<tbody>
|
<template #body>
|
||||||
<tr
|
<tr
|
||||||
v-for="file in formattedFilesUploading"
|
v-for="file in formattedFilesUploading"
|
||||||
:key="file.ETag"
|
:key="file.ETag"
|
||||||
scope="row"
|
scope="row"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="upload-text"
|
||||||
|
aria-roledescription="file-uploading"
|
||||||
>
|
>
|
||||||
<td
|
<span>
|
||||||
class="upload-text"
|
<svg
|
||||||
aria-roledescription="file-uploading"
|
width="21"
|
||||||
>
|
height="18"
|
||||||
<span>
|
viewBox="0 0 16 16"
|
||||||
<svg
|
fill="currentColor"
|
||||||
width="21"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
height="18"
|
class="bi bi-file-earmark ml-2 mr-1"
|
||||||
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)"
|
|
||||||
>
|
>
|
||||||
Cancel
|
<path
|
||||||
</button>
|
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"
|
||||||
</td>
|
/>
|
||||||
<td />
|
<path
|
||||||
</tr>
|
d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 0 1 9.5 3z"
|
||||||
|
/>
|
||||||
<tr v-if="filesUploadingLength">
|
</svg>
|
||||||
<div class="files-uploading-count my-3">
|
{{ filename(file) }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td aria-roledescription="progress-bar">
|
||||||
|
<div class="progress">
|
||||||
<div
|
<div
|
||||||
class="px-2"
|
class="progress-bar"
|
||||||
aria-roledescription="files-uploading-count"
|
role="progressbar"
|
||||||
|
:style="{
|
||||||
|
width: `${file.progress}%`
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
{{ formattedFilesWaitingToBeUploaded }}
|
{{ file.progress }}%
|
||||||
waiting to be uploaded...
|
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<tr v-if="filesUploadingLength">
|
||||||
<td class="px-3">
|
<div class="files-uploading-count my-3">
|
||||||
<router-link to="../">
|
<div
|
||||||
<a
|
class="px-2"
|
||||||
id="navigate-back"
|
aria-roledescription="files-uploading-count"
|
||||||
href="javascript:null"
|
>
|
||||||
class="px-2 font-weight-bold"
|
{{ formattedFilesWaitingToBeUploaded }}
|
||||||
@click="back"
|
waiting to be uploaded...
|
||||||
>..</a>
|
</div>
|
||||||
</router-link>
|
</div>
|
||||||
</td>
|
</tr>
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr
|
<tr v-if="path.length > 0">
|
||||||
v-if="showCreateFolderInput"
|
<td class="px-3">
|
||||||
class="new-folder-row"
|
<router-link to="../">
|
||||||
>
|
<a
|
||||||
<td span="3">
|
id="navigate-back"
|
||||||
<input
|
href="javascript:null"
|
||||||
v-model="createFolderInput"
|
class="px-2 font-weight-bold"
|
||||||
class="form-control input-folder"
|
@click="back"
|
||||||
:class="{
|
>..</a>
|
||||||
'folder-input':
|
</router-link>
|
||||||
createFolderInput.length > 0 &&
|
</td>
|
||||||
!createFolderEnabled
|
</tr>
|
||||||
}"
|
|
||||||
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
|
<tr
|
||||||
v-for="file in folders"
|
v-if="showCreateFolderInput"
|
||||||
:key="file.Key"
|
class="new-folder-row"
|
||||||
:path="path"
|
>
|
||||||
:file="file"
|
<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
|
<file-entry
|
||||||
v-for="file in singleFiles"
|
v-for="file in folders"
|
||||||
:key="file.Key"
|
:key="file.Key"
|
||||||
:path="path"
|
:path="path"
|
||||||
:file="file"
|
: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 singleFiles"
|
||||||
|
:key="file.Key"
|
||||||
|
:path="path"
|
||||||
|
:file="file"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</v-table>
|
||||||
<div
|
<div
|
||||||
v-if="displayUpload"
|
v-if="displayUpload"
|
||||||
class="upload-help"
|
class="upload-help"
|
||||||
@ -401,6 +391,12 @@
|
|||||||
Drop Files Here to Upload
|
Drop Files Here to Upload
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="fetchingFilesSpinner"
|
||||||
|
class="d-flex justify-content-center"
|
||||||
|
>
|
||||||
|
<div class="spinner-border" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<file-modal v-if="showFileModal" />
|
<file-modal v-if="showFileModal" />
|
||||||
@ -426,6 +422,7 @@ import { BrowserFile } from "@/types/browser";
|
|||||||
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
|
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
|
||||||
import { RouteConfig } from "@/router";
|
import { RouteConfig } from "@/router";
|
||||||
import BucketSettingsNav from "@/components/objects/BucketSettingsNav.vue";
|
import BucketSettingsNav from "@/components/objects/BucketSettingsNav.vue";
|
||||||
|
import VTable from '@/components/common/VTable.vue';
|
||||||
|
|
||||||
// @vue/component
|
// @vue/component
|
||||||
@Component({
|
@Component({
|
||||||
@ -433,6 +430,7 @@ import BucketSettingsNav from "@/components/objects/BucketSettingsNav.vue";
|
|||||||
BucketSettingsNav,
|
BucketSettingsNav,
|
||||||
FileEntry,
|
FileEntry,
|
||||||
BreadCrumbs,
|
BreadCrumbs,
|
||||||
|
VTable,
|
||||||
FileBrowserHeader,
|
FileBrowserHeader,
|
||||||
FileModal,
|
FileModal,
|
||||||
FileShareModal,
|
FileShareModal,
|
||||||
@ -810,10 +808,6 @@ export default class FileBrowser extends Vue {
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import './scoped-bootstrap.css';
|
@import './scoped-bootstrap.css';
|
||||||
|
|
||||||
.white-background {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-browser {
|
.file-browser {
|
||||||
min-height: 500px;
|
min-height: 500px;
|
||||||
}
|
}
|
||||||
@ -822,27 +816,15 @@ export default class FileBrowser extends Vue {
|
|||||||
user-select: none;
|
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 {
|
.path {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.file-browser-table {
|
||||||
|
padding: 0 12px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
.upload-help {
|
.upload-help {
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@ -2,222 +2,225 @@
|
|||||||
// See LICENSE for copying information.
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<thead>
|
<fragment>
|
||||||
<tr>
|
<th
|
||||||
<th
|
class="w-50"
|
||||||
class="table-heading w-50"
|
scope="col"
|
||||||
scope="col"
|
@mouseover="mouseOverName"
|
||||||
@mouseover="mouseOverName"
|
@mouseleave="mouseLeave"
|
||||||
@mouseleave="mouseLeave"
|
@click="sortByName"
|
||||||
@click="sortByName"
|
>
|
||||||
>
|
Name
|
||||||
Name
|
<span v-if="showNameArrow">
|
||||||
<span v-if="showNameArrow">
|
<a v-if="nameDesc" class="arrow">
|
||||||
<a v-if="nameDesc" class="arrow">
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
width="20"
|
||||||
width="20"
|
height="20"
|
||||||
height="20"
|
fill="currentColor"
|
||||||
fill="currentColor"
|
class="bi bi-arrow-down-short down-arrow"
|
||||||
class="bi bi-arrow-down-short down-arrow"
|
viewBox="0 0 16 16"
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
fill-rule="evenodd"
|
||||||
width="24"
|
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"
|
||||||
height="24"
|
/>
|
||||||
fill="currentColor"
|
</svg>
|
||||||
class="bi bi-trash"
|
</a>
|
||||||
viewBox="0 0 16 16"
|
<a v-else class="arrow">
|
||||||
>
|
<svg
|
||||||
<path
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
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"
|
width="20"
|
||||||
/>
|
height="20"
|
||||||
<path
|
fill="currentColor"
|
||||||
fill-rule="evenodd"
|
class="bi bi-arrow-up-short"
|
||||||
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"
|
viewBox="0 0 16 16"
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<div
|
|
||||||
v-if="displayDropdown"
|
|
||||||
class="dropdown-menu shadow show"
|
|
||||||
>
|
>
|
||||||
<div>
|
<path
|
||||||
<p class="deletion-confirmation px-5 pt-3">
|
fill-rule="evenodd"
|
||||||
Are you sure?
|
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"
|
||||||
</p>
|
/>
|
||||||
<div class="d-flex">
|
</svg>
|
||||||
<button
|
</a>
|
||||||
class="dropdown-item trash p-3 action"
|
</span>
|
||||||
type="button"
|
</th>
|
||||||
@click="confirmDeleteSelection"
|
<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
|
<path
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
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"
|
||||||
width="16"
|
/>
|
||||||
height="16"
|
<path
|
||||||
fill="red"
|
fill-rule="evenodd"
|
||||||
class="bi bi-trash"
|
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"
|
||||||
viewBox="0 0 16 16"
|
/>
|
||||||
>
|
</svg>
|
||||||
<path
|
Yes
|
||||||
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"
|
</button>
|
||||||
/>
|
<button
|
||||||
<path
|
class="dropdown-item p-3 action"
|
||||||
fill-rule="evenodd"
|
type="button"
|
||||||
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"
|
@click="cancelDeleteSelection"
|
||||||
/>
|
>
|
||||||
</svg>
|
<svg
|
||||||
Yes
|
width="2em"
|
||||||
</button>
|
height="2em"
|
||||||
<button
|
viewBox="0 0 16 16"
|
||||||
class="dropdown-item p-3 action"
|
class="bi bi-x mr-1"
|
||||||
type="button"
|
fill="green"
|
||||||
@click="cancelDeleteSelection"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<svg
|
<path
|
||||||
width="2em"
|
fill-rule="evenodd"
|
||||||
height="2em"
|
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"
|
||||||
viewBox="0 0 16 16"
|
/>
|
||||||
class="bi bi-x mr-1"
|
</svg>
|
||||||
fill="green"
|
No
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
</button>
|
||||||
>
|
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</div>
|
||||||
</tr>
|
</th>
|
||||||
</thead>
|
</fragment>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Component, Vue } from 'vue-property-decorator';
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
|
import { Fragment } from 'vue-fragment';
|
||||||
|
|
||||||
// @vue/component
|
// @vue/component
|
||||||
@Component
|
@Component({
|
||||||
|
components: {
|
||||||
|
Fragment
|
||||||
|
},
|
||||||
|
})
|
||||||
export default class FileBrowserHeader extends Vue {
|
export default class FileBrowserHeader extends Vue {
|
||||||
private hover = "";
|
private hover = "";
|
||||||
|
|
||||||
@ -412,18 +415,20 @@ th {
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.file-browser-heading {
|
||||||
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #768394;
|
color: #768394;
|
||||||
position: absolute;
|
}
|
||||||
|
|
||||||
|
th.overflow-override {
|
||||||
|
overflow: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-heading {
|
|
||||||
cursor: pointer;
|
|
||||||
color: #768394;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -36,7 +36,6 @@ export default class MiddleTruncate extends Vue {
|
|||||||
&:hover {
|
&:hover {
|
||||||
max-width: unset;
|
max-width: unset;
|
||||||
min-width: auto;
|
min-width: auto;
|
||||||
background-color: #efefee;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user