gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

feat(popup_editor): integrate note title + icon into modal header

Browse Source
This commit is contained in:
Elian Doran 2025-07-10 15:25:07 +03:00
parent cb5a771490
commit fa0c01591a
No known key found for this signature in database
2 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/layouts/desktop_layout.ts
View File

@ -262,8 +262,6 @@ export default class DesktopLayout {
.child(new PopupEditorDialog() .child(new PopupEditorDialog()
.child(new FlexContainer("row") .child(new FlexContainer("row")
.class("title-row") .class("title-row")
.css("height", "50px")
.css("min-height", "50px")
.css("align-items", "center") .css("align-items", "center")
.cssBlock(".title-row > * { margin: 5px; }") .cssBlock(".title-row > * { margin: 5px; }")
.child(new NoteIconWidget()) .child(new NoteIconWidget())

37
apps/client/src/widgets/dialogs/popup_editor.ts
View File

@ -7,15 +7,40 @@ import Container from "../containers/container.js";
const TPL = /*html*/`\ const TPL = /*html*/`\
<div class="popup-editor-dialog modal fade mx-auto" tabindex="-1" role="dialog"> <div class="popup-editor-dialog modal fade mx-auto" tabindex="-1" role="dialog">
<style>
.modal.popup-editor-dialog .modal-header .modal-title {
font-size: 1em;
}
.modal.popup-editor-dialog .title-row,
.modal.popup-editor-dialog .modal-title,
.modal.popup-editor-dialog .note-icon-widget {
height: 32px;
}
.modal.popup-editor-dialog .note-icon-widget {
width: 32px;
margin: 0;
padding: 0;
}
.modal.popup-editor-dialog .note-icon-widget button.note-icon,
.modal.popup-editor-dialog .note-title-widget input.note-title {
font-size: 1em;
}
</style>
<div class="modal-dialog modal-lg" role="document"> <div class="modal-dialog modal-lg" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Popup editor</h5> <div class="modal-title">
<!-- This is where the first child will be injected -->
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<!-- This is where the content will be injected. --> <!-- This is where all but the first child will be injected. -->
</div> </div>
</div> </div>
</div> </div>
@ -39,7 +64,13 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
// Now we wrap it in the modal. // Now we wrap it in the modal.
const $newWidget = $(TPL); const $newWidget = $(TPL);
$newWidget.find(".modal-body").append(this.$widget.children()); const $modalHeader = $newWidget.find(".modal-title");
const $modalBody = $newWidget.find(".modal-body");
const children = this.$widget.children();
console.log("Got children", children);
$modalHeader.append(children[0]);
$modalBody.append(children.slice(1));
this.$widget = $newWidget; this.$widget = $newWidget;
} }