Fixes #1501 Add method on IActivePanel to give visualizer control of inner toolbar

src/client/js/PanelManager/IActivePanel.js

@@ -1,4 +1,4 @@
-/*globals define*/
+/*globals define, $*/
 /*jshint browser: true*/
 
 /**
@@ -38,5 +38,15 @@ define([], function () {
         return undefined;
     };
 
+    /**
+     * Toolbar handled by split-panel. It adds maximize btns to it.
+     * If no toolbar should be displayed - overwrite and return null.
+     *
+     * @returns {jQuery|null}
+     */
+    IActivePanel.prototype.getSplitPanelToolbarEl = function () {
+        return $('<div class="split-panel-toolbar"></div>');
+    };
+
     return IActivePanel;
 });

src/client/js/Panels/GraphViz/GraphVizPanel.js

@@ -1,4 +1,4 @@
-/*globals define, _, WebGMEGlobal*/
+/*globals define, _, WebGMEGlobal, $*/
 /*jshint browser: true*/
 /**
  * @author rkereskenyi / https://github.com/rkereskenyi
@@ -57,6 +57,33 @@ define(['js/PanelBase/PanelBaseWithHeader',
         this.onActivate();
     };
 
+    GraphVizPanel.prototype.getSplitPanelToolbarEl = function () {
+        this._splitPanelToolbarEl = IActivePanel.prototype.getSplitPanelToolbarEl.call(this);
+
+        // Set the size bigger than 40 x 40 and add some padding for the scroll-bar.
+        this._splitPanelToolbarEl.css({
+            width: '100px',
+            height: '100px',
+            'padding-right': '10px'
+        });
+
+        this.control._addSplitPanelToolbarBtns(this._splitPanelToolbarEl);
+
+        return this._splitPanelToolbarEl;
+    };
+
+    GraphVizPanel.prototype.afterAppend = function () {
+        PanelBaseWithHeader.prototype.afterAppend.call(this);
+        // At this point the split-panel has added its buttons (the maximize)
+        // and we can modify the look of all btns.
+
+        this._splitPanelToolbarEl.children().each(function () {
+            $(this).css({
+                'font-size': '16px'
+            });
+        });
+    };
+
     /* OVERRIDE FROM WIDGET-WITH-HEADER */
     /* METHOD CALLED WHEN THE WIDGET'S READ-ONLY PROPERTY CHANGES */
     GraphVizPanel.prototype.onReadOnlyChanged = function (isReadOnly) {

src/client/js/Panels/GraphViz/GraphVizPanelControl.js

@@ -1,4 +1,4 @@
-/*globals define, _, WebGMEGlobal*/
+/*globals define, _, WebGMEGlobal, $*/
 /*jshint browser: true*/
 /**
  * @author rkereskenyi / https://github.com/rkereskenyi
@@ -306,28 +306,55 @@ define(['js/logger',
     };
 
     GraphVizControl.prototype._initializeToolbar = function () {
-        var toolBar = WebGMEGlobal.Toolbar,
-            self = this;
+        var toolBar = WebGMEGlobal.Toolbar;
 
         this._toolbarItems = [];
 
         this._toolbarItems.push(toolBar.addSeparator());
         /************** MODEL / CONNECTION filter *******************/
+        //
+        // this.$cbShowConnection = toolBar.addCheckBox({
+        //     title: 'Show connection',
+        //     icon: 'gme icon-gme_diagonal-arrow',
+        //     checkChangedFn: function (data, checked) {
+        //         self._displayModelsOnly = !checked;
+        //         self._generateData();
+        //     }
+        // });
+        //
+        // this._toolbarItems.push(this.$cbShowConnection);
+        /************** END OF - MODEL / CONNECTION filter *******************/
 
-        this.$cbShowConnection = toolBar.addCheckBox({
-            title: 'Show connection',
-            icon: 'gme icon-gme_diagonal-arrow',
-            checkChangedFn: function (data, checked) {
-                self._displayModelsOnly = !checked;
-                self._generateData();
+        this._toolbarInitialized = true;
+    };
+
+    GraphVizControl.prototype._addSplitPanelToolbarBtns = function (toolbarEl) {
+        var self = this,
+            connBtn = $('<span class="split-panel-toolbar-btn no-print glyphicon glyphicon-filter"></span>');
+
+        connBtn.on('click', function () {
+            self._displayModelsOnly = !self._displayModelsOnly;
+            if (self._displayModelsOnly) {
+                connBtn.attr('title', 'Show connections');
+            } else {
+                connBtn.attr('title', 'Hide connections');
             }
+            self._generateData();
         });
 
-        this._toolbarItems.push(this.$cbShowConnection);
-        /************** END OF - MODEL / CONNECTION filter *******************/
+        if (self._displayModelsOnly) {
+            connBtn.attr('title', 'Show connections');
+        } else {
+            connBtn.attr('title', 'Hide connections');
+        }
 
-        this._toolbarInitialized = true;
+        toolbarEl.append(connBtn);
+
+        connBtn.hide();
+
+        return toolbarEl;
     };
 
+
     return GraphVizControl;
 });

src/client/js/Panels/SplitPanel/SplitMaximizeButton.js

@@ -7,19 +7,21 @@
 define([], function () {
     'use strict';
 
-    function SplitMaximizeButton(id, splitPanelManager, container) {
+    function SplitMaximizeButton(id, splitPanelManager, container, toolbarEl) {
         this._id = id;
         this._manager = splitPanelManager;
-        this.$el = $('<div class="toolbar"></div>');
-        this._button = $('<span class="maximize-btn no-print glyphicon glyphicon-resize-full"></span>');
+        this._toolbarEl = toolbarEl;
+        this._button = $('<span class="split-panel-toolbar-btn maximize-btn no-print glyphicon glyphicon-resize-full">' +
+            '</span>');
 
-        this.$el.append(this._button);
+        // Since float it right this should come first (i.e. top right corner).
+        toolbarEl.prepend(this._button);
 
         this._button.hide();
 
         this._initialize();
 
-        container.append(this.$el);
+        container.append(toolbarEl);
     }
 
     SplitMaximizeButton.prototype._initialize = function () {
@@ -43,7 +45,8 @@ define([], function () {
             }
         });
 
-        this.$el.on('mouseenter', function () {
+        this._toolbarEl.on('mouseenter', function () {
+            self._toolbarEl.children().show();
             if (self._manager._maximized === false && Object.keys(self._manager._panels).length > 1 ||
                 self._manager._maximized) {
                 if (self._manager._maximized) {
@@ -55,12 +58,13 @@ define([], function () {
                     self._button.addClass('glyphicon-resize-full');
                     self._button.attr('title', 'Maximize panel');
                 }
-                self._button.show();
+            } else {
+                self._button.hide();
             }
         });
 
-        this.$el.on('mouseleave', function () {
-            self._button.hide();
+        this._toolbarEl.on('mouseleave', function () {
+            self._toolbarEl.children().hide();
         });
     };
 

src/client/js/Panels/SplitPanel/SplitPanel.js

@@ -118,7 +118,7 @@ define([
             panelContainer: panelContainer,
             instance: null,
             eventHandler: self._attachActivateHandler(panelContainer),
-            maximizeButton: new SplitMaximizeButton(this._activePanelId, this, panelContainer),
+            toolbar: null,
             splitters: {
                 top: null,
                 right: null,
@@ -156,11 +156,26 @@ define([
     };
 
     SplitPanel.prototype.updateActivePanel = function (panel) {
-        var activePanel = this._panels[this._activePanelId];
+        var self = this,
+            activePanel = this._panels[this._activePanelId],
+            toolbar;
 
         // activePanel.panelContainer.empty();
         activePanel.instance = panel;
         activePanel.panelContainer.append(panel.$pEl);
+
+        if (activePanel.toolbar) {
+            activePanel.toolbar.remove();
+            delete activePanel.toolbar;
+        }
+
+        toolbar = panel.getSplitPanelToolbarEl();
+
+        if (toolbar) {
+            (new SplitMaximizeButton(this._activePanelId, self, activePanel.panelContainer, toolbar));
+            activePanel.toolbar = toolbar;
+        }
+
         panel.afterAppend();
 
         WebGMEGlobal.PanelManager.setActivePanel(panel);
@@ -188,7 +203,7 @@ define([
             panelContainer: panelContainer,
             instance: null,
             eventHandler: self._attachActivateHandler(panelContainer),
-            maximizeButton: new SplitMaximizeButton(newPanelId, self, panelContainer),
+            toolbar: null,
             splitters: {
                 // Initially set splitters to same as panel splitting from.
                 top: this._panels[this._activePanelId].splitters.top,

src/client/js/Panels/SplitPanel/styles/SplitPanel.css

@@ -20,25 +20,26 @@ ul.split-panel-dropdown-list {
   .split-panel .split-panel-panel-container {
     position: absolute;
     overflow: hidden; }
-    .split-panel .split-panel-panel-container .toolbar {
+    .split-panel .split-panel-panel-container .split-panel-toolbar {
       position: absolute;
-      right: 0px;
-      top: 0px;
+      right: 0;
+      top: 0;
       width: 40px;
       height: 40px;
-      z-index: 999999; }
-    .split-panel .split-panel-panel-container .maximize-btn {
-      position: absolute;
-      top: 3px;
-      right: 2px;
-      border-radius: 50%;
-      color: #00235b;
-      background-color: #fff;
-      border: 6px solid #fff;
-      opacity: 0.75;
-      cursor: pointer; }
-      .split-panel .split-panel-panel-container .maximize-btn:hover {
-        opacity: 1; }
+      z-index: 999999;
+      padding-top: 2px;
+      padding-right: 3px; }
+      .split-panel .split-panel-panel-container .split-panel-toolbar .split-panel-toolbar-btn {
+        position: relative;
+        float: right;
+        border-radius: 50%;
+        color: #00235b;
+        background-color: #fff;
+        border: 6px solid #fff;
+        opacity: 0.75;
+        cursor: pointer; }
+        .split-panel .split-panel-panel-container .split-panel-toolbar .split-panel-toolbar-btn:hover {
+          opacity: 1; }
   .split-panel .splitter {
     z-index: 1000;
     position: absolute;

src/client/js/Panels/SplitPanel/styles/SplitPanel.scss

@@ -26,28 +26,29 @@ ul.split-panel-dropdown-list {
     position: absolute;
     overflow: hidden;
 
-    .toolbar {
+    .split-panel-toolbar {
       position: absolute;
-      right: 0px;
-      top: 0px;
+      right: 0;
+      top: 0;
       width: 40px;
       height: 40px;
       z-index: 999999;
+      padding-top: 2px;
+      padding-right: 3px;
 
-    }
-    .maximize-btn {
-      position: absolute;
-      top: 3px;
-      right: 2px;
-      border-radius: 50%;
-      color: #00235b;
-      background-color: #fff;
-      border: 6px solid #fff;
-      opacity: 0.75;
-      cursor: pointer;
-      //text-shadow: -1px 0 #9ecaed, 0 1px #9ecaed, 1px 0 #9ecaed, 0 -1px #9ecaed;
-      &:hover {
-        opacity: 1;
+      .split-panel-toolbar-btn {
+        position: relative;
+        float: right;
+        border-radius: 50%;
+        color: #00235b;
+        background-color: #fff;
+        border: 6px solid #fff;
+        opacity: 0.75;
+        cursor: pointer;
+        //text-shadow: -1px 0 #9ecaed, 0 1px #9ecaed, 1px 0 #9ecaed, 0 -1px #9ecaed;
+        &:hover {
+          opacity: 1;
+        }
       }
     }
   }

src/client/js/Panels/Visualizer/VisualizerPanel.js

@@ -113,6 +113,19 @@ define(['js/logger',
 
                 self._toolbarBtn.clear();
 
+                self._toolbarBtn.addButton({
+                    text: maximized ? 'Exit maximize' : 'Maximize active panel',
+                    title: maximized ? 'Shows all split panels' : 'Maximizes the active panel',
+                    icon: 'split-panel-dropdown-icon glyphicon ' +
+                    (maximized ? 'glyphicon-resize-small' : 'glyphicon-resize-full'),
+                    disabled: self._splitPanel.getNumberOfPanels() === 1,
+                    clickFn: function () {
+                        self._splitPanel.maximize(!maximized, self._splitPanel._activePanelId);
+                    }
+                });
+
+                self._toolbarBtn.addDivider();
+
                 self._toolbarBtn.addButton({
                     text: 'Split vertically',
                     title: 'Splits the active panel vertically',

src/client/js/Widgets/DiagramDesigner/DiagramDesignerWidget.js

@@ -393,7 +393,10 @@ define([
         //call our own resize handler
         this._resizeItemContainer();
 
-        this._refreshTabTabsScrollOnResize();
+        if (this.$ulTabTab.width() !== 0) {
+            // Do not refresh the tabs if they aren't shown.
+            this._refreshTabTabsScrollOnResize();
+        }
     };
 
     DiagramDesignerWidget.prototype.destroy = function () {