gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-06-06 18:08:33 +02:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

changed sidebar widget expanders to be consistent with tree expanders

Browse Source
This commit is contained in:
zadam 2021-01-30 21:28:10 +01:00
parent 17c6f53397
commit 69bdcdd74a
2 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/public/app/layouts/desktop_main_window_layout.js
View File

@ -46,7 +46,7 @@ const RIGHT_PANE_CSS = `
#right-pane .card-header { #right-pane .card-header {
background: inherit; background: inherit;
padding: 6px 10px 3px 10px; padding: 6px 10px 3px 0;
width: 99%; /* to give minimal right margin */ width: 99%; /* to give minimal right margin */
background-color: var(--button-background-color); background-color: var(--button-background-color);
border-color: var(--button-border-color); border-color: var(--button-border-color);
@ -91,15 +91,18 @@ const RIGHT_PANE_CSS = `
#right-pane .widget-toggle-button { #right-pane .widget-toggle-button {
cursor: pointer; cursor: pointer;
color: var(--main-text-color) !important; color: var(--main-text-color) !important;
position: relative;
top: 2px;
font-size: large;
} }
#right-pane .widget-toggle-button:hover { #right-pane .widget-toggle-button:hover {
text-decoration: none !important; text-decoration: none !important;
} }
#right-pane .widget-toggle-icon {
position: relative;
top: 2px;
font-size: large;
}
#right-pane .body-wrapper { #right-pane .body-wrapper {
overflow: auto; overflow: auto;
} }

38
src/public/app/widgets/collapsible_widget.js
View File

@ -3,21 +3,24 @@ import options from "../services/options.js";
const WIDGET_TPL = ` const WIDGET_TPL = `
<div class="card widget"> <div class="card widget">
<div class="card-header"> <div class="card-header">
<div> <div>
<span class="widget-title"> <a class="widget-toggle-button no-arrow"
Collapsible Group Item title="Minimize/maximize widget"
</span> data-toggle="collapse" data-target="#[to be set]">
<span class="widget-toggle-icon bx"></span>
<span class="widget-title">
Collapsible Group Item
</span>
</a>
<span class="widget-header-actions"></span> <span class="widget-header-actions"></span>
</div> </div>
<div> <div>
<a class="widget-help external no-arrow bx bx-info-circle"></a> <a class="widget-help external no-arrow bx bx-info-circle"></a>
&nbsp;
<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>
@ -45,13 +48,14 @@ export default class CollapsibleWidget extends TabAwareWidget {
this.widgetName = this.widgetTitle.replace(/[^[a-zA-Z0-9]/g, "_"); this.widgetName = this.widgetTitle.replace(/[^[a-zA-Z0-9]/g, "_");
this.$toggleButton = this.$widget.find('.widget-toggle-button'); this.$toggleButton = this.$widget.find('.widget-toggle-button');
this.$toggleIcon = this.$widget.find('.widget-toggle-icon');
const collapsed = options.is(this.widgetName + 'Collapsed'); const collapsed = options.is(this.widgetName + 'Collapsed');
if (!collapsed) { if (!collapsed) {
this.$bodyWrapper.collapse("show"); this.$bodyWrapper.collapse("show");
} }
this.updateToggleButton(collapsed); this.updateToggleIcon(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.toggleCollapsed(true)); this.$bodyWrapper.on('hide.bs.collapse', () => this.toggleCollapsed(true));
@ -85,23 +89,23 @@ export default class CollapsibleWidget extends TabAwareWidget {
} }
toggleCollapsed(collapse) { toggleCollapsed(collapse) {
this.updateToggleButton(collapse); this.updateToggleIcon(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) { updateToggleIcon(collapse) {
if (collapse) { if (collapse) {
this.$toggleButton this.$toggleIcon
.addClass("bx-chevron-down") .addClass("bx-chevron-right")
.removeClass("bx-minus") .removeClass("bx-chevron-down")
.attr("title", "Show"); .attr("title", "Show");
} else { } else {
this.$toggleButton this.$toggleIcon
.addClass("bx-minus") .addClass("bx-chevron-down")
.removeClass("bx-window") .removeClass("bx-chevron-right")
.attr("title", "Hide"); .attr("title", "Hide");
} }
} }