Skip to:
Content

BuddyPress.org

Ticket #7835: 7835.patch

File 7835.patch, 19.0 KB (added by mercime, 7 years ago)

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

     
    1616        2.1 Top level menus
    1717        2.2 Settings - Components
    1818        2.3 Tools
     19        2.4 Tooltips
    19203.0 Users
    2021        3.1 Users List
    2122        3.2 Site Notices
    … …  
    301302        content: "";
    302303}
    303304
     305/*
     306 * 2.4 Tooltips
     307 */
     308.bp-tooltip {
     309        position: relative;
     310}
    304311
     312.bp-tooltip:after {
     313        background: #fff;
     314        border: 1px solid #aaa;
     315        border-collapse: separate;
     316        border-radius: 1px;
     317        box-shadow: -1px 1px 0 1px rgba(132, 132, 132, 0.3);
     318        color: #000;
     319        content: attr(data-bp-tooltip);
     320        display: none;
     321        font-family: sans-serif;
     322        font-size: 11px;
     323        font-weight: 400;
     324        letter-spacing: normal;
     325        line-height: 1.5;
     326        margin-top: 10px;
     327        max-width: 240px;
     328        opacity: 0;
     329        padding: 3px 6px;
     330        position: absolute;
     331        left: 50%;
     332        text-align: center;
     333        text-decoration: none;
     334        text-shadow: none;
     335        text-transform: none;
     336        top: 100%;
     337        -webkit-transform: translateX(-50%);
     338        -ms-transform: translateX(-50%);
     339        transform: translateX(-50%);
     340        -webkit-transition: opacity 2s ease-out;
     341        -ms-transition: opacity 2s ease-out;
     342        transition: opacity 2s ease-out;
     343        white-space: pre;
     344        word-wrap: break-word;
     345        z-index: 998;
     346}
     347
     348.bp-hello-close .bp-tooltip:after {
     349        left: 0;
     350        text-align: left;
     351        -webkit-transform: translateX(0);
     352        -ms-transform: translateX(0);
     353        transform: translateX(0);
     354}
     355
     356.bp-hello-social .bp-tooltip:after {
     357        bottom: 120%;
     358        margin-bottom: 20px;
     359        margin-top: 0;
     360        top: auto;
     361        -webkit-transform: translateX(-15%);
     362        -ms-transform: translateX(-15%);
     363        transform: translateX(-15%);
     364}
     365
     366.bp-tooltip:hover:after,
     367.bp-tooltip:active:after,
     368.bp-tooltip:focus:after {
     369        display: inline-block;
     370        opacity: 1;
     371        overflow: visible;
     372        text-decoration: none;
     373        z-index: 999;
     374}
     375
    305376/*------------------------------------------------------------------------------
    306377 * 3.0 Users
    307378 *----------------------------------------------------------------------------*/

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

     
    1616        2.1 Top level menus
    1717        2.2 Settings - Components
    1818        2.3 Tools
     19        2.4 Tooltips
    19203.0 Users
    2021        3.1 Users List
    2122        3.2 Site Notices
    … …  
    301302        content: "";
    302303}
    303304
     305/*
     306 * 2.4 Tooltips
     307 */
     308.bp-tooltip {
     309        position: relative;
     310}
    304311
     312.bp-tooltip:after {
     313        background: #fff;
     314        border: 1px solid #aaa;
     315        border-collapse: separate;
     316        border-radius: 1px;
     317        box-shadow: 1px 1px 0 1px rgba(132, 132, 132, 0.3);
     318        color: #000;
     319        content: attr(data-bp-tooltip);
     320        display: none;
     321        font-family: sans-serif;
     322        font-size: 11px;
     323        font-weight: 400;
     324        letter-spacing: normal;
     325        line-height: 1.5;
     326        margin-top: 10px;
     327        max-width: 240px;
     328        opacity: 0;
     329        padding: 3px 6px;
     330        position: absolute;
     331        right: 50%;
     332        text-align: center;
     333        text-decoration: none;
     334        text-shadow: none;
     335        text-transform: none;
     336        top: 100%;
     337        -webkit-transform: translateX(50%);
     338        -ms-transform: translateX(50%);
     339        transform: translateX(50%);
     340        -webkit-transition: opacity 2s ease-out;
     341        -ms-transition: opacity 2s ease-out;
     342        transition: opacity 2s ease-out;
     343        white-space: pre;
     344        word-wrap: break-word;
     345        z-index: 998;
     346}
     347
     348.bp-hello-close .bp-tooltip:after {
     349        right: 0;
     350        text-align: right;
     351        -webkit-transform: translateX(0);
     352        -ms-transform: translateX(0);
     353        transform: translateX(0);
     354}
     355
     356.bp-hello-social .bp-tooltip:after {
     357        bottom: 120%;
     358        margin-bottom: 20px;
     359        margin-top: 0;
     360        top: auto;
     361        -webkit-transform: translateX(15%);
     362        -ms-transform: translateX(15%);
     363        transform: translateX(15%);
     364}
     365
     366.bp-tooltip:hover:after,
     367.bp-tooltip:active:after,
     368.bp-tooltip:focus:after {
     369        display: inline-block;
     370        opacity: 1;
     371        overflow: visible;
     372        text-decoration: none;
     373        z-index: 999;
     374}
     375
    305376/*------------------------------------------------------------------------------
    306377 * 3.0 Users
    307378 *----------------------------------------------------------------------------*/

  • src/bp-core/admin/css/hello-rtl.css

     
    3737}
    3838
    3939#bp-hello-container a:hover {
     40        -webkit-transition: all 0.1s ease-in-out;
     41        -o-transition: all 0.1s ease-in-out;
    4042        transition: all 0.1s ease-in-out;
    4143        color: black;
    4244}
    … …  
    5456/*------------------------------------------------------------------------------
    5557 * 2.0 - Dashicons
    5658 *----------------------------------------------------------------------------*/
    57 .bp-hello-close a:hover:before {
    58         transition: all 0.1s ease-in-out;
    59         color: var(--bp-hello-color-primary);
     59.bp-hello-close .button {
     60        padding: 5px !important;
    6061}
    6162
    62 .bp-hello-close a.close-modal:before {
     63.bp-hello-close .close-modal:before {
    6364        content: "\f158";
    6465        color: #23282d;
    6566        /* wp toolbar */
    66         font: 400 35px/1 dashicons;
     67        font: 400 1.5em/1 dashicons;
    6768        speak: none;
    6869        -webkit-font-smoothing: antialiased;
    6970        -moz-osx-font-smoothing: grayscale;
    … …  
    7071        background-image: none !important;
    7172}
    7273
     74.bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal:hover:before {
     75        -webkit-transition: all 0.1s ease-in-out;
     76        -o-transition: all 0.1s ease-in-out;
     77        transition: all 0.1s ease-in-out;
     78        color: var(--bp-hello-color-primary);
     79}
     80
    7381.bp-hello-social li a:before {
    7482        color: #23282d;
    7583        /* wp toolbar */
    … …  
    8189}
    8290
    8391.bp-hello-social li a:hover:before {
     92        -webkit-transition: all 0.1s ease-in-out;
     93        -o-transition: all 0.1s ease-in-out;
    8494        transition: all 0.1s ease-in-out;
    8595        color: var(--bp-hello-color-primary);
    8696}
    … …  
    124134 * 3.2 - Modal footer
    125135 */
    126136.bp-hello-footer {
     137        display: -webkit-box;
     138        display: -ms-flexbox;
    127139        display: flex;
     140        -ms-flex-wrap: wrap;
    128141        flex-wrap: wrap;
    129142        height: 58px;
    130143        max-height: 58px;
    … …  
    132145
    133146.bp-hello-social-cta,
    134147.bp-hello-social-links {
     148        -ms-flex-preferred-size: 50%;
    135149        flex-basis: 50%;
    136150}
    137151
    … …  
    177191 */
    178192#bp-hello-backdrop {
    179193        background-color: rgba(0, 0, 0, 0.8);
     194        -webkit-transition: opacity 0.15s ease-out;
     195        -o-transition: opacity 0.15s ease-out;
    180196        transition: opacity 0.15s ease-out;
    181197}
    182198
    … …  
    236252        text-align: left;
    237253}
    238254
    239 .bp-hello-close a {
    240         text-decoration: none;
    241 }
    242 
    243255/*
    244256 * 4.4 - Content content
    245257 */
    … …  
    285297        .bp-hello-close {
    286298                left: 30px;
    287299        }
    288         .bp-hello-close a.close-modal:before {
     300        .bp-hello-close .close-modal:before {
    289301                line-height: 0.7;
    290302        }
    291303        .bp-hello-footer {

  • src/bp-core/admin/css/hello.css

     
    3737}
    3838
    3939#bp-hello-container a:hover {
     40        -webkit-transition: all 0.1s ease-in-out;
     41        -o-transition: all 0.1s ease-in-out;
    4042        transition: all 0.1s ease-in-out;
    4143        color: black;
    4244}
    … …  
    5456/*------------------------------------------------------------------------------
    5557 * 2.0 - Dashicons
    5658 *----------------------------------------------------------------------------*/
    57 .bp-hello-close a:hover:before {
    58         transition: all 0.1s ease-in-out;
    59         color: var(--bp-hello-color-primary);
     59.bp-hello-close .button {
     60        padding: 5px !important;
    6061}
    6162
    62 .bp-hello-close a.close-modal:before {
     63.bp-hello-close .close-modal:before {
    6364        content: "\f158";
    6465        color: #23282d;
    6566        /* wp toolbar */
    66         font: 400 35px/1 dashicons;
     67        font: 400 1.5em/1 dashicons;
    6768        speak: none;
    6869        -webkit-font-smoothing: antialiased;
    6970        -moz-osx-font-smoothing: grayscale;
    … …  
    7071        background-image: none !important;
    7172}
    7273
     74.bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal:hover:before {
     75        -webkit-transition: all 0.1s ease-in-out;
     76        -o-transition: all 0.1s ease-in-out;
     77        transition: all 0.1s ease-in-out;
     78        color: var(--bp-hello-color-primary);
     79}
     80
    7381.bp-hello-social li a:before {
    7482        color: #23282d;
    7583        /* wp toolbar */
    … …  
    8189}
    8290
    8391.bp-hello-social li a:hover:before {
     92        -webkit-transition: all 0.1s ease-in-out;
     93        -o-transition: all 0.1s ease-in-out;
    8494        transition: all 0.1s ease-in-out;
    8595        color: var(--bp-hello-color-primary);
    8696}
    … …  
    124134 * 3.2 - Modal footer
    125135 */
    126136.bp-hello-footer {
     137        display: -webkit-box;
     138        display: -ms-flexbox;
    127139        display: flex;
     140        -ms-flex-wrap: wrap;
    128141        flex-wrap: wrap;
    129142        height: 58px;
    130143        max-height: 58px;
    … …  
    132145
    133146.bp-hello-social-cta,
    134147.bp-hello-social-links {
     148        -ms-flex-preferred-size: 50%;
    135149        flex-basis: 50%;
    136150}
    137151
    … …  
    177191 */
    178192#bp-hello-backdrop {
    179193        background-color: rgba(0, 0, 0, 0.8);
     194        -webkit-transition: opacity 0.15s ease-out;
     195        -o-transition: opacity 0.15s ease-out;
    180196        transition: opacity 0.15s ease-out;
    181197}
    182198
    … …  
    236252        text-align: right;
    237253}
    238254
    239 .bp-hello-close a {
    240         text-decoration: none;
    241 }
    242 
    243255/*
    244256 * 4.4 - Content content
    245257 */
    … …  
    285297        .bp-hello-close {
    286298                right: 30px;
    287299        }
    288         .bp-hello-close a.close-modal:before {
     300        .bp-hello-close .close-modal:before {
    289301                line-height: 0.7;
    290302        }
    291303        .bp-hello-footer {

  • src/bp-core/admin/js/hello.js

     
    44 * @since 3.0.0
    55 */
    66(function() {
     7
     8        var bp_element_triggering_modal;
     9        var bp_hello_modal = document.getElementById( 'bp-hello-container' );
     10        var bp_hello_backdrop = document.getElementById( 'bp-hello-backdrop' );
     11
    712        /**
    813         * Open the BuddyPress Hello modal.
    914         */
    1015        var bp_hello_open_modal = function() {
     16                // Save focus of element that opened the modal.
     17                bp_element_triggering_modal = document.activeElement;
     18
    1119                document.body.classList.add( 'bp-disable-scroll' );
    1220
    13                 // Show.
    14                 document.getElementById( 'bp-hello-backdrop' ).style.display  = '';
    15                 document.getElementById( 'bp-hello-container' ).style.display = '';
    16         };
     21                // Manage keyboard focus in modal.
     22                bp_hello_modal.addEventListener('keydown', bp_manage_keyboard_focus );
    1723
    18         /**
    19          * Close the BuddyPress Hello modal.
    20          */
    21         var bp_hello_close_modal = function() {
    22                 var backdrop = document.getElementById( 'bp-hello-backdrop' ),
    23                         modal = document.getElementById( 'bp-hello-container' );
     24                // Show modal.
     25                bp_hello_backdrop.style.display  = '';
     26                bp_hello_modal.style.display = '';
    2427
    25                 document.body.classList.remove( 'bp-disable-scroll' );
     28                // Focus elements in bp_hello_modal only.
     29                var bp_focus_elements = 'a[href], button';
     30                var bp_focus_elements_show = bp_hello_modal.querySelectorAll( bp_focus_elements );
    2631
    27                 // Hide.
    28                 modal.parentNode.removeChild( modal );
    29                 backdrop.parentNode.removeChild( backdrop );
     32                // Convert NodeList to Array.
     33                bp_focus_elements_show = Array.prototype.slice.call( bp_focus_elements_show );
     34
     35                var bp_modal_first_tab_stop = bp_focus_elements_show[0];
     36                var bp_modal_last_tab_stop = bp_focus_elements_show[bp_focus_elements_show.length - 1];
     37
     38                bp_modal_first_tab_stop.focus();
     39
     40                function bp_manage_keyboard_focus(e) {
     41
     42                        // Check for TAB key press.
     43                        if ( e.keyCode === 9 ) {
     44
     45                                // When SHIFT+TAB on first tab stop, go to last tab stop in modal.
     46                                if ( e.shiftKey ) {
     47                                        if ( document.activeElement === bp_modal_first_tab_stop ) {
     48                                                e.preventDefault();
     49                                                bp_modal_last_tab_stop.focus();
     50                                        }
     51                                // When TAB reaches last tab stop, go to first tab stop in modal.
     52                                } else {
     53                                        if ( document.activeElement === bp_modal_last_tab_stop ) {
     54                                                e.preventDefault();
     55                                                bp_modal_first_tab_stop.focus();
     56                                        }
     57                                }
     58
     59                        }
     60
     61                        // Check for ESCAPE key press.
     62                        if ( e.keyCode === 27 ) {
     63                                bp_hello_close_modal();
     64                        }
     65                }
     66
     67
     68                // Hide other panels while modal is open.
     69                document.querySelectorAll( '#adminmenumain, #wpcontent, #wpfooter' ).setAttribute( 'aria-hidden', true );
     70
     71                // Listen for events to close modal.
     72                bp_hello_backdrop.addEventListener( 'click', bp_hello_close_modal );
     73
    3074        };
    3175
    3276        // Close modal if "X" or background is touched.
    3377        document.addEventListener( 'click', function( event ) {
    34                 var backdrop = document.getElementById( 'bp-hello-backdrop' );
    3578
    36                 if ( ! backdrop || ! document.getElementById( 'bp-hello-container' ) ) {
     79                if ( ! bp_hello_backdrop || ! bp_hello_modal ) {
    3780                        return;
    3881                }
    3982
    40                 var backdrop_click = backdrop.contains( event.target ),
     83                var backdrop_click = bp_hello_backdrop.contains( event.target ),
    4184                        modal_close_click = event.target.classList.contains( 'close-modal' );
    4285
    4386                if ( ! modal_close_click && ! backdrop_click ) {
    … …  
    4588                }
    4689
    4790                bp_hello_close_modal();
     91
    4892        }, false );
    4993
    50         // Close modal if escape key is presssed.
    51         document.addEventListener( 'keyup', function( event ) {
    52                 if ( event.keyCode === 27 ) {
    53                         if ( ! document.getElementById( 'bp-hello-backdrop' ) || ! document.getElementById( 'bp-hello-container' ) ) {
    54                                 return;
    55                         }
     94        /**
     95         * Close the BuddyPress Hello modal.
     96         */
     97        var bp_hello_close_modal = function() {
    5698
    57                         bp_hello_close_modal();
    58                 }
    59         }, false );
     99                document.body.classList.remove( 'bp-disable-scroll' );
    60100
     101                // Hide modal and overlay.
     102                bp_hello_backdrop.style.display  = 'none';
     103                bp_hello_modal.style.display = 'none';
     104
     105                document.querySelectorAll( '#adminmenumain, #wpcontent, #wpfooter' ).setAttribute('aria-hidden', false);
     106
     107        };
     108
    61109        // Init modal after the screen's loaded.
    62110        if ( document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading' ) {
    63111                bp_hello_open_modal();

  • src/bp-core/admin/sass/hello.scss

     
    3939                color: var(--bp-hello-color-primary);
    4040
    4141                &:hover {
     42                        -webkit-transition: all 0.1s ease-in-out;
     43                        -o-transition: all 0.1s ease-in-out;
    4244                        transition: all 0.1s ease-in-out;
    4345                        color: rgb(0, 0, 0);
    4446                }
    … …  
    6668 *----------------------------------------------------------------------------*/
    6769.bp-hello-close {
    6870
    69         a {
     71        .button {
     72                padding: 5px !important;
     73        }
    7074
    71                 &:hover:before {
    72                         transition: all 0.1s ease-in-out;
    73                         color: var(--bp-hello-color-primary);
    74                 }
     75        .close-modal {
    7576
    76                 &.close-modal:before {
     77                &:before {
    7778                        content: "\f158";
    7879                        color: #23282d; /* wp toolbar */
    79                         font: 400 35px/1 dashicons;
     80                        font: 400 1.5em/1 dashicons;
    8081                        speak: none;
    8182                        -webkit-font-smoothing: antialiased;
    8283                        -moz-osx-font-smoothing: grayscale;
    8384                        background-image: none !important;
    8485                }
     86
     87                &:focus:before,
     88                &:hover:before {
     89                        -webkit-transition: all 0.1s ease-in-out;
     90                        -o-transition: all 0.1s ease-in-out;
     91                        transition: all 0.1s ease-in-out;
     92                        color: var(--bp-hello-color-primary);
     93                }
    8594        }
    8695}
    8796
    … …  
    99108                }
    100109
    101110                &:hover:before {
     111                        -webkit-transition: all 0.1s ease-in-out;
     112                        -o-transition: all 0.1s ease-in-out;
    102113                        transition: all 0.1s ease-in-out;
    103114                        color: var(--bp-hello-color-primary);
    104115                }
    … …  
    126137        left: 0;
    127138        right: 0;
    128139        bottom: 0;
    129         z-index: 9998; // >= 9990 for main menu
     140        z-index: 9998; // > 99999 of wp-adminbar
    130141
    131142        display: none;
    132143}
    … …  
    135146        position: fixed;
    136147        top: 0;
    137148        bottom: 80px;
    138         z-index: 99999; // >= 99998 for toolbar
     149        z-index: 99999; //> 1000003 for BP modal
    139150}
    140151
    141152.bp-disable-scroll {
    … …  
    146157 * 3.2 - Modal footer
    147158 */
    148159.bp-hello-footer {
     160        display: -webkit-box;
     161        display: -ms-flexbox;
    149162        display: flex;
     163        -ms-flex-wrap: wrap;
    150164        flex-wrap: wrap;
    151165
    152166        height: 58px;
    … …  
    155169
    156170.bp-hello-social-cta,
    157171.bp-hello-social-links {
     172        -ms-flex-preferred-size: 50%;
    158173        flex-basis: 50%;
    159174}
    160175
    … …  
    209224 */
    210225#bp-hello-backdrop {
    211226        background-color: rgba(0, 0, 0, 0.8);
     227        -webkit-transition: opacity 0.15s ease-out;
     228        -o-transition: opacity 0.15s ease-out;
    212229        transition: opacity 0.15s ease-out;
    213230}
    214231
    … …  
    275292        top: 20px;
    276293        right: 25px;
    277294        text-align: right;
    278 
    279         a {
    280                 text-decoration: none;
    281         }
    282295}
    283296
    284297/*
    … …  
    333346        .bp-hello-header {
    334347                height: auto;
    335348                max-height: inherit;
    336 
    337349                padding: 6px 30px;
    338350        }
    339351
    … …  
    340352        .bp-hello-close {
    341353                right: 30px;
    342354
    343                 a {
    344 
    345                         &.close-modal:before {
    346                                 line-height: 0.7;
    347                         }
     355                .close-modal:before {
     356                        line-height: 0.7;
    348357                }
    349358        }
    350359

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

     
    557557                <div id="bp-hello-backdrop" style="display: none;">
    558558                </div>
    559559
    560                 <div id="bp-hello-container" style="display: none;">
    561                         <div class="bp-hello-header">
     560                <div id="bp-hello-container" role="dialog" aria-labelledby="bp-hello-title" style="display: none;">
     561                        <div class="bp-hello-header" role="document">
    562562                                <div class="bp-hello-close">
    563                                         <a class="close-modal" href="#" title="<?php echo esc_attr( 'Close pop-up', 'buddypress' ); ?>"><span class="screen-reader-text"><?php esc_html_e( 'Close pop-up', 'buddypress' ); ?></span></a>
     563                                        <button type="button" class="close-modal button bp-tooltip" data-bp-tooltip="<?php echo esc_attr( 'Close modal', 'buddypress' ); ?>">
     564                                                <span class="screen-reader-text"><?php esc_html_e( 'Close BP welcome modal', 'buddypress' ); ?></span>
     565                                        </button>
    564566                                </div>
    565567
    566568                                <div class="bp-hello-title">
    567                                         <h1><?php esc_html_e( _x( 'New in BuddyPress', 'section heading', 'buddypress' ) ); ?></h1>
     569                                        <h1 id="bp-hello-title" tabindex="-1"><?php esc_html_e( _x( 'New in BuddyPress', 'section heading', 'buddypress' ) ); ?></h1>
    568570                                </div>
    569571                        </div>
    570572
    … …  
    587589                                        );
    588590                                        ?>
    589591                                </p>
    590                                 <img srcset="https://via.placeholder.com/1024x576 1024w, https://via.placeholder.com/2048x1152 2048w" src="https://placekitten.com/1024x576" sizes="(max-width: 1023px) 90vw, 65vw" alt="a rad wolf" />
     592                                <img srcset="https://via.placeholder.com/1024x576 1024w, https://via.placeholder.com/2048x1152 2048w" src="https://placekitten.com/1024x576" sizes="(max-width: 1023px) 90vw, 65vw" alt="<?php esc_attr( 'Bp Nouveau, the new Template Pack', 'buddypress' ); ?>" />
    591593
    592594
    593595                                <h2><?php esc_html_e( __( 'Support for WP-CLI', 'buddypress' ) ); ?></h2>
    … …  
    670672                                                <li>
    671673                                                        <?php
    672674                                                        printf(
    673                                                                 '<a class="twitter" title="%1$s" href="%2$s"><span class="screen-reader-text">%3$s</span></a>',
     675                                                                '<a class="twitter bp-tooltip" data-bp-tooltip="%1$s" href="%2$s"><span class="screen-reader-text">%3$s</span></a>',
    674676                                                                esc_attr( 'Follow BuddyPress on Twitter', 'buddypress' ),
    675677                                                                esc_url( 'https://twitter.com/buddypress' ),
    676678                                                                esc_html( 'Follow BuddyPress on Twitter', 'buddypress' )
    … …  
    681683                                                <li>
    682684                                                        <?php
    683685                                                        printf(
    684                                                                 '<a class="support" title="%1$s" href="%2$s"><span class="screen-reader-text">%3$s</span></a>',
     686                                                                '<a class="support bp-tooltip" data-bp-tooltip="%1$s" href="%2$s"><span class="screen-reader-text">%3$s</span></a>',
    685687                                                                esc_attr( 'Visit the Support Forums', 'buddypress' ),
    686688                                                                esc_url( 'https://buddypress.org/support/' ),
    687689                                                                esc_html( 'Visit the Support Forums', 'buddypress' )