diff options
| -rw-r--r-- | src/client/views/nodes/WebBox.scss | 14 | ||||
| -rw-r--r-- | src/client/views/nodes/WebBox.tsx | 12 |
2 files changed, 24 insertions, 2 deletions
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index 198e7ef10..cdff4aa74 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -6,8 +6,18 @@ position: relative; display: flex; - - + .webBox-overlayButton-sidebar { + background: #121721; + height: 25px; + width: 25px; + right: 0; + display: flex; + position: absolute; + align-items: center; + justify-content: center; + border-radius: 3px; + pointer-events: all; + } .webBox-tagList { display: flex; flex-direction: row; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index ab17703c8..6127f82e3 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -503,6 +503,14 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum DocUtils.MakeLink({ doc: anchor }, { doc: target }, "inline markup", "annotation"); this.sidebarAddDocument(target); } + toggleSidebar = () => { + if (this.layoutDoc.nativeWidth === this.layoutDoc[this.fieldKey + "-nativeWidth"]) { + this.layoutDoc.nativeWidth = 250 + NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]); + } else { + this.layoutDoc.nativeWidth = NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]); + } + this.layoutDoc._width = NumCast(this.layoutDoc._nativeWidth) * (NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]) / NumCast(this.layoutDoc[this.fieldKey + "-nativeHeight"])) + } sidebarKey = () => this.fieldKey + "-sidebar"; sidebarFiltersHeight = () => 50; sidebarTransform = () => this.props.ScreenToLocalTransform().translate(Doc.NativeWidth(this.dataDoc), 0).scale(this.props.scaling?.() || 1); @@ -669,6 +677,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum annotationLayer={this._annotationLayer.current} mainCont={this._mainCont.current} />} </div > + <button className="webBox-overlayButton-sidebar" key="sidebar" title="Toggle Sidebar" style={{ right: this.sidebarWidth() + 7 }} + onPointerDown={e => e.stopPropagation()} onClick={e => this.toggleSidebar()} > + <FontAwesomeIcon style={{ color: "white" }} icon={"chevron-left"} size="sm" /> + </button> {this.sidebarOverlay} {this.props.isSelected() ? this.editToggleBtn() : null} </div>); |