tabshift/pocketbase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#7655] added backups list scroll container

Browse Source
This commit is contained in:
Gani Georgiev
2026-04-22 17:21:11 +03:00
parent 83e44a7cfb
commit b15f358fc9
6 changed files with 97 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@@ -1,3 +1,8 @@
## v0.37.4 (WIP)
- Added backups list scroll container ([#7655](https://github.com/pocketbase/pocketbase/issues/7655)).
## v0.37.3 ## v0.37.3
- Fixed total count load on page back/forward navigation. - Fixed total count load on page back/forward navigation.

2
ui/dist/assets/index-CFYkmcdC.js → ui/dist/assets/index-BdKmsBV_.js vendored
View File

File diff suppressed because one or more lines are too long

2
ui/dist/assets/index-BsxX9wuy.css → ui/dist/assets/index-COsT6ZrW.css vendored
View File

File diff suppressed because one or more lines are too long

4
ui/dist/index.html vendored
View File

@@ -13,9 +13,9 @@
<!-- prism --> <!-- prism -->
<script src="./libs/prism/prism.js" data-manual></script> <script src="./libs/prism/prism.js" data-manual></script>
<script type="module" crossorigin src="./assets/index-CFYkmcdC.js"></script> <script type="module" crossorigin src="./assets/index-BdKmsBV_.js"></script>
<link rel="modulepreload" crossorigin href="./assets/pocketbase.es-B_4DUNUU.js"> <link rel="modulepreload" crossorigin href="./assets/pocketbase.es-B_4DUNUU.js">
<link rel="stylesheet" crossorigin href="./assets/index-BsxX9wuy.css"> <link rel="stylesheet" crossorigin href="./assets/index-COsT6ZrW.css">
</head> </head>
<body> <body>
</body> </body>

8
ui/src/css/list.css
View File

@@ -15,6 +15,14 @@
display: none; display: none;
} }
.list-group {
display: block;
width: 100%;
max-height: 425px;
overflow: auto;
scrollbar-width: thin;
}
.list-item { .list-item {
word-break: break-word; word-break: break-word;
position: relative; position: relative;

156
ui/src/settings/backups/backupsList.js
View File

@@ -100,7 +100,8 @@ export function backupsList(propsArg = {}) {
return t.div( return t.div(
{ {
className: "list", pbEvent: "backupsList",
className: "list backups-list",
onmount: (el) => { onmount: (el) => {
watchers.push(watch(() => props.reset, () => { watchers.push(watch(() => props.reset, () => {
loadBackups(); loadBackups();
@@ -116,83 +117,86 @@ export function backupsList(propsArg = {}) {
}, },
}, },
t.div( t.div(
{ { className: "list-group" },
hidden: () => !data.isLoading || data.backups.length, t.div(
className: "list-item", {
hidden: () => !data.isLoading || data.backups.length,
className: "list-item",
},
t.div({ className: "skeleton-loader" }),
),
t.div(
{
hidden: () => data.isLoading || data.backups.length,
className: () => "list-item",
},
t.div({ className: "content block txt-hint" }, "No backups found."),
),
() => {
return data.backups.map((backup) => {
return t.div(
{ className: () => `list-item ${data.isLoading ? "faded" : ""}` },
t.i({ className: "ri-folder-zip-line", ariaHidden: true }),
t.div(
{ className: "content" },
t.span({
className: "backup-name txt-ellipsis",
title: () => backup.key,
textContent: () => backup.key,
}),
t.small(
{ className: "backup-size txt-hint txt-nowrap" },
"(",
() => app.utils.formattedFileSize(backup.size),
")",
),
),
t.nav(
{
hidden: () => data.isLoading,
className: "actions autohide",
},
t.button(
{
type: "button",
ariaLabel: app.attrs.tooltip("Download"),
className: () =>
`btn sm circle secondary transparent ${
data.isDownloading[backup.key] ? "loading" : ""
}`,
disabled: () => data.isDeleting[backup.key] || data.isDownloading[backup.key],
onclick: () => downloadBackup(backup.key),
},
t.i({ className: "ri-download-line", ariaHidden: true }),
),
t.button(
{
type: "button",
ariaLabel: app.attrs.tooltip("Restore"),
className: () => `btn sm circle secondary transparent`,
disabled: () => data.isDeleting[backup.key] || data.isDownloading[backup.key],
onclick: () => openBackupRestoreModal(backup.key),
},
t.i({ className: "ri-restart-line", ariaHidden: true }),
),
t.button(
{
type: "button",
ariaLabel: app.attrs.tooltip("Delete"),
className: () =>
`btn sm circle secondary transparent ${
data.isDeleting[backup.key] ? "loading" : ""
}`,
disabled: () => data.isDeleting[backup.key] || data.isDownloading[backup.key],
onclick: () => confirmBackupDelete(backup.key),
},
t.i({ className: "ri-delete-bin-7-line", ariaHidden: true }),
),
),
);
});
}, },
t.div({ className: "skeleton-loader" }),
), ),
t.div(
{
hidden: () => data.isLoading || data.backups.length,
className: () => "list-item",
},
t.div({ className: "content block txt-hint" }, "No backups found."),
),
() => {
return data.backups.map((backup) => {
return t.div(
{ className: () => `list-item ${data.isLoading ? "faded" : ""}` },
t.i({ className: "ri-folder-zip-line", ariaHidden: true }),
t.div(
{ className: "content" },
t.span({
className: "backup-name txt-ellipsis",
title: () => backup.key,
textContent: () => backup.key,
}),
t.small(
{ className: "backup-size txt-hint txt-nowrap" },
"(",
() => app.utils.formattedFileSize(backup.size),
")",
),
),
t.nav(
{
hidden: () => data.isLoading,
className: "actions autohide",
},
t.button(
{
type: "button",
ariaLabel: app.attrs.tooltip("Download"),
className: () =>
`btn sm circle secondary transparent ${
data.isDownloading[backup.key] ? "loading" : ""
}`,
disabled: () => data.isDeleting[backup.key] || data.isDownloading[backup.key],
onclick: () => downloadBackup(backup.key),
},
t.i({ className: "ri-download-line", ariaHidden: true }),
),
t.button(
{
type: "button",
ariaLabel: app.attrs.tooltip("Restore"),
className: () => `btn sm circle secondary transparent`,
disabled: () => data.isDeleting[backup.key] || data.isDownloading[backup.key],
onclick: () => openBackupRestoreModal(backup.key),
},
t.i({ className: "ri-restart-line", ariaHidden: true }),
),
t.button(
{
type: "button",
ariaLabel: app.attrs.tooltip("Delete"),
className: () =>
`btn sm circle secondary transparent ${
data.isDeleting[backup.key] ? "loading" : ""
}`,
disabled: () => data.isDeleting[backup.key] || data.isDownloading[backup.key],
onclick: () => confirmBackupDelete(backup.key),
},
t.i({ className: "ri-delete-bin-7-line", ariaHidden: true }),
),
),
);
});
},
t.div( t.div(
{ className: "list-item" }, { className: "list-item" },
t.button( t.button(