diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/PropertiesButtons.tsx | 41 | ||||
-rw-r--r-- | src/client/views/collections/CollectionDockingView.tsx | 3 | ||||
-rw-r--r-- | src/client/views/nodes/PresBox.scss | 10 | ||||
-rw-r--r-- | src/client/views/nodes/PresBox.tsx | 7 |
4 files changed, 34 insertions, 27 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 29afd447f..002abc5a3 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -237,31 +237,34 @@ export class PropertiesButtons extends React.Component<{}, {}> { @computed get pinWithViewButton() { const targetDoc = this.selectedDoc; - const isPinned = targetDoc && Doc.isDocPinned(targetDoc); if (targetDoc) { const x = targetDoc._panX; const y = targetDoc._panY; const scale = targetDoc._viewScale; } return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with this view"}</div></>}> - <div className="propertiesButtons-linker" - style={{ backgroundColor: "white", color: "black" }} - onClick={e => { - if (targetDoc) { - DockedFrameRenderer.PinDoc(targetDoc, false); - const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1]; - const x = targetDoc._panX; - const y = targetDoc._panY; - const scale = targetDoc._viewScale; - activeDoc.presPinView = true; - activeDoc.presPinViewX = x; - activeDoc.presPinViewY = y; - activeDoc.presPinViewScale = scale; - } - }}> - <div style={{ position: 'absolute', fontSize: 25, fontWeight: 700, transform: 'translate(42%, -7px)', color: 'rgba(0,0,0,0.2)' }}>V</div> - <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" /> - </div></Tooltip>; + <> + <div className="propertiesButtons-linker" + style={{ backgroundColor: "black", color: "white" }} + onClick={e => { + if (targetDoc) { + DockedFrameRenderer.PinDoc(targetDoc, false); + const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1]; + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeDoc.presPinView = true; + activeDoc.presPinViewX = x; + activeDoc.presPinViewY = y; + activeDoc.presPinViewScale = scale; + } + }}> + <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" /> + <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(0, -20px)', color: 'rgba(250,250,250,0.5)' }}>V</div> + </div> + <div className="propertiesButtons-title" style={{ backgroundColor: "black", color: "white" }}>{"View"}</div> + </> + </Tooltip>; } diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 6d4a7f311..af701bfdd 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -873,13 +873,12 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> { return <div className="miniPres" style={{ width: 250, height: 30, background: '#323232' }}> - <div className="miniPresOverlay" > + <div className="miniPresOverlay" onClick={() => document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)}> <div className="miniPres-button" onClick={PresBox.Instance.back}><FontAwesomeIcon icon={"arrow-left"} /></div> <div className="miniPres-button" onClick={() => PresBox.Instance.startOrResetPres(PresBox.Instance.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div> <div className="miniPres-button" onClick={PresBox.Instance.next}><FontAwesomeIcon icon={"arrow-right"} /></div> <div className="miniPres-divider"></div> <div className="miniPres-button-text">Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length}</div> - {/* <div className="miniPres-button-text">{this.getCurrentFrame}</div> */} <div className="miniPres-divider"></div> <div className="miniPres-button-text" onClick={PresBox.Instance.updateMinimize}>EXIT</div> </div> diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 16821f5bc..8ce71935c 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -30,7 +30,7 @@ transform: translate(8px, -5px); box-shadow: 1px 1px 4px 4px rgba(0, 0, 0, 0.25); z-index: 1000; - width: 315; + width: calc(100% - 50px); height: max-content; justify-self: center; letter-spacing: normal; @@ -583,6 +583,8 @@ align-items: center; justify-content: center; border-radius: 4px; + padding-left: 7px; + padding-right: 7px; border-bottom-right-radius: 0; border-top-right-radius: 0; } @@ -597,6 +599,8 @@ align-items: center; justify-content: center; border-radius: 4px; + padding-left: 7px; + padding-right: 7px; border-bottom-left-radius: 0; border-top-left-radius: 0; } @@ -722,6 +726,7 @@ position: relative; width: 100%; background: gray; + min-height: 35px; padding-top: 5px; padding-bottom: 5px; display: grid; @@ -782,8 +787,7 @@ .presBox-button.present { display: flex; - min-width: 100px; - width: 100px; + width: max-content; position: absolute; right: 10px; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index ccf1fb8e3..c3b920b26 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -1064,10 +1064,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> <div className="ribbon-button" style={{ display: activeItem.zoomProgressivize ? "flex" : "none", backgroundColor: targetDoc.editZoomProgressivize ? "#aedef8" : "" }} onClick={this.editZoomProgressivize}>Viewfinder</div> {/* <div className="ribbon-button" style={{ display: activeItem.zoomProgressivize ? "flex" : "none", backgroundColor: targetDoc.editSnapZoomProgressivize ? "#aedef8" : "" }} onClick={this.editSnapZoomProgressivize}>Snapshot</div> */} </div> - <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform' ? "inline-flex" : "none" }}> + {/* <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform' ? "inline-flex" : "none" }}> <div className="ribbon-button" onClick={this.progressivizeText}>Text progressivize</div> <div className="ribbon-button" style={{ display: activeItem.textProgressivize ? "flex" : "none", backgroundColor: targetDoc.editTextProgressivize ? "#aedef8" : "" }} onClick={this.editTextProgressivize}>Edit</div> - </div> + </div> */} <div className="ribbon-doubleButton" style={{ display: targetDoc._viewType === "stacking" || targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF ? "inline-flex" : "none" }}> <div className="ribbon-button" style={{ backgroundColor: activeItem.scrollProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeScroll}>Scroll progressivize</div> <div className="ribbon-button" style={{ display: activeItem.scrollProgressivize ? "flex" : "none", backgroundColor: targetDoc.editScrollProgressivize ? "#aedef8" : "" }} onClick={this.editScrollProgressivize}>Edit</div> @@ -1657,6 +1657,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> return <div onPointerOver={this.onPointerOver} onPointerLeave={this.onPointerLeave} className="presBox-cont" style={{ minWidth: this.layoutDoc.inOverlay ? 240 : undefined }} > <div className="presBox-buttons" style={{ display: this.rootDoc._chromeStatus === "disabled" ? "none" : undefined }}> <select className="presBox-viewPicker" + style={{ display: this.layoutDoc.presStatus === "edit" ? "block" : "none" }} onPointerDown={e => e.stopPropagation()} onChange={this.viewChanged} value={mode}> @@ -1665,7 +1666,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> </select> <div className="presBox-presentPanel"> <span className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`}> - <div className="presBox-button-left" onClick={() => this.layoutDoc.presStatus = "manual"}><FontAwesomeIcon icon={"play-circle"} /> Present </div> + <div className="presBox-button-left" onClick={() => this.layoutDoc.presStatus = "manual"}><FontAwesomeIcon icon={"play-circle"} /> <div style={{ display: this.props.PanelWidth() > 200 ? "inline-flex" : "none" }}> Present </div></div> <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePresent(); }}> <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.presentTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} /> {this.presentDropdown} |