http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js index c251d35..10e6366 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js @@ -20,15 +20,26 @@ * format: * * { + * header: true, + * footer: true, * headerText: 'Dialog Header', - * overlayBackground: true, * buttons: [{ * buttonText: 'Cancel', + * color: { + * base: '#728E9B', + * hover: '#004849', + * text: '#ffffff' + * }, * handler: { * click: cancelHandler * } * }, { * buttonText: 'Apply', + * color: { + * base: '#E3E8EB', + * hover: '#C7D2D7', + * text: '#004849' + * }, * handler: { * click: applyHandler * } @@ -37,10 +48,38 @@ * close: closeHandler * } * } - * - * The content of the dialog should be in a element with the class dialog-content - * directly under the dialog. - * + * + * The content of the dialog MUST be contained in an element with the class `dialog-content` + * directly under the dialog element. + * + * <div id="dialogId"> + * <div class="dialog-content"> + * //Dialog Content.... + * </div> + * </div> + * + * The height, width, and fullscreen breakpoints can be set on the dialog element through the + * HTML5 `data-nf-dialog` attribute (These options must be a valid JSON format represented as a string). + * If the `data-nf-dialog` attributes are not set this plugin will look for any CSS styles defined + * for height, min/max-height, width, min/max-width and set them on the `data-nf-dialog` attribute. + * If no styles are set on the dialog then the plugin will set the `data-nf-dialog` attributes to values + * calculated when the dialog is first opened. Options are specified in the following format: + * + * { + * "height": "55%", //optional. Property can also be set with css (accepts 'px' or '%' values) + * "width":"34%", //optional. Property can also be set with css (accepts 'px' or '%' values) + * "min-height": "420px", //optional, defaults to 'height'. Property can also be set with css (accepts 'px' values) + * "min-width": "470px" //optional, defaults to 'width'. Property can also be set with css (accepts 'px' values) + * "responsive": { + * "x": "true", //optional, default true + * "y": "true", //optional, default true + * "fullscreen-height": "420px", //optional, default is original dialog height (accepts 'px' values) + * "fullscreen-width": "470px", //optional, default is original dialog width (accepts 'px' values) + * }, + * "resizeable": "false", //optional, default false + * "glasspane": "false" //optional, displays a modal glasspane behind the dialog...default true + * } + * * @argument {jQuery} $ */ (function ($) { @@ -65,23 +104,34 @@ var addButtons = function (dialog, buttonModel) { if (isDefinedAndNotNull(buttonModel)) { var buttonWrapper = $('<div class="dialog-buttons"></div>'); + var button; $.each(buttonModel, function (i, buttonConfig) { - $('<div class="button button-normal"></div>').text(buttonConfig.buttonText).click(function () { + if (buttonConfig.color) { + button = $('<div class="button" style="color:' + buttonConfig.color.text + '; background:' + buttonConfig.color.base + ';"></div>').text(buttonConfig.buttonText); + button.hover(function () { + $(this).css("background-color", buttonConfig.color.hover); + }, function () { + $(this).css("background-color", buttonConfig.color.base); + }); + } else { + button = $('<div class="button"></div>').text(buttonConfig.buttonText) + } + button.click(function () { var handler = $(this).data('handler'); if (isDefinedAndNotNull(handler) && typeof handler.click === 'function') { handler.click.call(dialog); } }).data('handler', buttonConfig.handler).appendTo(buttonWrapper); }); - buttonWrapper.append('<div class="clear"></div>').appendTo(dialog); + buttonWrapper.appendTo(dialog); } }; var methods = { - + /** * Initializes the dialog. - * + * * @argument {object} options The options for the plugin */ init: function (options) { @@ -91,36 +141,38 @@ // get the combo var dialog = $(this).addClass('dialog cancellable modal'); - var dialogHeaderText = $('<span class="dialog-header-text"></span>'); - var dialogHeader = $('<div class="dialog-header"></div>').append(dialogHeaderText); + dialog.css('display', 'none'); + + // determine if dialog needs a header + if (!isDefinedAndNotNull(options.header) || options.header) { + var dialogHeaderText = $('<span class="dialog-header-text"></span>'); + var dialogHeader = $('<div class="dialog-header"></div>').prepend(dialogHeaderText); + + // determine if the specified header text is null + if (!isBlank(options.headerText)) { + dialogHeaderText.text(options.headerText); + } + + dialog.prepend(dialogHeader); + } // save the close handler if (isDefinedAndNotNull(options.handler)) { dialog.data('handler', options.handler); } - // determine if the specified header text is null - if (!isBlank(options.headerText)) { - dialogHeaderText.text(options.headerText); - } - dialog.prepend(dialogHeader); - - // determine whether a dialog border is necessary - if (options.overlayBackground === true) { - dialog.addClass('overlay'); - } else { - dialog.addClass('show-border'); + // determine if dialog needs footer/buttons + if (!isDefinedAndNotNull(options.footer) || options.footer) { + // add the buttons + addButtons(dialog, options.buttons); } - - // add the buttons - addButtons(dialog, options.buttons); } }); }, - + /** * Sets the handler that is used when the dialog is closed. - * + * * @argument {function} handler The function to call when hiding the dialog */ setHandler: function (handler) { @@ -128,32 +180,10 @@ $(this).data('handler', handler); }); }, - - /** - * Sets whether to overlay the background or if a border should be shown around the dialog. - * - * @argument {boolean} overlayBackground Whether or not to overlay the background - */ - setOverlayBackground: function (overlayBackground) { - return this.each(function () { - if (isDefinedAndNotNull(overlayBackground)) { - var dialog = $(this); - // if we should overlay the background - if (overlayBackground === true) { - dialog.addClass('overlay'); - dialog.removeClass('show-border'); - } else { - dialog.addClass('show-border'); - dialog.removeClass('overlay'); - } - } - }); - }, - /** * Updates the button model for the selected dialog. - * + * * @argument {array} buttons The new button model */ setButtonModel: function (buttons) { @@ -169,10 +199,10 @@ } }); }, - + /** * Sets the header text of the dialog. - * + * * @argument {string} text Text to use a as a header */ setHeaderText: function (text) { @@ -180,35 +210,222 @@ $(this).find('span.dialog-header-text').text(text); }); }, - + /** * Shows the dialog. */ show: function () { - return this.each(function () { - // show the dialog - var dialog = $(this); - if (!dialog.is(':visible')) { - var title = dialog.find('span.dialog-header-text').text(); - if (isBlank(title)) { - dialog.find('.dialog-content').css('margin-top', '-20px'); + var dialog = $(this); + var dialogContent = dialog.find('.dialog-content'); + + var zIndex = dialog.css('z-index'); + if (zIndex === 'auto') { + if (isDefinedAndNotNull(dialog.data('nf-dialog'))) { + zIndex = (isDefinedAndNotNull(dialog.data('nf-dialog')['z-index'])) ? + dialog.data('nf-dialog')['z-index'] : 1301; + } else { + zIndex = 1301; + } + } + var openDialogs = $.makeArray($('.dialog:visible')); + if (openDialogs.length >= 1){ + var zVals = openDialogs.map(function(openDialog){ + var index; + return isNaN(index = parseInt($(openDialog).css("z-index"), 10)) ? 0 : index; + }); + //Add 2 so that we have room for the modalGlass of the new dialog + zIndex = Math.max.apply(null, zVals) + 2; + } + dialog.css('z-index', zIndex); + + var nfDialog = {}; + if (isDefinedAndNotNull(dialog.data('nf-dialog'))) { + nfDialog = dialog.data('nf-dialog'); + } + + // determine if dialog needs a glasspane + var hasGlasspane; + if (isDefinedAndNotNull(nfDialog.glasspane)) { + hasGlasspane = nfDialog.glasspane; + } else { + hasGlasspane = true; + } + + //create glasspane overlay + if(hasGlasspane && (top === window)) { + // build the dialog modal + var modalGlassMarkup = '<div data-nf-dialog-parent="' + dialog.attr('id') + '" class="modal-glass"></div>'; + + var modalGlass = $(modalGlassMarkup); + + modalGlass.css('z-index', zIndex - 1).appendTo($('body')); + } + + var resize = function () { + //initialize responsive properties + if (!isDefinedAndNotNull(nfDialog.responsive)) { + nfDialog.responsive = {}; + + if (!isDefinedAndNotNull(nfDialog.responsive.x)) { + nfDialog.responsive.x = true; + } + + if (!isDefinedAndNotNull(nfDialog.responsive.y)) { + nfDialog.responsive.y = true; + } + } else { + if (!isDefinedAndNotNull(nfDialog.responsive.x)) { + nfDialog.responsive.x = true; + } else { + nfDialog.responsive.x = (nfDialog.responsive.x == "true" || nfDialog.responsive.x == true) ? true : false; + } + + if (!isDefinedAndNotNull(nfDialog.responsive.y)) { + nfDialog.responsive.y = true; + } else { + nfDialog.responsive.y = (nfDialog.responsive.y == "true" || nfDialog.responsive.y == true) ? true : false; + } + } + + if (!isDefinedAndNotNull(nfDialog.resizable)) { + nfDialog.resizable = false; + } else { + nfDialog.resizable = (nfDialog.resizable == "true" || nfDialog.resizable == true) ? true : false; + } + + if (nfDialog.responsive.y || nfDialog.responsive.x) { + + var fullscreenHeight; + var fullscreenWidth; + + if (isDefinedAndNotNull(nfDialog.responsive['fullscreen-height'])) { + fullscreenHeight = parseInt(nfDialog.responsive['fullscreen-height'], 10); } else { - dialog.find('.dialog-content').css('margin-top', '0'); + nfDialog.responsive['fullscreen-height'] = dialog.height() + 'px'; + + fullscreenHeight = parseInt(nfDialog.responsive['fullscreen-height'], 10); } - - // show the appropriate background - if (dialog.hasClass('show-border')) { - $('#glass-pane').show(); + + if (isDefinedAndNotNull(nfDialog.responsive['fullscreen-width'])) { + fullscreenWidth = parseInt(nfDialog.responsive['fullscreen-width'], 10); } else { - $('#faded-background').show(); + nfDialog.responsive['fullscreen-width'] = dialog.width() + 'px'; + + fullscreenWidth = parseInt(nfDialog.responsive['fullscreen-width'], 10); + } + + if (!isDefinedAndNotNull(nfDialog.width)) { + nfDialog.width = dialog.css('width'); } + if (!isDefinedAndNotNull(nfDialog['min-width'])) { + if (parseInt(dialog.css('min-width'), 10) > 0) { + nfDialog['min-width'] = dialog.css('min-width'); + } else { + nfDialog['min-width'] = nfDialog.width; + } + } + + //min-width should always be set in terms of px + if (nfDialog['min-width'].indexOf("%") > 0) { + nfDialog['min-width'] = ($(window).width() * (parseInt(nfDialog['min-width'], 10) / 100)) + 'px'; + } + + if (!isDefinedAndNotNull(nfDialog.height)) { + nfDialog.height = dialog.css('height'); + } + + if (!isDefinedAndNotNull(nfDialog['min-height'])) { + if (parseInt(dialog.css('min-height'), 10) > 0) { + nfDialog['min-height'] = dialog.css('min-height'); + } else { + nfDialog['min-height'] = nfDialog.height; + } + } + + //min-height should always be set in terms of px + if (nfDialog['min-height'].indexOf("%") > 0) { + nfDialog['min-height'] = ($(window).height() * (parseInt(nfDialog['min-height'], 10) / 100)) + 'px'; + } + + //resize dialog + if ($(window).height() < fullscreenHeight) { + if (nfDialog.responsive.y) { + dialog.css('height', '100%'); + dialog.css('min-height', '100%'); + } + } else { + //set the dialog min-height + dialog.css('min-height', nfDialog['min-height']); + if (nfDialog.responsive.y) { + //make sure nfDialog.height is in terms of % + if (nfDialog.height.indexOf("px") > 0) { + nfDialog.height = (parseInt(nfDialog.height, 10) / $(window).height() * 100) + '%'; + } + dialog.css('height', nfDialog.height); + } + } + + if ($(window).width() < fullscreenWidth) { + if (nfDialog.responsive.x) { + dialog.css('width', '100%'); + dialog.css('min-width', '100%'); + } + } else { + //set the dialog width + dialog.css('min-width', nfDialog['min-width']); + if (nfDialog.responsive.x) { + //make sure nfDialog.width is in terms of % + if (nfDialog.width.indexOf("px") > 0) { + nfDialog.width = (parseInt(nfDialog.width, 10) / $(window).width() * 100) + '%'; + } + dialog.css('width', nfDialog.width); + } + } + + dialog.center(); + + //persist data attribute + dialog.data('nfDialog', nfDialog); + } + + //resize dialog content + if (!nfDialog.resizable) { + dialogContent.attr('style', 'height:' + + (dialog.height() - + dialog.find('.dialog-header').height() - + dialog.find('.dialog-buttons').height() - + parseInt(dialogContent.css('padding-top'), 10) - + parseInt(dialogContent.css('padding-bottom'), 10) + 'px')); + + if (dialogContent[0].offsetHeight < dialogContent[0].scrollHeight) { + // your element have overflow + dialogContent.addClass('scrollable'); + } else { + // your element doesn't have overflow + dialogContent.removeClass('scrollable'); + } + } + }; + + // listen for browser resize events to resize and center the dialog + $(window).resize(function () { + resize(); + + dialog.trigger("dialog:resize"); + }); + + return this.each(function () { + // show the dialog + if (!dialog.is(':visible')) { // center and show the dialog dialog.center().show(); + + resize(); } }); }, - + /** * Hides the dialog. */ @@ -216,16 +433,12 @@ return this.each(function () { var dialog = $(this); if (dialog.is(':visible')) { - // hide the appropriate backgroun - if (dialog.hasClass('show-border')) { - $('#glass-pane').hide(); - } else { - $('#faded-background').hide(); - } + // remove the modal backgroun + $('body').find("[data-nf-dialog-parent='" + dialog.attr('id') + "']").remove(); // hide the dialog dialog.hide(); - + // invoke the handler var handler = dialog.data('handler'); if (isDefinedAndNotNull(handler) && typeof handler.close === 'function') {
http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css index d1f22b2..ba3c338 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css @@ -19,37 +19,20 @@ Styles for the property table. */ -div.properties-header { - margin-bottom: 10px; - height: 19px; -} - div.required-property-note { font-weight: bold; + font-size: 12px; float: left; - height: 19px; - line-height: 19px; + height: 28px; + line-height: 28px; margin-left: 6px; } div.add-property { float: right; - margin-right: 20px; -} - -div.add-property-icon { - width: 19px; - height: 19px; - cursor: pointer; - float: left; -} - -div.add-icon-bg { - background: transparent url(buttonNewProperty.png) no-repeat scroll top left; -} - -div.add-icon-bg-hover { - background: transparent url(buttonNewProperty.png) no-repeat scroll top right; + margin-bottom: 4px; + font-size: 16px; + text-transform: uppercase; } div.add-property-text { @@ -57,70 +40,38 @@ div.add-property-text { margin-left: 5px; height: 19px; line-height: 19px; + color: #262626; } div.property-table { - width: 758px; - height: 290px; - border-bottom: 1px solid #666; - background-color: #fff; + width: 100%; + min-height: 150px; + overflow: hidden; + height: 80%; +} + +.property-table .fa { + float: right; + color: #004849; + line-height: 18px; } /* New property dialog */ -div.new-property-dialog { - z-index: 1301; - display: none; - padding: 10px; - border: 3px solid #365C6A; - box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.9); - cursor: move; - width: 300px; - height: 72px; -} - -div.new-property-name-container { - position: absolute; - height: 25px; - left: 10px; - right: 10px; - padding-right: 10px; - overflow: hidden; -} - -input.new-property-name { - height: 14px; - width: 100%; -} - div.new-property-button-container { position: absolute; left: 0; bottom: 0; right: 0; - padding: 0 8px 10px; } /* New inline controller service dialog */ -div.new-inline-controller-service-dialog { - z-index: 1301; - display: none; - padding: 10px; - border: 3px solid #365C6A; - box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.9); - cursor: move; - width: 350px; - height: 250px; -} - -div.new-inline-controller-service-combo { - height: 18px; - width: 340px; +div.new-inline-controller-service-combo { width: 50%; margin-bottom: 10px; } @@ -197,14 +148,9 @@ div.value pre { Styles for the property value combo */ -div.edit-property-value-combo { - height: 22px; -} - div.value-combo { - height: 18px; - margin-top: 0px; float: left; + border: 1px solid #eaeef0; } /* http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js index a586319..e436c04 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js @@ -39,7 +39,7 @@ /** * jQuery plugin for a property table. - * + * * @param {type} $ */ (function ($) { @@ -71,30 +71,25 @@ wrapper = $('<div></div>').addClass('slickgrid-editor').css({ 'z-index': 100000, 'position': 'absolute', - 'background': 'white', - 'padding': '5px', + 'border-radius': '2px', + 'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px', + 'background-color': 'rgb(255, 255, 255)', 'overflow': 'hidden', - 'border': '3px solid #365C6A', - 'box-shadow': '4px 4px 6px rgba(0, 0, 0, 0.9)', 'cursor': 'move' - }).draggable({ - cancel: '.button, textarea, .nf-checkbox', - containment: 'parent' }).appendTo(container); // create the input field input = $('<textarea hidefocus rows="5"/>').css({ - 'background': 'white', - 'width': args.position.width + 'px', - 'min-width': '150px', 'height': '80px', - 'border-width': '0', - 'outline': '0', - 'overflow-y': 'auto', - 'resize': 'both', - 'margin-bottom': '28px' + 'width': args.position.width + 'px', + 'margin': '20px 20px' }).tab().on('keydown', scope.handleKeyDown).appendTo(wrapper); + wrapper.draggable({ + cancel: '.button, textarea, .nf-checkbox', + containment: 'parent' + }); + // create the button panel var stringCheckPanel = $('<div class="string-check-container">'); @@ -102,15 +97,25 @@ isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel); $('<span class="string-check-label"> Empty</span>').appendTo(stringCheckPanel); - var ok = $('<div class="button button-normal">Ok</div>').on('click', scope.save); - var cancel = $('<div class="button button-normal">Cancel</div>').on('click', scope.cancel); - $('<div></div>').css({ - 'position': 'absolute', - 'bottom': '0', - 'left': '0', - 'right': '0', - 'padding': '0 3px 5px' - }).append(stringCheckPanel).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper); + var ok = $('<div class="button">Ok</div>').css({ + 'color': '#fff', + 'background': '#728E9B' + }).hover( + function () { + $(this).css('background', '#004849'); + }, function () { + $(this).css('background', '#728E9B'); + }).on('click', scope.save); + var cancel = $('<div class="secondary-button">Cancel</div>').css({ + 'color': '#004849', + 'background': '#E3E8EB' + }).hover( + function () { + $(this).css('background', '#C7D2D7'); + }, function () { + $(this).css('background', '#E3E8EB'); + }).on('click', scope.cancel); + $('<div></div>').append(stringCheckPanel).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper); // position and focus scope.position(args.position); @@ -279,11 +284,11 @@ wrapper = $('<div></div>').addClass('slickgrid-nfel-editor').css({ 'z-index': 14000, 'position': 'absolute', - 'background': 'white', - 'padding': '5px', + 'padding': '10px 20px', 'overflow': 'hidden', - 'border': '3px solid #365C6A', - 'box-shadow': '4px 4px 6px rgba(0, 0, 0, 0.9)', + 'border-radius': '2px', + 'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px', + 'background-color': 'rgb(255, 255, 255)', 'cursor': 'move' }).draggable({ cancel: 'input, textarea, pre, .nf-checkbox, .button, .' + editorClass, @@ -313,14 +318,29 @@ isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel); $('<span class="string-check-label"> Empty</span>').appendTo(stringCheckPanel); - var ok = $('<div class="button button-normal">Ok</div>').on('click', scope.save); - var cancel = $('<div class="button button-normal">Cancel</div>').on('click', scope.cancel); + var ok = $('<div class="button">Ok</div>').css({ + 'color': '#fff', + 'background': '#728E9B' + }).hover( + function () { + $(this).css('background', '#004849'); + }, function () { + $(this).css('background', '#728E9B'); + }).on('click', scope.save); + var cancel = $('<div class="secondary-button">Cancel</div>').css({ + 'color': '#004849', + 'background': '#E3E8EB' + }).hover( + function () { + $(this).css('background', '#C7D2D7'); + }, function () { + $(this).css('background', '#E3E8EB'); + }).on('click', scope.cancel); $('<div></div>').css({ 'position': 'absolute', 'bottom': '0', 'left': '0', - 'right': '0', - 'padding': '0 3px 5px 1px' + 'right': '0' }).append(stringCheckPanel).append(ok).append(cancel).append('<div class="clear"></div>').appendTo(wrapper); // position and focus @@ -457,7 +477,7 @@ var gridContainer = $(args.grid.getContainerNode()); var descriptors = gridContainer.data('descriptors'); propertyDescriptor = descriptors[args.item.property]; - + // get the options var propertyContainer = gridContainer.closest('.property-container'); var configurationOptions = propertyContainer.data('options'); @@ -466,11 +486,11 @@ wrapper = $('<div class="combo-editor"></div>').css({ 'z-index': 1999, 'position': 'absolute', - 'background': 'white', 'padding': '5px', 'overflow': 'hidden', - 'border': '3px solid #365C6A', - 'box-shadow': '4px 4px 6px rgba(0, 0, 0, 0.9)', + 'border-radius': '2px', + 'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px', + 'background-color': 'rgb(255, 255, 255)', 'cursor': 'move' }).draggable({ cancel: '.button, .combo', @@ -508,7 +528,7 @@ disabled: true }); } - + // if this descriptor identifies a controller service, provide a way to create one if (nf.Common.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService)) { options.push({ @@ -531,7 +551,7 @@ if (typeof option.value === 'undefined') { // cancel the current edit scope.cancel(); - + // prompt for the new service type promptForNewControllerService(gridContainer, args.grid, args.item, propertyDescriptor.identifiesControllerService, configurationOptions); } @@ -539,14 +559,28 @@ }).width(position.width - 16).appendTo(wrapper); // add buttons for handling user input - $('<div class="button button-normal">Cancel</div>').css({ + $('<div class="secondary-button">Cancel</div>').css({ 'margin': '0 0 0 5px', - 'float': 'left' - }).on('click', scope.cancel).appendTo(wrapper); - $('<div class="button button-normal">Ok</div>').css({ + 'float': 'left', + 'color': '#004849', + 'background': '#E3E8EB' + }).hover( + function () { + $(this).css('background', '#C7D2D7'); + }, function () { + $(this).css('background', '#E3E8EB'); + }).on('click', scope.cancel).appendTo(wrapper); + $('<div class="button">Ok</div>').css({ 'margin': '0 0 0 5px', - 'float': 'left' - }).on('click', scope.save).appendTo(wrapper); + 'float': 'left', + 'color': '#fff', + 'background': '#728E9B' + }).hover( + function () { + $(this).css('background', '#004849'); + }, function () { + $(this).css('background', '#728E9B'); + }).on('click', scope.save).appendTo(wrapper); // position and focus scope.position(position); @@ -627,9 +661,9 @@ /** * Shows the property value for the specified row and cell. - * + * * @param {type} propertyGrid - * @param {type} descriptors + * @param {type} descriptors * @param {type} row * @param {type} cell */ @@ -658,11 +692,11 @@ var wrapper = $('<div class="property-detail"></div>').css({ 'z-index': 1999, 'position': 'absolute', - 'background': 'white', 'padding': '5px', 'overflow': 'hidden', - 'border': '3px solid #365C6A', - 'box-shadow': '4px 4px 6px rgba(0, 0, 0, 0.9)', + 'border-radius': '2px', + 'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px', + 'background-color': 'rgb(255, 255, 255)', 'cursor': 'move', 'top': offset.top - 5, 'left': offset.left - 5 @@ -710,11 +744,18 @@ value: property.value } }).appendTo(wrapper); - - $('<div class="button button-normal">Ok</div>').css({ + + $('<div class="button">Ok</div>').css({ 'margin': '0 0 0 5px', - 'float': 'left' - }).on('click', function () { + 'float': 'left', + 'color': '#fff', + 'background': '#728E9B' + }).hover( + function () { + $(this).css('background', '#004849'); + }, function () { + $(this).css('background', '#728E9B'); + }).on('click', function () { wrapper.hide().remove(); }).appendTo(wrapper); } else { @@ -745,21 +786,12 @@ } }); } else { - // prevent dragging over standard components - wrapper.draggable({ - containment: 'parent' - }); // create the input field $('<textarea hidefocus rows="5" readonly="readonly"/>').css({ - 'background': 'white', - 'width': cellNode.width() + 'px', 'height': '80px', - 'border-width': '0', - 'outline': '0', - 'overflow-y': 'auto', - 'resize': 'both', - 'margin-bottom': '28px' + 'width': cellNode.width() + 'px', + 'margin': '20px 20px' }).text(property.value).on('keydown', function (evt) { if (evt.which === $.ui.keyCode.ESCAPE) { cleanUp(); @@ -768,6 +800,11 @@ evt.preventDefault(); } }).appendTo(wrapper); + + // prevent dragging over standard components + wrapper.draggable({ + containment: 'parent' + }); } var cleanUp = function () { @@ -781,26 +818,30 @@ }; // add an ok button that will remove the entire pop up - var ok = $('<div class="button button-normal">Ok</div>').on('click', function () { + var ok = $('<div class="button">Ok</div>').css({ + 'margin': '0 0 0 5px', + 'float': 'left', + 'color': '#fff', + 'background': '#728E9B' + }).hover( + function () { + $(this).css('background', '#004849'); + }, function () { + $(this).css('background', '#728E9B'); + }).on('click', function () { cleanUp(); }); - $('<div></div>').css({ - 'position': 'absolute', - 'bottom': '0', - 'left': '0', - 'right': '0', - 'padding': '0 3px 5px' - }).append(ok).append('<div class="clear"></div>').appendTo(wrapper); + $('<div></div>').append(ok).append('<div class="clear"></div>').appendTo(wrapper); } } } }; - + /** * Gets the available controller services that implement the specified type and * prompts the user to create one. - * + * * @param {jQuery} gridContainer The grid container * @param {slickgrid} grid The grid * @param {object} item The item @@ -824,16 +865,17 @@ description: nf.Common.escapeHtml(controllerServiceType.description) }); }); - + // ensure there are some applicable controller services if (options.length === 0) { nf.Dialog.showOkDialog({ - dialogContent: 'No controller service types found that are applicable for this property.', - overlayBackground: false + headerText: 'Controller Service', + dialogContent: 'No controller service types found that are applicable for this property.' }); } else { - var newControllerServiceDialogMarkup = - '<div class="new-inline-controller-service-dialog dialog cancellable">' + + var newControllerServiceDialogMarkup = + '<div id="new-inline-controller-service-dialog" class="hidden dialog medium-dialog cancellable">' + + '<div class="dialog-content">' + '<div>' + '<div class="setting-name">Controller Service</div>' + '<div class="setting-field">' + @@ -852,18 +894,14 @@ '<div class="new-inline-controller-service-description"></div>' + '</div>' + '</div>' + - '<div class="new-inline-controller-service-button-container">' + - '<div class="new-inline-controller-service-create button button-normal">Create</div>' + - '<div class="new-inline-controller-service-cancel button button-normal">Cancel</div>' + - '<div class="clear"></div>' + - '</div>' + - '</div>'; + '</div>' + + '</div>'; var newControllerServiceDialog = $(newControllerServiceDialogMarkup).appendTo(configurationOptions.dialogContainer); var newControllerServiceCombo = newControllerServiceDialog.find('div.new-inline-controller-service-combo'); var newControllerServiceTags = newControllerServiceDialog.find('div.new-inline-controller-service-tags'); var newControllerServiceDescription = newControllerServiceDialog.find('div.new-inline-controller-service-description'); - + // build the combo field newControllerServiceCombo.combo({ options: options, @@ -875,13 +913,43 @@ return false; } }); - + // set the service details newControllerServiceTags.text(service.tags.join(', ')).ellipsis(); newControllerServiceDescription.text(service.description); } }); - + + newControllerServiceDialog.modal({ + headerText: 'Add Controller Service', + buttons: [{ + buttonText: 'Create', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + create(); + } + } + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + cancel(); + } + } + }] + }); + var create = function () { var newControllerServiceType = newControllerServiceCombo.combo('getSelectedOption').value; @@ -907,7 +975,7 @@ contentType: 'application/json' }).done(function (response) { // load the descriptor and update the property - configurationOptions.descriptorDeferred(item.property).done(function(descriptorResponse) { + configurationOptions.descriptorDeferred(item.property).done(function (descriptorResponse) { var descriptor = descriptorResponse.propertyDescriptor; // store the descriptor for use later @@ -923,20 +991,16 @@ })); // close the dialog - newControllerServiceDialog.hide(); + newControllerServiceDialog.modal('hide'); }); }).fail(nf.Common.handleAjaxError); }; var cancel = function () { - newControllerServiceDialog.hide(); + newControllerServiceDialog.modal('hide'); }; - // make the new property dialog draggable - newControllerServiceDialog.draggable({ - cancel: 'input, textarea, pre, .button, .' + editorClass, - containment: 'body' - }).on('click', 'div.new-inline-controller-service-create', create).on('click', 'div.new-inline-controller-service-cancel', cancel).modal('show'); + newControllerServiceDialog.modal('show'); } }).fail(nf.Common.handleAjaxError); }; @@ -944,7 +1008,7 @@ var initPropertiesTable = function (table, options) { // function for formatting the property name var nameFormatter = function (row, cell, value, columnDef, dataContext) { - var nameWidthOffset = 10; + var nameWidthOffset = 30; var cellContent = $('<div></div>'); // format the contents @@ -960,9 +1024,9 @@ // show the property description if applicable if (nf.Common.isDefinedAndNotNull(propertyDescriptor)) { if (!nf.Common.isBlank(propertyDescriptor.description) || !nf.Common.isBlank(propertyDescriptor.defaultValue) || !nf.Common.isBlank(propertyDescriptor.supportsEl)) { - $('<img class="icon-info" src="images/iconInfo.png" alt="Info" title="" style="float: right; margin-right: 6px; margin-top: 4px;" />').appendTo(cellContent); + $('<div class="fa fa-question-circle" alt="Info" title="' + propertyDescriptor.description + '" style="float: right; margin-right: 6px; margin-top: 4px;"></div>').appendTo(cellContent); $('<span class="hidden property-descriptor-name"></span>').text(dataContext.property).appendTo(cellContent); - nameWidthOffset = 26; // 10 + icon width (10) + icon margin (6) + nameWidthOffset = 46; // 10 + icon width (10) + icon margin (6) + padding (20) } } @@ -1018,8 +1082,25 @@ }; var propertyColumns = [ - {id: 'property', field: 'displayName', name: 'Property', sortable: false, resizable: true, rerenderOnResize: true, formatter: nameFormatter}, - {id: 'value', field: 'value', name: 'Value', sortable: false, resizable: true, cssClass: 'pointer', rerenderOnResize: true, formatter: valueFormatter} + { + id: 'property', + field: 'displayName', + name: 'Property', + sortable: false, + resizable: true, + rerenderOnResize: true, + formatter: nameFormatter + }, + { + id: 'value', + field: 'value', + name: 'Value', + sortable: false, + resizable: true, + cssClass: 'pointer', + rerenderOnResize: true, + formatter: valueFormatter + } ]; // custom formatter for the actions column @@ -1029,17 +1110,17 @@ // get the property descriptor var descriptors = table.data('descriptors'); var propertyDescriptor = descriptors[dataContext.property]; - + var identifiesControllerService = nf.Common.isDefinedAndNotNull(propertyDescriptor.identifiesControllerService); var isConfigured = nf.Common.isDefinedAndNotNull(dataContext.value); var isOnCanvas = nf.Common.isDefinedAndNotNull(nf.Canvas); - + // check to see if we should provide a button for going to a controller service if (identifiesControllerService && isConfigured && isOnCanvas) { // ensure the configured value is referencing a valid service $.each(propertyDescriptor.allowableValues, function (_, allowableValue) { if (allowableValue.value === dataContext.value) { - markup += '<img src="images/iconGoTo.png" title="Go To" class="go-to-service pointer" style="margin-top: 2px" />'; + markup += '<div class="pointer go-to-service fa fa-long-arrow-right" title="Go To" style="margin-top: 2px" ></div>'; return false; } }); @@ -1047,7 +1128,7 @@ // allow user defined properties to be removed if (options.readOnly !== true && dataContext.type === 'userDefined') { - markup += '<img src="images/iconDelete.png" title="Delete" class="delete-property pointer" style="margin-top: 2px" />'; + markup += '<div title="Delete" class="delete-property pointer fa fa-trash" style="margin-top: 2px" ></div>'; } return markup; @@ -1061,7 +1142,8 @@ enableColumnReorder: false, editable: options.readOnly !== true, enableAddRow: false, - autoEdit: false + autoEdit: false, + rowHeight: 24 }; // initialize the dataview @@ -1112,7 +1194,7 @@ } } }; - + var goToControllerService = function (property) { $.ajax({ type: 'GET', @@ -1170,7 +1252,7 @@ e.stopImmediatePropagation(); } else if (propertyGrid.getColumns()[args.cell].id === 'actions') { var property = propertyData.getItem(args.row); - + var target = $(e.target); if (target.hasClass('delete-property')) { // mark the property in question for removal and refresh the table @@ -1186,7 +1268,7 @@ } else { // load the property descriptor if possible if (typeof options.goToServiceDeferred === 'function') { - options.goToServiceDeferred().done(function() { + options.goToServiceDeferred().done(function () { goToControllerService(property); }); } @@ -1194,12 +1276,12 @@ } } }); - propertyGrid.onKeyDown.subscribe(function(e, args) { + propertyGrid.onKeyDown.subscribe(function (e, args) { if (e.which === $.ui.keyCode.ESCAPE) { var editorLock = propertyGrid.getEditorLock(); if (editorLock.isActive()) { editorLock.cancelCurrentEdit(); - + // prevents standard cancel logic - standard logic does // not stop propagation when escape is pressed e.stopImmediatePropagation(); @@ -1220,7 +1302,7 @@ // hold onto an instance of the grid and listen for mouse events to add tooltips where appropriate table.data('gridInstance', propertyGrid).on('mouseenter', 'div.slick-cell', function (e) { - var infoIcon = $(this).find('img.icon-info'); + var infoIcon = $(this).find('div.fa-question-circle'); if (infoIcon.length && !infoIcon.data('qtip')) { var property = $(this).find('span.property-descriptor-name').text(); @@ -1237,7 +1319,7 @@ if (nf.Common.isDefinedAndNotNull(tooltip)) { infoIcon.qtip($.extend({ - content: tooltip + content: tooltip, }, nf.Common.config.tooltipConfig)); } } @@ -1255,7 +1337,7 @@ /** * Performs the filtering. - * + * * @param {object} item The item subject to filtering * @param {object} args Filter arguments * @returns {Boolean} Whether or not to include the item @@ -1266,8 +1348,8 @@ /** * Loads the specified properties. - * - * @param {type} table + * + * @param {type} table * @param {type} properties * @param {type} descriptors * @param {type} history @@ -1331,7 +1413,7 @@ /** * Clears the property table container. - * + * * @param {jQuery} propertyTableContainer */ var clear = function (propertyTableContainer) { @@ -1341,7 +1423,7 @@ } else { // clear any existing new property dialogs if (nf.Common.isDefinedAndNotNull(options.dialogContainer)) { - $(options.dialogContainer).children('div.new-property-dialog').hide(); + $('#new-property-dialog').modal("hide"); } } @@ -1350,7 +1432,7 @@ table.removeData('descriptors history'); // clean up any tooltips that may have been generated - nf.Common.cleanUpTooltips(table, 'img.icon-info'); + nf.Common.cleanUpTooltips(table, 'div.fa-question-circle'); // clear the data in the grid var propertyGrid = table.data('gridInstance'); @@ -1361,7 +1443,7 @@ var methods = { /** * Initializes the tag cloud. - * + * * @argument {object} options The options for the tag cloud */ init: function (options) { @@ -1384,24 +1466,51 @@ // optionally add a add new property button if (options.readOnly !== true && nf.Common.isDefinedAndNotNull(options.dialogContainer)) { // build the new property dialog - var newPropertyDialogMarkup = - '<div class="new-property-dialog dialog cancellable">' + + var newPropertyDialogMarkup = + '<div id="new-property-dialog" class="dialog cancellable small-dialog hidden">' + + '<div class="dialog-content">' + '<div>' + '<div class="setting-name">Property name</div>' + '<div class="setting-field new-property-name-container">' + '<input class="new-property-name" type="text"/>' + '</div>' + '</div>' + - '<div class="new-property-button-container">' + - '<div class="new-property-ok button button-normal">Ok</div>' + - '<div class="new-property-cancel button button-normal">Cancel</div>' + - '<div class="clear"></div>' + - '</div>' + - '</div>'; + '</div>' + + '</div>'; var newPropertyDialog = $(newPropertyDialogMarkup).appendTo(options.dialogContainer); var newPropertyNameField = newPropertyDialog.find('input.new-property-name'); + newPropertyDialog.modal({ + headerText: 'Add Property', + buttons: [{ + buttonText: 'Ok', + color: { + base: '#728E9B', + hover: '#004849', + text: '#ffffff' + }, + handler: { + click: function () { + add(); + } + } + }, + { + buttonText: 'Cancel', + color: { + base: '#E3E8EB', + hover: '#C7D2D7', + text: '#004849' + }, + handler: { + click: function () { + cancel(); + } + } + }] + }); + var add = function () { var propertyName = $.trim(newPropertyNameField.val()); @@ -1409,7 +1518,7 @@ if (propertyName !== '') { var propertyGrid = table.data('gridInstance'); var propertyData = propertyGrid.getData(); - + // ensure the property name is unique var existingItem = null; $.each(propertyData.getItems(), function (_, item) { @@ -1418,10 +1527,10 @@ return false; } }); - + if (existingItem === null) { // load the descriptor and add the property - options.descriptorDeferred(propertyName).done(function(response) { + options.descriptorDeferred(propertyName).done(function (response) { var descriptor = response.propertyDescriptor; // store the descriptor for use later @@ -1431,7 +1540,7 @@ } // add a row for the new property - var id = propertyData.getLength(); + var id = propertyData.getLength(); propertyData.addItem({ id: id, hidden: false, @@ -1455,17 +1564,17 @@ previousValue: null, value: null })); - + // select the new properties row var row = propertyData.getRowById(existingItem.id); propertyGrid.setActiveCell(row, propertyGrid.getColumnIndex('value')); propertyGrid.editActiveCell(); } else { nf.Dialog.showOkDialog({ - dialogContent: 'A property with this name already exists.', - overlayBackground: false + headerText: 'Property Exists', + dialogContent: 'A property with this name already exists.' }); - + // select the existing properties row var row = propertyData.getRowById(existingItem.id); propertyGrid.setSelectedRows([row]); @@ -1474,25 +1583,25 @@ } } else { nf.Dialog.showOkDialog({ - dialogContent: 'Property name must be specified.', - overlayBackground: false + headerText: 'Property Name', + dialogContent: 'Property name must be specified.' }); } // close the dialog - newPropertyDialog.hide(); + newPropertyDialog.modal('hide'); }; var cancel = function () { - newPropertyDialog.hide(); + newPropertyDialog.modal('hide'); }; - + // enable enter to add newPropertyNameField.on('keydown', function (e) { var code = e.keyCode ? e.keyCode : e.which; if (code === $.ui.keyCode.ENTER) { add(); - + // prevents the enter from propagating into the field for editing the new property value e.stopImmediatePropagation(); e.preventDefault(); @@ -1507,7 +1616,7 @@ // build the control to open the new property dialog var addProperty = $('<div class="add-property"></div>').appendTo(header); - $('<div class="add-property-icon add-icon-bg"></div>').on('click', function () { + $('<button class="button fa fa-plus"></button>').on('click', function () { // close all fields currently being edited saveRow(table); @@ -1515,16 +1624,11 @@ newPropertyNameField.val(''); // open the new property dialog - newPropertyDialog.center().show(); + newPropertyDialog.modal('show'); // set the initial focus newPropertyNameField.focus(); - }).on('mouseenter', function () { - $(this).removeClass('add-icon-bg').addClass('add-icon-bg-hover'); - }).on('mouseleave', function () { - $(this).removeClass('add-icon-bg-hover').addClass('add-icon-bg'); }).appendTo(addProperty); - $('<div class="add-property-text">New property</div>').appendTo(addProperty); } $('<div class="clear"></div>').appendTo(header); @@ -1533,10 +1637,10 @@ } }); }, - + /** * Loads the specified properties. - * + * * @argument {object} properties The properties * @argument {map} descriptors The property descriptors (property name -> property descriptor) * @argument {map} history @@ -1547,7 +1651,7 @@ loadProperties(table, properties, descriptors, history); }); }, - + /** * Saves the last edited row in the specified grid. */ @@ -1557,7 +1661,7 @@ saveRow(table); }); }, - + /** * Update the size of the grid based on its container's current size. */ @@ -1570,7 +1674,7 @@ } }); }, - + /** * Cancels the edit in the specified row. */ @@ -1584,7 +1688,7 @@ } }); }, - + /** * Destroys the property table. */ @@ -1599,13 +1703,13 @@ // clear any existing new property dialogs if (nf.Common.isDefinedAndNotNull(options.dialogContainer)) { - $(options.dialogContainer).children('div.new-property-dialog').remove(); + $('#new-property-dialog').modal("hide"); $(options.dialogContainer).children('div.new-inline-controller-service-dialog').remove(); } } }); }, - + /** * Clears the property table. */ @@ -1614,7 +1718,7 @@ clear($(this)); }); }, - + /** * Determines if a save is required for the first matching element. */ @@ -1640,7 +1744,7 @@ return isSaveRequired; }, - + /** * Marshalls the properties for the first matching element. */ http://git-wip-us.apache.org/repos/asf/nifi/blob/8b27ed90/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/qtip2/jquery.qtip.min.css ---------------------------------------------------------------------- diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/qtip2/jquery.qtip.min.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/qtip2/jquery.qtip.min.css old mode 100644 new mode 100755 index 27b9729..64af7fd --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/qtip2/jquery.qtip.min.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/qtip2/jquery.qtip.min.css @@ -1,3 +1,2 @@ -/* qTip2 v2.2.1 | Plugins: tips modal viewport svg imagemap ie6 | Styles: core basic css3 | qtip2.com | Licensed MIT | Sat Sep 06 2014 23:12:07 */ - -.qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;direction:ltr;box-shadow:none;padding:0}.qtip-content{position:relative;padding:5px 9px;overflow:hidden;text-align:left;word-wrap:break-word}.qtip-titlebar{position:relative;padding:5px 35px 5px 10px;overflow:hidden;border-width:0 0 1px;font-weight:700}.qtip-titlebar+.qtip-content{border-top-width:0!important}.qtip-close{position:absolute;right:-9px;top:-9px;z-index:11;cursor:pointer;outline:0;border:1px solid transparent}.qtip-titlebar .qtip-close{right:4px;top:50%;margin-top:-9px}* html .qtip-titlebar .qtip-close{top:16px}.qtip-icon .ui-icon,.qtip-titlebar .ui-icon{display:block;text-indent:-1000em;direction:ltr}.qtip-icon,.qtip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-decoration:none}.qtip-icon .ui-icon{width:18px;height:14px;line-height:14px;text-align:center;text-indent:0;font:400 bold 10px/13px Tahoma,sans -serif;color:inherit;background:-100em -100em no-repeat}.qtip-default{border:1px solid #F1D031;background-color:#FFFFA3;color:#555}.qtip-default .qtip-titlebar{background-color:#FFEF93}.qtip-default .qtip-icon{border-color:#CCC;background:#F1F1F1;color:#777}.qtip-default .qtip-titlebar .qtip-close{border-color:#AAA;color:#111}.qtip-light{background-color:#fff;border-color:#E2E2E2;color:#454545}.qtip-light .qtip-titlebar{background-color:#f1f1f1}.qtip-dark{background-color:#505050;border-color:#303030;color:#f3f3f3}.qtip-dark .qtip-titlebar{background-color:#404040}.qtip-dark .qtip-icon{border-color:#444}.qtip-dark .qtip-titlebar .ui-state-hover{border-color:#303030}.qtip-cream{background-color:#FBF7AA;border-color:#F9E98E;color:#A27D35}.qtip-cream .qtip-titlebar{background-color:#F0DE7D}.qtip-cream .qtip-close .qtip-icon{background-position:-82px 0}.qtip-red{background-color:#F78B83;border-color:#D95252;color:#912323}.qtip-red .qtip-titlebar{background-color:#F06D65}.qtip-red .qtip- close .qtip-icon{background-position:-102px 0}.qtip-red .qtip-icon,.qtip-red .qtip-titlebar .ui-state-hover{border-color:#D95252}.qtip-green{background-color:#CAED9E;border-color:#90D93F;color:#3F6219}.qtip-green .qtip-titlebar{background-color:#B0DE78}.qtip-green .qtip-close .qtip-icon{background-position:-42px 0}.qtip-blue{background-color:#E5F6FE;border-color:#ADD9ED;color:#5E99BD}.qtip-blue .qtip-titlebar{background-color:#D0E9F5}.qtip-blue .qtip-close .qtip-icon{background-position:-2px 0}.qtip-shadow{-webkit-box-shadow:1px 1px 3px 1px rgba(0,0,0,.15);-moz-box-shadow:1px 1px 3px 1px rgba(0,0,0,.15);box-shadow:1px 1px 3px 1px rgba(0,0,0,.15)}.qtip-bootstrap,.qtip-rounded,.qtip-tipsy{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.qtip-rounded .qtip-titlebar{-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.qtip-youtube{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 3px #333;- moz-box-shadow:0 0 3px #333;box-shadow:0 0 3px #333;color:#fff;border:0 solid transparent;background:#4A4A4A;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4A4A4A),color-stop(100%,#000));background-image:-webkit-linear-gradient(top,#4A4A4A 0,#000 100%);background-image:-moz-linear-gradient(top,#4A4A4A 0,#000 100%);background-image:-ms-linear-gradient(top,#4A4A4A 0,#000 100%);background-image:-o-linear-gradient(top,#4A4A4A 0,#000 100%)}.qtip-youtube .qtip-titlebar{background-color:transparent}.qtip-youtube .qtip-content{padding:.75em;font:12px arial,sans-serif;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#4a4a4a, EndColorStr=#000000);-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);"}.qtip-youtube .qtip-icon{border-color:#222}.qtip-youtube .qtip-titlebar .ui-state-hover{border-color:#303030}.qtip-jtools{background:#232323;background:rgba(0,0,0,.7);background -image:-webkit-gradient(linear,left top,left bottom,from(#717171),to(#232323));background-image:-moz-linear-gradient(top,#717171,#232323);background-image:-webkit-linear-gradient(top,#717171,#232323);background-image:-ms-linear-gradient(top,#717171,#232323);background-image:-o-linear-gradient(top,#717171,#232323);border:2px solid #ddd;border:2px solid rgba(241,241,241,1);-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 12px #333;-moz-box-shadow:0 0 12px #333;box-shadow:0 0 12px #333}.qtip-jtools .qtip-titlebar{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171, endColorstr=#4A4A4A);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)"}.qtip-jtools .qtip-content{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A, endColorstr=#232323);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)"}.qtip-jtools .qtip-content, .qtip-jtools .qtip-titlebar{background:0 0;color:#fff;border:0 dashed transparent}.qtip-jtools .qtip-icon{border-color:#555}.qtip-jtools .qtip-titlebar .ui-state-hover{border-color:#333}.qtip-cluetip{-webkit-box-shadow:4px 4px 5px rgba(0,0,0,.4);-moz-box-shadow:4px 4px 5px rgba(0,0,0,.4);box-shadow:4px 4px 5px rgba(0,0,0,.4);background-color:#D9D9C2;color:#111;border:0 dashed transparent}.qtip-cluetip .qtip-titlebar{background-color:#87876A;color:#fff;border:0 dashed transparent}.qtip-cluetip .qtip-icon{border-color:#808064}.qtip-cluetip .qtip-titlebar .ui-state-hover{border-color:#696952;color:#696952}.qtip-tipsy{background:#000;background:rgba(0,0,0,.87);color:#fff;border:0 solid transparent;font-size:11px;font-family:'Lucida Grande',sans-serif;font-weight:700;line-height:16px;text-shadow:0 1px #000}.qtip-tipsy .qtip-titlebar{padding:6px 35px 0 10px;background-color:transparent}.qtip-tipsy .qtip-content{padding:6px 10px}.qtip-tipsy .qtip-icon{border-color:#222;text-shadow:none}.qt ip-tipsy .qtip-titlebar .ui-state-hover{border-color:#303030}.qtip-tipped{border:3px solid #959FA9;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#F9F9F9;color:#454545;font-weight:400;font-family:serif}.qtip-tipped .qtip-titlebar{border-bottom-width:0;color:#fff;background:#3A79B8;background-image:-webkit-gradient(linear,left top,left bottom,from(#3A79B8),to(#2E629D));background-image:-webkit-linear-gradient(top,#3A79B8,#2E629D);background-image:-moz-linear-gradient(top,#3A79B8,#2E629D);background-image:-ms-linear-gradient(top,#3A79B8,#2E629D);background-image:-o-linear-gradient(top,#3A79B8,#2E629D);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8, endColorstr=#2E629D);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)"}.qtip-tipped .qtip-icon{border:2px solid #285589;background:#285589}.qtip-tipped .qtip-icon .ui-icon{background-color:#FBFBFB;color:#555}.qtip-bootstrap{font-si ze:14px;line-height:20px;color:#333;padding:1px;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.qtip-bootstrap .qtip-titlebar{padding:8px 14px;margin:0;font-size:14px;font-weight:400;line-height:18px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.qtip-bootstrap .qtip-titlebar .qtip-close{right:11px;top:45%;border-style:none}.qtip-bootstrap .qtip-content{padding:9px 14px}.qtip-bootstrap .qtip-icon{background:0 0}.qtip-bootstrap .qtip-icon .ui-icon{width:auto;height:auto;float:right;font-size:20px;font-weight:700;line-height:18px;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;f ilter:alpha(opacity=20)}.qtip-bootstrap .qtip-icon .ui-icon:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4;filter:alpha(opacity=40)}.qtip:not(.ie9haxors) div.qtip-content,.qtip:not(.ie9haxors) div.qtip-titlebar{filter:none;-ms-filter:none}.qtip .qtip-tip{margin:0 auto;overflow:hidden;z-index:10}.qtip .qtip-tip,x:-o-prefocus{visibility:hidden}.qtip .qtip-tip,.qtip .qtip-tip .qtip-vml,.qtip .qtip-tip canvas{position:absolute;color:#123456;background:0 0;border:0 dashed transparent}.qtip .qtip-tip canvas{top:0;left:0}.qtip .qtip-tip .qtip-vml{behavior:url(#default#VML);display:inline-block;visibility:visible}#qtip-overlay{position:fixed;left:0;top:0;width:100%;height:100%}#qtip-overlay.blurs{cursor:pointer}#qtip-overlay div{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#000;opacity:.7;filter:alpha(opacity=70);-ms-filter:"alpha(Opacity=70)"}.qtipmodal-ie6fix{position:absolute!important} \ No newline at end of file +/* qtip2 v3.0.3 | Plugins: viewport svg modal | Styles: core | qtip2.com | Licensed MIT | Wed May 11 2016 22:21:18 */ +#qtip-overlay.blurs,.qtip-close{cursor:pointer}.qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;direction:ltr;box-shadow:none;padding:0}.qtip-content,.qtip-titlebar{position:relative;overflow:hidden}.qtip-content{padding:5px 9px;text-align:left;word-wrap:break-word}.qtip-titlebar{padding:5px 35px 5px 10px;border-width:0 0 1px;font-weight:700}.qtip-titlebar+.qtip-content{border-top-width:0!important}.qtip-close{position:absolute;right:-9px;top:-9px;z-index:11;outline:0;border:1px solid transparent}.qtip-titlebar .qtip-close{right:4px;top:50%;margin-top:-9px}* html .qtip-titlebar .qtip-close{top:16px}.qtip-icon .ui-icon,.qtip-titlebar .ui-icon{display:block;text-indent:-1000em;direction:ltr}.qtip-icon,.qtip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-decoration:none}.qtip-icon .ui-icon{width:18px;height:14px;line-height:14px;text-align:center;text-indent:0;font:nor mal 700 10px/13px Tahoma,sans-serif;color:inherit;background:-100em -100em no-repeat}.qtip-default{border:1px solid #F1D031;background-color:#FFFFA3;color:#555}.qtip-default .qtip-titlebar{background-color:#FFEF93}.qtip-default .qtip-icon{border-color:#CCC;background:#F1F1F1;color:#777}.qtip-default .qtip-titlebar .qtip-close{border-color:#AAA;color:#111}.qtip-light{background-color:#fff;border-color:#E2E2E2;color:#454545}.qtip-light .qtip-titlebar{background-color:#f1f1f1}.qtip-dark{background-color:#505050;border-color:#303030;color:#f3f3f3}.qtip-dark .qtip-titlebar{background-color:#404040}.qtip-dark .qtip-icon{border-color:#444}.qtip-dark .qtip-titlebar .ui-state-hover{border-color:#303030}.qtip-cream{background-color:#FBF7AA;border-color:#F9E98E;color:#A27D35}.qtip-red,.qtip-red .qtip-icon,.qtip-red .qtip-titlebar .ui-state-hover{border-color:#D95252}.qtip-cream .qtip-titlebar{background-color:#F0DE7D}.qtip-cream .qtip-close .qtip-icon{background-position:-82px 0}.qtip-red{back ground-color:#F78B83;color:#912323}.qtip-red .qtip-titlebar{background-color:#F06D65}.qtip-red .qtip-close .qtip-icon{background-position:-102px 0}.qtip-green{background-color:#CAED9E;border-color:#90D93F;color:#3F6219}.qtip-green .qtip-titlebar{background-color:#B0DE78}.qtip-green .qtip-close .qtip-icon{background-position:-42px 0}.qtip-blue{background-color:#E5F6FE;border-color:#ADD9ED;color:#5E99BD}.qtip-blue .qtip-titlebar{background-color:#D0E9F5}.qtip-blue .qtip-close .qtip-icon{background-position:-2px 0}.qtip-shadow{-webkit-box-shadow:1px 1px 3px 1px rgba(0,0,0,.15);-moz-box-shadow:1px 1px 3px 1px rgba(0,0,0,.15);box-shadow:1px 1px 3px 1px rgba(0,0,0,.15)}.qtip-bootstrap,.qtip-rounded,.qtip-tipsy{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.qtip-rounded .qtip-titlebar{-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.qtip-youtube{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-box-sha dow:0 0 3px #333;-moz-box-shadow:0 0 3px #333;box-shadow:0 0 3px #333;color:#fff;border:0 solid transparent;background:#4A4A4A;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4A4A4A),color-stop(100%,#000));background-image:-webkit-linear-gradient(top,#4A4A4A 0,#000 100%);background-image:-moz-linear-gradient(top,#4A4A4A 0,#000 100%);background-image:-ms-linear-gradient(top,#4A4A4A 0,#000 100%);background-image:-o-linear-gradient(top,#4A4A4A 0,#000 100%)}.qtip-youtube .qtip-titlebar{background-color:#4A4A4A;background-color:rgba(0,0,0,0)}.qtip-youtube .qtip-content{padding:.75em;font:12px arial,sans-serif;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#4a4a4a, EndColorStr=#000000);-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);"}.qtip-youtube .qtip-icon{border-color:#222}.qtip-youtube .qtip-titlebar .ui-state-hover{border-color:#303030}.qtip-jtools{background :#232323;background:rgba(0,0,0,.7);background-image:-webkit-gradient(linear,left top,left bottom,from(#717171),to(#232323));background-image:-moz-linear-gradient(top,#717171,#232323);background-image:-webkit-linear-gradient(top,#717171,#232323);background-image:-ms-linear-gradient(top,#717171,#232323);background-image:-o-linear-gradient(top,#717171,#232323);border:2px solid #ddd;border:2px solid rgba(241,241,241,1);-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 12px #333;-moz-box-shadow:0 0 12px #333;box-shadow:0 0 12px #333}.qtip-jtools .qtip-titlebar{background-color:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171, endColorstr=#4A4A4A);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)"}.qtip-jtools .qtip-content{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A, endColorstr=#232323);-ms-filter:"progid:DXImageTransform.Microsoft.gradie nt(startColorstr=#4A4A4A,endColorstr=#232323)"}.qtip-jtools .qtip-content,.qtip-jtools .qtip-titlebar{background:0 0;color:#fff;border:0 dashed transparent}.qtip-jtools .qtip-icon{border-color:#555}.qtip-jtools .qtip-titlebar .ui-state-hover{border-color:#333}.qtip-cluetip{-webkit-box-shadow:4px 4px 5px rgba(0,0,0,.4);-moz-box-shadow:4px 4px 5px rgba(0,0,0,.4);box-shadow:4px 4px 5px rgba(0,0,0,.4);background-color:#D9D9C2;color:#111;border:0 dashed transparent}.qtip-cluetip .qtip-titlebar{background-color:#87876A;color:#fff;border:0 dashed transparent}.qtip-cluetip .qtip-icon{border-color:#808064}.qtip-cluetip .qtip-titlebar .ui-state-hover{border-color:#696952;color:#696952}.qtip-tipsy{background:#000;background:rgba(0,0,0,.87);color:#fff;border:0 solid transparent;font-size:11px;font-family:'Lucida Grande',sans-serif;font-weight:700;line-height:16px;text-shadow:0 1px #000}.qtip-tipsy .qtip-titlebar{padding:6px 35px 0 10px;background-color:transparent}.qtip-tipsy .qtip-content{padd ing:6px 10px}.qtip-tipsy .qtip-icon{border-color:#222;text-shadow:none}.qtip-tipsy .qtip-titlebar .ui-state-hover{border-color:#303030}.qtip-tipped{border:3px solid #959FA9;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#F9F9F9;color:#454545;font-weight:400;font-family:serif}.qtip-tipped .qtip-titlebar{border-bottom-width:0;color:#fff;background:#3A79B8;background-image:-webkit-gradient(linear,left top,left bottom,from(#3A79B8),to(#2E629D));background-image:-webkit-linear-gradient(top,#3A79B8,#2E629D);background-image:-moz-linear-gradient(top,#3A79B8,#2E629D);background-image:-ms-linear-gradient(top,#3A79B8,#2E629D);background-image:-o-linear-gradient(top,#3A79B8,#2E629D);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8, endColorstr=#2E629D);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)"}.qtip-tipped .qtip-icon{border:2px solid #285589;background:#285589}.qtip-tipped .qtip -icon .ui-icon{background-color:#FBFBFB;color:#555}.qtip-bootstrap{font-size:14px;line-height:20px;color:#333;padding:1px;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.qtip-bootstrap .qtip-titlebar{padding:8px 14px;margin:0;font-size:14px;font-weight:400;line-height:18px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.qtip-bootstrap .qtip-titlebar .qtip-close{right:11px;top:45%;border-style:none}.qtip-bootstrap .qtip-content{padding:9px 14px}.qtip-bootstrap .qtip-icon{background:0 0}.qtip-bootstrap .qtip-icon .ui-icon{width:auto;height:auto;float:right;font-size:20px;font-we ight:700;line-height:18px;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}#qtip-overlay,#qtip-overlay div{left:0;top:0;width:100%;height:100%}.qtip-bootstrap .qtip-icon .ui-icon:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4;filter:alpha(opacity=40)}.qtip:not(.ie9haxors) div.qtip-content,.qtip:not(.ie9haxors) div.qtip-titlebar{filter:none;-ms-filter:none}#qtip-overlay{position:fixed}#qtip-overlay div{position:absolute;background-color:#000;opacity:.7;filter:alpha(opacity=70);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"} \ No newline at end of file
