client: use a "Beta" badge for beta note types

This commit is contained in:
Adorian Doran 2025-02-06 20:24:13 +02:00
parent 5d845a81f8
commit 5e62f4999d
3 changed files with 23 additions and 9 deletions

View File

@ -21,7 +21,7 @@ const NOTE_TYPES = [
{ type: "mermaid", mime: "text/mermaid", title: t("note_types.mermaid-diagram"), selectable: true }, { type: "mermaid", mime: "text/mermaid", title: t("note_types.mermaid-diagram"), selectable: true },
{ type: "book", mime: "", title: t("note_types.book"), selectable: true }, { type: "book", mime: "", title: t("note_types.book"), selectable: true },
{ type: "webView", mime: "", title: t("note_types.web-view"), selectable: true }, { type: "webView", mime: "", title: t("note_types.web-view"), selectable: true },
{ type: "geoMap", mime: "application/json", title: t("note_types.geo-map"), selectable: true }, { type: "geoMap", mime: "application/json", title: t("note_types.geo-map"), isBeta: true, selectable: true },
{ type: "code", mime: "text/plain", title: t("note_types.code"), selectable: true } { type: "code", mime: "text/plain", title: t("note_types.code"), selectable: true }
]; ];
@ -35,6 +35,13 @@ const TPL = `
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
.note-type-dropdown .badge {
margin-left: 8px;
background: var(--accented-background-color);
font-weight: normal;
color: var(--menu-text-color);
}
</style> </style>
<button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle select-button note-type-button"> <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle select-button note-type-button">
<span class="note-type-desc"></span> <span class="note-type-desc"></span>
@ -74,11 +81,16 @@ export default class NoteTypeWidget extends NoteContextAwareWidget {
for (const noteType of NOTE_TYPES.filter((nt) => nt.selectable)) { for (const noteType of NOTE_TYPES.filter((nt) => nt.selectable)) {
let $typeLink; let $typeLink;
const $title = $("<span>").text(noteType.title);
if (noteType.isBeta) {
$title.append($(`<span class="badge">`).text(t("note_types.beta-feature")));
}
if (noteType.type !== "code") { if (noteType.type !== "code") {
$typeLink = $('<a class="dropdown-item">') $typeLink = $('<a class="dropdown-item">')
.attr("data-note-type", noteType.type) .attr("data-note-type", noteType.type)
.append('<span class="check">&check;</span> ') .append('<span class="check">&check;</span> ')
.append($("<span>").text(noteType.title)) .append($title)
.on("click", (e) => { .on("click", (e) => {
const type = $typeLink.attr("data-note-type"); const type = $typeLink.attr("data-note-type");
const noteType = NOTE_TYPES.find((nt) => nt.type === type); const noteType = NOTE_TYPES.find((nt) => nt.type === type);

View File

@ -1414,7 +1414,8 @@
"doc": "Doc", "doc": "Doc",
"widget": "Widget", "widget": "Widget",
"confirm-change": "It is not recommended to change note type when note content is not empty. Do you want to continue anyway?", "confirm-change": "It is not recommended to change note type when note content is not empty. Do you want to continue anyway?",
"geo-map": "Geo Map (beta)" "geo-map": "Geo Map",
"beta-feature": "Beta"
}, },
"protect_note": { "protect_note": {
"toggle-on": "Protect the note", "toggle-on": "Protect the note",

View File

@ -1381,7 +1381,8 @@
"launcher": "Scurtătură", "launcher": "Scurtătură",
"widget": "Widget", "widget": "Widget",
"confirm-change": "Nu se recomandă schimbarea tipului notiței atunci când ea are un conținut. Procedați oricum?", "confirm-change": "Nu se recomandă schimbarea tipului notiței atunci când ea are un conținut. Procedați oricum?",
"geo-map": "Hartă geografică (beta)" "geo-map": "Hartă geografică",
"beta-feature": "Beta"
}, },
"protect_note": { "protect_note": {
"toggle-off": "Deprotejează notița", "toggle-off": "Deprotejează notița",