diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/DocumentDecorations.scss | 34 | ||||
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 15 | ||||
| -rw-r--r-- | src/client/views/MainView.tsx | 3 |
3 files changed, 23 insertions, 29 deletions
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 5401623e8..1e8cfdff4 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -21,14 +21,6 @@ $linkGap : 3px; background: none; } - - .documentDecorations-rotation { - pointer-events: auto; - cursor: alias; - width: 10px; - height: 10px; - } - .documentDecorations-resizer { pointer-events: auto; background: $alt-accent; @@ -76,11 +68,17 @@ $linkGap : 3px; grid-column-end: 7; } + #documentDecorations-rotation, #documentDecorations-borderRadius { - grid-column-start: 5; - grid-column-end: 7; + grid-column: 5; + grid-row: 4; border-radius: 100%; background: dimgray; + height: 8; + right: -12; + top: 12; + position: relative; + pointer-events: all; .borderRadiusTooltip { width: 10px; @@ -88,6 +86,11 @@ $linkGap : 3px; position: absolute; } } + #documentDecorations-rotation { + background: transparent; + right: -15; + } + #documentDecorations-topLeftResizer, #documentDecorations-bottomRightResizer { @@ -193,11 +196,11 @@ $linkGap : 3px; .documentDecorations-iconifyButton { opacity: 1; grid-column-start: 4; - grid-column-end: 5; + grid-column-end: 4; pointer-events: all; text-align: center; - left: -25px; - top: -2px; + right: 0; + top: 0; cursor: pointer; position: absolute; background: transparent; @@ -206,14 +209,11 @@ $linkGap : 3px; .documentDecorations-openInTab { opacity: 1; - grid-column-start: 4; + grid-column-start: 5; grid-column-end: 5; pointer-events: all; text-align: center; cursor: pointer; - width: 15px; - margin-left: -8px; - margin-top: auto; } .documentDecorations-closeButton { diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index c5e3e6752..03746a1d2 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -660,13 +660,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> bounds.y = bounds.b - (this._resizeBorderWidth + this._linkBoxHeight + this._titleHeight); } var offset = 0; - var rotButton = <></>; - //make offset larger for ink to edit points - if (seldoc.rootDoc.type === DocumentType.INK) { - offset = 20; - rotButton = <div id="documentDecorations-rotation" title="rotate" className="documentDecorations-rotation" - onPointerDown={this.onRotateDown}> ⟲ </div>; - } + let useRotation = seldoc.rootDoc.type === DocumentType.INK; return (<div className="documentDecorations" style={{ background: darkScheme }} > <div className="documentDecorations-background" style={{ @@ -690,12 +684,11 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> {SelectionManager.SelectedDocuments().length !== 1 || seldoc.Document.type === DocumentType.INK ? (null) : <Tooltip title={<><div className="dash-tooltip">{`${seldoc.finalLayoutKey.includes("icon") ? "De" : ""}Iconify Document`}</div></>} placement="top"> <div className="documentDecorations-iconifyButton" onPointerDown={this.onIconifyDown}> - {"_"} + <FontAwesomeIcon icon={seldoc.finalLayoutKey.includes("icon") ? "window-restore" : "window-minimize"} className="documentView-minimizedIcon" /> </div></Tooltip>} <Tooltip title={<><div className="dash-tooltip">Open In a New Pane</div></>} placement="top"><div className="documentDecorations-openInTab" onPointerDown={this.onMaximizeDown}> {SelectionManager.SelectedDocuments().length === 1 ? <FontAwesomeIcon icon="external-link-alt" className="documentView-minimizedIcon" /> : "..."} </div></Tooltip> - {rotButton} <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div> <div id="documentDecorations-topResizer" className="documentDecorations-resizer" @@ -719,8 +712,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> onPointerDown={this.onSelectorUp} onContextMenu={e => e.preventDefault()}> <FontAwesomeIcon className="documentdecorations-times" icon={faArrowAltCircleUp} size="lg" /> </div></Tooltip>} - <div id="documentDecorations-borderRadius" className="documentDecorations-radius" - onPointerDown={this.onRadiusDown} onContextMenu={(e) => e.preventDefault()}></div> + <div id={`documentDecorations-${useRotation ? "rotation" : "borderRadius"}`} + onPointerDown={useRotation ? this.onRotateDown : this.onRadiusDown} onContextMenu={(e) => e.preventDefault()}>{useRotation && "⟲"}</div> </div > <div className="link-button-container" key="links" style={{ left: bounds.x - this._resizeBorderWidth / 2 + 10, top: bounds.b + this._resizeBorderWidth / 2 }}> diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index db5325713..059e1f566 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -182,7 +182,8 @@ export class MainView extends React.Component { fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper, fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle, fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft, fa.faAngleUp, - fa.faAngleDown, fa.faPlayCircle, fa.faClock, fa.faRocket, fa.faExchangeAlt, faBuffer, fa.faHashtag, fa.faAlignJustify, fa.faCheckSquare, fa.faListUl); + fa.faAngleDown, fa.faPlayCircle, fa.faClock, fa.faRocket, fa.faExchangeAlt, faBuffer, fa.faHashtag, fa.faAlignJustify, fa.faCheckSquare, fa.faListUl, + fa.faWindowMinimize, fa.faWindowRestore); this.initEventListeners(); this.initAuthenticationRouters(); } |