Feature Add control buttons collapsing on right panel.
@@ -28,6 +28,10 @@ import { isRejected } from '../helpers/messageType';
import { setRightPane, selectRejectedMessageId, setAdminMsgEnabled } from '../actions/actionCreators';
import { prevCyclicItemByIndex, nextCyclicItemByIndex } from '../helpers/array';
import { createSelector } from '../helpers/styleCreators';
+import { AutoSizer } from 'react-virtualized';
+
+const MIN_CONTROLS_WIDTH = 800,
+ MIN_CONTROLS_WIDTH_WITH_REJECTED = 850;
interface RightPanelStateProps {
panel: Panel;
@@ -91,7 +95,12 @@ class RightPanelBase extends React.Component<RightPanelProps> {
return (
<div className="layout-panel">
- <div className="layout-panel__controls">
+ <AutoSizer disableHeight>
+ {({ width }) => {
+ const showTitles = width > (rejectedEnabled ? MIN_CONTROLS_WIDTH_WITH_REJECTED : MIN_CONTROLS_WIDTH);
+
+ return (
+ <div className="layout-panel__controls" style={{ width }}>
<div className="layout-panel__tabs">
<ToggleButton
isToggled={panel == Panel.Messages}
@@ -112,18 +121,25 @@ class RightPanelBase extends React.Component<RightPanelProps> {
onClick={adminControlEnabled ? (() => adminEnabledHandler(!adminMessagesEnabled)) : undefined}
title={(adminMessagesEnabled ? "Hide" : "Show") + " Admin messages"}>
<div className={adminIconClass} />
+ {
+ showTitles ?
<div className={adminTitleClass}>
{controlShowTitles ? <p>{adminControlEnabled ? "" : "No"} Admin Messages</p> : null}
- </div>
+ </div> :
+ null
+ }
</div>
<div className={rejectedRootClass}>
<div className="layout-control__icon rejected"
onClick={() => this.currentRejectedHandler(currentRejectedIndex)}
style={{ cursor: rejectedEnabled ? 'pointer' : 'unset' }}
title={rejectedEnabled ? "Scroll to current rejected message" : null} />
+ {showTitles ?
<div className="layout-control__title">
{controlShowTitles ? <p>{rejectedEnabled ? "" : "No "}Rejected</p> : null}
- </div>
+ </div> :
+ null
+ }
{
rejectedEnabled ?
(
@@ -144,11 +160,18 @@ class RightPanelBase extends React.Component<RightPanelProps> {
<div className="layout-control disabled"
title="Show predictions (Not implemented)">
<div className="layout-control__icon ml" />
+ {
+ showTitles ?
<div className="layout-control__title">
{controlShowTitles ? <p>Predictions</p> : null}
+ </div> :
+ null
+ }
</div>
</div>
- </div>
+ )
+ }}
+ </AutoSizer>
<div className="layout-panel__content">
{this.renderPanels(panel)}
</div>
