add explicit button to show/hide right pane widgets, #1299

This commit is contained in:
zadam 2020-10-12 23:15:53 +02:00
parent a665d193eb
commit 28cb3976e5
3 changed files with 72 additions and 10 deletions

View File

@ -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>

View File

@ -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;
} }

View File

@ -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>
&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 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.