restored button next to tab for dragging document & changed tab view

4 files changed, 45 insertions, 32 deletions

diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 27d66f796..6ebd5103b 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -52,6 +52,20 @@
 
 .lm_header .lm_tab {
     padding-right: 20px;
+    margin-top: -1px;
+    border-bottom: 1px black;
+    .collectionDockingView-gear {
+        display: none;
+    }
+}
+
+.lm_header .lm_tab.lm_active {
+    padding-right: 20px;
+    margin-top: 1px;
+    border-bottom: unset;
+    .collectionDockingView-gear {
+        display: inline-block;
+    }
 }
 
 .lm_popout {
@@ -84,10 +98,7 @@
         padding-left: 5px;
         height: 15px;
         width: 18px;
-        display: inline-block;
         margin: auto;
-
-        display: none;
     }
 
     .collectionDockingView-dragAsDocument {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 95b68a17d..533c8bffe 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -770,6 +770,10 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
     private onActiveContentItemChanged() {
         if (this.props.glContainer.tab) {
             this._isActive = this.props.glContainer.tab.isActive;
+            setTimeout(() => {
+                const dv = this._document && DocumentManager.Instance.getFirstDocumentView(this._document);
+                dv && SelectionManager.SelectDoc(dv, false);
+            });
             !this._isActive && this._document && Doc.UnBrushDoc(this._document); // bcz: bad -- trying to simulate a pointer leave event when a new tab is opened up on top of an existing one.
         }
     }
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index 532dd6abc..4c8cac3ed 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -129,7 +129,7 @@ export class DockingViewButtonSelector extends React.Component<{ views: () => Do
                 this.props.views()[0]?.select(false);
             }} className="buttonSelector">
             <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.flyout} stylesheet={this.customStylesheet}>
-                <FontAwesomeIcon icon={"cog"} size={"sm"} />
+                <FontAwesomeIcon icon={"arrows-alt"} size={"sm"} />
             </Flyout>
         </span>;
     }
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 0168c825f..f5e0cd077 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -711,12 +711,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     @undoBatch @action
     changeDash = () => {
-        const dash = this.dashdStk;
-        if (dash === "2") {
-            this.dashdStk = "0";
-        } else {
-            this.dashdStk = "2";
-        }
+        this.dashdStk = this.dashdStk === "2" ? "0" : "2";
     }
 
     @computed get appearanceEditor() {
@@ -769,9 +764,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="white" />
                     </div>
                 </div>
-                {this.openActions ? <div className="propertiesView-settings-content">
-                    <PropertiesButtons />
-                </div> : null}
+                {!this.openActions ? (null) :
+                    <div className="propertiesView-settings-content">
+                        <PropertiesButtons />
+                    </div>}
             </div>
             <div className="propertiesView-sharing">
                 <div className="propertiesView-sharing-title"
@@ -782,24 +778,27 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
                     </div>
                 </div>
-                {this.openSharing ? <div className="propertiesView-sharing-content">
-                    {this.sharingTable}
-                </div> : null}
+                {!this.openSharing ? (null) :
+                    <div className="propertiesView-sharing-content">
+                        {this.sharingTable}
+                    </div>}
             </div>
 
-            {this.isInk ? <div className="propertiesView-appearance">
-                <div className="propertiesView-appearance-title"
-                    onPointerDown={() => runInAction(() => { this.openAppearance = !this.openAppearance; })}
-                    style={{ backgroundColor: this.openAppearance ? "black" : "" }}>
-                    Appearance
-                    <div className="propertiesView-appearance-title-icon">
-                        <FontAwesomeIcon icon={this.openAppearance ? "caret-down" : "caret-right"} size="lg" color="white" />
+            {!this.isInk ? (null) :
+                <div className="propertiesView-appearance">
+                    <div className="propertiesView-appearance-title"
+                        onPointerDown={() => runInAction(() => { this.openAppearance = !this.openAppearance; })}
+                        style={{ backgroundColor: this.openAppearance ? "black" : "" }}>
+                        Appearance
+                        <div className="propertiesView-appearance-title-icon">
+                            <FontAwesomeIcon icon={this.openAppearance ? "caret-down" : "caret-right"} size="lg" color="white" />
+                        </div>
                     </div>
-                </div>
-                {this.openAppearance ? <div className="propertiesView-appearance-content">
-                    {this.appearanceEditor}
-                </div> : null}
-            </div> : null}
+                    {!this.openAppearance ? (null) :
+                        <div className="propertiesView-appearance-content">
+                            {this.appearanceEditor}
+                        </div>}
+                </div>}
 
             {this.isInk ? <div className="propertiesView-transform">
                 <div className="propertiesView-transform-title"
@@ -830,18 +829,17 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     {this.fieldsCheckbox}
                     <div className="propertiesView-fields-checkbox-text">Layout</div>
                 </div> : null}
-                {this.openFields ?
+                {!this.openFields ? (null) :
                     <div className="propertiesView-fields-content">
                         {novice ? this.noviceFields : this.expandedField}
-                    </div> : null}
+                    </div>}
             </div>
             <div className="propertiesView-layout">
                 <div className="propertiesView-layout-title"
                     onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}
                     style={{ backgroundColor: this.openLayout ? "black" : "" }}>
                     Layout
-                    <div className="propertiesView-layout-title-icon"
-                        onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}>
+                    <div className="propertiesView-layout-title-icon" onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}>
                         <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="white" />
                     </div>
                 </div>