tabshift/pocketbase
1
0
Fork 0
Code Issues Pull Requests Actions 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
CHANGELOG.md
+6 -3
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 ## v0.38.2
ui/.env
+1 -1
View File
@@ -12,4 +12,4 @@ PB_DOCS_URL = "https://pocketbase.io/docs"
PB_JS_SDK_URL = "https://github.com/pocketbase/js-sdk" PB_JS_SDK_URL = "https://github.com/pocketbase/js-sdk"
PB_DART_SDK_URL = "https://github.com/pocketbase/dart-sdk" PB_DART_SDK_URL = "https://github.com/pocketbase/dart-sdk"
PB_RELEASES = "https://github.com/pocketbase/pocketbase/releases" PB_RELEASES = "https://github.com/pocketbase/pocketbase/releases"
PB_VERSION = "v0.38.3-dev" PB_VERSION = "v0.39.0-dev"
ui/dist/assets/index-C5MjNoft.css → ui/dist/assets/index-BAGN5_mA.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
ui/dist/assets/index-BRepvmcR.js → ui/dist/assets/index-CgQtbDwr.js
Vendored
+5 -5
View File
File diff suppressed because one or more lines are too long
ui/dist/index.html
Vendored
+2 -2
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-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="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> </head>
<body> <body>
</body> </body>
ui/src/collections/pageCollections.js
+10 -3
View File
@@ -307,10 +307,16 @@ export function pageCollections(route) {
value: () => pageData.filter, value: () => pageData.filter,
onsubmit: (newFilter) => (pageData.filter = newFilter), onsubmit: (newFilter) => (pageData.filter = newFilter),
}), }),
app.components.recordsList({ () => {
// 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", className: "m-t-sm",
reset: () => pageData.reset, reset: () => pageData.reset,
hidden: () => !app.store.activeCollection?.id,
collection: () => app.store.activeCollection, collection: () => app.store.activeCollection,
filter: () => pageData.filter, filter: () => pageData.filter,
sort: () => pageData.sort, sort: () => pageData.sort,
@@ -325,7 +331,8 @@ export function pageCollections(route) {
onSuggestResetChange: (suggestReset) => { onSuggestResetChange: (suggestReset) => {
pageData.suggestReset = !!suggestReset; pageData.suggestReset = !!suggestReset;
}, },
}), });
},
t.footer( t.footer(
{ className: "page-footer" }, { className: "page-footer" },
t.span( t.span(
ui/src/css/table.css
-3
View File
@@ -333,9 +333,6 @@ table {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
} }
tr {
animation: fadeIn var(--animationSpeed);
}
td, td,
th { th {
border: 0; border: 0;
ui/src/css/vars.css
+5 -5
View File
@@ -138,7 +138,7 @@
/* dark */ /* dark */
[data-color-scheme="dark"], [data-color-scheme="dark"],
[data-color-scheme="dark"] .dropdown { [data-color-scheme="dark"] .dropdown {
--surfaceColor: #1f1f1f; --surfaceColor: #1c1c1c;
--surfaceAlt1Color: color-mix(in srgb, var(--surfaceColor), white 2%); --surfaceAlt1Color: color-mix(in srgb, var(--surfaceColor), white 2%);
--surfaceAlt2Color: color-mix(in srgb, var(--surfaceColor), white 7%); --surfaceAlt2Color: color-mix(in srgb, var(--surfaceColor), white 7%);
--surfaceAlt3Color: color-mix(in srgb, var(--surfaceColor), white 12%); --surfaceAlt3Color: color-mix(in srgb, var(--surfaceColor), white 12%);
@@ -155,10 +155,10 @@
--secondaryAlt1Color: var(--surfaceAlt3Color); --secondaryAlt1Color: var(--surfaceAlt3Color);
--secondaryAlt2Color: var(--surfaceAlt4Color); --secondaryAlt2Color: var(--surfaceAlt4Color);
--primaryColor: #161616; --primaryColor: #121212;
--primaryTxtColor: var(--surfaceTxtColor); --primaryTxtColor: var(--surfaceTxtColor);
--primaryAlt1Color: color-mix(in srgb, var(--primaryColor), white 1%); --primaryAlt1Color: color-mix(in srgb, var(--primaryColor), black 12%);
--primaryAlt2Color: color-mix(in srgb, var(--primaryColor), white 1.5%); --primaryAlt2Color: color-mix(in srgb, var(--primaryColor), black 25%);
--primaryTxtHintColor: color-mix(in srgb, var(--primaryTxtColor), transparent 35%); --primaryTxtHintColor: color-mix(in srgb, var(--primaryTxtColor), transparent 35%);
--primaryTxtDisabledColor: color-mix(in srgb, var(--primaryTxtColor), transparent 50%); --primaryTxtDisabledColor: color-mix(in srgb, var(--primaryTxtColor), transparent 50%);
@@ -192,7 +192,7 @@
--inputBorderColor: var(--surfaceAlt4Color); --inputBorderColor: var(--surfaceAlt4Color);
scrollbar-color: var(--surfaceAlt5Color) transparent; 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); --tooltipSurfaceColor: rgb(22,22,22, 0.9);
--boxShadow: 0px 8px 5px -5px rgba(0,0,0, 0.3); --boxShadow: 0px 8px 5px -5px rgba(0,0,0, 0.3);
ui/src/logs/logsList.js
+2 -4
View File
@@ -75,9 +75,9 @@ export function logsList(logsSettings) {
for (let i = 0; i < result.items.length; i++) { for (let i = 0; i < result.items.length; i++) {
app.utils.pushOrReplaceObject(data.logs, result.items[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) { 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 return; // nothing to download
} }
console.log(data.bulkSelected);
if (selected.length == 1) { if (selected.length == 1) {
return app.utils.downloadJSON( return app.utils.downloadJSON(
selected[0], selected[0],
ui/src/settings/sql/pageSQLConsole.js
+8 -15
View File
@@ -30,10 +30,15 @@ export function pageSQLConsole(route) {
const isAsc = !!pageData.sort?.asc; const isAsc = !!pageData.sort?.asc;
const sorted = pageData.result?.rows?.toSorted((rowA, rowB) => { const sorted = pageData.result?.rows?.toSorted((rowA, rowB) => {
const valA = rowA[pageData.sort.index]; let valA = rowA[pageData.sort.index];
const valB = rowB[pageData.sort.index]; let valB = rowB[pageData.sort.index];
// swap
if (!isAsc) {
valA = rowB[pageData.sort.index];
valB = rowA[pageData.sort.index];
}
if (isAsc) {
if (valA == valB) { if (valA == valB) {
return 0; return 0;
} }
@@ -44,18 +49,6 @@ export function pageSQLConsole(route) {
return 1; return 1;
} }
return valA.localeCompare(valB); return valA.localeCompare(valB);
}
if (valA == valB) {
return 0;
}
if (valA == null) {
return 1;
}
if (valB == null) {
return -1;
}
return valB.localeCompare(valA);
}) || []; }) || [];
return pageData.maxRows >= sorted.length ? sorted : sorted.slice(0, pageData.maxRows); return pageData.maxRows >= sorted.length ? sorted : sorted.slice(0, pageData.maxRows);