sascha
/
Notes
mirror of https://github.com/TriliumNext/Notes
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/255/head
zadam 2023-10-08 22:58:31 +07:00
parent 00f5924251
commit 137703ada4
3 changed files with 50 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package-lock.json generated
Unescape Escape 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
Unescape Escape 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()

79
src/public/app/widgets/ribbon_widgets/promoted_attributes.js
Unescape Escape 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;
}
// 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;
}
attributeValues = attributeValues.map(attribute => ({value: attribute}));
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();
$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));
const filtered = attributeValues.filter(attr => attr.value.toLowerCase().includes(term));
cb(filtered);
}
}]);
cb(filtered);
}
}]);
$input.on('autocomplete:selected', e => this.promotedAttributeChanged(e));
});
$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;
}