gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

add promoted attributes widget to the mobile version, closes #4314

Browse Source
This commit is contained in:
zadam 2023-10-08 22:58:31 +03:00
parent 00f5924251
commit 137703ada4
3 changed files with 53 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "trilium",
"version": "0.61.8-beta",
"version": "0.61.9-beta",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "trilium",
"version": "0.61.8-beta",
"version": "0.61.9-beta",
"hasInstallScript": true,
"license": "AGPL-3.0-only",
"dependencies": {

2
src/public/app/layouts/mobile_layout.js
View File

@ -22,6 +22,7 @@ import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
import LauncherContainer from "../widgets/containers/launcher_container.js";
import RootContainer from "../widgets/containers/root_container.js";
import SharedInfoWidget from "../widgets/shared_info.js";
import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js";
const MOBILE_CSS = `
<style>
@ -154,6 +155,7 @@ export default class MobileLayout {
.child(new HideFloatingButtonsButton())
)
.child(new MermaidWidget())
.child(new PromotedAttributesWidget())
.child(
new ScrollingContainer()
.filling()

85
src/public/app/widgets/ribbon_widgets/promoted_attributes.js
View File

@ -5,6 +5,7 @@ import noteAutocompleteService from "../../services/note_autocomplete.js";
import NoteContextAwareWidget from "../note_context_aware_widget.js";
import attributeService from "../../services/attributes.js";
import options from "../../services/options.js";
import utils from "../../services/utils.js";
const TPL = `
<div>
@ -37,9 +38,13 @@ const TPL = `
</style>
<div class="promoted-attributes-container"></div>
</div>
`;
</div>`;
/**
* This widget is quite special because it's used in the desktop ribbon, but in mobile outside of ribbon.
* This works without many issues (apart from autocomplete), but it should be kept in mind when changing things
* and testing.
*/
export default class PromotedAttributesWidget extends NoteContextAwareWidget {
get name() {
return "promotedAttributes";
@ -147,34 +152,37 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
if (definition.labelType === 'text') {
$input.prop("type", "text");
// no need to await for this, can be done asynchronously
server.get(`attribute-values/${encodeURIComponent(valueAttr.name)}`).then(attributeValues => {
if (attributeValues.length === 0) {
return;
}
attributeValues = attributeValues.map(attribute => ({value: attribute}));
$input.autocomplete({
appendTo: document.querySelector('body'),
hint: false,
autoselect: false,
openOnFocus: true,
minLength: 0,
tabAutocomplete: false
}, [{
displayKey: 'value',
source: function (term, cb) {
term = term.toLowerCase();
const filtered = attributeValues.filter(attr => attr.value.toLowerCase().includes(term));
cb(filtered);
// autocomplete for label values is just nice to have, mobile can keep labels editable without autocomplete
if (utils.isDesktop()) {
// no need to await for this, can be done asynchronously
server.get(`attribute-values/${encodeURIComponent(valueAttr.name)}`).then(attributeValues => {
if (attributeValues.length === 0) {
return;
}
}]);
$input.on('autocomplete:selected', e => this.promotedAttributeChanged(e));
});
attributeValues = attributeValues.map(attribute => ({value: attribute}));
$input.autocomplete({
appendTo: document.querySelector('body'),
hint: false,
autoselect: false,
openOnFocus: true,
minLength: 0,
tabAutocomplete: false
}, [{
displayKey: 'value',
source: function (term, cb) {
term = term.toLowerCase();
const filtered = attributeValues.filter(attr => attr.value.toLowerCase().includes(term));
cb(filtered);
}
}]);
$input.on('autocomplete:selected', e => this.promotedAttributeChanged(e));
});
}
}
else if (definition.labelType === 'number') {
$input.prop("type", "number");
@ -219,7 +227,7 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
.append($openButton));
}
else {
ws.logError(`Unknown labelType=${definitionAttr.labelType}`);
ws.logError(`Unknown labelType '${definitionAttr.labelType}'`);
}
}
else if (valueAttr.type === 'relation') {
@ -227,17 +235,22 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
$input.val(await treeService.getNoteTitle(valueAttr.value));
}
// no need to wait for this
noteAutocompleteService.initNoteAutocomplete($input, {allowCreatingNotes: true});
if (utils.isDesktop()) {
// no need to wait for this
noteAutocompleteService.initNoteAutocomplete($input, {allowCreatingNotes: true});
$input.on('autocomplete:noteselected', (event, suggestion, dataset) => {
this.promotedAttributeChanged(event);
});
$input.on('autocomplete:noteselected', (event, suggestion, dataset) => {
this.promotedAttributeChanged(event);
});
$input.setSelectedNotePath(valueAttr.value);
$input.setSelectedNotePath(valueAttr.value);
} else {
// we can't provide user a way to edit the relation so make it read only
$input.attr("readonly", "readonly");
}
}
else {
ws.logError(`Unknown attribute type=${valueAttr.type}`);
ws.logError(`Unknown attribute type '${valueAttr.type}'`);
return;
}