Skip to:
Content

BuddyPress.org

Changeset 13137


Ignore:
Timestamp:
11/06/2021 08:40:08 AM (3 years ago)
Author:
imath
Message:

Use WordPress "site-health" style tabs for BP Admin tabs

The BuddyPress settings and tools screens admin tabs are now using the "site-health" style. As aside from the "site-health" screens, the Privacy screens are also using this tabs' style, we think using this style will improve the way BuddyPress Admin screens integrate inside the WordPress Administration.

We've put a back compatibility process for plugins extending the BuddyPress settings or/and tools screens adding their custom tabs, so that they are automatically converted into these new tabs. Plugin developers are encouraged to progressively update the way they are adding these tabs.

  • bp_core_admin_tabbed_screen_header() has been introduced to generate the BuddyPress Admin screens headers using tabs.
  • bp_core_get_admin_settings_tabs() has been introduced to return the settings tabs, using the 'bp_core_get_admin_settings_tabs' filter, plugin developers can add their custom tab to the BuddyPress settings screens.
  • bp_core_get_admin_settings_tabs() has been introduced to return the settings tabs. Using the 'bp_core_get_admin_settings_tabs' filter, plugin developers can add their custom tabs to the BuddyPress settings screens.
  • bp_core_get_admin_tools_tabs() has been introduced to return the tools tabs. Using the 'bp_core_get_admin_tools_tabs' filter, plugin developers can add their custom tabs to the BuddyPress tools screens.
  • To make sure BuddyPress generate the inline style to custom tabs, plugin developers need to hook the 'bp_admin_submenu_pages' action which passes by reference an associative array keyed according to the screens to style (settings or tools) and containing the plugin page hookname of their custom screens.

Props oztaser

Fixes #8588

Location:
trunk/src
Files:
1 added
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-core/admin/bp-core-admin-components.php

    r12725 r13137  
    1818 */
    1919function bp_core_admin_components_settings() {
    20 ?>
    21 
    22     <div class="wrap">
    23 
    24         <h1 class="wp-heading-inline"><?php _e( 'BuddyPress Settings', 'buddypress' ); ?> </h1>
    25         <hr class="wp-header-end">
    26 
    27         <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( __( 'Components', 'buddypress' ) ); ?></h2>
     20    bp_core_admin_tabbed_screen_header( __( 'BuddyPress Settings', 'buddypress' ), __( 'Components', 'buddypress' ) );
     21    ?>
     22
     23    <div class="buddypress-body">
     24
    2825        <form action="" method="post" id="bp-admin-component-form">
    2926

  • trunk/src/bp-core/admin/bp-core-admin-functions.php

    r13118 r13137  
    392392
    393393/**
     394 * Outputs the BP Admin Tabbed header.
     395 *
     396 * @since 10.0.0
     397 *
     398 * @param string $title      The title of the Admin page.
     399 * @param string $active_tab The current displayed tab.
     400 * @param string $context    The context of use for the tabs. Defaults to 'settings'.
     401 *                           Possible values are 'settings' & 'tools'.
     402 */
     403function bp_core_admin_tabbed_screen_header( $title = '', $active_tab = '', $context = 'settings' ) {
     404    $bp = buddypress();
     405
     406    // Globalize the active tab for backcompat purpose.
     407    $bp->admin->active_nav_tab = $active_tab;
     408
     409    /**
     410     * Fires before the output of the BP Admin tabbed screen header.
     411     *
     412     * @since 10.0.0
     413     *
     414     * @param string $active_tab The BP Admin active tab.
     415     * @param string $context    The context of use for the tabs.
     416     */
     417    do_action( 'bp_core_admin_tabbed_screen_header', $active_tab, $context );
     418    ?>
     419    <div class="buddypress-header">
     420        <div class="buddypress-title-section">
     421            <h1><span class="bp-badge"></span> <?php echo esc_html( $title ); ?></h1>
     422        </div>
     423        <nav class="buddypress-tabs-wrapper">
     424            <?php if ( isset( $bp->admin->nav_tabs ) ) : ?>
     425                <?php foreach ( $bp->admin->nav_tabs as $nav_tab ) : ?>
     426
     427                    <?php echo $nav_tab; ?>
     428
     429                <?php endforeach; ?>
     430            <?php else : ?>
     431                <?php bp_core_admin_tabs( esc_html( $active_tab ), $context ); ?>
     432            <?php endif; ?>
     433        </nav>
     434    </div>
     435
     436    <hr class="wp-header-end">
     437    <?php
     438}
     439
     440/**
    394441 * Output the tabs in the admin area.
    395442 *
    … …  
    401448 *                           Possible values are 'settings' & 'tools'.
    402449 */
    403 function bp_core_admin_tabs( $active_tab = '', $context = 'settings' ) {
     450function bp_core_admin_tabs( $active_tab = '', $context = 'settings', $echo = true ) {
    404451    $tabs_html    = '';
    405     $idle_class   = 'nav-tab';
    406     $active_class = 'nav-tab nav-tab-active';
     452    $idle_class   = 'buddypress-nav-tab';
     453    $active_class = 'buddypress-nav-tab active';
    407454
    408455    /**
    … …  
    413460     * @param array $value Array of tabs to output to the admin area.
    414461     */
    415     $tabs = apply_filters( 'bp_core_admin_tabs', bp_core_get_admin_tabs( $active_tab, $context ) );
     462    $tabs         = apply_filters( 'bp_core_admin_tabs', bp_core_get_admin_tabs( $active_tab, $context ) );
     463    $tabs_html    = array();
    416464
    417465    // Loop through tabs and build navigation.
    418466    foreach ( array_values( $tabs ) as $tab_data ) {
    419         $is_current = (bool) ( $tab_data['name'] == $active_tab );
    420         $tab_class  = $is_current ? $active_class : $idle_class;
    421         $tabs_html .= '<a href="' . esc_url( $tab_data['href'] ) . '" class="' . esc_attr( $tab_class ) . '">' . esc_html( $tab_data['name'] ) . '</a>';
    422     }
    423 
    424     echo $tabs_html;
    425 
     467        $is_current     = (bool) ( $tab_data['name'] == $active_tab );
     468        $tab_class      = $is_current ? $active_class : $idle_class;
     469        $tabs_html[]    = '<a href="' . esc_url( $tab_data['href'] ) . '" class="' . esc_attr( $tab_class ) . '">' . esc_html( $tab_data['name'] ) . '</a>';
     470    }
     471
     472    if ( ! $echo ) {
     473        return $tabs_html;
     474    }
     475
     476    echo implode( "\n", $tabs_html );
    426477    /**
    427478     * Fires after the output of tabs for the admin area.
    … …  
    429480     * @since 1.5.0
    430481     * @since 8.0.0 Adds the `$context` parameter.
     482     * @since 10.0.0 Adds the `$active_tab` parameter.
    431483     *
    432484     * @param string $context The context of use for the tabs.
    433485     */
    434     do_action( 'bp_admin_tabs', $context );
     486    do_action( 'bp_admin_tabs', $context, $active_tab );
     487}
     488
     489/**
     490 * Returns the BP Admin settings tabs.
     491 *
     492 * @since 10.0.0
     493 *
     494 * @param bool $apply_filters Whether to apply filters or not.
     495 * @return array              The BP Admin settings tabs.
     496 */
     497function bp_core_get_admin_settings_tabs( $apply_filters = true ) {
     498    $settings_tabs = array(
     499        '0' => array(
     500            'id'   => 'bp-components',
     501            'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-components' ), 'admin.php' ) ),
     502            'name' => __( 'Components', 'buddypress' ),
     503        ),
     504        '2' => array(
     505            'id'   => 'bp-settings',
     506            'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-settings' ), 'admin.php' ) ),
     507            'name' => __( 'Options', 'buddypress' ),
     508        ),
     509        '1' => array(
     510            'id'   => 'bp-page-settings',
     511            'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-page-settings' ), 'admin.php' ) ),
     512            'name' => __( 'Pages', 'buddypress' ),
     513        ),
     514        '3' => array(
     515            'id'   => 'bp-credits',
     516            'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-credits' ), 'admin.php' ) ),
     517            'name' => __( 'Credits', 'buddypress' ),
     518        ),
     519    );
     520
     521    if ( ! $apply_filters ) {
     522        return $settings_tabs;
     523    }
     524
     525    /**
     526     * Filter here to edit the BP Admin settings tabs.
     527     *
     528     * @since 10.0.0
     529     *
     530     * @param array $settings_tabs The BP Admin settings tabs.
     531     */
     532    return apply_filters( 'bp_core_get_admin_settings_tabs', $settings_tabs );
     533}
     534
     535/**
     536 * Returns the BP Admin tools tabs.
     537 *
     538 * @since 10.0.0
     539 *
     540 * @param bool $apply_filters Whether to apply filters or not.
     541 * @return array              The BP Admin tools tabs.
     542 */
     543function bp_core_get_admin_tools_tabs( $apply_filters = true ) {
     544    $tools_page = 'tools.php';
     545    if ( bp_core_do_network_admin() ) {
     546        $tools_page = 'admin.php';
     547    }
     548
     549    $tools_tabs = array(
     550        '0' => array(
     551            'id'   => 'bp-tools',
     552            'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-tools' ), $tools_page ) ),
     553            'name' => __( 'Repair', 'buddypress' ),
     554        ),
     555        '1' => array(
     556            'id'   => 'bp-members-invitations',
     557            'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-members-invitations' ), $tools_page ) ),
     558            'name' => __( 'Manage Invitations', 'buddypress' ),
     559        ),
     560        '2' => array(
     561            'id'   => 'bp-optouts',
     562            'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-optouts' ), $tools_page ) ),
     563            'name' => __( 'Manage Opt-outs', 'buddypress' ),
     564        ),
     565    );
     566
     567    if ( ! $apply_filters ) {
     568        return $tools_tabs;
     569    }
     570
     571    /**
     572     * Filter here to edit the BP Admin tools tabs.
     573     *
     574     * @since 10.0.0
     575     *
     576     * @param array $tools_tabs The BP Admin tools tabs.
     577     */
     578    return apply_filters( 'bp_core_get_admin_tools_tabs', $tools_tabs );
    435579}
    436580
    … …  
    450594
    451595    if ( 'settings' === $context ) {
    452         $tabs = array(
    453             '0' => array(
    454                 'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-components' ), 'admin.php' ) ),
    455                 'name' => __( 'Components', 'buddypress' ),
    456             ),
    457             '2' => array(
    458                 'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-settings' ), 'admin.php' ) ),
    459                 'name' => __( 'Options', 'buddypress' ),
    460             ),
    461             '1' => array(
    462                 'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-page-settings' ), 'admin.php' ) ),
    463                 'name' => __( 'Pages', 'buddypress' ),
    464             ),
    465             '3' => array(
    466                 'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-credits' ), 'admin.php' ) ),
    467                 'name' => __( 'Credits', 'buddypress' ),
    468             ),
    469         );
     596        $tabs = bp_core_get_admin_settings_tabs();
    470597    } elseif ( 'tools' === $context ) {
    471         $tools_page = 'tools.php';
    472         if ( bp_core_do_network_admin() ) {
    473             $tools_page = 'admin.php';
    474         }
    475 
    476         $tabs = array(
    477             '0' => array(
    478                 'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-tools' ), $tools_page ) ),
    479                 'name' => __( 'Repair', 'buddypress' ),
    480             ),
    481             '1' => array(
    482                 'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-members-invitations' ), $tools_page ) ),
    483                 'name' => __( 'Manage Invitations', 'buddypress' ),
    484             ),
    485             '2' => array(
    486                 'href' => bp_get_admin_url( add_query_arg( array( 'page' => 'bp-optouts' ), $tools_page ) ),
    487                 'name' => __( 'Manage Opt-outs', 'buddypress' ),
    488             ),
    489         );
     598        $tabs = bp_core_get_admin_tools_tabs();
    490599    }
    491600
    … …  
    501610    return apply_filters( 'bp_core_get_admin_tabs', $tabs, $context );
    502611}
     612
     613/**
     614 * Makes sure plugins using `bp_core_admin_tabs()` to output their custom BP Admin Tabs are well displayed
     615 * inside the 10.0.0 tabbed header.
     616 *
     617 * @since 10.0.0
     618 *
     619 * @param string $context    The context of use for the tabs.
     620 * @param string $active_tab The active tab.
     621 */
     622function bp_backcompat_admin_tabs( $context = '', $active_tab = '' ) {
     623    $bp = buddypress();
     624
     625    // Only add the back compat for Settings or Tools sub pages.
     626    if ( 'settings' !== $context && 'tools' !== $context ) {
     627        return;
     628    }
     629
     630    // Globalize the active tab for backcompat purpose.
     631    if ( ! $bp->admin->active_nav_tab || $active_tab !== $bp->admin->active_nav_tab ) {
     632        _doing_it_wrong(
     633            'bp_core_admin_tabs()',
     634            __( 'BuddyPress Settings and Tools Screens are now using a new tabbed header. Please use `bp_core_admin_tabbed_screen_header()` instead of bp_core_admin_tabs() to output tabs.', 'buddypress' ),
     635            '10.0.0'
     636        );
     637
     638        // Let's try to use JavaScript to force the use of the 10.0.0 Admin tabbed screen header.
     639        wp_enqueue_script(
     640            'bp-backcompat-admin-tabs',
     641            sprintf( '%1$sbackcompat-admin-tabs%2$s.js', $bp->admin->js_url, bp_core_get_minified_asset_suffix() ),
     642            array(),
     643            bp_get_version(),
     644            true
     645        );
     646    }
     647}
     648add_action( 'bp_admin_tabs', 'bp_backcompat_admin_tabs', 1, 2 );
    503649
    504650/** Help **********************************************************************/
    … …  
    12921438 * @since 2.8.0
    12931439 *
    1294  * @param string $classes CSS classes for the body tag in the admin, a comma separated string.
     1440 * @param string $classes CSS classes for the body tag in the admin, a space separated string.
    12951441 *
    12961442 * @return string
    12971443 */
    12981444function bp_core_admin_body_classes( $classes ) {
    1299     return $classes . ' buddypress';
     1445    $bp = buddypress();
     1446
     1447    $bp_class = ' buddypress';
     1448    if ( isset( $bp->admin->nav_tabs ) && $bp->admin->nav_tabs ) {
     1449        $bp_class .= ' bp-is-tabbed-screen';
     1450    }
     1451
     1452    return $classes . $bp_class;
    13001453}
    13011454add_filter( 'admin_body_class', 'bp_core_admin_body_classes' );

  • trunk/src/bp-core/admin/bp-core-admin-optouts.php

    r12930 r13137  
    317317    );
    318318
     319    bp_core_admin_tabbed_screen_header( __( 'BuddyPress tools', 'buddypress' ), __( 'Manage Opt-outs', 'buddypress' ), 'tools' );
    319320    ?>
    320321
    321     <div class="wrap">
    322         <h1 class="wp-heading-inline"><?php esc_html_e( 'BuddyPress tools', 'buddypress' ); ?></h1>
    323         <hr class="wp-header-end">
    324 
    325         <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( __( 'Manage Opt-outs', 'buddypress' ), 'tools' ); ?></h2>
    326 
     322    <div class="buddypress-body">
    327323        <?php
    328324        if ( $usersearch ) {
    … …  
    426422    );
    427423
     424    bp_core_admin_tabbed_screen_header( __( 'BuddyPress tools', 'buddypress' ), __( 'Manage Opt-outs', 'buddypress' ), 'tools' );
    428425    ?>
    429426
    430     <div class="wrap">
    431         <h1 class="wp-heading-inline"><?php esc_html_e( 'BuddyPress tools', 'buddypress' ); ?></h1>
    432         <hr class="wp-header-end">
    433 
    434         <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( __( 'Manage Opt-outs', 'buddypress' ), 'tools' ); ?></h2>
     427    <div class="buddypress-body">
    435428
    436429        <p><?php echo esc_html( $helper_text ); ?></p>

  • trunk/src/bp-core/admin/bp-core-admin-settings.php

    r12928 r13137  
    289289    // We're saving our own options, until the WP Settings API is updated to work with Multisite.
    290290    $form_action = add_query_arg( 'page', 'bp-settings', bp_get_admin_url( 'admin.php' ) );
    291 
     291    bp_core_admin_tabbed_screen_header( __( 'BuddyPress Settings', 'buddypress' ), __( 'Options', 'buddypress' ) );
    292292    ?>
    293293
    294     <div class="wrap">
    295 
    296         <h1 class="wp-heading-inline"><?php esc_html_e( 'BuddyPress Settings', 'buddypress' ); ?></h1>
    297         <hr class="wp-header-end">
    298 
    299         <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( esc_html__( 'Options', 'buddypress' ) ); ?></h2>
    300 
     294    <div class="buddypress-body">
    301295        <form action="<?php echo esc_url( $form_action ) ?>" method="post">
    302296

  • trunk/src/bp-core/admin/bp-core-admin-slugs.php

    r13118 r13137  
    1818 */
    1919function bp_core_admin_slugs_settings() {
     20    bp_core_admin_tabbed_screen_header( __( 'BuddyPress Settings', 'buddypress' ), __( 'Pages', 'buddypress' ) );
    2021?>
    2122
    22     <div class="wrap">
    23 
    24         <h1 class="wp-heading-inline"><?php esc_html_e( 'BuddyPress Settings', 'buddypress' ); ?> </h1>
    25         <hr class="wp-header-end">
    26 
    27         <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( esc_html__( 'Pages', 'buddypress' ) ); ?></h2>
     23    <div class="buddypress-body">
    2824        <form action="" method="post" id="bp-admin-page-form">
    2925

  • trunk/src/bp-core/admin/bp-core-admin-tools.php

    r12927 r13137  
    1717 */
    1818function bp_core_admin_tools() {
     19    bp_core_admin_tabbed_screen_header( __( 'BuddyPress tools', 'buddypress' ), __( 'Repair', 'buddypress' ), 'tools' );
    1920    ?>
    20     <div class="wrap">
    21 
    22         <h1 class="wp-heading-inline"><?php esc_html_e( 'BuddyPress Tools', 'buddypress' ) ?></h1>
    23         <hr class="wp-header-end">
    24 
    25         <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( __( 'Repair', 'buddypress' ), 'tools' ); ?></h2>
     21    <div class="buddypress-body">
    2622
    2723        <p><?php esc_html_e( 'BuddyPress keeps track of various relationships between members, groups, and activity items.', 'buddypress' ); ?></p>

  • trunk/src/bp-core/admin/css/common-rtl.css

    r12988 r13137  
    3636    color: #d84800;
    3737    display: inline-block;
    38     font: 400 150px/1 dashicons !important;
     38    font: 400 150px/1 dashicons;
    3939}
    4040
    … …  
    121121    padding-bottom: 15px;
    122122    height: 70px;
    123     width: 280px;
     123    width: 250px;
    124124}
    125125
    126126.bp-about-wrap .compact .wp-person {
    127127    height: auto;
    128     width: 180px;
     128    width: 150px;
    129129    padding-bottom: 0;
    130130    margin-bottom: 0;
    … …  
    557557    content: "\f534";
    558558}
     559
     560/*------------------------------------------------------------------------------
     561 * 7.0 Admins page with tabbed nav.
     562 *----------------------------------------------------------------------------*/
     563body.bp-is-tabbed-screen #wpcontent {
     564    padding-right: 0;
     565}
     566
     567.buddypress-header {
     568    text-align: center;
     569    margin: 0 0 1rem;
     570    background: #fff;
     571    border-bottom: 1px solid #dcdcde;
     572}
     573
     574.buddypress-title-section {
     575    display: flex;
     576    align-items: center;
     577    justify-content: center;
     578    flex-direction: column;
     579    clear: both;
     580    padding: 1rem 0;
     581}
     582
     583.buddypress-title-section h1 {
     584    display: inline-block;
     585    font-weight: 600;
     586    margin: 0 0.8rem;
     587    font-size: 23px;
     588    padding: 9px 0 4px;
     589    line-height: 1.3;
     590}
     591
     592.buddypress-title-section h1 .bp-badge {
     593    font-size: 32px;
     594    vertical-align: top;
     595}
     596
     597.buddypress-tabs-wrapper {
     598
     599    /* IE 11 */
     600    display: -ms-inline-grid;
     601    -ms-grid-columns: 1fr 1fr;
     602    vertical-align: top;
     603
     604    /* modern browsers */
     605    display: inline-grid; /* stylelint-disable-line declaration-block-no-duplicate-properties */
     606    grid-template-columns: 1fr 1fr;
     607}
     608
     609.buddypress-tabs-wrapper .buddypress-nav-tab {
     610    display: block;
     611    text-decoration: none;
     612    color: inherit;
     613    padding: 0.5rem 1rem 1rem;
     614    margin: 0 1rem;
     615    transition: box-shadow 0.5s ease-in-out;
     616}
     617
     618.buddypress-tabs-wrapper .buddypress-nav-tab.active {
     619    box-shadow: inset 0 -3px #3582c4;
     620    font-weight: 600;
     621}
     622
     623.buddypress-body {
     624    max-width: 800px;
     625    margin: 0 auto;
     626}
     627
     628.buddypress-body .form-table {
     629    border: 1px solid #dcdcde;
     630    background-color: #fff;
     631    padding: 0.5rem 1rem;
     632    border-collapse: inherit;
     633}
     634
     635/* Media queries */
     636@media screen and (max-width: 782px) {
     637
     638    .buddypress-body {
     639        margin: 0 12px;
     640        width: auto;
     641    }
     642}
     643
     644@media only screen and (max-width: 1004px) {
     645
     646    .buddypress-body {
     647        margin: 0 22px;
     648        width: auto;
     649    }
     650}

  • trunk/src/bp-core/admin/css/common.css

    r12988 r13137  
    3636    color: #d84800;
    3737    display: inline-block;
    38     font: 400 150px/1 dashicons !important;
     38    font: 400 150px/1 dashicons;
    3939}
    4040
    … …  
    121121    padding-bottom: 15px;
    122122    height: 70px;
    123     width: 280px;
     123    width: 250px;
    124124}
    125125
    126126.bp-about-wrap .compact .wp-person {
    127127    height: auto;
    128     width: 180px;
     128    width: 150px;
    129129    padding-bottom: 0;
    130130    margin-bottom: 0;
    … …  
    557557    content: "\f534";
    558558}
     559
     560/*------------------------------------------------------------------------------
     561 * 7.0 Admins page with tabbed nav.
     562 *----------------------------------------------------------------------------*/
     563body.bp-is-tabbed-screen #wpcontent {
     564    padding-left: 0;
     565}
     566
     567.buddypress-header {
     568    text-align: center;
     569    margin: 0 0 1rem;
     570    background: #fff;
     571    border-bottom: 1px solid #dcdcde;
     572}
     573
     574.buddypress-title-section {
     575    display: flex;
     576    align-items: center;
     577    justify-content: center;
     578    flex-direction: column;
     579    clear: both;
     580    padding: 1rem 0;
     581}
     582
     583.buddypress-title-section h1 {
     584    display: inline-block;
     585    font-weight: 600;
     586    margin: 0 0.8rem;
     587    font-size: 23px;
     588    padding: 9px 0 4px;
     589    line-height: 1.3;
     590}
     591
     592.buddypress-title-section h1 .bp-badge {
     593    font-size: 32px;
     594    vertical-align: top;
     595}
     596
     597.buddypress-tabs-wrapper {
     598
     599    /* IE 11 */
     600    display: -ms-inline-grid;
     601    -ms-grid-columns: 1fr 1fr;
     602    vertical-align: top;
     603
     604    /* modern browsers */
     605    display: inline-grid; /* stylelint-disable-line declaration-block-no-duplicate-properties */
     606    grid-template-columns: 1fr 1fr;
     607}
     608
     609.buddypress-tabs-wrapper .buddypress-nav-tab {
     610    display: block;
     611    text-decoration: none;
     612    color: inherit;
     613    padding: 0.5rem 1rem 1rem;
     614    margin: 0 1rem;
     615    transition: box-shadow 0.5s ease-in-out;
     616}
     617
     618.buddypress-tabs-wrapper .buddypress-nav-tab.active {
     619    box-shadow: inset 0 -3px #3582c4;
     620    font-weight: 600;
     621}
     622
     623.buddypress-body {
     624    max-width: 800px;
     625    margin: 0 auto;
     626}
     627
     628.buddypress-body .form-table {
     629    border: 1px solid #dcdcde;
     630    background-color: #fff;
     631    padding: 0.5rem 1rem;
     632    border-collapse: inherit;
     633}
     634
     635/* Media queries */
     636@media screen and (max-width: 782px) {
     637
     638    .buddypress-body {
     639        margin: 0 12px;
     640        width: auto;
     641    }
     642}
     643
     644@media only screen and (max-width: 1004px) {
     645
     646    .buddypress-body {
     647        margin: 0 22px;
     648        width: auto;
     649    }
     650}

  • trunk/src/bp-core/classes/class-bp-admin.php

    r13022 r13137  
    7575     */
    7676    public $notices = array();
     77
     78    /**
     79     * BuddyPress admin screens nav tabs.
     80     *
     81     * @since 10.0.0
     82     * @var array()
     83     */
     84    public $nav_tabs = array();
     85
     86    /**
     87     * BuddyPress admin active nav tab.
     88     *
     89     * @since 10.0.0
     90     * @var string()
     91     */
     92    public $active_nav_tab = '';
     93
     94    /**
     95     * BuddyPress admin screens submenu pages.
     96     *
     97     * @since 10.0.0
     98     * @var array()
     99     */
     100    public $submenu_pages = array();
    77101
    78102    /** Methods ***************************************************************/
    … …  
    230254
    231255        // Add the option pages.
    232         $hooks[] = add_submenu_page(
     256        $bp_components_page = add_submenu_page(
    233257            $this->settings_page,
    234258            __( 'BuddyPress Components', 'buddypress' ),
    … …  
    239263        );
    240264
    241         $hooks[] = add_submenu_page(
     265        $this->submenu_pages['settings']['bp-components'] = $bp_components_page;
     266        $hooks[]                                          = $bp_components_page;
     267
     268        $bp_page_settings_page = add_submenu_page(
    242269            $this->settings_page,
    243270            __( 'BuddyPress Pages', 'buddypress' ),
    … …  
    248275        );
    249276
    250         $hooks[] = add_submenu_page(
     277        $this->submenu_pages['settings']['bp-page-settings'] = $bp_page_settings_page;
     278        $hooks[]                                             = $bp_page_settings_page;
     279
     280        $bp_settings_page = add_submenu_page(
    251281            $this->settings_page,
    252282            __( 'BuddyPress Options', 'buddypress' ),
    … …  
    257287        );
    258288
     289        $this->submenu_pages['settings']['bp-settings'] = $bp_settings_page;
     290        $hooks[]                                        = $bp_settings_page;
     291
    259292        // Credits.
    260         $hooks[] = add_submenu_page(
     293        $bp_credits_page = add_submenu_page(
    261294            $this->settings_page,
    262295            __( 'BuddyPress Credits', 'buddypress' ),
    … …  
    266299            array( $this, 'credits_screen' )
    267300        );
     301
     302        $this->submenu_pages['settings']['bp-credits'] = $bp_credits_page;
     303        $hooks[]                                       = $bp_credits_page;
    268304
    269305        // For consistency with non-Multisite, we add a Tools menu in
    … …  
    294330        }
    295331
    296         $hooks[] = add_submenu_page(
     332        // Init the Tools submenu pages global.
     333        $this->submenu_pages['tools'] = array();
     334
     335        $bp_repair_tools = add_submenu_page(
    297336            $tools_parent,
    298337            __( 'BuddyPress Tools', 'buddypress' ),
    … …  
    303342        );
    304343
    305         $hooks[] = add_submenu_page(
     344        $this->submenu_pages['tools']['bp-tools'] = $bp_repair_tools;
     345        $hooks[]                                  = $bp_repair_tools;
     346
     347        $bp_optouts_tools = add_submenu_page(
    306348            $tools_parent,
    307349            __( 'Manage Opt-outs', 'buddypress' ),
    … …  
    311353            'bp_core_optouts_admin'
    312354        );
     355
     356        $this->submenu_pages['tools']['bp-optouts'] = $bp_optouts_tools;
     357        $hooks[]                                    = $bp_optouts_tools;
    313358
    314359        // For network-wide configs, add a link to (the root site's) Emails screen.
    … …  
    333378        foreach( $hooks as $hook ) {
    334379            add_action( "admin_head-$hook", 'bp_core_modify_admin_menu_highlight' );
     380        }
     381
     382        /**
     383         * Fires before adding inline styles for BP Admin tabs.
     384         *
     385         * @since 10.0.0
     386         *
     387         * @param array $submenu_pages The BP_Admin submenu pages passed by reference.
     388         */
     389        do_action_ref_array( 'bp_admin_submenu_pages', array( &$this->submenu_pages ) );
     390
     391        foreach( $this->submenu_pages as $subpage_hooks ) {
     392            foreach ( $subpage_hooks as $subpage_hook ) {
     393                add_action( "admin_print_styles-{$subpage_hook}", array( $this, 'add_inline_styles' ), 20 );
     394            }
    335395        }
    336396    }
    … …  
    811871     */
    812872    public function credits_screen() {
     873        bp_core_admin_tabbed_screen_header( __( 'BuddyPress Settings', 'buddypress' ), __( 'Credits', 'buddypress' ) );
    813874    ?>
    814875
    815         <div class="wrap bp-about-wrap">
    816 
    817         <h1 class="wp-heading-inline"><?php esc_html_e( 'BuddyPress Settings', 'buddypress' ); ?></h1>
    818         <hr class="wp-header-end">
    819 
    820         <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( esc_html__( 'Credits', 'buddypress' ) ); ?></h2>
     876        <div class="buddypress-body bp-about-wrap">
    821877
    822878            <p class="about-description"><?php esc_html_e( 'Meet the contributors behind BuddyPress:', 'buddypress' ); ?></p>
    … …  
    12251281        }
    12261282    }
     1283
     1284    /**
     1285     * Adds inline styles to adapt the number of grid columns according to the number of BP Admin tabs.
     1286     *
     1287     * @since 10.0.0
     1288     */
     1289    public function add_inline_styles() {
     1290        $screen                  = get_current_screen();
     1291        $current_settings_tab_id = array_search( $screen->id, $this->submenu_pages['settings'], true );
     1292        $current_tools_tab_id    = array_search( $screen->id, $this->submenu_pages['tools'], true );
     1293        $current_tab_id          = '';
     1294        $tabs                    = array();
     1295        $context                 = '';
     1296
     1297        if ( $current_settings_tab_id ) {
     1298            $current_tab_id = $current_settings_tab_id;
     1299            $tabs           = wp_list_pluck( bp_core_get_admin_settings_tabs(), 'name', 'id' );
     1300            $context        = 'settings';
     1301        } elseif ( $current_tools_tab_id ) {
     1302            $current_tab_id = $current_tools_tab_id;
     1303            $tabs           = wp_list_pluck( bp_core_get_admin_tools_tabs(), 'name', 'id' );
     1304            $context        = 'tools';
     1305        }
     1306
     1307        if ( $current_tab_id && isset( $tabs[ $current_tab_id ] ) ) {
     1308            $this->nav_tabs = bp_core_admin_tabs( $tabs[ $current_tab_id ], $context, false );
     1309            $grid_columns   = array_fill( 0, count( $this->nav_tabs ), '1fr');
     1310            $help_tab_css   = '';
     1311
     1312            if ( $screen->get_help_tabs() ) {
     1313                $help_tab_css  = '#screen-meta { margin-right: 0; } #screen-meta-links { position: absolute; right: 0; }';
     1314            }
     1315
     1316            wp_add_inline_style(
     1317                'bp-admin-common-css',
     1318                sprintf(
     1319                    '.buddypress-tabs-wrapper {
     1320                        -ms-grid-columns: %1$s;
     1321                        grid-template-columns: %1$s;
     1322                    }
     1323                    %2$s',
     1324                    implode( " ", $grid_columns ),
     1325                    $help_tab_css
     1326                )
     1327            );
     1328        }
     1329    }
    12271330}
    12281331endif; // End class_exists check.

  • trunk/src/bp-members/classes/class-bp-members-admin.php

    r13131 r13137  
    150150            $this->capability = 'manage_network_users';
    151151        }
     152
     153        /*
     154         * For consistency with non-Multisite, we add a Tools menu in
     155         * the Network Admin as a home for our Tools panel.
     156         */
     157        if ( is_multisite() && bp_core_do_network_admin() ) {
     158            $this->tools_parent = 'network-tools';
     159        } else {
     160            $this->tools_parent = 'tools.php';
     161        }
    152162    }
    153163
    … …  
    255265            add_filter( 'pre_get_users', array( $this, 'users_table_filter_by_type' ) );
    256266        }
     267
     268        // Add the Members invitations submenu page to the tools submenu pages.
     269        add_action( 'bp_admin_submenu_pages', array( $this, 'set_submenu_page' ), 10, 1 );
    257270    }
    258271
    … …  
    512525        }
    513526
    514         // For consistency with non-Multisite, we add a Tools menu in
    515         // the Network Admin as a home for our Tools panel.
    516         if ( is_multisite() && bp_core_do_network_admin() ) {
    517             $tools_parent = 'network-tools';
    518         } else {
    519             $tools_parent = 'tools.php';
    520         }
    521 
    522527        $hooks['members_invitations'] = $this->members_invites_page = add_submenu_page(
    523             $tools_parent,
     528            $this->tools_parent,
    524529            __( 'Manage Invitations',  'buddypress' ),
    525530            __( 'Manage Invitations',  'buddypress' ),
    … …  
    571576        // Highlight the BuddyPress tools submenu when managing invitations.
    572577        add_action( "admin_head-{$this->members_invites_page}", 'bp_core_modify_admin_menu_highlight' );
     578    }
     579
     580    /**
     581     * Include the Members Invitations tab to the Admin tabs needing specific inline styles.
     582     *
     583     * @since 10.0.0
     584     *
     585     * @param array $submenu_pages The BP_Admin submenu pages passed by reference.
     586     */
     587    public function set_submenu_page( &$submenu_pages ) {
     588        if ( isset( $submenu_pages['tools'] ) ) {
     589            $submenu_pages['tools']['bp-members-invitations'] = get_plugin_page_hookname( 'bp-members-invitations', $this->tools_parent );
     590        }
    573591    }
    574592
    … …  
    30043022        );
    30053023
     3024        bp_core_admin_tabbed_screen_header( __( 'BuddyPress tools', 'buddypress' ), __( 'Manage Invitations', 'buddypress' ), 'tools' );
    30063025        ?>
    30073026
    3008         <div class="wrap">
    3009             <h1 class="wp-heading-inline"><?php esc_html_e( 'BuddyPress tools', 'buddypress' ); ?></h1>
    3010             <hr class="wp-header-end">
    3011 
    3012             <h2 class="nav-tab-wrapper"><?php bp_core_admin_tabs( __( 'Manage Invitations', 'buddypress' ), 'tools' ); ?></h2>
    3013 
     3027        <div class="buddypress-body">
    30143028            <?php
    30153029            if ( $usersearch ) {
    … …  
    31253139        );
    31263140
     3141        bp_core_admin_tabbed_screen_header( __( 'BuddyPress tools', 'buddypress' ), __( 'Manage Invitations', 'buddypress' ), 'tools' );
    31273142        ?>
    31283143
    3129         <div class="wrap">
    3130             <h1 class="wp-heading-inline"><?php echo esc_html( $header_text ); ?></h1>
    3131             <hr class="wp-header-end">
     3144        <div class="buddypress-body">
     3145            <h2><?php echo esc_html( $header_text ); ?></h2>
    31323146
    31333147            <p><?php echo esc_html( $helper_text ); ?></p>
Note: See TracChangeset for help on using the changeset viewer.