tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-09-29 12:49:06 +02:00
Code Issues Projects Releases Wiki Activity

ENHANCEMENT: Add disabled state to preview buttons and add watermark for the current state being viewed (TRAC:7214)

Browse Source
This commit is contained in:
Ryan O'Hara 2012-05-04 11:29:50 +12:00
parent de4a865fb8
commit 92484581e3
4 changed files with 47 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
admin/javascript/LeftAndMain.Preview.js
View File

@ -164,7 +164,7 @@
this.find('iframe').hide();
this.find('.cms-preview-toggle a').html('«');
this.find('.cms-preview-controls').hide();
containerEl.find('.cms-menu').expandPanel();
containerEl.find('.cms-menu').expandPanel();
// Already triggered through panel toggle above
// containerEl.redraw();
@ -237,24 +237,29 @@
}
}
});
$('.cms-preview .cms-preview-states').entwine({
onmatch: function() {
this.find('a').addClass('ss-ui-button');
this.find('.active a').addClass('ui-state-highlight');
this.find('.active a').addClass('ui-state-disabled');
this.find('.cms-preview-watermark').show();
this.find('.active .cms-preview-watermark').hide();
}
});
$('.cms-preview .cms-preview-states a').entwine({
onclick: function(e) {
e.preventDefault();
this.parents('.cms-preview').loadUrl(this.attr('href'));
this.addClass('ui-state-highlight');
this.parents('.cms-preview-states').find('a').not(this).removeClass('ui-state-highlight');
this.addClass('ui-state-disabled');
this.parents('.cms-preview-states').find('a').not(this).removeClass('ui-state-disabled');
//This hides all watermarks
this.parents('.cms-preview-states').find('.cms-preview-watermark').hide();
//Show the watermark for the current state
this.siblings('.cms-preview-watermark').show();
}
});
$('.cms-preview-toggle-link').entwine({
onclick: function(e) {
e.preventDefault();

13
admin/scss/_forms.scss
View File

@ -366,6 +366,19 @@ form.small .field, .field.small {
border: 1px solid $color-button-highlight-border;
}
&.ui-state-disabled {
color: lighten($color-text-dark, 20%);
border-color: darken($color-button-disabled, 20%);
border-top-color: darken($color-button-disabled, 60%);
cursor: default;
@include background(
linear-gradient(color-stops(
darken($color-button-disabled, 5%),
lighten($color-button-disabled, 10%)
))
);
}
&.ss-ui-action-minor {
background: none;
border: 0;

18
admin/scss/_style.scss
View File

@ -847,6 +847,24 @@ body.cms {
width: 100%;
height: 100%;
}
.cms-preview-watermark {
z-index: 99;
position: fixed;
right: 60px;
top: 30px;
opacity: 0.3;
padding: .4em 1em;
cursor: default;
font-weight: bold;
text-decoration: none;
line-height: $grid-y * 2;
color: lighten($color-text-dark, 10%);
border: 1px solid #AAAAAA;
border-radius:12px;
background-color: white;
text-shadow: lighten($color-tab, 5%) 0 1px 0;
}
.cms-preview-controls {
z-index: 99;

4
admin/templates/Includes/LeftAndMain_SilverStripeNavigator.ss
View File

@ -4,7 +4,9 @@
</a>
<ul class="cms-preview-states">
<% control Items %>
<li class="$Class<% if isActive %> active<% end_if %>">$HTML</li>
<li class="<% if isActive %> active<% end_if %>">$HTML
<% if WatermarkHTML %><span class="cms-preview-watermark">$WatermarkHTML</span><% end_if %>
</li>
<% end_control %>
</ul>
<a href="$Record.Link" target="_blank" class="cms-preview-popup-link">