tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

Loading indicator for "more options" buttons

Browse Source
This commit is contained in:
Ingo Schommer 2012-12-13 22:03:43 +01:00
parent 7e4629073a
commit aed58a55c4
4 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
admin/css/screen.css
View File

@ -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; }

33
admin/javascript/LeftAndMain.ActionTabSet.js
View File

@ -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){

2
admin/scss/_actionTabs.scss
View File

@ -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%);

8
admin/scss/_forms.scss
View File

@ -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);
}
}
}
}