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

refactored TOC and Highlights close buttons and added a button to quickly access options

Browse Source
This commit is contained in:
zadam 2023-11-03 10:44:14 +01:00
parent 76f874ef6d
commit 612e4406b5
6 changed files with 75 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/public/app/widgets/basic_widget.js
View File

@ -84,7 +84,8 @@ class BasicWidget extends Component {
this.doRender();
this.$widget.attr('data-component-id', this.componentId);
this.$widget.addClass('component')
this.$widget
.addClass('component')
.prop('component', this);
if (!this.isEnabled()) {
@ -126,7 +127,7 @@ class BasicWidget extends Component {
* Method used for rendering the widget.
*
* Your class should override this method.
* @returns {JQuery<HTMLElement>} Your widget.
* The method is expected to create a this.$widget containing jQuery object
*/
doRender() {}

1
src/public/app/widgets/buttons/onclick_button.js
View File

@ -6,6 +6,7 @@ export default class OnClickButtonWidget extends AbstractButtonWidget {
if (this.settings.onClick) {
this.$widget.on("click", e => {
e.stopPropagation();
this.$widget.tooltip("hide");
this.settings.onClick(this, e);

48
src/public/app/widgets/highlights_list.js
View File

@ -9,6 +9,7 @@ import attributeService from "../services/attributes.js";
import RightPanelWidget from "./right_panel_widget.js";
import options from "../services/options.js";
import OnClickButtonWidget from "./buttons/onclick_button.js";
import appContext from "../components/app_context.js";
const TPL = `<div class="highlights-list-widget">
<style>
@ -35,29 +36,33 @@ const TPL = `<div class="highlights-list-widget">
.highlights-list li:hover {
font-weight: bold;
}
.close-highlights-list {
position: absolute;
top: 2px;
right: 0px;
}
</style>
<span class="highlights-list"></span>
</div>`;
export default class HighlightsListWidget extends RightPanelWidget {
constructor() {
super();
this.closeHltButton = new CloseHltButton();
this.child(this.closeHltButton);
}
get widgetTitle() {
return "Highlights List";
}
get widgetButtons() {
return [
new OnClickButtonWidget()
.icon("bx-slider")
.title("Options")
.titlePlacement("left")
.onClick(() => appContext.tabManager.openContextWithNote('_optionsTextNotes', {activate: true}))
.class("icon-action"),
new OnClickButtonWidget()
.icon("bx-x")
.title("Close Highlights List")
.titlePlacement("left")
.onClick(widget => widget.triggerCommand("closeHlt"))
.class("icon-action")
];
}
isEnabled() {
return super.isEnabled()
&& this.note.type === 'text'
@ -68,7 +73,6 @@ export default class HighlightsListWidget extends RightPanelWidget {
async doRenderBody() {
this.$body.empty().append($(TPL));
this.$highlightsList = this.$body.find('.highlights-list');
this.$body.find('.highlights-list-widget').append(this.closeHltButton.render());
}
async refreshWithNote(note) {
@ -241,19 +245,3 @@ export default class HighlightsListWidget extends RightPanelWidget {
}
}
}
class CloseHltButton extends OnClickButtonWidget {
constructor() {
super();
this.icon("bx-x")
.title("Close HighlightsListWidget")
.titlePlacement("left")
.onClick((widget, e) => {
e.stopPropagation();
widget.triggerCommand("closeHlt");
})
.class("icon-action close-highlights-list");
}
}

31
src/public/app/widgets/right_panel_widget.js
View File

@ -2,7 +2,10 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js";
const WIDGET_TPL = `
<div class="card widget">
<div class="card-header"></div>
<div class="card-header">
<div class="card-header-title"></div>
<div class="card-header-buttons"></div>
</div>
<div id="[to be set]" class="body-wrapper">
<div class="card-body"></div>
@ -17,9 +20,18 @@ class RightPanelWidget extends NoteContextAwareWidget {
/** Title to show in the panel. */
get widgetTitle() { return "Untitled widget"; }
get widgetButtons() { return []; }
get help() { return {}; }
constructor() {
super();
this.child(...this.widgetButtons);
}
/**
* Do not override this method unless you know what you're doing.
* Do not override this method unless you know what you're doing.
*/
doRender() {
@ -32,19 +44,26 @@ class RightPanelWidget extends NoteContextAwareWidget {
this.$body = this.$bodyWrapper.find('.card-body');
this.$title = this.$widget.find('.card-header');
this.$title = this.$widget.find('.card-header .card-header-title');
this.$title.text(this.widgetTitle);
this.$buttons = this.$widget.find('.card-header .card-header-buttons');
this.$buttons.empty();
for (const buttonWidget of this.children) {
this.$buttons.append(buttonWidget.render());
}
this.initialized = this.doRenderBody();
}
/**
* Method used for rendering the body of the widget.
*
* Method used for rendering the body of the widget (via existing this.$body)
*
* Your class should override this method.
* @returns {JQuery<HTMLElement>} The body of your widget.
* @returns {Promise|undefined} if widget needs async operation to initialize, it can return a Promise
*/
async doRenderBody() {}
}
export default RightPanelWidget;
export default RightPanelWidget;

49
src/public/app/widgets/toc.js
View File

@ -18,6 +18,7 @@ import attributeService from "../services/attributes.js";
import RightPanelWidget from "./right_panel_widget.js";
import options from "../services/options.js";
import OnClickButtonWidget from "./buttons/onclick_button.js";
import appContext from "../components/app_context.js";
const TPL = `<div class="toc-widget">
<style>
@ -47,29 +48,33 @@ const TPL = `<div class="toc-widget">
.toc li:hover {
font-weight: bold;
}
.close-toc {
position: absolute;
top: 2px;
right: 0px;
}
</style>
<span class="toc"></span>
</div>`;
export default class TocWidget extends RightPanelWidget {
constructor() {
super();
this.closeTocButton = new CloseTocButton();
this.child(this.closeTocButton);
}
get widgetTitle() {
return "Table of Contents";
}
get widgetButtons() {
return [
new OnClickButtonWidget()
.icon("bx-slider")
.title("Options")
.titlePlacement("left")
.onClick(() => appContext.tabManager.openContextWithNote('_optionsTextNotes', {activate: true}))
.class("icon-action"),
new OnClickButtonWidget()
.icon("bx-x")
.title("Close Table of Contents")
.titlePlacement("left")
.onClick(widget => widget.triggerCommand("closeToc"))
.class("icon-action")
];
}
isEnabled() {
return super.isEnabled()
&& this.note.type === 'text'
@ -80,7 +85,6 @@ export default class TocWidget extends RightPanelWidget {
async doRenderBody() {
this.$body.empty().append($(TPL));
this.$toc = this.$body.find('.toc');
this.$body.find('.toc-widget').append(this.closeTocButton.render());
}
async refreshWithNote(note) {
@ -238,20 +242,3 @@ export default class TocWidget extends RightPanelWidget {
}
}
}
class CloseTocButton extends OnClickButtonWidget {
constructor() {
super();
this.icon("bx-x")
.title("Close TOC")
.titlePlacement("left")
.onClick((widget, e) => {
e.stopPropagation();
widget.triggerCommand("closeToc");
})
.class("icon-action close-toc");
}
}

12
src/public/stylesheets/style.css
View File

@ -505,7 +505,7 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
}
.algolia-autocomplete-container .aa-dropdown-menu {
position: inherit !important;
position: inherit !important;
overflow: auto;
}
@ -967,7 +967,7 @@ input {
#right-pane .card-header {
background: inherit;
padding: 6px 10px 3px 0;
padding: 6px 0 3px 0;
width: 99%; /* to give minimal right margin */
background-color: var(--button-background-color);
border-color: var(--button-border-color);
@ -976,11 +976,19 @@ input {
border-style: solid;
display: flex;
justify-content: space-between;
align-items: baseline;
font-weight: bold;
text-transform: uppercase;
color: var(--muted-text-color) !important;
}
#right-pane .card-header-buttons {
display: flex;
transform: scale(0.9);
position: relative;
top: 2px;
}
#right-pane .body-wrapper {
overflow: auto;
}