Repository: incubator-nifi Updated Branches: refs/heads/develop e98c074fc -> 37e5548ac
NIFI-588: - Hiding secondary actions as the screen size gets smaller. Project: http://git-wip-us.apache.org/repos/asf/incubator-nifi/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-nifi/commit/37e5548a Tree: http://git-wip-us.apache.org/repos/asf/incubator-nifi/tree/37e5548a Diff: http://git-wip-us.apache.org/repos/asf/incubator-nifi/diff/37e5548a Branch: refs/heads/develop Commit: 37e5548ac19ee1580663f66682020c04272798c2 Parents: e98c074 Author: Matt Gilman <[email protected]> Authored: Mon May 4 16:46:44 2015 -0400 Committer: Matt Gilman <[email protected]> Committed: Mon May 4 16:46:44 2015 -0400 ---------------------------------------------------------------------- .../webapp/js/nf/canvas/nf-canvas-header.js | 17 +++++++++ .../webapp/js/nf/canvas/nf-canvas-toolbar.js | 36 ++++++++++---------- .../src/main/webapp/js/nf/canvas/nf-canvas.js | 4 +-- .../webapp/js/nf/canvas/nf-toolbar-action.js | 11 ++++-- 4 files changed, 46 insertions(+), 22 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-nifi/blob/37e5548a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-header.js ---------------------------------------------------------------------- diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-header.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-header.js index ff5d2f2..5cc1eff 100644 --- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-header.js +++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-header.js @@ -19,6 +19,8 @@ nf.CanvasHeader = (function () { + var MIN_TOOLBAR_WIDTH = 640; + var config = { urls: { helpDocument: '../nifi-docs/documentation', @@ -308,6 +310,21 @@ nf.CanvasHeader = (function () { } } }); + + var toolbar = $('#toolbar'); + var groupButton = $('#action-group'); + $(window).on('resize', function() { + if (toolbar.width() < MIN_TOOLBAR_WIDTH && groupButton.is(':visible')) { + toolbar.find('.secondary').hide(); + } else if (toolbar.width() > MIN_TOOLBAR_WIDTH && groupButton.is(':hidden')) { + toolbar.find('.secondary').show(); + } + }); + + // set up the initial visibility + if (toolbar.width() < MIN_TOOLBAR_WIDTH) { + toolbar.find('.secondary').hide(); + } }, /** http://git-wip-us.apache.org/repos/asf/incubator-nifi/blob/37e5548a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js ---------------------------------------------------------------------- diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js index 8347f37..cecf7d5 100644 --- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js +++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js @@ -48,24 +48,24 @@ nf.CanvasToolbar = (function () { actions['template'] = new nf.ToolbarAction(globalControls, 'template', 'action-template', 'template', 'template-hover', 'template-disable', 'Create Template'); border.clone().appendTo(globalControls); separator.clone().appendTo(globalControls); - border.clone().appendTo(globalControls); - actions['copy'] = new nf.ToolbarAction(globalControls, 'copy', 'action-copy', 'copy', 'copy-hover', 'copy-disable', 'Copy'); - border.clone().appendTo(globalControls); - actions['paste'] = new nf.ToolbarAction(globalControls, 'paste', 'action-paste', 'paste', 'paste-hover', 'paste-disable', 'Paste'); - border.clone().appendTo(globalControls); - separator.clone().appendTo(globalControls); - border.clone().appendTo(globalControls); - actions['group'] = new nf.ToolbarAction(globalControls, 'group', 'action-group', 'group', 'group-hover', 'group-disable', 'Group'); - border.appendTo(globalControls); - separator.clone().appendTo(globalControls); - border.clone().appendTo(globalControls); - actions['fill'] = new nf.ToolbarAction(globalControls, 'fillColor', 'action-fill', 'fill', 'fill-hover', 'fill-disable', 'Change Color'); - border.clone().appendTo(globalControls); - separator.clone().appendTo(globalControls); - border.clone().appendTo(globalControls); - actions['delete'] = new nf.ToolbarAction(globalControls, 'delete', 'action-delete', 'delete', 'delete-hover', 'delete-disable', 'Delete'); - border.appendTo(globalControls); - separator.appendTo(globalControls); + border.clone().addClass('secondary').appendTo(globalControls); + actions['copy'] = new nf.ToolbarAction(globalControls, 'copy', 'action-copy', 'copy', 'copy-hover', 'copy-disable', 'Copy', true); + border.clone().addClass('secondary').appendTo(globalControls); + actions['paste'] = new nf.ToolbarAction(globalControls, 'paste', 'action-paste', 'paste', 'paste-hover', 'paste-disable', 'Paste', true); + border.clone().addClass('secondary').appendTo(globalControls); + separator.clone().addClass('secondary').appendTo(globalControls); + border.clone().addClass('secondary').appendTo(globalControls); + actions['group'] = new nf.ToolbarAction(globalControls, 'group', 'action-group', 'group', 'group-hover', 'group-disable', 'Group', true); + border.clone().addClass('secondary').appendTo(globalControls); + separator.clone().addClass('secondary').appendTo(globalControls); + border.clone().addClass('secondary').appendTo(globalControls); + actions['fill'] = new nf.ToolbarAction(globalControls, 'fillColor', 'action-fill', 'fill', 'fill-hover', 'fill-disable', 'Change Color', true); + border.clone().addClass('secondary').appendTo(globalControls); + separator.clone().addClass('secondary').appendTo(globalControls); + border.clone().addClass('secondary').appendTo(globalControls); + actions['delete'] = new nf.ToolbarAction(globalControls, 'delete', 'action-delete', 'delete', 'delete-hover', 'delete-disable', 'Delete', true); + border.addClass('secondary').appendTo(globalControls); + separator.addClass('secondary').appendTo(globalControls); // set up initial states for selection-less items if (nf.Common.isDFM()) { http://git-wip-us.apache.org/repos/asf/incubator-nifi/blob/37e5548a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js ---------------------------------------------------------------------- diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js index 38894d8..ca45a3d 100644 --- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js +++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js @@ -1090,9 +1090,9 @@ nf.Canvas = (function () { initCanvas(); nf.Canvas.View.init(); nf.ContextMenu.init(); - nf.CanvasHeader.init(); - nf.CanvasToolbox.init(); nf.CanvasToolbar.init(); + nf.CanvasToolbox.init(); + nf.CanvasHeader.init(); nf.GraphControl.init(); nf.Search.init(); nf.Settings.init(); http://git-wip-us.apache.org/repos/asf/incubator-nifi/blob/37e5548a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-toolbar-action.js ---------------------------------------------------------------------- diff --git a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-toolbar-action.js b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-toolbar-action.js index c3adfd6..a7b5f20 100644 --- a/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-toolbar-action.js +++ b/nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-toolbar-action.js @@ -27,8 +27,9 @@ * @argument {string} hoverCls The css class for the hover state of the element * @argument {string} disableCls The css class for the disabled state of the element * @argument {string} title The title (tooltip) of the element + * @argument {boolean} secondary If secondary icon will be hidden as the screen gets smallers */ -nf.ToolbarAction = function (container, action, id, cls, hoverCls, disableCls, title) { +nf.ToolbarAction = function (container, action, id, cls, hoverCls, disableCls, title, secondary) { this.container = container; this.action = action; this.id = id; @@ -36,6 +37,7 @@ nf.ToolbarAction = function (container, action, id, cls, hoverCls, disableCls, t this.hoverCls = hoverCls; this.disableCls = disableCls; this.title = title; + this.secondary = secondary; this.initAction(); }; @@ -46,6 +48,7 @@ nf.ToolbarAction.prototype.cls = null; nf.ToolbarAction.prototype.hoverCls = null; nf.ToolbarAction.prototype.disableCls = null; nf.ToolbarAction.prototype.title = null; +nf.ToolbarAction.prototype.secondary = null; /** * Initializes the toolbar action by dynamically creating an element, @@ -53,9 +56,13 @@ nf.ToolbarAction.prototype.title = null; */ nf.ToolbarAction.prototype.initAction = function () { var self = this; + var cls = 'toolbar-icon'; + if (this.secondary === true) { + cls += ' secondary'; + } // create the default button - $('<div/>').addClass('toolbar-icon').attr('id', this.id).attr('title', this.title).mouseover(function () { + $('<div/>').addClass(cls).attr('id', this.id).attr('title', this.title).mouseover(function () { if (!$(this).hasClass(self.disableCls)) { $(this).removeClass(self.cls).addClass(self.hoverCls); }
