--- panels_ipe/css/panels_ipe.css +++ panels_ipe/css/panels_ipe.css @@ -1,19 +1,24 @@ +body.panels-ipe { + margin-bottom: 60px !important; +} + +/* Hide the IPE toolbar on print output. */ +@media print { + #panels-ipe-control-container { + display: none !important; + } + body.panels-ipe { + margin-top: 0 !important; + } +} + div.panels-ipe-handlebar-wrapper { - border-bottom: #898AAB solid 2px; + border-bottom: 1px solid #CCC; } .panels-ipe-editing div.panels-ipe-portlet-wrapper { margin-top: 1em; - border: #898AAB solid 2px; - -moz-border-radius-bottomleft:8px; - -moz-border-radius-bottomright:8px; - -moz-border-radius-topleft:2px; - -moz-border-radius-topright:2px; - - -webkit-border-radius-bottomleft:8px; - -webkit-border-radius-bottomright:8px; - -webkit-border-radius-topleft:2px; - -webkit-border-radius-topright:2px; + border: 1px solid #CCC; } /* Hide empty panes when not editing them. */ @@ -25,9 +30,8 @@ div.panels-ipe-handlebar-wrapper { display: block; } - .panels-ipe-editing div.panels-ipe-portlet-wrapper:hover { - border: #FF000A solid 2px; + border: 1px dashed #CCC; } .panels-ipe-editing .panels-ipe-sort-container { @@ -43,10 +47,13 @@ div.panels-ipe-handlebar-wrapper { } .panels-ipe-editing .panels-ipe-sort-container .ui-sortable-placeholder { + border: 2px dashed #999; + background-color: #FFFF99; + margin: 1em 0; -moz-border-radius: 0; - -webkit-border-radius: 0; - border: 1px dotted red; - background-color: white; + -khtml-border-radius: 0; + -webkit-border-radius: 0; + border-radius: 0; } div.panels-ipe-handlebar-wrapper ul { @@ -57,51 +64,68 @@ div.panels-ipe-handlebar-wrapper ul { } div.panels-ipe-handlebar-wrapper li { - background: none repeat scroll 0 0 transparent; - list-style: none outside none; - margin: 0; + background: none; + list-style-type: none; + margin: 0 .5em 0 0; padding: 0; float: left; - font: 12px/170% Verdana,sans-serif !important; -} - -div.panels-ipe-handlebar-wrapper li { - border-top: 1px solid #CCC; - border-right: 1px solid #CCC; } -div.panels-ipe-handlebar-wrapper li.first { - border-left: 1px solid #CCC; -} - -div.panels-ipe-draghandle { - background: #898AAB url(../images/dragger.png) top right no-repeat; +div.panels-ipe-draghandle, +div.panels-ipe-nodraghandle { + background: #E9E9E9; + background-image: linear-gradient(bottom, #D5D5D5 0%, #FCFCFC 100%); + background-image: -o-linear-gradient(bottom, #D5D5D5 0%, #FCFCFC 100%); + background-image: -moz-linear-gradient(bottom, #D5D5D5 0%, #FCFCFC 100%); + background-image: -webkit-linear-gradient(bottom, #D5D5D5 0%, #FCFCFC 100%); + background-image: -ms-linear-gradient(bottom, #D5D5D5 0%, #FCFCFC 100%); + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #D5D5D5), + color-stop(1, #FCFCFC) + ); + + padding: 8px 7px; +} + +div.panels-ipe-draghandle span.panels-ipe-draghandle-icon { + display: block; + float: right; cursor: move; - height: 24px; + width: 34px; + height: 34px; + padding: 0 !important; /* override button defaults */ } -div.panels-ipe-nodraghandle { - background: #898AAB; - height: 24px; -} + span.panels-ipe-draghandle-icon-inner { + display: block; + width: 34px; + height: 34px; + background: url(../images/icon-draggable.png) no-repeat 3px 3px; + } div.panels-ipe-placeholder { - border: 1px solid black; + border: 2px dashed #999; padding: .5em; + position: relative; margin-top: .5em; - background-color: #f6f6f6; - color: black; - background-color: white; - font: 12px/170% Verdana,sans-serif !important; + background-color: #ECFAFF; + color: #999; + font: 15px/1.3em "Open Sans", "Lucida Grande", Tahoma, Verdana, sans-serif; text-transform: none; letter-spacing: 0; text-align: left; word-spacing: 0; } -div.panels-ipe-placeholder h3 { - font-weight: bold; -} + div.panels-ipe-placeholder h3 { + font-weight: normal; + font-size: 15px; + width: 75px; /* In order to prevent the region title from running into the button, set a width. Initital width only--this will be changed by jQuery */ + margin: 1.154em 0; + } /* Hide editor-state-on elements initially */ .panels-ipe-on { @@ -117,27 +141,128 @@ div.panels-ipe-placeholder h3 { display: block; } -div.panels-ipe-handlebar-wrapper li a, -div.panels-ipe-dragtitle span, -div.panels-ipe-newblock a { - background-color: #f6f6f6; - color: blue; - display: block; - padding: 0.1em 0.5em; - font: 12px/170% Verdana,sans-serif !important; - text-transform: none; - letter-spacing: 0; -} - -div.panels-ipe-newblock a { - display: inline; - border: 1px solid #CCC; - color: blue; +div.panels-ipe-newblock { + -webkit-box-shadow: 0px 0 5px 5px #ECFAFF; + -moz-box-shadow: 0px 0 5px 5px #ECFAFF; + box-shadow: 0px 0 5px 5px #ECFAFF; + position: absolute; + left: 50%; + top: 50%; + margin-top: -18px; /* some initial guesses to help center the add button + panels_ipe.js will evaluate the width and get this pixel-perfect */ + margin-left: -30px; + z-index: 99; } +div.panels-ipe-handlebar-wrapper li a, +div.panels-ipe-dragtitle span, +div.panels-ipe-newblock a, +span.panels-ipe-draghandle-icon { + display: inline-block; + border: 1px solid #ccc; + padding: 0 13px 1px; + font: bold 12px/32px 'Open Sans', 'Lucida Sans', 'Lucida Grande', verdana sans-serif; + text-decoration: none; + height: 33px; + color: #666; + cursor: pointer; + outline: none; + -moz-border-radius: 3px; + -khtml-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + + background: #FAFAFA; + background-image: linear-gradient(bottom, #E9EAEC 0%, #FAFAFA 100%); + background-image: -o-linear-gradient(bottom, #E9EAEC 0%, #FAFAFA 100%); + background-image: -moz-linear-gradient(bottom, #E9EAEC 0%, #FAFAFA 100%); + background-image: -webkit-linear-gradient(bottom, #E9EAEC 0%, #FAFAFA 100%); + background-image: -ms-linear-gradient(bottom, #E9EAEC 0%, #FAFAFA 100%); + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #E9EAEC), + color-stop(1, #FAFAFA) + ); + + -webkit-box-shadow: 0px 3px 3px 0px #d2d2d2; + -moz-box-shadow: 0px 3px 3px 0px #d2d2d2; + box-shadow: 0px 3px 3px 0px #d2d2d2; +} + + div.panels-ipe-handlebar-wrapper li a { + padding: 0 8px 1px; + } + + div.panels-ipe-handlebar-wrapper li a span { + display: block; + height: 32px; + width: 18px; + background-position: center center; + background-repeat: no-repeat; + text-align: left; + text-indent: -9999em; + overflow: hidden; + } + + div.panels-ipe-handlebar-wrapper li.edit a span { + background-image: url(../images/icon-settings.png); + } + + div.panels-ipe-handlebar-wrapper li.style a span { + background-image: url(../images/icon-style.png); + } + + div.panels-ipe-handlebar-wrapper li.delete a span { + background-image: url(../images/icon-delete.png); + } + + + div.panels-ipe-handlebar-wrapper li a:hover, + div.panels-ipe-dragtitle span:hover, + div.panels-ipe-newblock a:hover, + span.panels-ipe-draghandle-icon:hover { + background: #E6E6E6; + background-image: linear-gradient(bottom, #C5C5C5 0%, #FAFAFA 100%); + background-image: -o-linear-gradient(bottom, #C5C5C5 0%, #FAFAFA 100%); + background-image: -moz-linear-gradient(bottom, #C5C5C5 0%, #FAFAFA 100%); + background-image: -webkit-linear-gradient(bottom, #C5C5C5 0%, #FAFAFA 100%); + background-image: -ms-linear-gradient(bottom, #C5C5C5 0%, #FAFAFA 100%); + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #C5C5C5), + color-stop(1, #FAFAFA) + ); + } + + div.panels-ipe-handlebar-wrapper li a:active, + div.panels-ipe-dragtitle span:active, + div.panels-ipe-newblock a:active, + span.panels-ipe-draghandle-icon:active { + outline: none; + background-image: linear-gradient(bottom, #FFFFFF 0%, #E9EAEC 100%); + background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #E9EAEC 100%); + background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #E9EAEC 100%); + background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #E9EAEC 100%); + background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #E9EAEC 100%); + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #FFFFFF), + color-stop(1, #E9EAEC) + ); + + -webkit-box-shadow: 0px 0px 0px 0px #fff; + -moz-box-shadow: 0px 0px 0px 0px #fff; + box-shadow: 0px 0px 0px 0px #fff; + } + .panels-ipe-editing .panels-ipe-portlet-content { - margin-bottom: 10px; - border: transparent dotted 1px; + margin: 10px 3px; overflow: hidden; } @@ -162,38 +287,22 @@ div.panels-ipe-draghandle { visibility: hidden; } -/* counteract panels_dnd.css - temporary */ -div.panels-ipe-display-container .panel-pane .pane-title { - padding: 0; -} - /** ============================================================================ * Controller form markup */ div#panels-ipe-control-container { - z-index: 100; + z-index: 99999; position: fixed; - margin-left: auto; - margin-right: auto; bottom: 0; - left: 50%; display: none; background-color: #000; - padding: 0.5em 0.5em; -/* - min-width: 9.5em; - max-width: 14.5em; - min-height: 2em; - max-height: 2.5em; -*/ + padding: 0.5em 0; + width: 100%; overflow: hidden; - -moz-border-radius-topleft:5px; - -moz-border-radius-topright:5px; - -moz-box-shadow: #333 0px 1px 0px; - -webkit-border-top-left-radius:5px; - -webkit-border-top-right-radius:5px; - -webkit-box-shadow: #333 0px 1px 0px; + -moz-box-shadow: 0 3px 20px #000; + -webkit-box-shadow: 0 3px 20px #000; + box-shadow: 0 3px 20px #000; } .ipe-throbber { @@ -212,7 +321,7 @@ div#panels-ipe-control-container { left: 49%; position: fixed; top: 48.5%; - z-index: 1000; + z-index: 1001; } /* Hide the drupal system throbber image */ @@ -220,33 +329,225 @@ div#panels-ipe-control-container { display: none; } -.panels-ipe-pseudobutton { - cursor: pointer; - background-color: #333; - font:normal 11px/15px "Lucida Grande",Tahoma,Verdana,sans-serif; - color: #FFF; - -moz-border-radius:5px; - -moz-box-shadow: #333 0px 1px 0px; - -webkit-border-radius:5px; - -webkit-box-shadow: #333 0px 1px 0px; - padding: 0.3em 0.8em; - float: left; - text-decoration: none; -} - -.panels-ipe-pseudobutton:hover { - background-color: #666; +#panels-ipe-throbber-backdrop { + display: none; + background: #FFFFFF; + height: 100%; + left: 0; + margin: 0; + opacity: 0.55; + position: fixed; + top: 0; + width: 100%; + z-index: 1000; } +div.panels-ipe-pseudobutton-container, div.panels-ipe-control .form-submit { - float: left; - margin: 0.3em 0.5em; -} + cursor: pointer; + background: #666666; + background-image: linear-gradient(bottom, #383838 0%, #666666 100%); + background-image: -o-linear-gradient(bottom, #383838 0%, #666666 100%); + background-image: -moz-linear-gradient(bottom, #383838 0%, #666666 100%); + background-image: -webkit-linear-gradient(bottom, #383838 0%, #666666 100%); + background-image: -ms-linear-gradient(bottom, #383838 0%, #666666 100%); + + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #383838), + color-stop(1, #666666) + ); + border: 0; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + color: #CCC; + display: inline-block; + font: bold 12px/33px "Open Sans", "Lucida Grande", Tahoma, Verdana, sans-serif; + height: 33px; + margin: 0 10px; +} + + div.panels-ipe-control .form-submit { + padding: 0 0.8em 2px 34px; + } + + input#panels-ipe-save, input#panels-ipe-cancel, + input#panels-ipe-save:hover, input#panels-ipe-cancel:hover, + input#panels-ipe-save:active, input#panels-ipe-cancel:active { + background-repeat: no-repeat; + } + + div.panels-ipe-pseudobutton-container a { + height: 33px; + padding: 0 0.8em; + display: inline-block; + color: #CCC; + text-decoration: none; + } + + input#panels-ipe-save { + background-image: url(../images/icon-save.png); + background-image: url(../images/icon-save.png), linear-gradient(bottom, #383838 0%, #666666 100%); + background-image: url(../images/icon-save.png), -o-linear-gradient(bottom, #383838 0%, #666666 100%); + background-image: url(../images/icon-save.png), -moz-linear-gradient(bottom, #383838 0%, #666666 100%); + background-image: url(../images/icon-save.png), -webkit-linear-gradient(bottom, #383838 0%, #666666 100%); + background-image: url(../images/icon-save.png), -ms-linear-gradient(bottom, #383838 0%, #666666 100%); + + background-image: url(../images/icon-save.png), -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #383838), + color-stop(1, #666666) + ); + } + + input#panels-ipe-cancel { + background-image: url(../images/icon-close.png); + background-image: url(../images/icon-close.png), linear-gradient(bottom, #383838 0%, #666666 100%); + background-image: url(../images/icon-close.png), -o-linear-gradient(bottom, #383838 0%, #666666 100%); + background-image: url(../images/icon-close.png), -moz-linear-gradient(bottom, #383838 0%, #666666 100%); + background-image: url(../images/icon-close.png), -webkit-linear-gradient(bottom, #383838 0%, #666666 100%); + background-image: url(../images/icon-close.png), -ms-linear-gradient(bottom, #383838 0%, #666666 100%); + + background-image: url(../images/icon-close.png), -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #383838), + color-stop(1, #666666) + ); + } + + div.panels-ipe-pseudobutton-container:hover, + div.panels-ipe-control .form-submit:hover { + background: #999999; + background-image: linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + background-image: -o-linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + background-image: -moz-linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + background-image: -webkit-linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + background-image: -ms-linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #3D3D3D), + color-stop(1, #999999) + ); + + color: #FFF; + } + + div.panels-ipe-pseudobutton-container a:hover { + color: #FFF; + } + + input#panels-ipe-cancel:hover { + background-image: url(../images/icon-close.png), linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + background-image: url(../images/icon-close.png), -o-linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + background-image: url(../images/icon-close.png), -moz-linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + background-image: url(../images/icon-close.png), -webkit-linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + background-image: url(../images/icon-close.png), -ms-linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + + background-image: url(../images/icon-close.png), -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #3D3D3D), + color-stop(1, #999999) + ); + } + + input#panels-ipe-save:hover { + background-image: url(../images/icon-save.png), linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + background-image: url(../images/icon-save.png), -o-linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + background-image: url(../images/icon-save.png), -moz-linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + background-image: url(../images/icon-save.png), -webkit-linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + background-image: url(../images/icon-save.png), -ms-linear-gradient(bottom, #3D3D3D 0%, #999999 100%); + + background-image: url(../images/icon-save.png), -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #3D3D3D), + color-stop(1, #999999) + ); + } + + div.panels-ipe-pseudobutton-container:active, + div.panels-ipe-control .form-submit:active { + background: #333; + background-image: linear-gradient(bottom, #616161 0%, #333333 100%); + background-image: -o-linear-gradient(bottom, #616161 0%, #333333 100%); + background-image: -moz-linear-gradient(bottom, #616161 0%, #333333 100%); + background-image: -webkit-linear-gradient(bottom, #616161 0%, #333333 100%); + background-image: -ms-linear-gradient(bottom, #616161 0%, #333333 100%); + + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #616161), + color-stop(1, #333333) + ); + + color: #CCC; + } + + div.panels-ipe-pseudobutton-container a:active { + color: #CCC; + } + + input#panels-ipe-cancel:active { + background-image: url(../images/icon-close.png), linear-gradient(bottom, #616161 0%, #333333 100%); + background-image: url(../images/icon-close.png), -o-linear-gradient(bottom, #616161 0%, #333333 100%); + background-image: url(../images/icon-close.png), -moz-linear-gradient(bottom, #616161 0%, #333333 100%); + background-image: url(../images/icon-close.png), -webkit-linear-gradient(bottom, #616161 0%, #333333 100%); + background-image: url(../images/icon-close.png), -ms-linear-gradient(bottom, #616161 0%, #333333 100%); + + background-image: url(../images/icon-close.png), -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #616161), + color-stop(1, #333333) + ); + } + + input#panels-ipe-save:active { + background-image: url(../images/icon-save.png), linear-gradient(bottom, #616161 0%, #333333 100%); + background-image: url(../images/icon-save.png), -o-linear-gradient(bottom, #616161 0%, #333333 100%); + background-image: url(../images/icon-save.png), -moz-linear-gradient(bottom, #616161 0%, #333333 100%); + background-image: url(../images/icon-save.png), -webkit-linear-gradient(bottom, #616161 0%, #333333 100%); + background-image: url(../images/icon-save.png), -ms-linear-gradient(bottom, #616161 0%, #333333 100%); + + background-image: url(../images/icon-save.png), -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, #616161), + color-stop(1, #333333) + ); + } + + div.panels-ipe-pseudobutton-container a.panels-ipe-startedit { + padding-left: 34px; + background: url(../images/icon-configure.png) no-repeat 10px 9px; + } + + div.panels-ipe-pseudobutton-container a.panels-ipe-change-layout { + padding-left: 34px; + background: url(../images/icon-change-layout.png) no-repeat 10px 9px; + } div.panels-ipe-button-container { - margin: 0; + margin: 0.3em 0.5em; + text-align: center; } -div.panels-ipe-button-container a { - margin: 0.3em 0.5em; +form#panels-ipe-edit-control-form { + text-align: center; } --- panels_ipe/js/panels_ipe.js +++ panels_ipe/js/panels_ipe.js @@ -159,7 +159,7 @@ function DrupalPanelsIPE(cache_key, cfg) { } this.initSorting = function() { - var $region = $(this).parent('.panels-ipe-region'); + var $region = $(this).parents('.panels-ipe-region'); var region = $region.attr('id').replace('panels-ipe-regionid-', ''); ipe.sortables[region] = $(this).sortable(ipe.sortableOptions); ipe.regions.push(region); @@ -203,9 +203,23 @@ function DrupalPanelsIPE(cache_key, cfg) { }); // Perform visual effects in a particular sequence. - $('.panels-ipe-on').show('normal'); + // .show() + .hide() cannot have speeds associated with them, otherwise + // it clears out inline styles. + $('.panels-ipe-on').show(); ipe.showForm(); ipe.topParent.addClass('panels-ipe-editing'); + + //Reposition the "Add new pane" button + $('.panels-ipe-newblock').each(function() { + var link_width_half = parseInt($(this).children('a').outerWidth() / 2); + + $(this).css('margin-left', '-' + link_width_half + 'px'); + + $(this).css('margin-top', '-' + parseInt($(this).children('a').outerHeight() / 2) + 'px'); + + $(this).parents('.panels-ipe-placeholder').find('h3').css('width', parseInt(($(this).parents('.panels-ipe-placeholder').width() / 2) - link_width_half) + 'px'); + }); + }; this.hideContainer = function() { @@ -214,7 +228,6 @@ function DrupalPanelsIPE(cache_key, cfg) { this.showContainer = function() { ipe.container.slideDown('normal'); - ipe.container.css('margin-left', '-' + parseInt(ipe.container.outerWidth() / 2) + 'px'); }; this.showButtons = function() { @@ -237,7 +250,7 @@ function DrupalPanelsIPE(cache_key, cfg) { ipe.showButtons(); // Re-hide all the IPE meta-elements - $('div.panels-ipe-on').hide('fast'); + $('div.panels-ipe-on').hide(); if (ipe.topParent) { ipe.topParent.removeClass('panels-ipe-editing'); $('div.panels-ipe-sort-container', ipe.topParent).sortable("destroy"); @@ -299,7 +312,7 @@ function DrupalPanelsIPE(cache_key, cfg) { // Move our gadgets outside of the sort container so that sortables // cannot be placed after them. $('div.panels-ipe-portlet-static', this).each(function() { - $(this).appendTo($(this).parent().parent()); + $(this).prependTo($(this).parent().parent()); }); // Also remove the last panel separator. @@ -359,11 +372,22 @@ $(function() { if (this.ajaxing && this.element_settings.ipe_cache_key) { // Move the throbber so that it appears outside our container. if (this.progress.element) { + // Get the docHeight and (ugly hack) add 50 pixels to make sure we dont have a *visible* border below our div + var docHeight = $(document).height() + 50; + var docWidth = $(document).width(); + var winHeight = $(window).height(); + var winWidth = $(window).width(); + if( docHeight < winHeight ) docHeight = winHeight; + + // @TODO $('body').append(''); $(this.progress.element).addClass('ipe-throbber').appendTo($('body')); + + $('#panels-ipe-throbber-backdrop').css('height', docHeight + 'px').css('width', docWidth + 'px').show(); } Drupal.PanelsIPE.editors[this.element_settings.ipe_cache_key].hideContainer(); $('div.panels-ipe-off').fadeOut('normal'); } + // @TODO $('#panels-ipe-throbber-backdrop').remove(); return retval; }; @@ -396,4 +420,19 @@ $(function() { }; }); +/** + * Apply margin to bottom of the page. + * + * Note that directly applying marginBottom does not work in IE. To prevent + * flickering/jumping page content with client-side caching, this is a regular + * Drupal behavior. + * + * @see admin_menu.js via https://drupal.org/project/admin_menu + */ +Drupal.behaviors.panelsIpeMarginBottom = { + attach: function () { + $('body:not(.panels-ipe)').addClass('panels-ipe'); + } +}; + })(jQuery); --- panels_ipe/panels_ipe.module +++ panels_ipe/panels_ipe.module @@ -53,9 +53,6 @@ function panels_ipe_theme() { 'panels_ipe_toolbar' => array( 'variables' => array('buttons' => NULL), ), - 'panels_ipe_edit_button' => array( - 'variables' => array('class' => array(), 'text' => NULL), - ), ); } @@ -88,23 +85,40 @@ function theme_panels_ipe_pane_wrapper($vars) { if (ctools_content_editable($content_type, $subtype, $pane->configuration)) { $links['edit'] = array( - 'title' => isset($content_type['edit text']) ? $content_type['edit text'] : t('Settings'), + 'title' => isset($content_type['edit text']) ? '' . $content_type['edit text'] . '' : '' . t('Settings') . '', 'href' => $renderer->get_url('edit-pane', $pane->pid), + 'html' => TRUE, 'attributes' => array( 'class' => 'ctools-use-modal', + 'title' => isset($content_type['edit text']) ? $content_type['edit text'] : t('Settings'), // 'id' => "pane-edit-panel-pane-$pane->pid", ), ); } + // Add option to configure style in IPE + if (user_access('administer panels styles')) { + $links['style'] = array( + 'title' => '' . t('Style') . '', + 'href' => $renderer->get_url('style-type', 'pane', $pane->pid), + 'html' => TRUE, + 'attributes' => array( + 'class' => array('ctools-use-modal'), + 'title' => t('Style'), + ), + ); + } + // Deleting is managed entirely in the js; this is just an attachment point // for it $links['delete'] = array( - 'title' => t('Delete'), + 'title' => '' . t('Delete') . '', 'href' => '#', + 'html' => TRUE, 'attributes' => array( 'class' => 'pane-delete', 'id' => "pane-delete-panel-pane-$pane->pid", + 'title' => t('Delete'), ), ); @@ -114,14 +128,13 @@ function theme_panels_ipe_pane_wrapper($vars) { $links = theme('links', array('links' => $links, 'attributes' => $attributes)); if (!empty($pane->locks['type']) && $pane->locks['type'] == 'immovable') { - $links .= '
 
'; + $links = '
' . $links . '
'; } else { - $links .= '
 
'; + $links = '
' . $links . '
'; } - - $handlebar = '
' . $links . '
'; + $handlebar = '
' . $links . '
'; return $handlebar . $output; } @@ -136,7 +149,7 @@ function theme_panels_ipe_add_pane_button($vars) { $attributes = array('class' => 'ctools-use-modal'); $link = l(t('Add new pane'), $renderer->get_url('select-content', $region_id), array('attributes' => $attributes)); - return '
' . $link . '
'; + return '
' . $link . '
'; } /** @@ -198,12 +211,3 @@ function theme_panels_ipe_toolbar($vars) { return $output; } - -function theme_panels_ipe_edit_button($vars) { - $class = $vars['class']; - $output = "
"; - $output .= " " . $vars['text'] . ""; - $output .= "
"; - - return $output; -} --- panels_ipe/plugins/display_renderers/panels_renderer_ipe.class.php +++ panels_ipe/plugins/display_renderers/panels_renderer_ipe.class.php @@ -37,6 +37,8 @@ class panels_renderer_ipe extends panels_renderer_editor { 'progress' => 'throbber', 'ipe_cache_key' => $this->clean_key, ), + '#prefix' => '
', + '#suffix' => '
', ); panels_ipe_toolbar_add_button($this->clean_key, 'panels-ipe-startedit', $button); @@ -54,6 +56,9 @@ class panels_renderer_ipe extends panels_renderer_editor { 'progress' => 'throbber', 'ipe_cache_key' => $this->clean_key, ), + + '#prefix' => '
', + '#suffix' => '
', ); } @@ -158,10 +163,7 @@ class panels_renderer_ipe extends panels_renderer_editor { $empty_ph = theme('panels_ipe_placeholder_pane', array('region_id' => $region_id, 'region_title' => $this->plugins['layout']['regions'][$region_id])); // Wrap the placeholder in some guaranteed markup. - $panes['empty_placeholder'] = '
' . $empty_ph . "
"; - - // Generate this region's add new pane button. FIXME waaaaay too hardcoded - $panes['add_button'] = theme('panels_ipe_add_pane_button', array('region_id' => $region_id, 'display' => $this->display, 'renderer' => $this)); + $panes['empty_placeholder'] = '
' . $empty_ph . theme('panels_ipe_add_pane_button', array('region_id' => $region_id, 'display' => $this->display, 'renderer' => $this)) . "
"; $output = parent::render_region($region_id, $panes); $output = theme('panels_ipe_region_wrapper', array('output' => $output, 'region_id' => $region_id, 'display' => $this->display, 'renderer' => $this)); @@ -298,7 +300,7 @@ class panels_renderer_ipe extends panels_renderer_editor { $layouts = array_filter($layouts, '_panels_builder_filter'); // Define the current layout - $current_layout = (!empty($this->plugins['layout']['name'])) ? $this->plugins['layout']['name'] : NULL; + $current_layout = (!empty($this->plugins['layout']['theme'])) ? $this->plugins['layout']['theme'] : NULL; $output = panels_common_print_layout_links($layouts, $this->get_url('set_layout'), array('attributes' => array('class' => array('use-ajax'))), $current_layout);