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

[#7648] fixed firefox autoexpandable input and updated dark theme colors

Browse Source
This commit is contained in:
Gani Georgiev
2026-04-19 23:44:04 +03:00
parent c3a53cb183
commit 93e6ebfe49
11 changed files with 83 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md
View File

@@ -1,3 +1,10 @@
## v0.37.2 (WIP)
- Fixed autoexpandable input in Firefox ([#7648](https://github.com/pocketbase/pocketbase/discussions/7648)).
- Slightly adjusted the dark theme colors for better readability ([#7648](https://github.com/pocketbase/pocketbase/discussions/7648)).
## v0.37.1 ## v0.37.1
- Minor UI bugfixes: - Minor UI bugfixes:

2
ui/.env
View File

@@ -11,4 +11,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.37.1" PB_VERSION = "v0.37.2-dev"

1
ui/dist/assets/index-BCIc-325.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
ui/dist/assets/index-BLIFQr7L.css vendored
View File

File diff suppressed because one or more lines are too long

8
ui/dist/assets/index-CswPTzfS.js → ui/dist/assets/index-BXCx-2zm.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 --> <!-- 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-CswPTzfS.js"></script> <script type="module" crossorigin src="./assets/index-BXCx-2zm.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-BLIFQr7L.css"> <link rel="stylesheet" crossorigin href="./assets/index-BCIc-325.css">
</head> </head>
<body> <body>
</body> </body>

2
ui/src/css/base.css
View File

@@ -113,7 +113,7 @@ video {
} }
::selection { ::selection {
background: rgba(0, 0, 0, 0.2); background: var(--selectionColor);
} }
:root { :root {

29
ui/src/css/form.css
View File

@@ -487,17 +487,38 @@ button {
border-radius: var(--borderRadius); border-radius: var(--borderRadius);
} }
} }
.autoexpand-wrapper > .input,
textarea { textarea {
padding-top: 8px; padding-top: 8px;
padding-bottom: 9px; padding-bottom: 9px;
line-height: 1.5; line-height: 1.5;
resize: vertical; resize: vertical;
min-height: 38px;
max-height: 300px;
&.autoexpand { &.autoexpand {
/* @todo check firefox support */ @supports (field-sizing: content) {
field-sizing: content; field-sizing: content;
resize: none;
}
}
}
/* @todo remove after Firefox add support for "field-sizing:content" */
/* note: based on https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/ */
.autoexpand-wrapper {
display: grid;
> textarea {
resize: none; resize: none;
min-height: 38px; }
max-height: 300px; > .input {
white-space: pre-wrap;
visibility: hidden;
overflow: auto;
}
> .input,
> textarea {
/* Place on top of each other */
grid-area: 1 / 1 / 2 / 2;
} }
} }

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

@@ -68,7 +68,7 @@
--surfaceSuccessColor: color-mix(in srgb, var(--successColor), white 80%); --surfaceSuccessColor: color-mix(in srgb, var(--successColor), white 80%);
--surfaceWarningColor: color-mix(in srgb, var(--warningColor), white 80%); --surfaceWarningColor: color-mix(in srgb, var(--warningColor), white 80%);
--surfaceDangerColor: color-mix(in srgb, var(--dangerColor), white 80%); --surfaceDangerColor: color-mix(in srgb, var(--dangerColor), white 80%);
--selectionColor: var(--surfaceAlt3Color); --selectionColor: rgba(34, 36, 42, 0.22);
--inputColor: var(--surfaceAlt2Color); --inputColor: var(--surfaceAlt2Color);
--inputFocusColor: var(--surfaceAlt3Color); --inputFocusColor: var(--surfaceAlt3Color);
--inputBorderColor: var(--surfaceAlt4Color); --inputBorderColor: var(--surfaceAlt4Color);
@@ -138,28 +138,27 @@
/* dark */ /* dark */
[data-color-scheme="dark"], [data-color-scheme="dark"],
[data-color-scheme="dark"] .dropdown { [data-color-scheme="dark"] .dropdown {
--surfaceColor: #282828; --surfaceColor: #212121;
--surfaceAlt1Color: color-mix(in srgb, var(--surfaceColor), white 2%); --surfaceAlt1Color: color-mix(in srgb, var(--surfaceColor), white 3%);
--surfaceAlt2Color: color-mix(in srgb, var(--surfaceColor), white 4%); --surfaceAlt2Color: color-mix(in srgb, var(--surfaceColor), white 7%);
--surfaceAlt3Color: color-mix(in srgb, var(--surfaceColor), white 6%); --surfaceAlt3Color: color-mix(in srgb, var(--surfaceColor), white 12%);
--surfaceAlt4Color: color-mix(in srgb, var(--surfaceColor), white 9%); --surfaceAlt4Color: color-mix(in srgb, var(--surfaceColor), white 14%);
--surfaceAlt5Color: color-mix(in srgb, var(--surfaceColor), white 12%); --surfaceAlt5Color: color-mix(in srgb, var(--surfaceColor), white 16%);
--surfaceTxtColor: #dedede; --surfaceTxtColor: #dedede;
--tooltipTxtColor: var(--surfaceTxtColor); --tooltipTxtColor: var(--surfaceTxtColor);
--surfaceTxtHintColor: color-mix(in srgb, var(--surfaceTxtColor), transparent 45%); --surfaceTxtHintColor: color-mix(in srgb, var(--surfaceTxtColor), transparent 45%);
--surfaceTxtDisabledColor: color-mix(in srgb, var(--surfaceTxtColor), transparent 65%); --surfaceTxtDisabledColor: color-mix(in srgb, var(--surfaceTxtColor), transparent 65%);
--secondaryColor: var(--surfaceAlt3Color); --secondaryColor: var(--surfaceAlt2Color);
--secondaryTxtColor: var(--surfaceTxtColor); --secondaryTxtColor: var(--surfaceTxtColor);
--secondaryTxtColor: var(--surfaceTxtColor); --secondaryAlt1Color: var(--surfaceAlt3Color);
--secondaryAlt1Color: var(--surfaceAlt4Color); --secondaryAlt2Color: var(--surfaceAlt4Color);
--secondaryAlt2Color: var(--surfaceAlt5Color);
--primaryColor: #1e1e1e; --primaryColor: #161616;
--primaryTxtColor: var(--surfaceTxtColor); --primaryTxtColor: var(--surfaceTxtColor);
--primaryAlt1Color: color-mix(in srgb, var(--primaryColor), black 8%); --primaryAlt1Color: color-mix(in srgb, var(--primaryColor), white 1.2%);
--primaryAlt2Color: color-mix(in srgb, var(--primaryColor), black 16%); --primaryAlt2Color: color-mix(in srgb, var(--primaryColor), white 1.7%);
--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%);
@@ -187,6 +186,7 @@
--dangerAlt2Color: color-mix(in srgb, var(--dangerColor), black 15%); --dangerAlt2Color: color-mix(in srgb, var(--dangerColor), black 15%);
--surfaceDangerColor: color-mix(in srgb, var(--dangerColor), var(--surfaceColor) 45%); --surfaceDangerColor: color-mix(in srgb, var(--dangerColor), var(--surfaceColor) 45%);
--selectionColor: rgba(255, 255, 255, 0.22);
--inputColor: var(--surfaceAlt2Color); --inputColor: var(--surfaceAlt2Color);
--inputFocusColor: var(--surfaceAlt3Color); --inputFocusColor: var(--surfaceAlt3Color);
--inputBorderColor: var(--surfaceAlt4Color); --inputBorderColor: var(--surfaceAlt4Color);

37
ui/src/fields/text/input.js
View File

@@ -33,17 +33,32 @@ export function input(props) {
}), }),
t.span({ className: "txt" }, () => props.field.name), t.span({ className: "txt" }, () => props.field.name),
), ),
t.textarea({ // @todo remove after Firefox add support for "field-sizing:content"
id: uniqueId, //
className: "autoexpand", // note1: not using contenteditable because it requires keeping
rows: 1, // track of the cursor offset when replacing the content in oninput
name: () => props.field.name, //
required: () => data.isRequired, // note2: based on https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/
disabled: () => data.isDisabled, t.div(
placeholder: () => (data.hasAutogenerate ? "Leave empty to autogenerate..." : ""), { className: "autoexpand-wrapper" },
value: () => props.record[props.field.name] || "", t.textarea({
oninput: (e) => (props.record[props.field.name] = e.target.value || ""), id: uniqueId,
}), // className: "autoexpand",
rows: 1,
name: () => props.field.name,
required: () => data.isRequired,
disabled: () => data.isDisabled,
placeholder: () => (data.hasAutogenerate ? "Leave empty to autogenerate..." : ""),
value: () => props.record[props.field.name] || "",
oninput: (e) => (props.record[props.field.name] = e.target.value || ""),
}),
t.div(
{ className: "input" },
() => props.record[props.field.name],
// the empty space is necessary to prevent jumpy behavior
" ",
),
),
), ),
// list the autodate field values in a tooltip next to the primary key // list the autodate field values in a tooltip next to the primary key
() => { () => {

2
ui/src/records/recordUpsertModal.js
View File

@@ -1242,6 +1242,7 @@ function authFieldPassword(collection, data) {
id: uniqueId + "_password", id: uniqueId + "_password",
spellcheck: false, spellcheck: false,
name: "password", name: "password",
className: "inline-error",
autocomplete: "new-password", autocomplete: "new-password",
required: () => local.isNew || local.changePassword, required: () => local.isNew || local.changePassword,
value: () => data.record.password || "", value: () => data.record.password || "",
@@ -1268,6 +1269,7 @@ function authFieldPassword(collection, data) {
id: uniqueId + "_password_confirm", id: uniqueId + "_password_confirm",
spellcheck: false, spellcheck: false,
name: "passwordConfirm", name: "passwordConfirm",
className: "inline-error",
autocomplete: "new-password", autocomplete: "new-password",
required: () => local.isNew || local.changePassword, required: () => local.isNew || local.changePassword,
value: () => data.record.passwordConfirm || "", value: () => data.record.passwordConfirm || "",