Merge pull request #35 from brown-dash/menu_updates_geireann

Menu updates geireann

1 files changed, 13 insertions, 8 deletions

diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 117dba4de..34cb6ec55 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -33,6 +33,7 @@ import { CollectionView, CollectionViewType } from './CollectionView';
 import "./TabDocView.scss";
 import React = require("react");
 import Color = require('color');
+import { Colors, Shadows } from '../global/globalEnums';
 const _global = (window /* browser */ || global /* node */) as any;
 
 interface TabDocViewProps {
@@ -123,6 +124,8 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 tab.element[0].prepend(iconWrap);
                 tab._disposers.layerDisposer = reaction(() => ({ layer: tab.DashDoc.activeLayer, color: this.tabColor }),
                     ({ layer, color }) => {
+                        // console.log("TabDocView: " + this.tabColor);
+                        // console.log("lightOrDark: " + lightOrDark(this.tabColor));
                         const textColor = lightOrDark(this.tabColor); //not working with StyleProp.Color
                         titleEle.style.color = textColor;
                         titleEle.style.backgroundColor = "transparent";
@@ -131,12 +134,6 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                         moreInfoDrag.style.backgroundColor = textColor;
                         tab.element[0].style.background = !layer ? color : "dimgrey";
                     }, { fireImmediately: true });
-                // TODO:glr fix
-                // tab.element[0].style.borderTopRightRadius = "8px";
-                // tab.element[0].children[1].appendChild(toggle);
-                // tab._disposers.layerDisposer = reaction(() =>
-                //     ({ layer: tab.DashDoc.activeLayer, color: this.tabColor }),
-                //     ({ layer, color }) => toggle.style.background = !layer ? color : "dimgrey", { fireImmediately: true });
             }
             // shifts the focus to this tab when another tab is dragged over it
             tab.element[0].onmouseenter = (e: MouseEvent) => {
@@ -390,8 +387,16 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                     background={this.miniMapColor}
                     document={this._document}
                     tabView={this.tabView} />
-                <Tooltip style={{ display: this.disableMinimap() ? "none" : undefined }} key="ttip" title={<div className="dash-tooltip">{"toggle minimap"}</div>}>
-                    <div className="miniMap-hidden" onPointerDown={e => e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} >
+                <Tooltip key="ttip" title={<div className="dash-tooltip">{this._document.hideMinimap ? "Open minimap" : "Close minimap"}</div>}>
+                    <div className="miniMap-hidden"
+                        style={{
+                            display: this.disableMinimap() || this._document._viewType !== "freeform" ? "none" : undefined,
+                            color: this._document.hideMinimap ? Colors.BLACK : Colors.WHITE,
+                            backgroundColor: this._document.hideMinimap ? Colors.LIGHT_GRAY : Colors.MEDIUM_BLUE,
+                            boxShadow: this._document.hideMinimap ? Shadows.STANDARD_SHADOW : undefined
+                        }}
+                        onPointerDown={e => e.stopPropagation()}
+                        onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} >
                         <FontAwesomeIcon icon={"globe-asia"} size="lg" />
                     </div>
                 </Tooltip>