mirror/pocketbase
1
0
Fork 0
mirror of https://github.com/pocketbase/pocketbase.git synced 2026-05-24 16:56:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

minor ui adjustments

Browse Source
This commit is contained in:
Gani Georgiev
2026-05-24 10:49:31 +03:00
parent b022e138d4
commit 7984e586a8
10 changed files with 58 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
CHANGELOG.md
View File

@@ -1,8 +1,11 @@
## v0.38.3 (WIP)
## v0.39.0 (WIP)
- Fixed logs bulk selection export.
- Added new "SQL console" section under _Settings > Debug_ allowing executing any raw SQL query from the UI ([#2236](https://github.com/pocketbase/pocketbase/issues/2236); [#7638](https://github.com/pocketbase/pocketbase/discussions/7638)).
_Note that this is intended for one-off analytic queries, the occasional `VACUUM`/`PRAGMA optimize` or debug purposes and not as the primary interface for interacting with your PocketBase data because it can break your application if not used with proper care!_
- Other minor UI improvements (allow word breaking in labels, etc.).
- Fixed logs bulk selection export error.
- Other Minor UI improvements (optimized logs and records list rendering, word breaking in labels, text contrast improvements, etc.).
## v0.38.2

2
ui/.env
View File

@@ -12,4 +12,4 @@ PB_DOCS_URL = "https://pocketbase.io/docs"
PB_JS_SDK_URL = "https://github.com/pocketbase/js-sdk"
PB_DART_SDK_URL = "https://github.com/pocketbase/dart-sdk"
PB_RELEASES = "https://github.com/pocketbase/pocketbase/releases"
PB_VERSION = "v0.38.3-dev"
PB_VERSION = "v0.39.0-dev"

2
ui/dist/assets/index-C5MjNoft.css → ui/dist/assets/index-BAGN5_mA.css vendored
View File

File diff suppressed because one or more lines are too long

10
ui/dist/assets/index-BRepvmcR.js → ui/dist/assets/index-CgQtbDwr.js 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 -->
<script src="./libs/prism/prism.js" data-manual></script>
<script type="module" crossorigin src="./assets/index-BRepvmcR.js"></script>
<script type="module" crossorigin src="./assets/index-CgQtbDwr.js"></script>
<link rel="modulepreload" crossorigin href="./assets/pocketbase.es-B_4DUNUU.js">
<link rel="stylesheet" crossorigin href="./assets/index-C5MjNoft.css">
<link rel="stylesheet" crossorigin href="./assets/index-BAGN5_mA.css">
</head>
<body>
</body>

45
ui/src/collections/pageCollections.js
View File

@@ -307,25 +307,32 @@ export function pageCollections(route) {
value: () => pageData.filter,
onsubmit: (newFilter) => (pageData.filter = newFilter),
}),
app.components.recordsList({
className: "m-t-sm",
reset: () => pageData.reset,
hidden: () => !app.store.activeCollection?.id,
collection: () => app.store.activeCollection,
filter: () => pageData.filter,
sort: () => pageData.sort,
onselect: (record) => {
pageData.activeRecordIdOrModel = record;
},
onchange: (newFilter, newSort) => {
pageData.filter = newFilter;
pageData.sort = newSort;
},
suggestReset: () => pageData.suggestReset,
onSuggestResetChange: (suggestReset) => {
pageData.suggestReset = !!suggestReset;
},
}),
() => {
// not using "hidden" attr to force clear the records list and to
// minimize the flickering when navigating between collections
if (!app.store.activeCollection?.id) {
return;
}
return app.components.recordsList({
className: "m-t-sm",
reset: () => pageData.reset,
collection: () => app.store.activeCollection,
filter: () => pageData.filter,
sort: () => pageData.sort,
onselect: (record) => {
pageData.activeRecordIdOrModel = record;
},
onchange: (newFilter, newSort) => {
pageData.filter = newFilter;
pageData.sort = newSort;
},
suggestReset: () => pageData.suggestReset,
onSuggestResetChange: (suggestReset) => {
pageData.suggestReset = !!suggestReset;
},
});
},
t.footer(
{ className: "page-footer" },
t.span(

3
ui/src/css/table.css
View File

@@ -333,9 +333,6 @@ table {
border-bottom-right-radius: 0;
}
}
tr {
animation: fadeIn var(--animationSpeed);
}
td,
th {
border: 0;

10
ui/src/css/vars.css
View File

@@ -138,7 +138,7 @@
/* dark */
[data-color-scheme="dark"],
[data-color-scheme="dark"] .dropdown {
--surfaceColor: #1f1f1f;
--surfaceColor: #1c1c1c;
--surfaceAlt1Color: color-mix(in srgb, var(--surfaceColor), white 2%);
--surfaceAlt2Color: color-mix(in srgb, var(--surfaceColor), white 7%);
--surfaceAlt3Color: color-mix(in srgb, var(--surfaceColor), white 12%);
@@ -155,10 +155,10 @@
--secondaryAlt1Color: var(--surfaceAlt3Color);
--secondaryAlt2Color: var(--surfaceAlt4Color);
--primaryColor: #161616;
--primaryColor: #121212;
--primaryTxtColor: var(--surfaceTxtColor);
--primaryAlt1Color: color-mix(in srgb, var(--primaryColor), white 1%);
--primaryAlt2Color: color-mix(in srgb, var(--primaryColor), white 1.5%);
--primaryAlt1Color: color-mix(in srgb, var(--primaryColor), black 12%);
--primaryAlt2Color: color-mix(in srgb, var(--primaryColor), black 25%);
--primaryTxtHintColor: color-mix(in srgb, var(--primaryTxtColor), transparent 35%);
--primaryTxtDisabledColor: color-mix(in srgb, var(--primaryTxtColor), transparent 50%);
@@ -192,7 +192,7 @@
--inputBorderColor: var(--surfaceAlt4Color);
scrollbar-color: var(--surfaceAlt5Color) transparent;
--modalOverlayColor: rgb(0,0,0, 0.45);
--modalOverlayColor: rgb(18,18,18, 0.5);
--tooltipSurfaceColor: rgb(22,22,22, 0.9);
--boxShadow: 0px 8px 5px -5px rgba(0,0,0, 0.3);

6
ui/src/logs/logsList.js
View File

@@ -75,9 +75,9 @@ export function logsList(logsSettings) {
for (let i = 0; i < result.items.length; i++) {
app.utils.pushOrReplaceObject(data.logs, result.items[i]);
// yield to main (with room to "breathe")
// yield to main
if (i > 1 && i % 20 == 0) {
await new Promise((r) => setTimeout(r, 20));
await new Promise((r) => setTimeout(r, 0));
}
}
@@ -165,8 +165,6 @@ export function logsList(logsSettings) {
return; // nothing to download
}
console.log(data.bulkSelected);
if (selected.length == 1) {
return app.utils.downloadJSON(
selected[0],

27
ui/src/settings/sql/pageSQLConsole.js
View File

@@ -30,32 +30,25 @@ export function pageSQLConsole(route) {
const isAsc = !!pageData.sort?.asc;
const sorted = pageData.result?.rows?.toSorted((rowA, rowB) => {
const valA = rowA[pageData.sort.index];
const valB = rowB[pageData.sort.index];
let valA = rowA[pageData.sort.index];
let valB = rowB[pageData.sort.index];
if (isAsc) {
if (valA == valB) {
return 0;
}
if (valA == null) {
return -1;
}
if (valB == null) {
return 1;
}
return valA.localeCompare(valB);
// swap
if (!isAsc) {
valA = rowB[pageData.sort.index];
valB = rowA[pageData.sort.index];
}
if (valA == valB) {
return 0;
}
if (valA == null) {
return 1;
}
if (valB == null) {
return -1;
}
return valB.localeCompare(valA);
if (valB == null) {
return 1;
}
return valA.localeCompare(valB);
}) || [];
return pageData.maxRows >= sorted.length ? sorted : sorted.slice(0, pageData.maxRows);