mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
refactored TOC and Highlights close buttons and added a button to quickly access options
This commit is contained in:
zadam
parent
76f874ef6d
commit
612e4406b5
@ -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() {}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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");
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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");
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user