Upstream
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add dashboard help tabs, revise help tab layout and code. see #18690. 

git-svn-id: http://svn.automattic.com/wordpress/trunk@18797 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2011-09-28 00:57:56 +00:00
parent de8cc0eae1
commit 8c1bc6831a
9 changed files with 116 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wp-admin/css/colors-fresh.css
View File

File diff suppressed because one or more lines are too long

9
wp-admin/css/colors-fresh.dev.css
View File

@ -789,10 +789,6 @@ table.widefat span.spam a,
border-color: #ccc;
}
.contextual-help-tabs {
border-color: #dfdfdf;
}
.contextual-help-tabs a {
border-top-color: #f9f9f9;
border-bottom-color: #dfdfdf;
@ -809,8 +805,11 @@ table.widefat span.spam a,
color: #000;
}
.contextual-help-links {
.contextual-help-sidebar {
background-color: #f9f9f9;
}
.contextual-help-tabs-wrap {
border-color: #dfdfdf;
}

2
wp-admin/css/wp-admin.css
View File

File diff suppressed because one or more lines are too long

35
wp-admin/css/wp-admin.dev.css
View File

@ -1479,7 +1479,7 @@ form.upgrade .hint {
#contextual-help-wrap {
margin: 0;
padding: 8px 20px 12px;
max-height: 200px;
max-height: 300px;
overflow: auto;
border-style: solid;
border-width: 0 1px 1px;
@ -1533,27 +1533,18 @@ form.upgrade .hint {
#contextual-help-wrap {
position: relative;
padding: 0;
overflow: hidden;
overflow: auto;
}
#contextual-help-wrap > .metabox-prefs {
padding: 8px 20px 12px;
max-height: 200px;
overflow: auto;
}
.contextual-help-tabs {
position: absolute;
top: 0;
left: 0;
bottom: 0;
float: left;
width: 150px;
max-height: 220px;
margin: 0;
overflow: auto;
border-width: 0 1px 0 0;
border-style: solid;
}
.contextual-help-tabs li {
@ -1574,17 +1565,17 @@ form.upgrade .hint {
}
.contextual-help-tabs-wrap {
position: relative;
display: block;
margin: 0 152px 0 150px;
height: 188px;
padding: 0 20px;
overflow: auto;
border-width: 0 1px;
border-style: solid;
}
.help-tab-content {
display: none;
margin: 0 22px 12px 0;
padding-right: 20px;
line-height: 1.6em;
}
.help-tab-content.active {
@ -1596,17 +1587,11 @@ form.upgrade .hint {
margin-left: 18px;
}
.contextual-help-links {
position: absolute;
.contextual-help-sidebar {
width: 150px;
top: 0;
right: 0;
bottom: 0;
float: right;
padding: 0 8px 0 12px;
overflow: auto;
border-width: 0 0 0 1px;
border-style: solid;
}

79
wp-admin/includes/screen.php
View File

@ -342,58 +342,75 @@ function screen_meta($screen) {
<?php
$contextual_help = '';
if ( isset($_wp_contextual_help[$screen->id]) && is_array($_wp_contextual_help[$screen->id]) ) {
$contextual_help .= '<div class="metabox-prefs">' . "\n";
/*
* Loop through ['contextual-help-tabs']
* - It's a nested array where $key=>$value >> $title=>$content
* Has no output so can only loop the array once
*/
$contextual_help_tabs = ''; // store looped content for later
$contextual_help_links = ''; // store looped content for later
$contextual_help_panels = ''; // store looped content for later
$tab_active = true;
foreach ( $_wp_contextual_help[$screen->id]['tabs'] as $tab ) {
$tab_slug = sanitize_html_class( $tab[ 0 ] );
$contextual_help_tabs .= '<li class="tab-' . $tab_slug . ( ($tab_active) ? ' active' : '' ) . '">';
$contextual_help_tabs .= '<a href="#' . $tab_slug . '">' . $tab[1] . '</a>';
$contextual_help_tabs .= '</li>' ."\n";
$contextual_help_panels .= '<div id="' . $tab_slug . '" class="help-tab-content' . ( ($tab_active) ? ' active' : '' ) . '">';
$contextual_help_panels .= $tab[2];
$contextual_help_panels .= "</div>\n";
list( $id, $title, $content ) = $tab;
// Generate IDs
$id = sanitize_html_class( $id );
$link_id = "tab-link-$id";
$panel_id = "tab-panel-$id";
$link_classes = '';
$panel_classes = 'help-tab-content';
if ( $tab_active ) {
$link_classes .= ' active';
$panel_classes .= ' active';
}
$link_classes = ( $tab_active ) ? 'active' : '';
$contextual_help_links .= '<li id="' . esc_attr( $link_id ) . '" class="' . esc_attr( $link_classes ) . '">';
$contextual_help_links .= '<a href="' . esc_url( "#$panel_id" ) . '">' . esc_html( $title ) . '</a>';
$contextual_help_links .= '</li>';
$contextual_help_panels .= '<div id="' . esc_attr( $panel_id ) . '" class="' . esc_attr( $panel_classes ) . '">';
$contextual_help_panels .= '<h3>' . esc_html( $title ) . '</h3>';
$contextual_help_panels .= $content;
$contextual_help_panels .= "</div>";
$tab_active = false;
}
// Start output from loop: Tabbed help content
$contextual_help .= '<ul class="contextual-help-tabs">' . "\n";
$contextual_help .= $contextual_help_tabs;
$contextual_help .= $contextual_help_links;
$contextual_help .= '</ul>' ."\n";
// Sidebar to right of tabs
$contextual_help .= '<div class="contextual-help-sidebar">' . "\n";
$contextual_help .= $_wp_contextual_help[$screen->id]['sidebar'];
$contextual_help .= "</div>\n";
// Panel content
$contextual_help .= '<div class="contextual-help-tabs-wrap">' . "\n";
$contextual_help .= $contextual_help_panels;
$contextual_help .= "</div>\n";
// END: Tabbed help content
// Sidebar to right of tabs
$contextual_help .= '<div class="contextual-help-links">' . "\n";
$contextual_help .= $_wp_contextual_help[$screen->id]['sidebar'];
$contextual_help .= "</div>\n";
$contextual_help .= "</div>\n"; // end metabox
} elseif ( isset($_wp_contextual_help[$screen->id]) ) {
$contextual_help .= '<div class="metabox-prefs">' . $_wp_contextual_help[$screen->id] . "</div>\n";
} elseif ( isset( $_wp_contextual_help[ $screen->id ] ) ) {
$contextual_help .= $_wp_contextual_help[ $screen->id ];
} else {
$contextual_help .= '<div class="metabox-prefs">';
$default_help = __('<a href="http://codex.wordpress.org/" target="_blank">Documentation</a>');
$default_help = __( '<a href="http://codex.wordpress.org/" target="_blank">Documentation</a>' );
$default_help .= '<br />';
$default_help .= __('<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>');
$contextual_help .= apply_filters('default_contextual_help', $default_help);
$contextual_help .= '</div>' . "\n";
$default_help .= __( '<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>' );
$contextual_help .= apply_filters( 'default_contextual_help', $default_help );
}
$contextual_help = "<div class='metabox-prefs'>$contextual_help</div>";
echo apply_filters('contextual_help', $contextual_help, $screen->id, $screen);
?>
</div>
@ -406,7 +423,7 @@ function screen_meta($screen) {
*
* The array $help takes the following format:
* array( 'contextual-help-tabs' => array( $tab1_title => $tab1_value [, $tab2_title => $tab2_value, ...] ),
* 'contextual-help-links' => $help_links_as_string )
* 'contextual-help-sidebar' => $help_links_as_string )
*
* For backwards compatability, a string is also accepted.
*
@ -691,7 +708,7 @@ final class WP_Screen {
/**
* Constructor
*
*
* @since 3.3.0
*
* @param string $id A screen id. If empty, the $hook_suffix global is used to derive the ID.
@ -776,7 +793,7 @@ final class WP_Screen {
/**
* Adds an option for the screen.
* Call this in template files after admin.php is loaded and before admin-header.php is loaded to add screen options.
*
*
* @since 3.3.0
*
* @param string $option Option ID
@ -789,7 +806,7 @@ final class WP_Screen {
/**
* Add a help tab to the contextual help for the screen.
* Call this in template files after admin.php is loaded and before admin-header.php is loaded to add contextual help tabs.
*
*
* @since 3.3.0
*
* @param string $id Tab ID
@ -805,7 +822,7 @@ final class WP_Screen {
/**
* Add a sidebar to the contextual help for the screen.
* Call this in template files after admin.php is loaded and before admin-header.php is loaded to add a sidebar to the contextual help.
*
*
* @since 3.3.0
*
* @param string $content Sidebar content in plain text or HTML.

46
wp-admin/index.php
View File

@ -27,26 +27,44 @@ if ( is_user_admin() )
else
add_screen_option('layout_columns', array('max' => 4, 'default' => 'auto') );
add_contextual_help($current_screen,
'<p>' . __( 'Welcome to your WordPress Dashboard! You will find helpful tips in the Help tab of each screen to assist you as you get to know the application.' ) . '</p>' .
'<p>' . __( 'The Admin Bar at the top provides quick access to common tasks when you are viewing your site. If you miss the Favorite Actions dropdown, removed as of 3.2, you can find many of the same actions in the Admin Bar, such as Add New > Post.' ) . '</p>' .
'<p>' . __( 'The left-hand navigation menu provides links to the administration screens in your WordPress application. You can expand or collapse navigation sections by clicking on the arrow that appears on the right side of each navigation item when you hover over it. You can also minimize the navigation menu to a narrow icon strip by clicking on the Collapse Menu arrow at the bottom of the nav menu, below Settings; when minimized, the submenu items will be displayed on hover.' ) . '</p>' .
'<p>' . __( 'You can arrange your dashboard by choosing which boxes, or modules, to display in the work area, how many columns to display them in, and where each box should be placed. You can hide/show boxes and select the number of columns in the Screen Options tab. To rearrange the boxes, drag and drop by clicking on the title bar of the selected box and releasing when you see a gray dotted-line rectangle appear in the location you want to place the box. You can also expand or collapse each box; click the title area or downward arrow of the box. In addition, some boxes are configurable, and will show a &#8220;Configure&#8221; link in the title bar if you hover over it.' ) . '</p>' .
'<p>' . __( 'The boxes on your Dashboard screen are:' ) . '</p>' .
'<p>' . __( '<strong>Right Now</strong> - Displays a summary of the content on your site and identifies which theme and version of WordPress you are using.' ) . '</p>' .
'<p>' . __( '<strong>Recent Comments</strong> - Shows the most recent comments on your posts (configurable, up to 30) and allows you to moderate them.' ) . '</p>' .
'<p>' . __( '<strong>Incoming Links</strong> - Shows links to your site found by Google Blog Search.' ) . '</p>' .
'<p>' . __( '<strong>QuickPress</strong> - Allows you to create a new post and either publish it or save it as a draft.' ) . '</p>' .
'<p>' . __( '<strong>Recent Drafts</strong> - Displays links to the 5 most recent draft posts you&#8217;ve started.' ) . '</p>' .
'<p>' . __( '<strong>WordPress Blog</strong> - Come here for the latest scoop.' ) . '</p>' .
'<p>' . __( '<strong>Other WordPress News</strong> - Shows the feed from <a href="http://planet.wordpress.org" target="_blank">WordPress Planet</a>. You can configure it to show a different feed of your choosing.' ) . '</p>' .
'<p>' . __( '<strong>Plugins</strong> - Features the most popular, newest, and recently updated plugins from the WordPress.org Plugin Directory.' ) . '</p>' .
// Help tabs
$help_overview = '<p>' . __('Welcome to your WordPress Dashboard! This is the screen you will see when you log in to your site, and gives you access to all the site management features of WordPress. You can get help for any screen by clicking the Help tab in the top bar.') . '</p>';
$current_screen->add_help_tab( 'overview', __('Overview'), $help_overview );
$help_navigation = '<p>' . __('The left-hand navigation menu provides links to all of the WordPress administration screens, with submenu items displayed on hover. You can minimize this menu to a narrow icon strip by clicking on the Collapse Menu arrow at the bottom.') . '</p>';
$help_navigation .= '<p>' . __('Links in the &#8220;admin bar&#8221; at the top of the screen connect your dashboard and the front end of your site, and provide access to your profile and helpful WordPress information.') . '</p>';
$current_screen->add_help_tab( 'navigation', __('Navigation'), $help_navigation );
$help_layout = '<p>' . __('You can use the following controls to arrange your Dashboard screen to suit your workflow. This is true on most other administration screens as well.') . '</p>';
$help_layout .= '<p>' . __('<strong>Screen Options</strong> - Use the Screen Options tab to choose which Dashboard boxes to show, and how many columns to display.') . '</p>';
$help_layout .= '<p>' . __('<strong>Drag and Drop</strong> - To rearrange the boxes, drag and drop by clicking on the title bar of the selected box and releasing when you see a gray dotted-line rectangle appear in the location you want to place the box.') . '</p>';
$help_layout .= '<p>' . __('<strong>Box Controls</strong> - Click the title bar of the box to expand or collapse it. In addition, some box have configurable content, and will show a &#8220;Configure&#8221; link in the title bar if you hover over it.') . '</p>';
$current_screen->add_help_tab( 'layout', __('Layout'), $help_layout );
$help_content = '<p>' . __('The boxes on your Dashboard screen are:') . '</p>';
$help_content .= '<p>' . __('<strong>Right Now</strong> - Displays a summary of the content on your site and identifies which theme and version of WordPress you are using.') . '</p>';
$help_content .= '<p>' . __('<strong>Recent Comments</strong> - Shows the most recent comments on your posts (configurable, up to 30) and allows you to moderate them.') . '</p>';
$help_content .= '<p>' . __('<strong>Incoming Links</strong> - Shows links to your site found by Google Blog Search.') . '</p>';
$help_content .= '<p>' . __('<strong>QuickPress</strong> - Allows you to create a new post and either publish it or save it as a draft.') . '</p>';
$help_content .= '<p>' . __('<strong>Recent Drafts</strong> - Displays links to the 5 most recent draft posts you&#8217;ve started.') . '</p>';
$help_content .= '<p>' . __('<strong>WordPress Blog</strong> - Latest news from the official WordPress project.') . '</p>';
$help_content .= '<p>' . __('<strong>Other WordPress News</strong> - Shows the <a href="http://planet.wordpress.org" target="_blank">WordPress Planet</a> feed. You can configure it to show a different feed of your choosing.') . '</p>';
$help_content .= '<p>' . __('<strong>Plugins</strong> - Features the most popular, newest, and recently updated plugins from the WordPress.org Plugin Directory.') . '</p>';
$current_screen->add_help_tab( 'content', __('Content'), $help_content );
$current_screen->add_help_sidebar(
'<p><strong>' . __( 'For more information:' ) . '</strong></p>' .
'<p>' . __( '<a href="http://codex.wordpress.org/Dashboard_Screen" target="_blank">Documentation on Dashboard</a>' ) . '</p>' .
'<p>' . __( '<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>' ) . '</p>'
);
include (ABSPATH . 'wp-admin/admin-header.php');
$today = current_time('mysql', 1);

17
wp-admin/js/common.dev.js
View File

@ -226,6 +226,9 @@ screenMeta = {
panel.show();
screenMeta.refresh();
},
refresh: function( panel, link ) {
screenMeta.element.css({ top: 0 });
screenMeta.page.css({ paddingTop: screenMeta.padding + screenMeta.element.outerHeight() });
},
@ -242,7 +245,9 @@ screenMeta = {
*/
$('.contextual-help-tabs').delegate('a', 'click focus', function(e) {
var link = $(this),
panel;
panel,
columns,
height;
e.preventDefault();
@ -259,6 +264,16 @@ $('.contextual-help-tabs').delegate('a', 'click focus', function(e) {
// Panels
$('.help-tab-content').not( panel ).removeClass('active').hide();
panel.addClass('active').show();
// Adjust the height of the help columns
columns = $('#contextual-help-wrap').children('.metabox-prefs').children();
columns.height('auto');
height = Math.max.apply( null, $.map( columns, function( el ) { return $(el).height(); }) );
columns.height( height );
// Refresh the padding of the screen meta box.
screenMeta.refresh();
});
$(document).ready( function() {

2
wp-admin/js/common.js
View File

File diff suppressed because one or more lines are too long

6
wp-includes/script-loader.php
View File

@ -61,7 +61,7 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'utils', "/wp-admin/js/utils$suffix.js", false, '20101110' );
$scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), '20110926', 1 );
$scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), '20110927', 1 );
$scripts->add_script_data( 'common', 'commonL10n', array(
'warnDelete' => __("You are about to permanently delete the selected items.\n 'Cancel' to stop, 'OK' to delete.")
) );
@ -429,13 +429,13 @@ function wp_default_styles( &$styles ) {
// Any rtl stylesheets that don't have a .dev version for ltr
$no_suffix = array( 'farbtastic' );
$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20110926b' );
$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20110927' );
$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20110919' );
$styles->add_data( 'ie', 'conditional', 'lte IE 7' );
// all colors stylesheets need to have the same query strings (cache manifest compat)
$colors_version = '20110926';
$colors_version = '20110927';
// Register "meta" stylesheet for admin colors. All colors-* style sheets should have the same version string.
$styles->add( 'colors', true, array('wp-admin'), $colors_version );