Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

NIFI-588: 

- Hiding secondary actions as the screen size gets smaller.
This commit is contained in:
Matt Gilman 2015-05-04 16:46:44 -04:00
parent e98c074fc9
commit 37e5548ac1
4 changed files with 46 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-header.js
View File

@ -19,6 +19,8 @@
nf.CanvasHeader = (function () { nf.CanvasHeader = (function () {
var MIN_TOOLBAR_WIDTH = 640;
var config = { var config = {
urls: { urls: {
helpDocument: '../nifi-docs/documentation', 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();
}
}, },
/** /**

36
nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-toolbar.js
View File

@ -48,24 +48,24 @@ nf.CanvasToolbar = (function () {
actions['template'] = new nf.ToolbarAction(globalControls, 'template', 'action-template', 'template', 'template-hover', 'template-disable', 'Create Template'); actions['template'] = new nf.ToolbarAction(globalControls, 'template', 'action-template', 'template', 'template-hover', 'template-disable', 'Create Template');
border.clone().appendTo(globalControls); border.clone().appendTo(globalControls);
separator.clone().appendTo(globalControls); separator.clone().appendTo(globalControls);
border.clone().appendTo(globalControls); border.clone().addClass('secondary').appendTo(globalControls);
actions['copy'] = new nf.ToolbarAction(globalControls, 'copy', 'action-copy', 'copy', 'copy-hover', 'copy-disable', 'Copy'); actions['copy'] = new nf.ToolbarAction(globalControls, 'copy', 'action-copy', 'copy', 'copy-hover', 'copy-disable', 'Copy', true);
border.clone().appendTo(globalControls); border.clone().addClass('secondary').appendTo(globalControls);
actions['paste'] = new nf.ToolbarAction(globalControls, 'paste', 'action-paste', 'paste', 'paste-hover', 'paste-disable', 'Paste'); actions['paste'] = new nf.ToolbarAction(globalControls, 'paste', 'action-paste', 'paste', 'paste-hover', 'paste-disable', 'Paste', true);
border.clone().appendTo(globalControls); border.clone().addClass('secondary').appendTo(globalControls);
separator.clone().appendTo(globalControls); separator.clone().addClass('secondary').appendTo(globalControls);
border.clone().appendTo(globalControls); border.clone().addClass('secondary').appendTo(globalControls);
actions['group'] = new nf.ToolbarAction(globalControls, 'group', 'action-group', 'group', 'group-hover', 'group-disable', 'Group'); actions['group'] = new nf.ToolbarAction(globalControls, 'group', 'action-group', 'group', 'group-hover', 'group-disable', 'Group', true);
border.appendTo(globalControls); border.clone().addClass('secondary').appendTo(globalControls);
separator.clone().appendTo(globalControls); separator.clone().addClass('secondary').appendTo(globalControls);
border.clone().appendTo(globalControls); border.clone().addClass('secondary').appendTo(globalControls);
actions['fill'] = new nf.ToolbarAction(globalControls, 'fillColor', 'action-fill', 'fill', 'fill-hover', 'fill-disable', 'Change Color'); actions['fill'] = new nf.ToolbarAction(globalControls, 'fillColor', 'action-fill', 'fill', 'fill-hover', 'fill-disable', 'Change Color', true);
border.clone().appendTo(globalControls); border.clone().addClass('secondary').appendTo(globalControls);
separator.clone().appendTo(globalControls); separator.clone().addClass('secondary').appendTo(globalControls);
border.clone().appendTo(globalControls); border.clone().addClass('secondary').appendTo(globalControls);
actions['delete'] = new nf.ToolbarAction(globalControls, 'delete', 'action-delete', 'delete', 'delete-hover', 'delete-disable', 'Delete'); actions['delete'] = new nf.ToolbarAction(globalControls, 'delete', 'action-delete', 'delete', 'delete-hover', 'delete-disable', 'Delete', true);
border.appendTo(globalControls); border.addClass('secondary').appendTo(globalControls);
separator.appendTo(globalControls); separator.addClass('secondary').appendTo(globalControls);
// set up initial states for selection-less items // set up initial states for selection-less items
if (nf.Common.isDFM()) { if (nf.Common.isDFM()) {

4
nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
View File

@ -1090,9 +1090,9 @@ nf.Canvas = (function () {
initCanvas(); initCanvas();
nf.Canvas.View.init(); nf.Canvas.View.init();
nf.ContextMenu.init(); nf.ContextMenu.init();
nf.CanvasHeader.init();
nf.CanvasToolbox.init();
nf.CanvasToolbar.init(); nf.CanvasToolbar.init();
nf.CanvasToolbox.init();
nf.CanvasHeader.init();
nf.GraphControl.init(); nf.GraphControl.init();
nf.Search.init(); nf.Search.init();
nf.Settings.init(); nf.Settings.init();

11
nifi/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-toolbar-action.js
View File

@ -27,8 +27,9 @@
* @argument {string} hoverCls The css class for the hover state of the element * @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} disableCls The css class for the disabled state of the element
* @argument {string} title The title (tooltip) 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.container = container;
this.action = action; this.action = action;
this.id = id; this.id = id;
@ -36,6 +37,7 @@ nf.ToolbarAction = function (container, action, id, cls, hoverCls, disableCls, t
this.hoverCls = hoverCls; this.hoverCls = hoverCls;
this.disableCls = disableCls; this.disableCls = disableCls;
this.title = title; this.title = title;
this.secondary = secondary;
this.initAction(); this.initAction();
}; };
@ -46,6 +48,7 @@ nf.ToolbarAction.prototype.cls = null;
nf.ToolbarAction.prototype.hoverCls = null; nf.ToolbarAction.prototype.hoverCls = null;
nf.ToolbarAction.prototype.disableCls = null; nf.ToolbarAction.prototype.disableCls = null;
nf.ToolbarAction.prototype.title = null; nf.ToolbarAction.prototype.title = null;
nf.ToolbarAction.prototype.secondary = null;
/** /**
* Initializes the toolbar action by dynamically creating an element, * Initializes the toolbar action by dynamically creating an element,
@ -53,9 +56,13 @@ nf.ToolbarAction.prototype.title = null;
*/ */
nf.ToolbarAction.prototype.initAction = function () { nf.ToolbarAction.prototype.initAction = function () {
var self = this; var self = this;
var cls = 'toolbar-icon';
if (this.secondary === true) {
cls += ' secondary';
}
// create the default button // 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)) { if (!$(this).hasClass(self.disableCls)) {
$(this).removeClass(self.cls).addClass(self.hoverCls); $(this).removeClass(self.cls).addClass(self.hoverCls);
} }