Skip to:
Content

BuddyPress.org

Changeset 12458


Ignore:
Timestamp:
09/16/2019 08:38:34 PM (7 years ago)
Author:
imath
Message:

Hello BuddyPress Modal for BuddyPress 5.0.0

Use the WordPress modal used to display plugin details to display information about new BuddyPress major release.

Props johnjamesjacoby, dcavins, boonebgorges

Fixes #8132

Location:
trunk/src/bp-core
Files:
4 added
1 deleted
5 edited

Legend:

Unmodified
Added
Removed

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

    r12236 r12458  
    10102.0 - Dashicons
    11113.0 - Elements
    12         3.1 - Backdrop and container
    13         3.2 - Modal footer
    14         3.3 - Modal header
    15         3.4 - Modal content
     12        3.1 - Modal footer
     13        3.2 - Modal content
    16144.0 - Content styles
    17         4.1 - Backdrop and container
    18         4.2 - Footer content
    19         4.3 - Header content
    20         4.4 - Content content
     15        4.1 - Footer content
     16        4.2 - Header content
     17        4.3 - Content content
    21185.0 - Media
    22196.0 - Media Queries
    … …  
    3330}
    3431
    35 #bp-hello-container a {
    36         color: var(--bp-hello-color-primary);
    37 }
    38 
    39 #bp-hello-container a:hover {
    40         transition: all 0.1s ease-in-out;
    41         color: black;
    42 }
    43 
    44 #bp-hello-container .bp-hello-header h1 {
    45         line-height: 1.7;
    46         font-size: 21px;
    47         font-weight: 400;
    48 }
    49 
    5032.bp-hello-content p {
    5133        font-size: 16px;
    5234}
    5335
     36.bp-hello-content ul,
     37.bp-hello-content ol {
     38        list-style: inherit;
     39}
     40
     41.bp-hello-content h3 {
     42        font-size: 1.1em;
     43        font-weight: 500;
     44}
     45
    5446/*------------------------------------------------------------------------------
    5547 * 2.0 - Dashicons
    5648 *----------------------------------------------------------------------------*/
    57 .bp-hello-close .button {
    58         padding: 5px !important;
    59 }
    60 
    61 .bp-hello-close .close-modal:before {
    62         content: "\f158";
    63         color: #23282d;
    64         /* wp toolbar */
    65         font: 400 1.5em/1 dashicons;
    66         speak: none;
    67         -webkit-font-smoothing: antialiased;
    68         -moz-osx-font-smoothing: grayscale;
    69         background-image: none !important;
    70 }
    71 
    72 .bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal:hover:before {
    73         transition: all 0.1s ease-in-out;
    74         color: var(--bp-hello-color-primary);
    75 }
    76 
    7749.bp-hello-social li a:before {
    7850        color: #23282d;
    … …  
    9870}
    9971
     72div.dashicons {
     73        width: -webkit-fit-content;
     74        width: fit-content;
     75}
     76
     77div.dashicons.big {
     78        font-size: 128px;
     79        display: block;
     80        color: var(--bp-hello-color-primary);
     81        height: 128px;
     82        width: 128px;
     83}
     84
    10085/*------------------------------------------------------------------------------
    10186 * 3.0 - Elements
    10287 *----------------------------------------------------------------------------*/
    10388/*
    104  * 3.1 - Backdrop and container
    105  */
    106 #bp-hello-backdrop {
    107         position: fixed;
    108         top: 0;
    109         right: 0;
    110         left: 0;
    111         bottom: 0;
    112         z-index: 9998;
    113         display: none;
    114 }
    115 
    116 #bp-hello-container {
    117         position: fixed;
    118         top: 0;
    119         bottom: 80px;
    120         z-index: 99999;
    121 }
    122 
    123 .bp-disable-scroll {
    124         overflow: hidden;
    125 }
    126 
    127 /*
    128  * 3.2 - Modal footer
    129  */
    130 .bp-hello-footer {
     89 * 3.1 - Modal footer
     90 */
     91#plugin-information-footer {
    13192        display: flex;
    13293        flex-wrap: wrap;
    133         height: 58px;
    134         max-height: 58px;
     94        padding: 0 16px;
     95        height: auto;
     96}
     97
     98#plugin-information-footer .dashicons-heart {
     99        color: #be3631;
    135100}
    136101
    … …  
    157122
    158123/*
    159  * 3.3 - Modal header
    160  */
    161 .bp-hello-header {
    162         height: 58px;
    163         max-height: 58px;
    164 }
    165 
    166 /*
    167  * 3.4 - Modal content
    168  */
     124 * 3.2 - Modal content
     125 */
     126#bp-hello-container {
     127        display: none;
     128}
     129
    169130.bp-hello-content {
    170131        padding: 0 25px;
    171         height: calc(100% - 58px);
    172         overflow-y: auto;
    173         -webkit-overflow-scrolling: touch;
     132        padding-bottom: 20px;
     133}
     134
     135#dynamic-content {
     136        padding-bottom: 40px;
     137        display: none;
     138}
     139
     140#dynamic-content.show {
     141        display: block;
     142}
     143
     144.plugin-details-modal #TB_title {
     145        /* stylelint-disable-line */
     146        height: 0;
     147        background: none;
     148        border: none;
     149}
     150
     151#TB_window.plugin-details-modal.thickbox-loading:before {
     152        /* stylelint-disable-line */
     153        z-index: 10;
     154        margin-top: 40px;
     155        background-color: none;
     156}
     157
     158.bp-hello-aligncenter * {
     159        margin: 10px auto;
     160}
     161
     162.bp-hello-alignleft {
     163        float: right;
     164}
     165
     166.bp-hello-alignleft:after {
     167        content: "";
     168        clear: right;
     169}
     170
     171.bp-hello-alignright {
     172        float: left;
     173}
     174
     175.bp-hello-alignright:after {
     176        content: "";
     177        clear: left;
     178}
     179
     180.bp-hello-divider {
     181        clear: both;
     182        border: none;
     183        margin-bottom: 20px;
    174184}
    175185
    … …  
    178188 *----------------------------------------------------------------------------*/
    179189/*
    180  * 4.1 - Backdrop and container
    181  */
    182 #bp-hello-backdrop {
    183         background-color: rgba(0, 0, 0, 0.8);
    184         transition: opacity 0.15s ease-out;
    185 }
    186 
    187 #bp-hello-container {
    188         background-color: white;
    189 }
    190 
    191 /*
    192  * 4.2 - Footer content
    193  */
    194 .bp-hello-footer {
    195         border-radius: 0 0 3px 3px;
    196         background-color: white;
    197         border-top: 1px solid var(--bp-hello-color-secondary);
    198         padding: 6px 25px;
    199 }
    200 
    201 .bp-hello-footer p {
    202         font-size: 15px;
    203 }
    204 
     190 * 4.1 - Footer content
     191 */
    205192.bp-hello-social-cta {
    206193        text-align: right;
    … …  
    216203
    217204/*
    218  * 4.3 - Header content
    219  */
    220 .bp-hello-header {
    221         padding: 6px 25px;
    222 }
    223 
    224 .bp-hello-header h1 {
    225         width: calc(100% - 51px);
    226 }
    227 
    228 #bp-hello-container .bp-hello-header {
    229         border-bottom: 1px solid var(--bp-hello-color-secondary);
    230 }
    231 
    232 .bp-hello-title {
    233         text-align: right;
    234 }
    235 
    236 .bp-hello-close {
    237         position: absolute;
    238         top: 20px;
    239         left: 25px;
    240         text-align: left;
    241 }
    242 
    243 /*
    244  * 4.4 - Content content
     205 * 4.2 - Header content
     206 */
     207#plugin-information-title.with-banner {
     208        background-image: url(https://ps.w.org/buddypress/assets/banner-772x250.png);
     209}
     210
     211/*
     212 * 4.3 - Content content
    245213 */
    246214.bp-hello-content {
    … …  
    260228}
    261229
     230.bp-hello-content .bp-hello-alignleft img,
     231.bp-hello-content .bp-hello-alignright img {
     232        max-width: 200px;
     233}
     234
    262235/*------------------------------------------------------------------------------
    263236 * 6.0 - Media Queries
    … …  
    267240 */
    268241@media only screen and (min-width: 1024px) {
    269         #bp-hello-backdrop {
    270                 display: block;
    271         }
    272         #bp-hello-container {
    273                 position: fixed;
    274                 top: 60px;
    275                 right: var(--bp-hello-container-size);
    276                 left: var(--bp-hello-container-size);
    277                 bottom: 30px;
    278                 z-index: 9999;
    279                 border-radius: 3px;
    280         }
    281         #bp-hello-container .bp-hello-header h1 {
    282                 line-height: inherit;
    283         }
    284         .bp-hello-header {
    285                 height: auto;
    286                 max-height: inherit;
    287                 padding: 6px 30px;
    288         }
    289         .bp-hello-close {
    290                 left: 30px;
    291         }
    292         .bp-hello-close .close-modal:before {
    293                 line-height: 0.7;
    294         }
    295         .bp-hello-footer {
    296                 position: fixed;
    297                 right: var(--bp-hello-container-size);
    298                 left: var(--bp-hello-container-size);
    299                 bottom: 30px;
    300                 z-index: 10000;
    301                 height: auto;
    302                 max-height: inherit;
    303                 padding: 6px 30px;
    304         }
    305242        .bp-hello-content {
    306                 height: calc(100% - 90px);
    307                 padding: 0 30px;
     243                padding: 0 30px 20px;
    308244        }
    309245        .bp-hello-content p {
    … …  
    315251 * 6.2 - Desktop Large
    316252 */
    317 @media screen and (min-width: 1280px) {
    318         #bp-hello-container,
    319         .bp-hello-footer {
    320                 right: calc((100% - 896px) / 2);
    321                 left: calc((100% - 896px) / 2);
     253@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
     254        #plugin-information-title.with-banner {
     255                background-image: url(https://ps.w.org/buddypress/assets/banner-1544x500.png);
    322256        }
    323257}

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

    r12297 r12458  
    10102.0 - Dashicons
    11113.0 - Elements
    12         3.1 - Backdrop and container
    13         3.2 - Modal footer
    14         3.3 - Modal header
    15         3.4 - Modal content
     12        3.1 - Modal footer
     13        3.2 - Modal content
    16144.0 - Content styles
    17         4.1 - Backdrop and container
    18         4.2 - Footer content
    19         4.3 - Header content
    20         4.4 - Content content
     15        4.1 - Footer content
     16        4.2 - Header content
     17        4.3 - Content content
    21185.0 - Media
    22196.0 - Media Queries
    … …  
    3330}
    3431
    35 #bp-hello-container a {
    36         color: var(--bp-hello-color-primary);
    37 }
    38 
    39 #bp-hello-container a:hover {
    40         transition: all 0.1s ease-in-out;
    41         color: black;
    42 }
    43 
    44 #bp-hello-container .bp-hello-header h1 {
    45         line-height: 1.7;
    46         font-size: 21px;
    47         font-weight: 400;
    48 }
    49 
    5032.bp-hello-content p {
    5133        font-size: 16px;
    5234}
    5335
     36.bp-hello-content ul,
     37.bp-hello-content ol {
     38        list-style: inherit;
     39}
     40
     41.bp-hello-content h3 {
     42        font-size: 1.1em;
     43        font-weight: 500;
     44}
     45
    5446/*------------------------------------------------------------------------------
    5547 * 2.0 - Dashicons
    5648 *----------------------------------------------------------------------------*/
    57 .bp-hello-close .button {
    58         padding: 5px !important;
    59 }
    60 
    61 .bp-hello-close .close-modal:before {
    62         content: "\f158";
    63         color: #23282d;
    64         /* wp toolbar */
    65         font: 400 1.5em/1 dashicons;
    66         speak: none;
    67         -webkit-font-smoothing: antialiased;
    68         -moz-osx-font-smoothing: grayscale;
    69         background-image: none !important;
    70 }
    71 
    72 .bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal:hover:before {
    73         transition: all 0.1s ease-in-out;
    74         color: var(--bp-hello-color-primary);
    75 }
    76 
    7749.bp-hello-social li a:before {
    7850        color: #23282d;
    … …  
    9870}
    9971
     72div.dashicons {
     73        width: -webkit-fit-content;
     74        width: fit-content;
     75}
     76
     77div.dashicons.big {
     78        font-size: 128px;
     79        display: block;
     80        color: var(--bp-hello-color-primary);
     81        height: 128px;
     82        width: 128px;
     83}
     84
    10085/*------------------------------------------------------------------------------
    10186 * 3.0 - Elements
    10287 *----------------------------------------------------------------------------*/
    10388/*
    104  * 3.1 - Backdrop and container
    105  */
    106 #bp-hello-backdrop {
    107         position: fixed;
    108         top: 0;
    109         left: 0;
    110         right: 0;
    111         bottom: 0;
    112         z-index: 9998;
    113         display: none;
    114 }
    115 
    116 #bp-hello-container {
    117         position: fixed;
    118         top: 0;
    119         bottom: 80px;
    120         z-index: 99999;
    121 }
    122 
    123 .bp-disable-scroll {
    124         overflow: hidden;
    125 }
    126 
    127 /*
    128  * 3.2 - Modal footer
    129  */
    130 .bp-hello-footer {
     89 * 3.1 - Modal footer
     90 */
     91#plugin-information-footer {
    13192        display: flex;
    13293        flex-wrap: wrap;
    133         height: 58px;
    134         max-height: 58px;
     94        padding: 0 16px;
     95        height: auto;
     96}
     97
     98#plugin-information-footer .dashicons-heart {
     99        color: #be3631;
    135100}
    136101
    … …  
    157122
    158123/*
    159  * 3.3 - Modal header
    160  */
    161 .bp-hello-header {
    162         height: 58px;
    163         max-height: 58px;
    164 }
    165 
    166 /*
    167  * 3.4 - Modal content
    168  */
     124 * 3.2 - Modal content
     125 */
     126#bp-hello-container {
     127        display: none;
     128}
     129
    169130.bp-hello-content {
    170131        padding: 0 25px;
    171         height: calc(100% - 58px);
    172         overflow-y: auto;
    173         -webkit-overflow-scrolling: touch;
     132        padding-bottom: 20px;
     133}
     134
     135#dynamic-content {
     136        padding-bottom: 40px;
     137        display: none;
     138}
     139
     140#dynamic-content.show {
     141        display: block;
     142}
     143
     144.plugin-details-modal #TB_title {
     145        /* stylelint-disable-line */
     146        height: 0;
     147        background: none;
     148        border: none;
     149}
     150
     151#TB_window.plugin-details-modal.thickbox-loading:before {
     152        /* stylelint-disable-line */
     153        z-index: 10;
     154        margin-top: 40px;
     155        background-color: none;
     156}
     157
     158.bp-hello-aligncenter * {
     159        margin: 10px auto;
     160}
     161
     162.bp-hello-alignleft {
     163        float: left;
     164}
     165
     166.bp-hello-alignleft:after {
     167        content: "";
     168        clear: left;
     169}
     170
     171.bp-hello-alignright {
     172        float: right;
     173}
     174
     175.bp-hello-alignright:after {
     176        content: "";
     177        clear: right;
     178}
     179
     180.bp-hello-divider {
     181        clear: both;
     182        border: none;
     183        margin-bottom: 20px;
    174184}
    175185
    … …  
    178188 *----------------------------------------------------------------------------*/
    179189/*
    180  * 4.1 - Backdrop and container
    181  */
    182 #bp-hello-backdrop {
    183         background-color: rgba(0, 0, 0, 0.8);
    184         transition: opacity 0.15s ease-out;
    185 }
    186 
    187 #bp-hello-container {
    188         background-color: white;
    189 }
    190 
    191 /*
    192  * 4.2 - Footer content
    193  */
    194 .bp-hello-footer {
    195         border-radius: 0 0 3px 3px;
    196         background-color: white;
    197         border-top: 1px solid var(--bp-hello-color-secondary);
    198         padding: 6px 25px;
    199 }
    200 
    201 .bp-hello-footer p {
    202         font-size: 15px;
    203 }
    204 
     190 * 4.1 - Footer content
     191 */
    205192.bp-hello-social-cta {
    206193        text-align: left;
    … …  
    216203
    217204/*
    218  * 4.3 - Header content
    219  */
    220 .bp-hello-header {
    221         padding: 6px 25px;
    222 }
    223 
    224 .bp-hello-header h1 {
    225         width: calc(100% - 51px);
    226 }
    227 
    228 #bp-hello-container .bp-hello-header {
    229         border-bottom: 1px solid var(--bp-hello-color-secondary);
    230 }
    231 
    232 .bp-hello-title {
    233         text-align: left;
    234 }
    235 
    236 .bp-hello-close {
    237         position: absolute;
    238         top: 20px;
    239         right: 25px;
    240         text-align: right;
    241 }
    242 
    243 /*
    244  * 4.4 - Content content
     205 * 4.2 - Header content
     206 */
     207#plugin-information-title.with-banner {
     208        background-image: url(https://ps.w.org/buddypress/assets/banner-772x250.png);
     209}
     210
     211/*
     212 * 4.3 - Content content
    245213 */
    246214.bp-hello-content {
    … …  
    260228}
    261229
     230.bp-hello-content .bp-hello-alignleft img,
     231.bp-hello-content .bp-hello-alignright img {
     232        max-width: 200px;
     233}
     234
    262235/*------------------------------------------------------------------------------
    263236 * 6.0 - Media Queries
    … …  
    267240 */
    268241@media only screen and (min-width: 1024px) {
    269         #bp-hello-backdrop {
    270                 display: block;
    271         }
    272         #bp-hello-container {
    273                 position: fixed;
    274                 top: 60px;
    275                 left: var(--bp-hello-container-size);
    276                 right: var(--bp-hello-container-size);
    277                 bottom: 30px;
    278                 z-index: 9999;
    279                 border-radius: 3px;
    280         }
    281         #bp-hello-container .bp-hello-header h1 {
    282                 line-height: inherit;
    283         }
    284         .bp-hello-header {
    285                 height: auto;
    286                 max-height: inherit;
    287                 padding: 6px 30px;
    288         }
    289         .bp-hello-close {
    290                 right: 30px;
    291         }
    292         .bp-hello-close .close-modal:before {
    293                 line-height: 0.7;
    294         }
    295         .bp-hello-footer {
    296                 position: fixed;
    297                 left: var(--bp-hello-container-size);
    298                 right: var(--bp-hello-container-size);
    299                 bottom: 30px;
    300                 z-index: 10000;
    301                 height: auto;
    302                 max-height: inherit;
    303                 padding: 6px 30px;
    304         }
    305242        .bp-hello-content {
    306                 height: calc(100% - 90px);
    307                 padding: 0 30px;
     243                padding: 0 30px 20px;
    308244        }
    309245        .bp-hello-content p {
    … …  
    315251 * 6.2 - Desktop Large
    316252 */
    317 @media screen and (min-width: 1280px) {
    318         #bp-hello-container,
    319         .bp-hello-footer {
    320                 left: calc((100% - 896px) / 2);
    321                 right: calc((100% - 896px) / 2);
     253@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
     254        #plugin-information-title.with-banner {
     255                background-image: url(https://ps.w.org/buddypress/assets/banner-1544x500.png);
    322256        }
    323257}

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

    r12101 r12458  
     1/* global bpHelloStrings */
    12/**
    23 * Loads for BuddyPress Hello in wp-admin for query string `hello=buddypress`.
    … …  
    45 * @since 3.0.0
    56 */
    6 (function() {
     7(function( $, bp ) {
     8        // Bail if not set
     9        if ( typeof bpHelloStrings === 'undefined' ) {
     10                return;
     11        }
     12
    713        /**
    814         * Open the BuddyPress Hello modal.
    915         */
    10         var bp_hello_open_modal = function() {
    11                 var backdrop = document.getElementById( 'bp-hello-backdrop' ),
    12                         modal = document.getElementById( 'bp-hello-container' );
     16        var bpHelloOpenModal = function() {
     17                if ( 'function' !== typeof window.tb_show ) {
     18                        return false;
     19                }
    1320
    14                 document.body.classList.add( 'bp-disable-scroll' );
     21                window.tb_show( 'BuddyPress', '#TB_inline?inlineId=bp-hello-container' );
    1522
    16                 // Show modal and overlay.
    17                 backdrop.style.display = '';
    18                 modal.style.display    = '';
     23                $( '#TB_window' ).attr( {
     24                                                        'role': 'dialog',
     25                                                        'aria-label': bpHelloStrings.modalLabel
     26                                                } )
     27                                                .addClass( 'plugin-details-modal' )
     28                                                .removeClass( 'thickbox-loading' );
    1929
    20                 // Focus the "X" so bp_hello_handle_keyboard_events() works.
    21                 var focus_target = modal.querySelectorAll( 'a[href], button' );
    22                 focus_target     = Array.prototype.slice.call( focus_target );
    23                 focus_target[0].focus();
    24 
    25                 // Events.
    26                 modal.addEventListener( 'keydown', bp_hello_handle_keyboard_events );
    27                 backdrop.addEventListener( 'click', bp_hello_close_modal );
     30                $( '#TB_ajaxContent' ).prop( 'style', 'height: 100%; width: auto; padding: 0; border: none;' );
    2831        };
    2932
    3033        /**
    31          * Close modal if "X" or background is touched.
     34         * Prints an error message.
    3235         *
    33          * @param {Event} event - A click event.
     36         * @param {string} message The error message to display.
    3437         */
    35         document.addEventListener( 'click', function( event ) {
    36                 var backdrop = document.getElementById( 'bp-hello-backdrop' );
    37                 if ( ! backdrop || ! document.getElementById( 'bp-hello-container' ) ) {
    38                         return;
     38        var printErrorMessage = function( message ) {
     39                if ( ! message ) {
     40                        message = bpHelloStrings.pageNotFound;
    3941                }
    4042
    41                 var backdrop_click    = backdrop.contains( event.target ),
    42                         modal_close_click = event.target.classList.contains( 'close-modal' );
    43 
    44                 if ( ! modal_close_click && ! backdrop_click ) {
    45                         return;
    46                 }
    47 
    48                 bp_hello_close_modal();
    49         }, false );
    50 
    51         /**
    52          * Close the Hello modal.
    53          */
    54         var bp_hello_close_modal = function() {
    55                 var backdrop = document.getElementById( 'bp-hello-backdrop' ),
    56                         modal = document.getElementById( 'bp-hello-container' );
    57 
    58                 document.body.classList.remove( 'bp-disable-scroll' );
    59 
    60                 // Remove modal and overlay.
    61                 modal.parentNode.removeChild( modal );
    62                 backdrop.parentNode.removeChild( backdrop );
     43                $( '#dynamic-content' ).html(
     44                        $('<div></div>' ).prop( 'id', 'message' )
     45                                        .addClass( 'notice notice-error error' )
     46                                        .html(
     47                                                $( '<p></p>' ).html( message )
     48                                        )
     49                );
    6350        };
    6451
    65         /**
    66          * Restrict keyboard focus to elements within the BuddyPress Hello modal.
    67          *
    68          * @param {Event} event - A keyboard focus event.
    69          */
    70         var bp_hello_handle_keyboard_events = function( event ) {
    71                 var modal = document.getElementById( 'bp-hello-container' ),
    72                         focus_targets = Array.prototype.slice.call(
    73                                 modal.querySelectorAll( 'a[href], button' )
    74                         ),
    75                         first_tab_stop = focus_targets[0],
    76                         last_tab_stop  = focus_targets[ focus_targets.length - 1 ];
     52        // Listen to Tab Menu clicks to display the different screens.
     53        $( '#plugin-information-tabs').on( 'click', 'a', function( event ) {
     54                event.preventDefault();
    7755
    78                 // Check for TAB key press.
    79                 if ( event.keyCode !== 9 ) {
    80                         return;
     56                var anchor = $( event.currentTarget ), target = $( '#dynamic-content' );
     57
     58                if ( anchor.hasClass( 'dynamic' ) ) {
     59                        $( '#top-features' ).hide();
     60                        target.html( '' );
     61                        target.addClass( 'show' );
     62
     63                        $( '#TB_window' ).addClass( 'thickbox-loading' );
     64
     65                        bp.apiRequest( {
     66                                url: anchor.data( 'endpoint' ),
     67                                type: 'GET',
     68                                beforeSend: function( xhr, settings ) {
     69                                        settings.url = settings.url.replace( '&_wpnonce=none', '' );
     70                                },
     71                                data: {
     72                                        context: 'view',
     73                                        slug: anchor.data( 'slug' ),
     74                                        _wpnonce: 'none'
     75                                }
     76                        } ).done( function( data ) {
     77                                var page = _.first( data );
     78
     79                                if ( page && page.content ) {
     80                                        target.html( page.content.rendered );
     81                                } else {
     82                                        printErrorMessage();
     83                                }
     84
     85                        } ).fail( function( error ) {
     86                                if ( ! error || ! error.message ) {
     87                                        return false;
     88                                }
     89
     90                                printErrorMessage( error.message );
     91
     92                        } ).always( function() {
     93                                $( '#TB_window' ).removeClass( 'thickbox-loading' );
     94                        } );
     95
     96                } else {
     97                        $( '#top-features' ).show();
     98                        target.html( '' );
     99                        target.removeClass( 'show' );
    81100                }
    82 
    83                 // When SHIFT+TAB on first tab stop, go to last tab stop in modal.
    84                 if ( event.shiftKey && document.activeElement === first_tab_stop ) {
    85                         event.preventDefault();
    86                         last_tab_stop.focus();
    87 
    88                 // When TAB reaches last tab stop, go to first tab stop in modal.
    89                 } else if ( document.activeElement === last_tab_stop ) {
    90                         event.preventDefault();
    91                         first_tab_stop.focus();
    92                 }
    93         };
    94 
    95         /**
    96          * Close modal if escape key is presssed.
    97          *
    98          * @param {Event} event - A keyboard focus event.
    99          */
    100         document.addEventListener( 'keyup', function( event ) {
    101                 if ( event.keyCode === 27 ) {
    102                         if ( ! document.getElementById( 'bp-hello-backdrop' ) || ! document.getElementById( 'bp-hello-container' ) ) {
    103                                 return;
    104                         }
    105 
    106                         bp_hello_close_modal();
    107                 }
    108         }, false );
     101        } );
    109102
    110103        // Init modal after the screen's loaded.
    111         if ( document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading' ) {
    112                 bp_hello_open_modal();
    113         } else {
    114                 document.addEventListener( 'DOMContentLoaded', bp_hello_open_modal );
    115         }
    116 }());
     104        $( document ).ready( function() {
     105                bpHelloOpenModal();
     106        } );
     107
     108}( jQuery, window.bp || {} ) );

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

    r12236 r12458  
    10102.0 - Dashicons
    11113.0 - Elements
    12         3.1 - Backdrop and container
    13         3.2 - Modal footer
    14         3.3 - Modal header
    15         3.4 - Modal content
     12        3.1 - Modal footer
     13        3.2 - Modal content
    16144.0 - Content styles
    17         4.1 - Backdrop and container
    18         4.2 - Footer content
    19         4.3 - Header content
    20         4.4 - Content content
     15        4.1 - Footer content
     16        4.2 - Header content
     17        4.3 - Content content
    21185.0 - Media
    22196.0 - Media Queries
    … …  
    3431}
    3532
    36 #bp-hello-container {
    37 
    38         a {
    39                 color: var(--bp-hello-color-primary);
    40 
    41                 &:hover {
    42                         -webkit-transition: all 0.1s ease-in-out;
    43                         -o-transition: all 0.1s ease-in-out;
    44                         transition: all 0.1s ease-in-out;
    45                         color: rgb(0, 0, 0);
    46                 }
    47         }
    48 
    49         .bp-hello-header {
    50 
    51                 h1 {
    52                         line-height: 1.7;
    53                         font-size: 21px;
    54                         font-weight: 400;
    55                 }
    56         }
    57 }
    58 
    5933.bp-hello-content {
    6034
    … …  
    6236                font-size: 16px;
    6337        }
     38
     39        ul,
     40        ol {
     41                list-style: inherit;
     42        }
     43
     44        h3 {
     45                font-size: 1.1em;
     46                font-weight: 500;
     47        }
    6448}
    6549
    … …  
    6751 * 2.0 - Dashicons
    6852 *----------------------------------------------------------------------------*/
    69 .bp-hello-close {
    70 
    71         .button {
    72                 padding: 5px !important;
    73         }
    74 
    75         .close-modal {
    76 
    77                 &:before {
    78                         content: "\f158";
    79                         color: #23282d; /* wp toolbar */
    80                         font: 400 1.5em/1 dashicons;
    81                         speak: none;
    82                         -webkit-font-smoothing: antialiased;
    83                         -moz-osx-font-smoothing: grayscale;
    84                         background-image: none !important;
    85                 }
    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                 }
    94         }
    95 }
    96 
    9753.bp-hello-social {
    9854
    … …  
    12581}
    12682
     83div.dashicons {
     84
     85        width: fit-content;
     86
     87        &.big {
     88                font-size: 128px;
     89                display: block;
     90                color: var(--bp-hello-color-primary);
     91                height: 128px;
     92                width: 128px;
     93        }
     94}
     95
    12796/*------------------------------------------------------------------------------
    12897 * 3.0 - Elements
    … …  
    13099
    131100/*
    132  * 3.1 - Backdrop and container
    133  */
    134 #bp-hello-backdrop {
    135         position: fixed;
    136         top: 0;
    137         left: 0;
    138         right: 0;
    139         bottom: 0;
    140         z-index: 9998;
    141 
    142         display: none;
    143 }
    144 
    145 #bp-hello-container {
    146         position: fixed;
    147         top: 0;
    148         bottom: 80px;
    149         z-index: 99999;
    150 }
    151 
    152 .bp-disable-scroll {
    153         overflow: hidden;
    154 }
    155 
    156 /*
    157  * 3.2 - Modal footer
    158  */
    159 .bp-hello-footer {
    160         display: -webkit-box;
    161         display: -ms-flexbox;
     101 * 3.1 - Modal footer
     102 */
     103#plugin-information-footer {
     104
    162105        display: flex;
    163         -ms-flex-wrap: wrap;
    164106        flex-wrap: wrap;
    165 
    166         height: 58px;
    167         max-height: 58px;
     107        padding: 0 16px;
     108        height: auto;
     109
     110        .dashicons-heart {
     111                color: #be3631;
     112        }
    168113}
    169114
    … …  
    197142
    198143/*
    199  * 3.3 - Modal header
    200  */
    201 .bp-hello-header {
    202         height: 58px;
    203         max-height: 58px;
    204 }
    205 
    206 /*
    207  * 3.4 - Modal content
    208  */
     144 * 3.2 - Modal content
     145 */
     146
     147#bp-hello-container {
     148        display: none;
     149}
     150
    209151.bp-hello-content {
    210152        padding: 0 25px;
    211 
    212         // Force scrolling.
    213         height: calc(100% - 58px);
    214         overflow-y: auto;
    215         -webkit-overflow-scrolling: touch;
     153        padding-bottom: 20px;
     154}
     155
     156#dynamic-content {
     157        padding-bottom: 40px;
     158        display: none;
     159
     160        &.show {
     161                display: block;
     162        }
     163}
     164
     165.plugin-details-modal #TB_title { /* stylelint-disable-line */
     166        height: 0;
     167        background: none;
     168        border: none;
     169}
     170
     171#TB_window.plugin-details-modal.thickbox-loading:before { /* stylelint-disable-line */
     172        z-index: 10;
     173        margin-top: 40px;
     174        background-color: none;
     175}
     176
     177.bp-hello-aligncenter * {
     178        margin: 10px auto;
     179}
     180
     181.bp-hello-alignleft {
     182        float: left;
     183
     184        &:after {
     185                content: "";
     186                clear: left;
     187        }
     188}
     189
     190.bp-hello-alignright {
     191        float: right;
     192
     193        &:after {
     194                content: "";
     195                clear: right;
     196        }
     197}
     198
     199.bp-hello-divider {
     200        clear: both;
     201        border: none;
     202        margin-bottom: 20px;
    216203}
    217204
    … …  
    221208
    222209/*
    223  * 4.1 - Backdrop and container
    224  */
    225 #bp-hello-backdrop {
    226         background-color: rgba(0, 0, 0, 0.8);
    227         -webkit-transition: opacity 0.15s ease-out;
    228         -o-transition: opacity 0.15s ease-out;
    229         transition: opacity 0.15s ease-out;
    230 }
    231 
    232 #bp-hello-container {
    233         background-color: rgb(255, 255, 255);
    234 }
    235 
    236 /*
    237  * 4.2 - Footer content
    238  */
    239 .bp-hello-footer {
    240         border-radius: 0 0 3px 3px;
    241         background-color: rgb(255, 255, 255);
    242         border-top: 1px solid var(--bp-hello-color-secondary);
    243         padding: 6px 25px;
    244 
    245         p {
    246                 font-size: 15px;
    247         }
    248 }
    249 
     210 * 4.1 - Footer content
     211 */
    250212.bp-hello-social-cta {
    251213        text-align: left;
    … …  
    267229
    268230/*
    269  * 4.3 - Header content
    270  */
    271 .bp-hello-header {
    272         padding: 6px 25px;
    273 
    274         h1 {
    275                 width: calc(100% - 51px);  // Approx. width of "X" button block.
    276         }
    277 }
    278 
    279 #bp-hello-container {
    280 
    281         .bp-hello-header {
    282                 border-bottom: 1px solid var(--bp-hello-color-secondary);
    283         }
    284 }
    285 
    286 .bp-hello-title {
    287         text-align: left;
    288 }
    289 
    290 .bp-hello-close {
    291         position: absolute;
    292         top: 20px;
    293         right: 25px;
    294         text-align: right;
    295 }
    296 
    297 /*
    298  * 4.4 - Content content
     231 * 4.2 - Header content
     232 */
     233#plugin-information-title.with-banner {
     234        background-image: url(https://ps.w.org/buddypress/assets/banner-772x250.png);
     235}
     236
     237/*
     238 * 4.3 - Content content
    299239 */
    300240.bp-hello-content {
    … …  
    315255                width: 100%;
    316256        }
     257
     258        .bp-hello-alignleft img,
     259        .bp-hello-alignright img {
     260                max-width: 200px;
     261        }
    317262}
    318263
    … …  
    326271@media only screen and (min-width: 1024px) {
    327272
    328         #bp-hello-backdrop {
    329                 display: block;
    330         }
    331 
    332         #bp-hello-container {
    333                 position: fixed;
    334                 top: 60px;
    335                 left: var(--bp-hello-container-size);
    336                 right: var(--bp-hello-container-size);
    337                 bottom: 30px;
    338                 z-index: 9999;
    339 
    340                 border-radius: 3px;
    341 
    342                 .bp-hello-header {
    343 
    344                         h1 {
    345                                 line-height: inherit;
    346                         }
    347                 }
    348         }
    349 
    350         .bp-hello-header {
    351                 height: auto;
    352                 max-height: inherit;
    353                 padding: 6px 30px;
    354         }
    355 
    356         .bp-hello-close {
    357                 right: 30px;
    358 
    359                 .close-modal:before {
    360                         line-height: 0.7;
    361                 }
    362         }
    363 
    364         .bp-hello-footer {
    365                 position: fixed; // Fixed position above "content" div.
    366                 left: var(--bp-hello-container-size);
    367                 right: var(--bp-hello-container-size);
    368                 bottom: 30px;
    369                 z-index: 10000; // See #bp-hello-backdrop
    370 
    371                 height: auto;
    372                 max-height: inherit;
    373 
    374                 padding: 6px 30px;
    375         }
    376 
    377273        .bp-hello-content {
    378                 // Very very approx. height of header and footer.
    379                 height: calc(100% - 90px);
    380                 padding: 0 30px;
    381 
    382                 p {
    383                         font-size: 14px;
    384                 }
     274                padding: 0 30px 20px;
     275        }
     276
     277        .bp-hello-content p {
     278                font-size: 14px;
    385279        }
    386280}
    … …  
    389283 * 6.2 - Desktop Large
    390284 */
    391 @media screen and (min-width: 1280px) {
    392 
    393         #bp-hello-container,
    394         .bp-hello-footer {
    395                 // Approx. max-width of modal at Desktop Medium size.
    396                 left: calc((100% - 896px) / 2);
    397                 right: calc((100% - 896px) / 2);
    398         }
    399 }
     285@media only screen and ( -webkit-min-device-pixel-ratio: 1.5 ) {
     286
     287        #plugin-information-title.with-banner {
     288                background-image: url(https://ps.w.org/buddypress/assets/banner-1544x500.png);
     289        }
     290}

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

    r12401 r12458  
    537537                wp_enqueue_style( 'bp-admin-common-css' );
    538538
    539                 // BuddyPress Hello
     539                // BuddyPress Hello.
    540540                if ( 0 === strpos( get_current_screen()->id, 'dashboard' ) && ! empty( $_GET['hello'] ) && $_GET['hello'] === 'buddypress' ) {
    541541                        wp_enqueue_style( 'bp-hello-css' );
    542542                        wp_enqueue_script( 'bp-hello-js' );
     543                        wp_localize_script( 'bp-hello-js', 'bpHelloStrings', array(
     544                                'pageNotFound' => __( 'Sorry, the page you requested was not found.', 'buddypress' ),
     545                                'modalLabel'   => __( 'Hello BuddyPress', 'buddypress' ),
     546                        ) );
    543547                }
    544548        }
    … …  
    547551         * Registers BuddyPress's suggested privacy policy language.
    548552         *
    549          * @since 3.x.y
     553         * @since 4.0.0
    550554         */
    551555        public function add_privacy_policy_content() {
    … …  
    618622                        return;
    619623                }
     624
     625                // Get BuddyPress stable version.
     626                $version      =  preg_replace( '/-.*/', '', bp_get_version() );
     627                $version_slug = 'version-' . str_replace( '.', '-', $version );
    620628        ?>
    621629
    622                 <div id="bp-hello-backdrop" style="display: none;">
    623                 </div>
    624 
    625                 <div id="bp-hello-container" role="dialog" aria-labelledby="bp-hello-title" style="display: none;">
    626                         <div class="bp-hello-header" role="document">
    627                                 <div class="bp-hello-close">
    628                                         <button type="button" class="close-modal button bp-tooltip" data-bp-tooltip="<?php esc_attr_e( 'Close pop-up', 'buddypress' ); ?>">
    629                                                 <span class="screen-reader-text"><?php esc_html_e( 'Close pop-up', 'buddypress' ); ?></span>
    630                                         </button>
     630                <div id="bp-hello-container">
     631                        <div id="plugin-information-scrollable">
     632                                <div id='plugin-information-title' class="with-banner">
     633                                        <div class='vignette'></div>
     634                                        <h2>
     635                                                <?php printf(
     636                                                        /* translators: %s is the placehoder for the BuddyPress version number. */
     637                                                        esc_html__( 'BuddyPress %s', 'buddypress' ),
     638                                                        $version
     639                                                ); ?>
     640                                        </h2>
    631641                                </div>
    632 
    633                                 <div class="bp-hello-title">
    634                                         <h1 id="bp-hello-title" tabindex="-1"><?php echo esc_html( _x( 'New in BuddyPress', 'section heading', 'buddypress' ) ); ?></h1>
     642                                <div id="plugin-information-tabs">
     643                                        <a name="whats-new" href="#whats-new" class="current"><?php esc_html_e( 'What\'s new?', 'buddypress' ); ?></a>
     644                                        <a name="changelog" href="#changelog" class="dynamic" data-slug="<?php echo esc_attr( $version_slug ); ?>" data-endpoint="https://codex.buddypress.org/wp-json/wp/v2/pages"><?php esc_html_e( 'Changelog', 'buddypress' ); ?></a>
     645                                        <a name="get-involved" href="#get-involved" class="dynamic" data-slug="participate-and-contribute" data-endpoint="https://codex.buddypress.org/wp-json/wp/v2/pages"><?php esc_html_e( 'Get involved', 'buddypress' ); ?></a>
     646                                </div>
     647
     648                                <div class="bp-hello-content">
     649                                        <div id="dynamic-content"></div>
     650                                        <div id="top-features">
     651                                                <h2><?php esc_html_e( 'Introducing the BP REST API', 'buddypress' ); ?></h2>
     652                                                <figure class="bp-hello-alignleft">
     653                                                        <div class="dashicons dashicons-rest-api big"></div>
     654                                                </figure>
     655                                                <p>
     656                                                        <?php esc_html_e( 'BuddyPress 5.0.0 comes with REST API endpoints for members, groups, activities, users, private messages, screen notifications and extended profiles.', 'buddypress' ); ?>
     657                                                </p>
     658                                                <p>
     659                                                        <?php esc_html_e( 'BuddyPress endpoints provide machine-readable external access to your WordPress site with a clear, standards-driven interface, paving the way for new and innovative methods of interacting with your community through plugins, themes, apps, and beyond.', 'buddypress' ); ?>
     660                                                        <?php printf(
     661                                                                /* translators: %s is the placehoder for the link to the BP REST API documentation site. */
     662                                                                esc_html__( 'Ready to get started with development? Check out the %s.', 'buddypress' ),
     663                                                                sprintf(
     664                                                                        '<a href="%1$s">%2$s</a>',
     665                                                                        esc_url( 'https://developer.buddypress.org/bp-rest-api/' ),
     666                                                                        esc_html__( 'BP REST API reference', 'buddypress' )
     667                                                                )
     668                                                        ); ?>
     669                                                </p>
     670
     671                                                <hr class="bp-hello-divider"/>
     672
     673                                                <h2><?php esc_html_e( 'A new interface for managing group members.', 'buddypress' ); ?></h2>
     674                                                <p>
     675                                                        <?php esc_html_e( 'The best way to show the power of the BP REST API is to start using it for one of our Core features.', 'buddypress' ); ?>
     676                                                </p>
     677                                                <figure class="bp-hello-aligncenter">
     678                                                        <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/images/manage-members-interface.png' ); ?>" alt="<?php esc_attr_e( 'Screenshot of the Group Members management interface in the administration and on the front-end of your site.', 'buddypress' ); ?>" />
     679                                                </figure>
     680                                                <p>
     681                                                        <?php esc_html_e( 'Group administrators will love our new interface for managing group membership. Whether you\'re working as a group admin on the front-end Manage tab, or as the site admin on the Dashboard, the new REST API-based tools are faster, easier to use, and more consistent.', 'buddypress' ); ?>
     682                                                </p>
     683
     684                                                <hr class="bp-hello-divider"/>
     685
     686                                                <h2><?php esc_html_e( 'Improved Group invites and membership requests.', 'buddypress' ); ?></h2>
     687                                                <figure class="bp-hello-alignright">
     688                                                        <div class="dashicons dashicons-buddicons-groups big"></div>
     689                                                </figure>
     690                                                <p>
     691                                                        <?php esc_html_e( 'Thanks to the new BP Invitations API, Group invites and membership requests are now managed in a more consistent way.', 'buddypress' ); ?>
     692                                                </p>
     693                                                <p>
     694                                                        <?php esc_html_e( 'The BP Invitations API abstracts how these two actions are handled and allows developers to use them for any object on your site (e.g., Sites of a WordPress network).', 'buddypress' ); ?>
     695                                                        <?php printf(
     696                                                                /* translators: %s is the placehoder for the link to the BP Invitations API development note. */
     697                                                                esc_html__( 'Read more about the %s.', 'buddypress' ),
     698                                                                sprintf(
     699                                                                        '<a href="%1$s">%2$s</a>',
     700                                                                        esc_url( 'https://bpdevel.wordpress.com/2019/09/16/new-invitations-api-coming-in-buddypress-5-0/' ),
     701                                                                        esc_html__( 'BP Invitations API', 'buddypress' )
     702                                                                )
     703                                                        ); ?>
     704                                                </p>
     705
     706                                                <hr class="bp-hello-divider"/>
     707
     708                                                <h2><?php esc_html_e( 'Help our support volunteers help you.', 'buddypress' ); ?></h2>
     709                                                <p>
     710                                                        <?php esc_html_e( 'Knowing your WordPress and BuddyPress configuration is very important when one of our beloved support volunteers tries to help you fix an issue. That\'s why we added a BuddyPress section to the Site Health Info Administration screen.', 'buddypress' ); ?>
     711                                                </p>
     712                                                <figure class="bp-hello-aligncenter">
     713                                                        <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/images/site-health-buddypress-section.png' ); ?>" alt="<?php esc_attr_e( 'Screenshot of the BuddyPress section of the Site Health Info Administration screen.', 'buddypress' ); ?>" />
     714                                                </figure>
     715                                                <p>
     716                                                        <?php esc_html_e( 'The panel is displayed at the bottom of the screen. It includes the BuddyPress version, active components, active template pack, and a list of other component-specific settings information.', 'buddypress' ); ?>
     717                                                </p>
     718
     719                                                <hr class="bp-hello-divider"/>
     720
     721                                                <h2><?php esc_html_e( 'Improved integrations with WordPress', 'buddypress' ); ?></h2>
     722                                                <figure class="bp-hello-aligncenter">
     723                                                        <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/images/bp-nouveau-improvements.png' );?>" alt="<?php esc_attr_e( 'Screenshot of the BuddyPress members directory & Password control in Twenty Ninteen.', 'buddypress' ); ?>" />
     724                                                </figure>
     725
     726                                                <p>
     727                                                        <?php esc_html_e( 'In BuddyPress 5.0.0, the BP Nouveau template pack looks better than ever with the Twenty Nineteen theme.', 'buddypress' ); ?>
     728                                                        <?php esc_html_e( 'Nouveau also now uses the same password control as the one used in WordPress Core, for better consistency between BuddyPress and WordPress spaces.', 'buddypress' ); ?>
     729                                                </p>
     730
     731                                                <p>
     732                                                        <strong><?php esc_html_e( 'BuddyPress Blocks now have their own category into the Block Editor.', 'buddypress' ); ?></strong>
     733                                                </p>
     734                                                <figure class="bp-hello-aligncenter">
     735                                                        <img src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/images/buddypress-blocks-category.png' ); ?>" alt="<?php esc_attr_e( 'Screenshot of the BuddyPress block category.', 'buddypress' ); ?>" />
     736                                                </figure>
     737                                                <p>
     738                                                        <?php esc_html_e( 'Developers building tools for the Block Editor can now add their blocks to the BuddyPress category. This change provides a foundation for organizing custom BuddyPress blocks.', 'buddypress' ); ?>
     739                                                        <?php printf(
     740                                                                /* translators: %s is the placehoder for the link to the blocks category development note. */
     741                                                                esc_html__( 'Read more about this feature in the %s.', 'buddypress' ),
     742                                                                sprintf(
     743                                                                        '<a href="%1$s">%2$s</a>',
     744                                                                        esc_url( 'https://bpdevel.wordpress.com/2019/07/31/a-category-to-store-your-buddypress-blocks/' ),
     745                                                                        esc_html__( 'development note', 'buddypress' )
     746                                                                )
     747                                                        ); ?>
     748                                                </p>
     749
     750                                                <hr class="bp-hello-divider"/>
     751
     752                                                <h2><?php echo esc_html( _x( 'Your feedback', 'screen heading', 'buddypress' ) ); ?></h2>
     753                                                <p>
     754                                                        <?php
     755                                                        printf(
     756                                                                /* translators: %s is the placehoder for the link to BuddyPress support forums. */
     757                                                                esc_html__( ' How are you using BuddyPress? Receiving your feedback and suggestions for future versions of BuddyPress genuinely motivates and encourages our contributors. Please %s about this version of BuddyPress on our website. ', 'buddypress' ),
     758                                                                sprintf(
     759                                                                        '<a href="%1$s">%2$s</a>',
     760                                                                        esc_url( 'https://buddypress.org/support/' ),
     761                                                                        esc_html__( 'share your feedback', 'buddypress' )
     762                                                                )
     763                                                        );
     764                                                        ?>
     765                                                </p>
     766                                                <p><?php esc_html_e( 'Thank you for using BuddyPress! 😊', 'buddypress' ); ?></p>
     767
     768                                                <br /><br />
     769                                        </div>
    635770                                </div>
    636771                        </div>
    637 
    638                         <div class="bp-hello-content">
    639                                 <h2><?php esc_html_e( 'New tools for data control and privacy', 'buddypress' ); ?></h2>
    640                                 <p>
    641                                         <?php esc_html_e( 'BuddyPress boasts a proud history of letting community members and managers control their data, independent of third-party, commercial entities. In this spirit, as well as the spirit of recent regulations like the EU\'s General Data Protection Regulation (GDPR), BuddyPress 4.0 introduces a suite of tools allowing users and site admins to manage member data and privacy.', 'buddypress' ); ?>
    642                                 </p>
    643 
    644                                 <figure class="bp-hello-alignright">
    645                                         <img class="bp-hello-img-border" src="<?php echo esc_url( buddypress()->plugin_url . 'bp-core/images/data-export.png' ); ?>" alt="<?php esc_attr_e( 'Screenshot of Export Data settings panel', 'buddypress' ); ?>" />
    646                                         <figcaption>
    647                                                 <?php esc_html_e( 'Improved user control over data exports', 'buddypress' ); ?>
    648                                         </figcaption>
    649                                 </figure>
    650 
    651                                 <p><?php esc_html_e( 'The new "Export Data" Settings panel lets users request an export of all BuddyPress data they\'ve created. BuddyPress integrates seamlessly with the data export functionality introduced in WordPress 4.9.8, and BP data is included in exports that are initiated either from the Export Data panel or via WP\'s Tools > Export Personal Data interface.', 'buddypress' ); ?></p>
    652 
    653                                 <p><?php esc_html_e( 'BuddyPress 4.0 also integrates with WordPress 4.9.8\'s Privacy Policy tools. When you create or update your Privacy Policy, BP will suggest text that\'s specifically tailored to the kinds of social data generated on a BuddyPress site. And will prompt registering users to agree to the Privacy Policy, if your theme supports it.', 'buddypress' ); ?></p>
    654 
    655                                 <h2><?php esc_html_e( 'Nouveau template improvements', 'buddypress' ); ?></h2>
    656                                 <p><?php esc_html_e( 'BuddyPress 3.0 introduced a new set of default templates, which we call "Nouveau". In 4.0, we\'ve fixed bugs and smoothed the edges in these templates, including more accessible markup and improved appearance on mobile devices.', 'buddypress' ); ?></p>
    657 
    658                                 <h2><?php esc_html_e( "BuddyPress: leaner, faster, stronger", 'buddypress' ); ?></h2>
    659                                 <p><?php esc_html_e( 'With every BuddyPress version, we strive to make internal improvements to performance and code quality in addition to introducing new features and fixes. In BuddyPress 4.0, we\'ve improved PHP compatibility both in our codebase and in our automated testing tools; we\'ve reworked some automated tests for faster performance; we\'ve ensured compatibility with upcoming changes in WordPress; and we\'ve fixed a number of bugs in the formatting and sending of emails.', 'buddypress' ); ?></p>
    660 
    661                                 <p><em>
    662                                         <?php
    663                                         printf(
    664                                                 __( 'To read the full list of features, fixes, and changes in this version of BuddyPress, <a href="%s">visit Trac</a>.', 'buddypress' ),
    665                                                 esc_url( 'https://buddypress.trac.wordpress.org/query?group=status&milestone=4.0' )
    666                                         );
    667                                         ?>
    668                                 </em></p>
    669 
    670                                 <h2><?php echo esc_html( _x( 'Your feedback', 'screen heading', 'buddypress' ) ); ?></h2>
    671                                 <p>
    672                                         <?php
    673                                         printf(
    674                                                 __( ' How are you using BuddyPress? Receiving your feedback and suggestions for future versions of BuddyPress genuinely motivates and encourages our contributors. Please <a href="%s">share your feedback</a> about this version of BuddyPress on our website. ', 'buddypress' ),
    675                                                 esc_url( 'https://buddypress.org/support/' )
    676                                         );
    677                                         ?>
    678                                 </p>
    679                                 <p><?php esc_html_e( 'Thank you for using BuddyPress! 😊', 'buddypress' ); ?></p>
    680 
    681                                 <br /><br />
    682                         </div>
    683 
    684                         <div class="bp-hello-footer">
     772                        <div id="plugin-information-footer">
    685773                                <div class="bp-hello-social-cta">
    686774                                        <p>
    687775                                                <?php
    688776                                                printf(
    689                                                         _n( 'Built by <a href="%s">%s volunteer</a>.', 'Built by <a href="%s">%s volunteers</a>.', 35, 'buddypress' ),
     777                                                        _n( 'Built with %1$s by <a href="%2$s">%3$d volunteer</a>.', 'Built with %1$s by <a href="%2$s">%3$d volunteers</a>.', 35, 'buddypress' ),
     778                                                        '<span class="dashicons dashicons-heart"></span>',
    690779                                                        esc_url( bp_get_admin_url( 'admin.php?page=bp-credits' ) ),
    691780                                                        number_format_i18n( 35 )
    … …  
    10981187                        'bp-hello-css' => array(
    10991188                                'file'         => "{$url}hello{$min}.css",
    1100                                 'dependencies' => array( 'bp-admin-common-css' ),
     1189                                'dependencies' => array( 'bp-admin-common-css', 'thickbox' ),
    11011190                        ),
    11021191                ) );
    … …  
    11411230                        'bp-hello-js' => array(
    11421231                                'file'         => "{$url}hello{$min}.js",
    1143                                 'dependencies' => array(),
     1232                                'dependencies' => array( 'thickbox', 'bp-api-request' ),
    11441233                                'footer'       => true,
    11451234                        ),
Note: See TracChangeset for help on using the changeset viewer.