fixed icons for minimize & rotation on DocumentDecorations

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();
     }