mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
add explicit button to show/hide right pane widgets, #1299
This commit is contained in:
parent
a665d193eb
commit
28cb3976e5
18
.idea/codeStyles/Project.xml
generated
18
.idea/codeStyles/Project.xml
generated
@ -9,5 +9,23 @@
|
|||||||
<JSCodeStyleSettings version="0">
|
<JSCodeStyleSettings version="0">
|
||||||
<option name="USE_EXPLICIT_JS_EXTENSION" value="TRUE" />
|
<option name="USE_EXPLICIT_JS_EXTENSION" value="TRUE" />
|
||||||
</JSCodeStyleSettings>
|
</JSCodeStyleSettings>
|
||||||
|
<JetCodeStyleSettings>
|
||||||
|
<option name="PACKAGES_TO_USE_STAR_IMPORTS">
|
||||||
|
<value>
|
||||||
|
<package name="java.util" alias="false" withSubpackages="false" />
|
||||||
|
<package name="kotlinx.android.synthetic" alias="false" withSubpackages="true" />
|
||||||
|
<package name="io.ktor" alias="false" withSubpackages="true" />
|
||||||
|
</value>
|
||||||
|
</option>
|
||||||
|
<option name="PACKAGES_IMPORT_LAYOUT">
|
||||||
|
<value>
|
||||||
|
<package name="" alias="false" withSubpackages="true" />
|
||||||
|
<package name="java" alias="false" withSubpackages="true" />
|
||||||
|
<package name="javax" alias="false" withSubpackages="true" />
|
||||||
|
<package name="kotlin" alias="false" withSubpackages="true" />
|
||||||
|
<package name="" alias="true" withSubpackages="true" />
|
||||||
|
</value>
|
||||||
|
</option>
|
||||||
|
</JetCodeStyleSettings>
|
||||||
</code_scheme>
|
</code_scheme>
|
||||||
</component>
|
</component>
|
@ -77,6 +77,17 @@ const RIGHT_PANE_CSS = `
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#right-pane .widget-toggle-button {
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--main-text-color) !important;
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#right-pane .widget-toggle-button:hover {
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
#right-pane .body-wrapper {
|
#right-pane .body-wrapper {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
@ -5,14 +5,20 @@ const WIDGET_TPL = `
|
|||||||
<div class="card widget">
|
<div class="card widget">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<div>
|
<div>
|
||||||
<button class="btn btn-sm widget-title" data-toggle="collapse" data-target="#[to be set]">
|
<span class="widget-title">
|
||||||
Collapsible Group Item
|
Collapsible Group Item
|
||||||
</button>
|
</span>
|
||||||
|
|
||||||
<a class="widget-help external no-arrow bx bx-info-circle"></a>
|
<span class="widget-header-actions"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="widget-header-actions"></div>
|
<div>
|
||||||
|
<a class="widget-help external no-arrow bx bx-info-circle"></a>
|
||||||
|
|
||||||
|
<a class="widget-toggle-button no-arrow bx bx-minus"
|
||||||
|
title="Minimize/maximize widget"
|
||||||
|
data-toggle="collapse" data-target="#[to be set]"></a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="[to be set]" class="collapse body-wrapper" style="transition: none; ">
|
<div id="[to be set]" class="collapse body-wrapper" style="transition: none; ">
|
||||||
@ -38,13 +44,18 @@ export default class CollapsibleWidget extends TabAwareWidget {
|
|||||||
// not using constructor name because of webpack mangling class names ...
|
// not using constructor name because of webpack mangling class names ...
|
||||||
this.widgetName = this.widgetTitle.replace(/[^[a-zA-Z0-9]/g, "_");
|
this.widgetName = this.widgetTitle.replace(/[^[a-zA-Z0-9]/g, "_");
|
||||||
|
|
||||||
if (!options.is(this.widgetName + 'Collapsed')) {
|
this.$toggleButton = this.$widget.find('.widget-toggle-button');
|
||||||
|
|
||||||
|
const collapsed = options.is(this.widgetName + 'Collapsed');
|
||||||
|
if (!collapsed) {
|
||||||
this.$bodyWrapper.collapse("show");
|
this.$bodyWrapper.collapse("show");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.updateToggleButton(collapsed);
|
||||||
|
|
||||||
// using immediate variants of the event so that the previous collapse is not caught
|
// using immediate variants of the event so that the previous collapse is not caught
|
||||||
this.$bodyWrapper.on('hide.bs.collapse', () => this.saveCollapsed(true));
|
this.$bodyWrapper.on('hide.bs.collapse', () => this.toggleCollapsed(true));
|
||||||
this.$bodyWrapper.on('show.bs.collapse', () => this.saveCollapsed(false));
|
this.$bodyWrapper.on('show.bs.collapse', () => this.toggleCollapsed(false));
|
||||||
|
|
||||||
this.$body = this.$bodyWrapper.find('.card-body');
|
this.$body = this.$bodyWrapper.find('.card-body');
|
||||||
|
|
||||||
@ -66,19 +77,41 @@ export default class CollapsibleWidget extends TabAwareWidget {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.$headerActions = this.$widget.find('.widget-header-actions');
|
this.$headerActions = this.$widget.find('.widget-header-actions');
|
||||||
this.$headerActions.append(...this.headerActions);
|
let headerActions = this.headerActions;
|
||||||
|
|
||||||
|
if (headerActions.length > 0) {
|
||||||
|
headerActions = ["(", ...headerActions, ")"];
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$headerActions.append(...headerActions);
|
||||||
|
|
||||||
this.initialized = this.doRenderBody();
|
this.initialized = this.doRenderBody();
|
||||||
|
|
||||||
this.decorateWidget();
|
this.decorateWidget();
|
||||||
}
|
}
|
||||||
|
|
||||||
saveCollapsed(collapse) {
|
toggleCollapsed(collapse) {
|
||||||
|
this.updateToggleButton(collapse);
|
||||||
|
|
||||||
options.save(this.widgetName + 'Collapsed', collapse.toString());
|
options.save(this.widgetName + 'Collapsed', collapse.toString());
|
||||||
|
|
||||||
this.triggerEvent(`widgetCollapsedStateChanged`, {widgetName: this.widgetName, collapse});
|
this.triggerEvent(`widgetCollapsedStateChanged`, {widgetName: this.widgetName, collapse});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
updateToggleButton(collapse) {
|
||||||
|
if (collapse) {
|
||||||
|
this.$toggleButton
|
||||||
|
.addClass("bx-window")
|
||||||
|
.removeClass("bx-minus")
|
||||||
|
.attr("title", "Show");
|
||||||
|
} else {
|
||||||
|
this.$toggleButton
|
||||||
|
.addClass("bx-minus")
|
||||||
|
.removeClass("bx-window")
|
||||||
|
.attr("title", "Hide");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This event is used to synchronize collapsed state of all the tab-cached widgets since they are all rendered
|
* This event is used to synchronize collapsed state of all the tab-cached widgets since they are all rendered
|
||||||
* separately but should behave uniformly for the user.
|
* separately but should behave uniformly for the user.
|
||||||
|
Loading…
x
Reference in New Issue
Block a user