Revert the look and functionality of Screen Options ans Help links/tabs, see #18197, see #18785

git-svn-id: http://svn.automattic.com/wordpress/trunk@19131 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
azaozz 2011-11-03 20:26:09 +00:00
parent f73e6b3228
commit 8454367edf
11 changed files with 138 additions and 89 deletions

File diff suppressed because one or more lines are too long

View File

@ -1612,14 +1612,10 @@ table.diff .diff-addedline ins {
} }
#screen-meta { #screen-meta {
background-color: #fff;
}
#contextual-help-back {
background-color: #EFF8FF; background-color: #EFF8FF;
border-color: #D1E5EE; border-color: #D1E5EE;
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.05 );
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.05 );
} }
.contextual-help-tabs a:hover { .contextual-help-tabs a:hover {
@ -1644,6 +1640,38 @@ table.diff .diff-addedline ins {
background-color: #fff; background-color: #fff;
} }
/* screen options and help tabs */
#screen-options-link-wrap,
#contextual-help-link-wrap {
background-color: #eff8ff; /* Fallback */
border-right: 1px solid #D1E5EE;
border-left: 1px solid #D1E5EE;
border-bottom: 1px solid #D1E5EE;
background-image: -ms-linear-gradient(bottom, #eff8ff, #fff); /* IE10 */
background-image: -moz-linear-gradient(bottom, #eff8ff, #fff); /* Firefox */
background-image: -o-linear-gradient(bottom, #eff8ff, #fff); /* Opera */
background-image: -webkit-gradient(linear, left bottom, left top, from(#eff8ff), to(#fff)); /* old Webkit */
background-image: -webkit-linear-gradient(bottom, #eff8ff, #fff); /* new Webkit */
background-image: linear-gradient(bottom, #eff8ff, #fff); /* proposed W3C Markup */
}
#screen-meta-links a.show-settings {
color: #606060;
}
#screen-meta-links a.show-settings:hover {
color: #000;
}
#screen-meta-links a.show-settings {
background: transparent url(../images/arrows.png) no-repeat right 3px;
}
#screen-meta-links .screen-meta-active a.show-settings {
background: transparent url(../images/arrows.png) no-repeat right -33px;
}
/* end screen options and help tabs */
#replyerror { #replyerror {
border-color: #ddd; border-color: #ddd;

File diff suppressed because one or more lines are too long

View File

@ -782,18 +782,13 @@ table.widefat span.spam a,
} }
#screen-meta { #screen-meta {
background-color: #fff;
}
#contextual-help-back {
background-color: #f1f1f1; background-color: #f1f1f1;
border-color: #ccc; border-color: #ccc;
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.05 );
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.05 );
} }
.contextual-help-tabs a:hover { .contextual-help-tabs a:hover {
background-color: #EAF2FA;
color: #333; color: #333;
} }
@ -813,6 +808,39 @@ table.widefat span.spam a,
background-color: #fff; background-color: #fff;
} }
/* screen options and help tabs */
#screen-options-link-wrap,
#contextual-help-link-wrap {
background-color: #e3e3e3; /* Fallback */
border-right: 1px solid transparent;
border-left: 1px solid transparent;
border-bottom: 1px solid transparent;
background-image: -ms-linear-gradient(bottom, #dfdfdf, #f1f1f1); /* IE10 */
background-image: -moz-linear-gradient(bottom, #dfdfdf, #f1f1f1); /* Firefox */
background-image: -o-linear-gradient(bottom, #dfdfdf, #f1f1f1); /* Opera */
background-image: -webkit-gradient(linear, left bottom, left top, from(#dfdfdf), to(#f1f1f1)); /* old Webkit */
background-image: -webkit-linear-gradient(bottom, #dfdfdf, #f1f1f1); /* new Webkit */
background-image: linear-gradient(bottom, #dfdfdf, #f1f1f1); /* proposed W3C Markup */
}
#screen-meta-links a.show-settings {
color: #777;
}
#screen-meta-links a.show-settings:hover {
color: #000;
}
#screen-meta-links a.show-settings {
background: transparent url(../images/arrows.png) no-repeat right 3px;
}
#screen-meta-links a.show-settings.screen-meta-active {
background: transparent url(../images/arrows.png) no-repeat right -33px;
}
/* end screen options and help tabs */
.login #backtoblog a { .login #backtoblog a {
color: #464646; color: #464646;
} }

File diff suppressed because one or more lines are too long

View File

@ -353,11 +353,6 @@ form.upgrade .hint {
6.2 - Help Menu 6.2 - Help Menu
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
#contextual-help-back {
right: 3px;
left: -1px;
}
#contextual-help-wrap { #contextual-help-wrap {
padding-left: 0; padding-left: 0;
padding-right: 4px; padding-right: 4px;

File diff suppressed because one or more lines are too long

View File

@ -1345,20 +1345,6 @@ form.upgrade .hint {
6.1 - Screen Options Tabs 6.1 - Screen Options Tabs
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
#screen-meta {
position: fixed;
top: -250px;
left: 146px;
right: 0;
z-index: 20;
margin: 28px 15px 0 20px;
padding: 0;
}
.folded #screen-meta {
left: 33px;
}
#screen-options-wrap, #screen-options-wrap,
#contextual-help-wrap { #contextual-help-wrap {
margin: 0; margin: 0;
@ -1373,17 +1359,50 @@ form.upgrade .hint {
visibility: hidden; visibility: hidden;
} }
.screen-meta-toggle { #screen-meta-links {
font-size: 12px; margin: 0 24px 0 0;
position: absolute;
right: 15px;
top: 20px;
display: none;
} }
.screen-meta-toggle a { /* screen options and help tabs revert */
#screen-meta {
margin: 0 15px 0 5px;
border-width: 0 1px 1px;
border-style: none solid solid;
}
#screen-options-link-wrap,
#contextual-help-link-wrap {
float: right;
height: 22px;
padding: 0;
margin: 0 0 0 6px;
font-family: sans-serif;
}
#screen-options-link-wrap,
#contextual-help-link-wrap,
#screen-meta {
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#screen-meta-links a.show-settings {
text-decoration: none;
z-index: 1;
padding: 0 16px 0 6px;
height: 22px;
line-height: 22px;
font-size: 12px;
display: block;
text-shadow: rgba(255,255,255,0.7) 0 1px 0;
}
#screen-meta-links a.show-settings:hover {
text-decoration: none; text-decoration: none;
} }
/* end screen options and help tabs */
.toggle-arrow { .toggle-arrow {
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1423,24 +1442,9 @@ form.upgrade .hint {
6.2 - Help Menu 6.2 - Help Menu
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
#contextual-help-back {
position: absolute;
top: 0;
left: 3px;
right: -1px;
bottom: -1px;
border-width: 0 1px 1px;
border-style: solid;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
#contextual-help-wrap { #contextual-help-wrap {
padding: 0 0 0 4px; padding: 0;
margin-left: -4px;
} }
.contextual-help-tabs { .contextual-help-tabs {
@ -1470,7 +1474,7 @@ form.upgrade .hint {
.contextual-help-tabs .active { .contextual-help-tabs .active {
padding: 0 2px; padding: 0 2px;
margin: 0 -1px 0 -3px; margin: 0 -1px 0 0;
border-width: 1px 0 1px 1px; border-width: 1px 0 1px 1px;
border-style: solid; border-style: solid;
} }

View File

@ -692,7 +692,6 @@ final class WP_Screen {
// Time to render! // Time to render!
?> ?>
<div id="screen-meta" class="metabox-prefs"> <div id="screen-meta" class="metabox-prefs">
<div id="contextual-help-back"></div>
<div id="contextual-help-wrap" class="hidden"> <div id="contextual-help-wrap" class="hidden">
<div class="contextual-help-tabs"> <div class="contextual-help-tabs">
<ul> <ul>
@ -743,13 +742,15 @@ final class WP_Screen {
$this->render_screen_options(); $this->render_screen_options();
?> ?>
</div> </div>
<div class="screen-meta-toggle"> <div id="screen-meta-links">
<?php <div id="contextual-help-link-wrap" class="hide-if-no-js screen-meta-toggle">
<a href="#contextual-help-wrap" id="contextual-help-link" class="show-settings"><?php _e('Help') ?></a>
if ( $this->show_screen_options() ) </div>
echo '<a href="#screen-options-wrap">' . __('Screen Options') . '</a> |'; <?php if ( $this->show_screen_options() ) { ?>
?> <div id="screen-options-link-wrap" class="hide-if-no-js screen-meta-toggle">
<a href="#contextual-help-wrap"><?php _e('Help'); ?></a> <a href="#screen-options-wrap" id="show-settings-link" class="show-settings"><?php _e('Screen Options') ?></a>
</div>
<?php } ?>
</div> </div>
<?php <?php
} }

View File

@ -102,8 +102,6 @@ screenMeta = {
this.page = $('#wpcontent'); this.page = $('#wpcontent');
this.toggles.click( this.toggleEvent ); this.toggles.click( this.toggleEvent );
$('.screen-meta-toggle').css('top', ($('h2').offset().top - 12) + 'px' ).fadeIn();
}, },
toggleEvent: function( e ) { toggleEvent: function( e ) {
@ -118,37 +116,32 @@ screenMeta = {
else else
screenMeta.open( panel, $(this) ); screenMeta.open( panel, $(this) );
}, },
open: function( panel, link ) { open: function( panel, link ) {
// Close open panel
screenMeta.toggles.filter('.selected').click();
// Open selected panel $('.screen-meta-toggle').not( link.parent() ).css('visibility', 'hidden');
link.addClass('selected');
screenMeta.padding = parseInt( screenMeta.page.css('paddingTop'), 10 ); panel.slideDown( 'fast', function() {
screenMeta.top = parseInt( screenMeta.element.css('top'), 10 ); link.addClass('screen-meta-active');
});
panel.show();
screenMeta.refresh(); screenMeta.refresh();
}, },
refresh: function( panel, link ) { refresh: function( panel, link ) {
var columns = $('#contextual-help-wrap').children(), var columns = $('#contextual-help-wrap').children(), height;
height;
columns.height('auto'); columns.height('auto');
height = Math.max.apply( null, $.map( columns, function( el ) { return $(el).height(); }) ); height = Math.max.apply( null, $.map( columns, function( el ) { return $(el).height(); }) );
columns.height( height ); columns.height( height );
screenMeta.element.css({ top: 0 });
screenMeta.page.css({ paddingTop: screenMeta.padding + screenMeta.element.outerHeight() });
}, },
close: function( panel, link ) { close: function( panel, link ) {
screenMeta.element.css({ top: screenMeta.top }); panel.slideUp( 'fast', function() {
screenMeta.page.css({ paddingTop: screenMeta.padding }); link.removeClass('screen-meta-active');
panel.hide(); $('.screen-meta-toggle').css('visibility', '');
link.removeClass('selected'); });
} }
}; };

File diff suppressed because one or more lines are too long