diff --git a/admin/css/screen.css b/admin/css/screen.css index 1f9c8bf36..e075d1518 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -200,6 +200,8 @@ form.small .field input.text, form.small .field textarea, form.small .field sele .cms .button-no-style button.ss-ui-action-destructive, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button.ss-ui-action-destructive { color: #c22730; } .cms .button-no-style button span, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button span { padding-left: 0; padding-right: 0; } .cms .button-no-style button:hover, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button:hover, .cms .button-no-style button:focus, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button:focus, .cms .button-no-style button:active, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button:active { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; background: none; border: none; } +.cms .button-no-style button.loading, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button.loading { background: transparent url(../../images/network-save.gif) no-repeat 8px center; } +.cms .button-no-style button.loading .ui-button-text, .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel button.loading .ui-button-text { padding-left: 20px; } .cms .Actions > *, .cms .cms-actions-row > * { display: block; float: left; margin-right: 8px; } .cms .Actions > *:last-child, .cms .cms-actions-row > *:last-child { margin-right: 0; } .cms .Actions { min-height: 30px; overflow: auto; padding: 8px 12px; } @@ -948,20 +950,20 @@ li.class-ErrorPage > a a .jstree-pageicon { background-position: 0 -112px; } * styling should not apply * **********************************************/ -.cms .ss-ui-action-tabset { float: left; position: relative; /* +.cms .ss-ui-action-tabset { float: left; position: relative; /* Styles for the tab-nav of the site tree implementation of ss-ui-action-tabset */ /* position a checkbox & icon within a tab */ /* Styles for the cms-actions in tree view, to use more limited space. Title hidden in tree view, until hover/active state added. Active is applied to the first tab within the template, so there should always be one title -visible. Added and removed with js in TabSet.js */ /**************************************************************** +visible. Added and removed with js in TabSet.js */ /**************************************************************** Styles for the actions-menu implementation of ss-ui-action-tabset ****************************************************************/ } .cms .ss-ui-action-tabset.multi { /* Style the tab panels */ } -.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; overflow: hidden; *zoom: 1; border: 1px solid #b3b3b3; float: left; height: 28px; overflow: visible; padding: 0; } +.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; overflow: hidden; *zoom: 1; border: 1px solid #b3b3b3; float: left; overflow: visible; padding: 0; } .cms .ss-ui-action-tabset.multi ul.ui-tabs-nav:active { outline: none; box-shadow: none; -webkit-box-shadow: none; } -.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZjhmOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -moz-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -o-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: linear-gradient(top, #f8f8f8, #d9d9d9); -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; background: #eaeaea; border: none; border-right: 1px solid #eee; border-left: 1px solid #b3b3b3; margin: 0; overflow: visible; width: 110px; } +.cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZjhmOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f8f8f8), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -moz-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: -o-linear-gradient(top, #f8f8f8, #d9d9d9); background-image: linear-gradient(top, #f8f8f8, #d9d9d9); -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; background: #eaeaea; border: none; border-right: 1px solid #eee; border-left: 1px solid #b3b3b3; margin: 0; overflow: visible; min-width: 110px; } .cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li:active { outline: none; box-shadow: none; -webkit-box-shadow: none; } .cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li.ui-state-active { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; background: #f8f8f8; border-bottom: none !important; } .cms .ss-ui-action-tabset.multi ul.ui-tabs-nav li.ui-state-active a { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; } diff --git a/admin/javascript/LeftAndMain.ActionTabSet.js b/admin/javascript/LeftAndMain.ActionTabSet.js index b1e36a097..0806be353 100644 --- a/admin/javascript/LeftAndMain.ActionTabSet.js +++ b/admin/javascript/LeftAndMain.ActionTabSet.js @@ -24,6 +24,19 @@ this.tabs({'collapsible': true, 'active': false}); }, + onremove: function() { + // Remove all bound events. + // This guards against an edge case where the click handlers are not unbound + // because the panel is still open when the ajax edit form reloads. + var frame = $('.cms').find('iframe'); + frame.each(function(index, iframe){ + $(iframe).contents().off('click.ss-ui-action-tabset'); + }); + $(document).off('click.ss-ui-action-tabset'); + + this._super(); + }, + /** * Deal with available vertical space */ @@ -53,27 +66,29 @@ var panel, frame; panel = $(event.target).closest('.ss-ui-action-tabset .ui-tabs-panel'); - // If anything except the ui-nav button is clicked, - // close panel and remove handler - if (!$(event.target).closest(that).length || $(panel).length) { + // If anything except the ui-nav button or panel is clicked, + // close panel and remove handler. We can't close if click was + // within panel, as it might've caused a button action, + // and we need to show its loading indicator. + if (!$(event.target).closest(that).length && !panel.length) { that.tabs('option', 'active', false); // close tabs // remove click event from objects it is bound to (iframe's and document) frame = $('.cms').find('iframe'); frame.each(function(index, iframe){ - $(iframe).contents().off('click', closeHandler); + $(iframe).contents().off('click.ss-ui-action-tabset', closeHandler); }); - $(document).off('click', closeHandler); + $(document).off('click.ss-ui-action-tabset', closeHandler); } }; // Bind click event to document, and use closeHandler to handle the event - $(document).on('click', closeHandler); + $(document).on('click.ss-ui-action-tabset', closeHandler); // Make sure iframe click also closes tab // iframe needs a special case, else the click event will not register here if(frame.length > 0){ frame.each(function(index, iframe) { - $(iframe).contents().on('click', closeHandler); + $(iframe).contents().on('click.ss-ui-action-tabset', closeHandler); }); } }, @@ -131,7 +146,7 @@ */ 'ontabsbeforeactivate': function(event, ui) { this._super(event, ui); - //Set the position of the opening tab (if it exists) + //Set the position of the opening tab (if it exists) if($(ui.newPanel).length > 0){ $(ui.newPanel).css('left', ui.newTab.position().left+"px"); } @@ -211,7 +226,7 @@ this._super(event, ui); // Reset position of tabs, else anyone going between the large // and the small sitetree will see broken tabs - // Apply styles with .css, to avoid overriding currently applied styles + // Apply styles with .css, to avoid overriding currently applied styles $(ui.newPanel).css({'left': 'auto', 'right': 'auto'}); if($(ui.newPanel).length > 0){ diff --git a/admin/scss/_actionTabs.scss b/admin/scss/_actionTabs.scss index bfd6da56c..d88f6e1b5 100644 --- a/admin/scss/_actionTabs.scss +++ b/admin/scss/_actionTabs.scss @@ -302,7 +302,7 @@ $border: 1px solid darken(#D9D9D9, 15%); } } button.ss-ui-button{ - width:100%; + width: 100%; &:hover, &:focus, &:active{ @include box-shadow(none); background-color: darken($tab-panel-texture-color,4%); diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index 2a114703f..b9ff0b522 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -313,6 +313,14 @@ form.small .field, .field.small { background:none; border:none; } + &.loading { + background: transparent url(../../images/network-save.gif) no-repeat $grid-x center; + .ui-button-text { + padding-left: 16px /* icon */ + ($grid-x/2); + } + + + } } }