Changeset 12458

Timestamp:

09/16/2019 08:38:34 PM (6 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:

• admin/css/hello-rtl.css (modified) (9 diffs)
• admin/css/hello.css (modified) (9 diffs)
• admin/js/hello.js (modified) (2 diffs)
• admin/sass/hello.scss (modified) (12 diffs)
• classes/class-bp-admin.php (modified) (5 diffs)
• images/bp-nouveau-improvements.png (added)
• images/buddypress-blocks-category.png (added)
• images/data-export.png (deleted)
• images/manage-members-interface.png (added)
• images/site-health-buddypress-section.png (added)

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

@@ -10 +10 @@
 2.0 - Dashicons
 3.0 - Elements
-    3.1 - Backdrop and container
-    3.2 - Modal footer
-    3.3 - Modal header
-    3.4 - Modal content
+    3.1 - Modal footer
+    3.2 - Modal content
 4.0 - Content styles
-    4.1 - Backdrop and container
-    4.2 - Footer content
-    4.3 - Header content
-    4.4 - Content content
+    4.1 - Footer content
+    4.2 - Header content
+    4.3 - Content content
 5.0 - Media
 6.0 - Media Queries
@@ -33 +30 @@
 }
 
-#bp-hello-container a {
-    color: var(--bp-hello-color-primary);
-}
-
-#bp-hello-container a:hover {
-    transition: all 0.1s ease-in-out;
-    color: black;
-}
-
-#bp-hello-container .bp-hello-header h1 {
-    line-height: 1.7;
-    font-size: 21px;
-    font-weight: 400;
-}
-
 .bp-hello-content p {
     font-size: 16px;
 }
 
+.bp-hello-content ul,
+.bp-hello-content ol {
+    list-style: inherit;
+}
+
+.bp-hello-content h3 {
+    font-size: 1.1em;
+    font-weight: 500;
+}
+
 /*------------------------------------------------------------------------------
  * 2.0 - Dashicons
  *----------------------------------------------------------------------------*/
-.bp-hello-close .button {
-    padding: 5px !important;
-}
-
-.bp-hello-close .close-modal:before {
-    content: "\f158";
-    color: #23282d;
-    /* wp toolbar */
-    font: 400 1.5em/1 dashicons;
-    speak: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background-image: none !important;
-}
-
-.bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal:hover:before {
-    transition: all 0.1s ease-in-out;
-    color: var(--bp-hello-color-primary);
-}
-
 .bp-hello-social li a:before {
     color: #23282d;
@@ -98 +70 @@
 }
 
+div.dashicons {
+    width: -webkit-fit-content;
+    width: fit-content;
+}
+
+div.dashicons.big {
+    font-size: 128px;
+    display: block;
+    color: var(--bp-hello-color-primary);
+    height: 128px;
+    width: 128px;
+}
+
 /*------------------------------------------------------------------------------
  * 3.0 - Elements
  *----------------------------------------------------------------------------*/
 /*
- * 3.1 - Backdrop and container
- */
-#bp-hello-backdrop {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    z-index: 9998;
-    display: none;
-}
-
-#bp-hello-container {
-    position: fixed;
-    top: 0;
-    bottom: 80px;
-    z-index: 99999;
-}
-
-.bp-disable-scroll {
-    overflow: hidden;
-}
-
-/*
- * 3.2 - Modal footer
- */
-.bp-hello-footer {
+ * 3.1 - Modal footer
+ */
+#plugin-information-footer {
     display: flex;
     flex-wrap: wrap;
-    height: 58px;
-    max-height: 58px;
+    padding: 0 16px;
+    height: auto;
+}
+
+#plugin-information-footer .dashicons-heart {
+    color: #be3631;
 }
 
@@ -157 +122 @@
 
 /*
- * 3.3 - Modal header
- */
-.bp-hello-header {
-    height: 58px;
-    max-height: 58px;
-}
-
-/*
- * 3.4 - Modal content
- */
+ * 3.2 - Modal content
+ */
+#bp-hello-container {
+    display: none;
+}
+
 .bp-hello-content {
     padding: 0 25px;
-    height: calc(100% - 58px);
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
+    padding-bottom: 20px;
+}
+
+#dynamic-content {
+    padding-bottom: 40px;
+    display: none;
+}
+
+#dynamic-content.show {
+    display: block;
+}
+
+.plugin-details-modal #TB_title {
+    /* stylelint-disable-line */
+    height: 0;
+    background: none;
+    border: none;
+}
+
+#TB_window.plugin-details-modal.thickbox-loading:before {
+    /* stylelint-disable-line */
+    z-index: 10;
+    margin-top: 40px;
+    background-color: none;
+}
+
+.bp-hello-aligncenter * {
+    margin: 10px auto;
+}
+
+.bp-hello-alignleft {
+    float: right;
+}
+
+.bp-hello-alignleft:after {
+    content: "";
+    clear: right;
+}
+
+.bp-hello-alignright {
+    float: left;
+}
+
+.bp-hello-alignright:after {
+    content: "";
+    clear: left;
+}
+
+.bp-hello-divider {
+    clear: both;
+    border: none;
+    margin-bottom: 20px;
 }
 
@@ -178 +188 @@
  *----------------------------------------------------------------------------*/
 /*
- * 4.1 - Backdrop and container
- */
-#bp-hello-backdrop {
-    background-color: rgba(0, 0, 0, 0.8);
-    transition: opacity 0.15s ease-out;
-}
-
-#bp-hello-container {
-    background-color: white;
-}
-
-/*
- * 4.2 - Footer content
- */
-.bp-hello-footer {
-    border-radius: 0 0 3px 3px;
-    background-color: white;
-    border-top: 1px solid var(--bp-hello-color-secondary);
-    padding: 6px 25px;
-}
-
-.bp-hello-footer p {
-    font-size: 15px;
-}
-
+ * 4.1 - Footer content
+ */
 .bp-hello-social-cta {
     text-align: right;
@@ -216 +203 @@
 
 /*
- * 4.3 - Header content
- */
-.bp-hello-header {
-    padding: 6px 25px;
-}
-
-.bp-hello-header h1 {
-    width: calc(100% - 51px);
-}
-
-#bp-hello-container .bp-hello-header {
-    border-bottom: 1px solid var(--bp-hello-color-secondary);
-}
-
-.bp-hello-title {
-    text-align: right;
-}
-
-.bp-hello-close {
-    position: absolute;
-    top: 20px;
-    left: 25px;
-    text-align: left;
-}
-
-/*
- * 4.4 - Content content
+ * 4.2 - Header content
+ */
+#plugin-information-title.with-banner {
+    background-image: url(https://ps.w.org/buddypress/assets/banner-772x250.png);
+}
+
+/*
+ * 4.3 - Content content
  */
 .bp-hello-content {
@@ -260 +228 @@
 }
 
+.bp-hello-content .bp-hello-alignleft img,
+.bp-hello-content .bp-hello-alignright img {
+    max-width: 200px;
+}
+
 /*------------------------------------------------------------------------------
  * 6.0 - Media Queries
@@ -267 +240 @@
  */
 @media only screen and (min-width: 1024px) {
-    #bp-hello-backdrop {
-        display: block;
-    }
-    #bp-hello-container {
-        position: fixed;
-        top: 60px;
-        right: var(--bp-hello-container-size);
-        left: var(--bp-hello-container-size);
-        bottom: 30px;
-        z-index: 9999;
-        border-radius: 3px;
-    }
-    #bp-hello-container .bp-hello-header h1 {
-        line-height: inherit;
-    }
-    .bp-hello-header {
-        height: auto;
-        max-height: inherit;
-        padding: 6px 30px;
-    }
-    .bp-hello-close {
-        left: 30px;
-    }
-    .bp-hello-close .close-modal:before {
-        line-height: 0.7;
-    }
-    .bp-hello-footer {
-        position: fixed;
-        right: var(--bp-hello-container-size);
-        left: var(--bp-hello-container-size);
-        bottom: 30px;
-        z-index: 10000;
-        height: auto;
-        max-height: inherit;
-        padding: 6px 30px;
-    }
     .bp-hello-content {
-        height: calc(100% - 90px);
-        padding: 0 30px;
+        padding: 0 30px 20px;
     }
     .bp-hello-content p {
@@ -315 +251 @@
  * 6.2 - Desktop Large
  */
-@media screen and (min-width: 1280px) {
-    #bp-hello-container,
-    .bp-hello-footer {
-        right: calc((100% - 896px) / 2);
-        left: calc((100% - 896px) / 2);
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
+    #plugin-information-title.with-banner {
+        background-image: url(https://ps.w.org/buddypress/assets/banner-1544x500.png);
     }
 }

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

@@ -10 +10 @@
 2.0 - Dashicons
 3.0 - Elements
-    3.1 - Backdrop and container
-    3.2 - Modal footer
-    3.3 - Modal header
-    3.4 - Modal content
+    3.1 - Modal footer
+    3.2 - Modal content
 4.0 - Content styles
-    4.1 - Backdrop and container
-    4.2 - Footer content
-    4.3 - Header content
-    4.4 - Content content
+    4.1 - Footer content
+    4.2 - Header content
+    4.3 - Content content
 5.0 - Media
 6.0 - Media Queries
@@ -33 +30 @@
 }
 
-#bp-hello-container a {
-    color: var(--bp-hello-color-primary);
-}
-
-#bp-hello-container a:hover {
-    transition: all 0.1s ease-in-out;
-    color: black;
-}
-
-#bp-hello-container .bp-hello-header h1 {
-    line-height: 1.7;
-    font-size: 21px;
-    font-weight: 400;
-}
-
 .bp-hello-content p {
     font-size: 16px;
 }
 
+.bp-hello-content ul,
+.bp-hello-content ol {
+    list-style: inherit;
+}
+
+.bp-hello-content h3 {
+    font-size: 1.1em;
+    font-weight: 500;
+}
+
 /*------------------------------------------------------------------------------
  * 2.0 - Dashicons
  *----------------------------------------------------------------------------*/
-.bp-hello-close .button {
-    padding: 5px !important;
-}
-
-.bp-hello-close .close-modal:before {
-    content: "\f158";
-    color: #23282d;
-    /* wp toolbar */
-    font: 400 1.5em/1 dashicons;
-    speak: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background-image: none !important;
-}
-
-.bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal:hover:before {
-    transition: all 0.1s ease-in-out;
-    color: var(--bp-hello-color-primary);
-}
-
 .bp-hello-social li a:before {
     color: #23282d;
@@ -98 +70 @@
 }
 
+div.dashicons {
+    width: -webkit-fit-content;
+    width: fit-content;
+}
+
+div.dashicons.big {
+    font-size: 128px;
+    display: block;
+    color: var(--bp-hello-color-primary);
+    height: 128px;
+    width: 128px;
+}
+
 /*------------------------------------------------------------------------------
  * 3.0 - Elements
  *----------------------------------------------------------------------------*/
 /*
- * 3.1 - Backdrop and container
- */
-#bp-hello-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 9998;
-    display: none;
-}
-
-#bp-hello-container {
-    position: fixed;
-    top: 0;
-    bottom: 80px;
-    z-index: 99999;
-}
-
-.bp-disable-scroll {
-    overflow: hidden;
-}
-
-/*
- * 3.2 - Modal footer
- */
-.bp-hello-footer {
+ * 3.1 - Modal footer
+ */
+#plugin-information-footer {
     display: flex;
     flex-wrap: wrap;
-    height: 58px;
-    max-height: 58px;
+    padding: 0 16px;
+    height: auto;
+}
+
+#plugin-information-footer .dashicons-heart {
+    color: #be3631;
 }
 
@@ -157 +122 @@
 
 /*
- * 3.3 - Modal header
- */
-.bp-hello-header {
-    height: 58px;
-    max-height: 58px;
-}
-
-/*
- * 3.4 - Modal content
- */
+ * 3.2 - Modal content
+ */
+#bp-hello-container {
+    display: none;
+}
+
 .bp-hello-content {
     padding: 0 25px;
-    height: calc(100% - 58px);
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
+    padding-bottom: 20px;
+}
+
+#dynamic-content {
+    padding-bottom: 40px;
+    display: none;
+}
+
+#dynamic-content.show {
+    display: block;
+}
+
+.plugin-details-modal #TB_title {
+    /* stylelint-disable-line */
+    height: 0;
+    background: none;
+    border: none;
+}
+
+#TB_window.plugin-details-modal.thickbox-loading:before {
+    /* stylelint-disable-line */
+    z-index: 10;
+    margin-top: 40px;
+    background-color: none;
+}
+
+.bp-hello-aligncenter * {
+    margin: 10px auto;
+}
+
+.bp-hello-alignleft {
+    float: left;
+}
+
+.bp-hello-alignleft:after {
+    content: "";
+    clear: left;
+}
+
+.bp-hello-alignright {
+    float: right;
+}
+
+.bp-hello-alignright:after {
+    content: "";
+    clear: right;
+}
+
+.bp-hello-divider {
+    clear: both;
+    border: none;
+    margin-bottom: 20px;
 }
 
@@ -178 +188 @@
  *----------------------------------------------------------------------------*/
 /*
- * 4.1 - Backdrop and container
- */
-#bp-hello-backdrop {
-    background-color: rgba(0, 0, 0, 0.8);
-    transition: opacity 0.15s ease-out;
-}
-
-#bp-hello-container {
-    background-color: white;
-}
-
-/*
- * 4.2 - Footer content
- */
-.bp-hello-footer {
-    border-radius: 0 0 3px 3px;
-    background-color: white;
-    border-top: 1px solid var(--bp-hello-color-secondary);
-    padding: 6px 25px;
-}
-
-.bp-hello-footer p {
-    font-size: 15px;
-}
-
+ * 4.1 - Footer content
+ */
 .bp-hello-social-cta {
     text-align: left;
@@ -216 +203 @@
 
 /*
- * 4.3 - Header content
- */
-.bp-hello-header {
-    padding: 6px 25px;
-}
-
-.bp-hello-header h1 {
-    width: calc(100% - 51px);
-}
-
-#bp-hello-container .bp-hello-header {
-    border-bottom: 1px solid var(--bp-hello-color-secondary);
-}
-
-.bp-hello-title {
-    text-align: left;
-}
-
-.bp-hello-close {
-    position: absolute;
-    top: 20px;
-    right: 25px;
-    text-align: right;
-}
-
-/*
- * 4.4 - Content content
+ * 4.2 - Header content
+ */
+#plugin-information-title.with-banner {
+    background-image: url(https://ps.w.org/buddypress/assets/banner-772x250.png);
+}
+
+/*
+ * 4.3 - Content content
  */
 .bp-hello-content {
@@ -260 +228 @@
 }
 
+.bp-hello-content .bp-hello-alignleft img,
+.bp-hello-content .bp-hello-alignright img {
+    max-width: 200px;
+}
+
 /*------------------------------------------------------------------------------
  * 6.0 - Media Queries
@@ -267 +240 @@
  */
 @media only screen and (min-width: 1024px) {
-    #bp-hello-backdrop {
-        display: block;
-    }
-    #bp-hello-container {
-        position: fixed;
-        top: 60px;
-        left: var(--bp-hello-container-size);
-        right: var(--bp-hello-container-size);
-        bottom: 30px;
-        z-index: 9999;
-        border-radius: 3px;
-    }
-    #bp-hello-container .bp-hello-header h1 {
-        line-height: inherit;
-    }
-    .bp-hello-header {
-        height: auto;
-        max-height: inherit;
-        padding: 6px 30px;
-    }
-    .bp-hello-close {
-        right: 30px;
-    }
-    .bp-hello-close .close-modal:before {
-        line-height: 0.7;
-    }
-    .bp-hello-footer {
-        position: fixed;
-        left: var(--bp-hello-container-size);
-        right: var(--bp-hello-container-size);
-        bottom: 30px;
-        z-index: 10000;
-        height: auto;
-        max-height: inherit;
-        padding: 6px 30px;
-    }
     .bp-hello-content {
-        height: calc(100% - 90px);
-        padding: 0 30px;
+        padding: 0 30px 20px;
     }
     .bp-hello-content p {
@@ -315 +251 @@
  * 6.2 - Desktop Large
  */
-@media screen and (min-width: 1280px) {
-    #bp-hello-container,
-    .bp-hello-footer {
-        left: calc((100% - 896px) / 2);
-        right: calc((100% - 896px) / 2);
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
+    #plugin-information-title.with-banner {
+        background-image: url(https://ps.w.org/buddypress/assets/banner-1544x500.png);
     }
 }

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

@@ +1 @@
+/* global bpHelloStrings */
 /**
  * Loads for BuddyPress Hello in wp-admin for query string `hello=buddypress`.
@@ -4 +5 @@
  * @since 3.0.0
  */
-(function() {
+(function( $, bp ) {
+    // Bail if not set
+    if ( typeof bpHelloStrings === 'undefined' ) {
+        return;
+    }
+
     /**
      * Open the BuddyPress Hello modal.
      */
-    var bp_hello_open_modal = function() {
-        var backdrop = document.getElementById( 'bp-hello-backdrop' ),
-            modal = document.getElementById( 'bp-hello-container' );
+    var bpHelloOpenModal = function() {
+        if ( 'function' !== typeof window.tb_show ) {
+            return false;
+        }
 
-        document.body.classList.add( 'bp-disable-scroll' );
+        window.tb_show( 'BuddyPress', '#TB_inline?inlineId=bp-hello-container' );
 
-        // Show modal and overlay.
-        backdrop.style.display = '';
-        modal.style.display    = '';
+        $( '#TB_window' ).attr( {
+                            'role': 'dialog',
+                            'aria-label': bpHelloStrings.modalLabel
+                        } )
+                        .addClass( 'plugin-details-modal' )
+                        .removeClass( 'thickbox-loading' );
 
-        // Focus the "X" so bp_hello_handle_keyboard_events() works.
-        var focus_target = modal.querySelectorAll( 'a[href], button' );
-        focus_target     = Array.prototype.slice.call( focus_target );
-        focus_target[0].focus();
-
-        // Events.
-        modal.addEventListener( 'keydown', bp_hello_handle_keyboard_events );
-        backdrop.addEventListener( 'click', bp_hello_close_modal );
+        $( '#TB_ajaxContent' ).prop( 'style', 'height: 100%; width: auto; padding: 0; border: none;' );
     };
 
     /**
-     * Close modal if "X" or background is touched.
+     * Prints an error message.
      *
-     * @param {Event} event - A click event.
+     * @param {string} message The error message to display.
      */
-    document.addEventListener( 'click', function( event ) {
-        var backdrop = document.getElementById( 'bp-hello-backdrop' );
-        if ( ! backdrop || ! document.getElementById( 'bp-hello-container' ) ) {
-            return;
+    var printErrorMessage = function( message ) {
+        if ( ! message ) {
+            message = bpHelloStrings.pageNotFound;
         }
 
-        var backdrop_click    = backdrop.contains( event.target ),
-            modal_close_click = event.target.classList.contains( 'close-modal' );
-
-        if ( ! modal_close_click && ! backdrop_click ) {
-            return;
-        }
-
-        bp_hello_close_modal();
-    }, false );
-
-    /**
-     * Close the Hello modal.
-     */
-    var bp_hello_close_modal = function() {
-        var backdrop = document.getElementById( 'bp-hello-backdrop' ),
-            modal = document.getElementById( 'bp-hello-container' );
-
-        document.body.classList.remove( 'bp-disable-scroll' );
-
-        // Remove modal and overlay.
-        modal.parentNode.removeChild( modal );
-        backdrop.parentNode.removeChild( backdrop );
+        $( '#dynamic-content' ).html(
+            $('<div></div>' ).prop( 'id', 'message' )
+                    .addClass( 'notice notice-error error' )
+                    .html(
+                        $( '<p></p>' ).html( message )
+                    )
+        );
     };
 
-    /**
-     * Restrict keyboard focus to elements within the BuddyPress Hello modal.
-     *
-     * @param {Event} event - A keyboard focus event.
-     */
-    var bp_hello_handle_keyboard_events = function( event ) {
-        var modal = document.getElementById( 'bp-hello-container' ),
-            focus_targets = Array.prototype.slice.call(
-                modal.querySelectorAll( 'a[href], button' )
-            ),
-            first_tab_stop = focus_targets[0],
-            last_tab_stop  = focus_targets[ focus_targets.length - 1 ];
+    // Listen to Tab Menu clicks to display the different screens.
+    $( '#plugin-information-tabs').on( 'click', 'a', function( event ) {
+        event.preventDefault();
 
-        // Check for TAB key press.
-        if ( event.keyCode !== 9 ) {
-            return;
+        var anchor = $( event.currentTarget ), target = $( '#dynamic-content' );
+
+        if ( anchor.hasClass( 'dynamic' ) ) {
+            $( '#top-features' ).hide();
+            target.html( '' );
+            target.addClass( 'show' );
+
+            $( '#TB_window' ).addClass( 'thickbox-loading' );
+
+            bp.apiRequest( {
+                url: anchor.data( 'endpoint' ),
+                type: 'GET',
+                beforeSend: function( xhr, settings ) {
+                    settings.url = settings.url.replace( '&_wpnonce=none', '' );
+                },
+                data: {
+                    context: 'view',
+                    slug: anchor.data( 'slug' ),
+                    _wpnonce: 'none'
+                }
+            } ).done( function( data ) {
+                var page = _.first( data );
+
+                if ( page && page.content ) {
+                    target.html( page.content.rendered );
+                } else {
+                    printErrorMessage();
+                }
+
+            } ).fail( function( error ) {
+                if ( ! error || ! error.message ) {
+                    return false;
+                }
+
+                printErrorMessage( error.message );
+
+            } ).always( function() {
+                $( '#TB_window' ).removeClass( 'thickbox-loading' );
+            } );
+
+        } else {
+            $( '#top-features' ).show();
+            target.html( '' );
+            target.removeClass( 'show' );
         }
-
-        // When SHIFT+TAB on first tab stop, go to last tab stop in modal.
-        if ( event.shiftKey && document.activeElement === first_tab_stop ) {
-            event.preventDefault();
-            last_tab_stop.focus();
-
-        // When TAB reaches last tab stop, go to first tab stop in modal.
-        } else if ( document.activeElement === last_tab_stop ) {
-            event.preventDefault();
-            first_tab_stop.focus();
-        }
-    };
-
-    /**
-     * Close modal if escape key is presssed.
-     *
-     * @param {Event} event - A keyboard focus event.
-     */
-    document.addEventListener( 'keyup', function( event ) {
-        if ( event.keyCode === 27 ) {
-            if ( ! document.getElementById( 'bp-hello-backdrop' ) || ! document.getElementById( 'bp-hello-container' ) ) {
-                return;
-            }
-
-            bp_hello_close_modal();
-        }
-    }, false );
+    } );
 
     // Init modal after the screen's loaded.
-    if ( document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading' ) {
-        bp_hello_open_modal();
-    } else {
-        document.addEventListener( 'DOMContentLoaded', bp_hello_open_modal );
-    }
-}());
+    $( document ).ready( function() {
+        bpHelloOpenModal();
+    } );
+
+}( jQuery, window.bp || {} ) );

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

@@ -10 +10 @@
 2.0 - Dashicons
 3.0 - Elements
-    3.1 - Backdrop and container
-    3.2 - Modal footer
-    3.3 - Modal header
-    3.4 - Modal content
+    3.1 - Modal footer
+    3.2 - Modal content
 4.0 - Content styles
-    4.1 - Backdrop and container
-    4.2 - Footer content
-    4.3 - Header content
-    4.4 - Content content
+    4.1 - Footer content
+    4.2 - Header content
+    4.3 - Content content
 5.0 - Media
 6.0 - Media Queries
@@ -34 +31 @@
 }
 
-#bp-hello-container {
-
-    a {
-        color: var(--bp-hello-color-primary);
-
-        &:hover {
-            -webkit-transition: all 0.1s ease-in-out;
-            -o-transition: all 0.1s ease-in-out;
-            transition: all 0.1s ease-in-out;
-            color: rgb(0, 0, 0);
-        }
-    }
-
-    .bp-hello-header {
-
-        h1 {
-            line-height: 1.7;
-            font-size: 21px;
-            font-weight: 400;
-        }
-    }
-}
-
 .bp-hello-content {
 
@@ -62 +36 @@
         font-size: 16px;
     }
+
+    ul,
+    ol {
+        list-style: inherit;
+    }
+
+    h3 {
+        font-size: 1.1em;
+        font-weight: 500;
+    }
 }
 
@@ -67 +51 @@
  * 2.0 - Dashicons
  *----------------------------------------------------------------------------*/
-.bp-hello-close {
-
-    .button {
-        padding: 5px !important;
-    }
-
-    .close-modal {
-
-        &:before {
-            content: "\f158";
-            color: #23282d; /* wp toolbar */
-            font: 400 1.5em/1 dashicons;
-            speak: none;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            background-image: none !important;
-        }
-
-        &:focus:before,
-        &:hover:before {
-            -webkit-transition: all 0.1s ease-in-out;
-            -o-transition: all 0.1s ease-in-out;
-            transition: all 0.1s ease-in-out;
-            color: var(--bp-hello-color-primary);
-        }
-    }
-}
-
 .bp-hello-social {
 
@@ -125 +81 @@
 }
 
+div.dashicons {
+
+    width: fit-content;
+
+    &.big {
+        font-size: 128px;
+        display: block;
+        color: var(--bp-hello-color-primary);
+        height: 128px;
+        width: 128px;
+    }
+}
+
 /*------------------------------------------------------------------------------
  * 3.0 - Elements
@@ -130 +99 @@
 
 /*
- * 3.1 - Backdrop and container
- */
-#bp-hello-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 9998;
-
-    display: none;
-}
-
-#bp-hello-container {
-    position: fixed;
-    top: 0;
-    bottom: 80px;
-    z-index: 99999;
-}
-
-.bp-disable-scroll {
-    overflow: hidden;
-}
-
-/*
- * 3.2 - Modal footer
- */
-.bp-hello-footer {
-    display: -webkit-box;
-    display: -ms-flexbox;
+ * 3.1 - Modal footer
+ */
+#plugin-information-footer {
+
     display: flex;
-    -ms-flex-wrap: wrap;
     flex-wrap: wrap;
-
-    height: 58px;
-    max-height: 58px;
+    padding: 0 16px;
+    height: auto;
+
+    .dashicons-heart {
+        color: #be3631;
+    }
 }
 
@@ -197 +142 @@
 
 /*
- * 3.3 - Modal header
- */
-.bp-hello-header {
-    height: 58px;
-    max-height: 58px;
-}
-
-/*
- * 3.4 - Modal content
- */
+ * 3.2 - Modal content
+ */
+
+#bp-hello-container {
+    display: none;
+}
+
 .bp-hello-content {
     padding: 0 25px;
-
-    // Force scrolling.
-    height: calc(100% - 58px);
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
+    padding-bottom: 20px;
+}
+
+#dynamic-content {
+    padding-bottom: 40px;
+    display: none;
+
+    &.show {
+        display: block;
+    }
+}
+
+.plugin-details-modal #TB_title { /* stylelint-disable-line */
+    height: 0;
+    background: none;
+    border: none;
+}
+
+#TB_window.plugin-details-modal.thickbox-loading:before { /* stylelint-disable-line */
+    z-index: 10;
+    margin-top: 40px;
+    background-color: none;
+}
+
+.bp-hello-aligncenter * {
+    margin: 10px auto;
+}
+
+.bp-hello-alignleft {
+    float: left;
+
+    &:after {
+        content: "";
+        clear: left;
+    }
+}
+
+.bp-hello-alignright {
+    float: right;
+
+    &:after {
+        content: "";
+        clear: right;
+    }
+}
+
+.bp-hello-divider {
+    clear: both;
+    border: none;
+    margin-bottom: 20px;
 }
 
@@ -221 +208 @@
 
 /*
- * 4.1 - Backdrop and container
- */
-#bp-hello-backdrop {
-    background-color: rgba(0, 0, 0, 0.8);
-    -webkit-transition: opacity 0.15s ease-out;
-    -o-transition: opacity 0.15s ease-out;
-    transition: opacity 0.15s ease-out;
-}
-
-#bp-hello-container {
-    background-color: rgb(255, 255, 255);
-}
-
-/*
- * 4.2 - Footer content
- */
-.bp-hello-footer {
-    border-radius: 0 0 3px 3px;
-    background-color: rgb(255, 255, 255);
-    border-top: 1px solid var(--bp-hello-color-secondary);
-    padding: 6px 25px;
-
-    p {
-        font-size: 15px;
-    }
-}
-
+ * 4.1 - Footer content
+ */
 .bp-hello-social-cta {
     text-align: left;
@@ -267 +229 @@
 
 /*
- * 4.3 - Header content
- */
-.bp-hello-header {
-    padding: 6px 25px;
-
-    h1 {
-        width: calc(100% - 51px);  // Approx. width of "X" button block.
-    }
-}
-
-#bp-hello-container {
-
-    .bp-hello-header {
-        border-bottom: 1px solid var(--bp-hello-color-secondary);
-    }
-}
-
-.bp-hello-title {
-    text-align: left;
-}
-
-.bp-hello-close {
-    position: absolute;
-    top: 20px;
-    right: 25px;
-    text-align: right;
-}
-
-/*
- * 4.4 - Content content
+ * 4.2 - Header content
+ */
+#plugin-information-title.with-banner {
+    background-image: url(https://ps.w.org/buddypress/assets/banner-772x250.png);
+}
+
+/*
+ * 4.3 - Content content
  */
 .bp-hello-content {
@@ -315 +255 @@
         width: 100%;
     }
+
+    .bp-hello-alignleft img,
+    .bp-hello-alignright img {
+        max-width: 200px;
+    }
 }
 
@@ -326 +271 @@
 @media only screen and (min-width: 1024px) {
 
-    #bp-hello-backdrop {
-        display: block;
-    }
-
-    #bp-hello-container {
-        position: fixed;
-        top: 60px;
-        left: var(--bp-hello-container-size);
-        right: var(--bp-hello-container-size);
-        bottom: 30px;
-        z-index: 9999;
-
-        border-radius: 3px;
-
-        .bp-hello-header {
-
-            h1 {
-                line-height: inherit;
-            }
-        }
-    }
-
-    .bp-hello-header {
-        height: auto;
-        max-height: inherit;
-        padding: 6px 30px;
-    }
-
-    .bp-hello-close {
-        right: 30px;
-
-        .close-modal:before {
-            line-height: 0.7;
-        }
-    }
-
-    .bp-hello-footer {
-        position: fixed; // Fixed position above "content" div.
-        left: var(--bp-hello-container-size);
-        right: var(--bp-hello-container-size);
-        bottom: 30px;
-        z-index: 10000; // See #bp-hello-backdrop
-
-        height: auto;
-        max-height: inherit;
-
-        padding: 6px 30px;
-    }
-
     .bp-hello-content {
-        // Very very approx. height of header and footer.
-        height: calc(100% - 90px);
-        padding: 0 30px;
-
-        p {
-            font-size: 14px;
-        }
+        padding: 0 30px 20px;
+    }
+
+    .bp-hello-content p {
+        font-size: 14px;
     }
 }
@@ -389 +283 @@
  * 6.2 - Desktop Large
  */
-@media screen and (min-width: 1280px) {
-
-    #bp-hello-container,
-    .bp-hello-footer {
-        // Approx. max-width of modal at Desktop Medium size.
-        left: calc((100% - 896px) / 2);
-        right: calc((100% - 896px) / 2);
-    }
-}
+@media only screen and ( -webkit-min-device-pixel-ratio: 1.5 ) {
+
+    #plugin-information-title.with-banner {
+        background-image: url(https://ps.w.org/buddypress/assets/banner-1544x500.png);
+    }
+}

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

@@ -537 +537 @@
         wp_enqueue_style( 'bp-admin-common-css' );
 
-        // BuddyPress Hello
+        // BuddyPress Hello.
         if ( 0 === strpos( get_current_screen()->id, 'dashboard' ) && ! empty( $_GET['hello'] ) && $_GET['hello'] === 'buddypress' ) {
             wp_enqueue_style( 'bp-hello-css' );
             wp_enqueue_script( 'bp-hello-js' );
+            wp_localize_script( 'bp-hello-js', 'bpHelloStrings', array(
+                'pageNotFound' => __( 'Sorry, the page you requested was not found.', 'buddypress' ),
+                'modalLabel'   => __( 'Hello BuddyPress', 'buddypress' ),
+            ) );
         }
     }
@@ -547 +551 @@
      * Registers BuddyPress's suggested privacy policy language.
      *
-     * @since 3.x.y
+     * @since 4.0.0
      */
     public function add_privacy_policy_content() {
@@ -618 +622 @@
             return;
         }
+
+        // Get BuddyPress stable version.
+        $version      =  preg_replace( '/-.*/', '', bp_get_version() );
+        $version_slug = 'version-' . str_replace( '.', '-', $version );
     ?>
 
-        <div id="bp-hello-backdrop" style="display: none;">
-        </div>
-
-        <div id="bp-hello-container" role="dialog" aria-labelledby="bp-hello-title" style="display: none;">
-            <div class="bp-hello-header" role="document">
-                <div class="bp-hello-close">
-                    <button type="button" class="close-modal button bp-tooltip" data-bp-tooltip="<?php esc_attr_e( 'Close pop-up', 'buddypress' ); ?>">
-                        <span class="screen-reader-text"><?php esc_html_e( 'Close pop-up', 'buddypress' ); ?></span>
-                    </button>
+        <div id="bp-hello-container">
+            <div id="plugin-information-scrollable">
+                <div id='plugin-information-title' class="with-banner">
+                    <div class='vignette'></div>
+                    <h2>
+                        <?php printf(
+                            /* translators: %s is the placehoder for the BuddyPress version number. */
+                            esc_html__( 'BuddyPress %s', 'buddypress' ),
+                            $version
+                        ); ?>
+                    </h2>
                 </div>
-
-                <div class="bp-hello-title">
-                    <h1 id="bp-hello-title" tabindex="-1"><?php echo esc_html( _x( 'New in BuddyPress', 'section heading', 'buddypress' ) ); ?></h1>
+                <div id="plugin-information-tabs">
+                    <a name="whats-new" href="#whats-new" class="current"><?php esc_html_e( 'What\'s new?', 'buddypress' ); ?></a>
+                    <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>
+                    <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>
+                </div>
+
+                <div class="bp-hello-content">
+                    <div id="dynamic-content"></div>
+                    <div id="top-features">
+                        <h2><?php esc_html_e( 'Introducing the BP REST API', 'buddypress' ); ?></h2>
+                        <figure class="bp-hello-alignleft">
+                            <div class="dashicons dashicons-rest-api big"></div>
+                        </figure>
+                        <p>
+                            <?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' ); ?>
+                        </p>
+                        <p>
+                            <?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' ); ?>
+                            <?php printf(
+                                /* translators: %s is the placehoder for the link to the BP REST API documentation site. */
+                                esc_html__( 'Ready to get started with development? Check out the %s.', 'buddypress' ),
+                                sprintf(
+                                    '<a href="%1$s">%2$s</a>',
+                                    esc_url( 'https://developer.buddypress.org/bp-rest-api/' ),
+                                    esc_html__( 'BP REST API reference', 'buddypress' )
+                                )
+                            ); ?>
+                        </p>
+
+                        <hr class="bp-hello-divider"/>
+
+                        <h2><?php esc_html_e( 'A new interface for managing group members.', 'buddypress' ); ?></h2>
+                        <p>
+                            <?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' ); ?>
+                        </p>
+                        <figure class="bp-hello-aligncenter">
+                            <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' ); ?>" />
+                        </figure>
+                        <p>
+                            <?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' ); ?>
+                        </p>
+
+                        <hr class="bp-hello-divider"/>
+
+                        <h2><?php esc_html_e( 'Improved Group invites and membership requests.', 'buddypress' ); ?></h2>
+                        <figure class="bp-hello-alignright">
+                            <div class="dashicons dashicons-buddicons-groups big"></div>
+                        </figure>
+                        <p>
+                            <?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' ); ?>
+                        </p>
+                        <p>
+                            <?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' ); ?>
+                            <?php printf(
+                                /* translators: %s is the placehoder for the link to the BP Invitations API development note. */
+                                esc_html__( 'Read more about the %s.', 'buddypress' ),
+                                sprintf(
+                                    '<a href="%1$s">%2$s</a>',
+                                    esc_url( 'https://bpdevel.wordpress.com/2019/09/16/new-invitations-api-coming-in-buddypress-5-0/' ),
+                                    esc_html__( 'BP Invitations API', 'buddypress' )
+                                )
+                            ); ?>
+                        </p>
+
+                        <hr class="bp-hello-divider"/>
+
+                        <h2><?php esc_html_e( 'Help our support volunteers help you.', 'buddypress' ); ?></h2>
+                        <p>
+                            <?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' ); ?>
+                        </p>
+                        <figure class="bp-hello-aligncenter">
+                            <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' ); ?>" />
+                        </figure>
+                        <p>
+                            <?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' ); ?>
+                        </p>
+
+                        <hr class="bp-hello-divider"/>
+
+                        <h2><?php esc_html_e( 'Improved integrations with WordPress', 'buddypress' ); ?></h2>
+                        <figure class="bp-hello-aligncenter">
+                            <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' ); ?>" />
+                        </figure>
+
+                        <p>
+                            <?php esc_html_e( 'In BuddyPress 5.0.0, the BP Nouveau template pack looks better than ever with the Twenty Nineteen theme.', 'buddypress' ); ?>
+                            <?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' ); ?>
+                        </p>
+
+                        <p>
+                            <strong><?php esc_html_e( 'BuddyPress Blocks now have their own category into the Block Editor.', 'buddypress' ); ?></strong>
+                        </p>
+                        <figure class="bp-hello-aligncenter">
+                            <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' ); ?>" />
+                        </figure>
+                        <p>
+                            <?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' ); ?>
+                            <?php printf(
+                                /* translators: %s is the placehoder for the link to the blocks category development note. */
+                                esc_html__( 'Read more about this feature in the %s.', 'buddypress' ),
+                                sprintf(
+                                    '<a href="%1$s">%2$s</a>',
+                                    esc_url( 'https://bpdevel.wordpress.com/2019/07/31/a-category-to-store-your-buddypress-blocks/' ),
+                                    esc_html__( 'development note', 'buddypress' )
+                                )
+                            ); ?>
+                        </p>
+
+                        <hr class="bp-hello-divider"/>
+
+                        <h2><?php echo esc_html( _x( 'Your feedback', 'screen heading', 'buddypress' ) ); ?></h2>
+                        <p>
+                            <?php
+                            printf(
+                                /* translators: %s is the placehoder for the link to BuddyPress support forums. */
+                                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' ),
+                                sprintf(
+                                    '<a href="%1$s">%2$s</a>',
+                                    esc_url( 'https://buddypress.org/support/' ),
+                                    esc_html__( 'share your feedback', 'buddypress' )
+                                )
+                            );
+                            ?>
+                        </p>
+                        <p><?php esc_html_e( 'Thank you for using BuddyPress! 😊', 'buddypress' ); ?></p>
+
+                        <br /><br />
+                    </div>
                 </div>
             </div>
-
-            <div class="bp-hello-content">
-                <h2><?php esc_html_e( 'New tools for data control and privacy', 'buddypress' ); ?></h2>
-                <p>
-                    <?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' ); ?>
-                </p>
-
-                <figure class="bp-hello-alignright">
-                    <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' ); ?>" />
-                    <figcaption>
-                        <?php esc_html_e( 'Improved user control over data exports', 'buddypress' ); ?>
-                    </figcaption>
-                </figure>
-
-                <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>
-
-                <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>
-
-                <h2><?php esc_html_e( 'Nouveau template improvements', 'buddypress' ); ?></h2>
-                <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>
-
-                <h2><?php esc_html_e( "BuddyPress: leaner, faster, stronger", 'buddypress' ); ?></h2>
-                <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>
-
-                <p><em>
-                    <?php
-                    printf(
-                        __( 'To read the full list of features, fixes, and changes in this version of BuddyPress, <a href="%s">visit Trac</a>.', 'buddypress' ),
-                        esc_url( 'https://buddypress.trac.wordpress.org/query?group=status&milestone=4.0' )
-                    );
-                    ?>
-                </em></p>
-
-                <h2><?php echo esc_html( _x( 'Your feedback', 'screen heading', 'buddypress' ) ); ?></h2>
-                <p>
-                    <?php
-                    printf(
-                        __( ' 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' ),
-                        esc_url( 'https://buddypress.org/support/' )
-                    );
-                    ?>
-                </p>
-                <p><?php esc_html_e( 'Thank you for using BuddyPress! 😊', 'buddypress' ); ?></p>
-
-                <br /><br />
-            </div>
-
-            <div class="bp-hello-footer">
+            <div id="plugin-information-footer">
                 <div class="bp-hello-social-cta">
                     <p>
                         <?php
                         printf(
-                            _n( 'Built by <a href="%s">%s volunteer</a>.', 'Built by <a href="%s">%s volunteers</a>.', 35, 'buddypress' ),
+                            _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' ),
+                            '<span class="dashicons dashicons-heart"></span>',
                             esc_url( bp_get_admin_url( 'admin.php?page=bp-credits' ) ),
                             number_format_i18n( 35 )
@@ -1098 +1187 @@
             'bp-hello-css' => array(
                 'file'         => "{$url}hello{$min}.css",
-                'dependencies' => array( 'bp-admin-common-css' ),
+                'dependencies' => array( 'bp-admin-common-css', 'thickbox' ),
             ),
         ) );
@@ -1141 +1230 @@
             'bp-hello-js' => array(
                 'file'         => "{$url}hello{$min}.js",
-                'dependencies' => array(),
+                'dependencies' => array( 'thickbox', 'bp-api-request' ),
                 'footer'       => true,
             ),