Index: src/bp-core/admin/css/common-rtl.css
===================================================================
--- src/bp-core/admin/css/common-rtl.css (revision 12088)
+++ src/bp-core/admin/css/common-rtl.css (working copy)
@@ -16,6 +16,7 @@
2.1 Top level menus
2.2 Settings - Components
2.3 Tools
+ 2.4 Tooltips
3.0 Users
3.1 Users List
3.2 Site Notices
@@ -301,7 +302,77 @@
content: "";
}
+/*
+ * 2.4 Tooltips
+ */
+.bp-tooltip {
+ position: relative;
+}
+.bp-tooltip:after {
+ background: #fff;
+ border: 1px solid #aaa;
+ border-collapse: separate;
+ border-radius: 1px;
+ box-shadow: -1px 1px 0 1px rgba(132, 132, 132, 0.3);
+ color: #000;
+ content: attr(data-bp-tooltip);
+ display: none;
+ font-family: sans-serif;
+ font-size: 11px;
+ font-weight: 400;
+ letter-spacing: normal;
+ line-height: 1.5;
+ margin-top: 10px;
+ max-width: 240px;
+ opacity: 0;
+ padding: 3px 6px;
+ position: absolute;
+ left: 50%;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: none;
+ text-transform: none;
+ top: 100%;
+ -webkit-transform: translateX(-50%);
+ -ms-transform: translateX(-50%);
+ transform: translateX(-50%);
+ -webkit-transition: opacity 2s ease-out;
+ -ms-transition: opacity 2s ease-out;
+ transition: opacity 2s ease-out;
+ white-space: pre;
+ word-wrap: break-word;
+ z-index: 998;
+}
+
+.bp-hello-close .bp-tooltip:after {
+ left: 0;
+ text-align: left;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+}
+
+.bp-hello-social .bp-tooltip:after {
+ bottom: 120%;
+ margin-bottom: 20px;
+ margin-top: 0;
+ top: auto;
+ -webkit-transform: translateX(-15%);
+ -ms-transform: translateX(-15%);
+ transform: translateX(-15%);
+}
+
+.bp-tooltip:hover:after,
+.bp-tooltip:active:after,
+.bp-tooltip:focus:after {
+ display: inline-block;
+ opacity: 1;
+ overflow: visible;
+ text-decoration: none;
+ z-index: 999;
+}
+
/*------------------------------------------------------------------------------
* 3.0 Users
*----------------------------------------------------------------------------*/
Index: src/bp-core/admin/css/common.css
===================================================================
--- src/bp-core/admin/css/common.css (revision 12088)
+++ src/bp-core/admin/css/common.css (working copy)
@@ -16,6 +16,7 @@
2.1 Top level menus
2.2 Settings - Components
2.3 Tools
+ 2.4 Tooltips
3.0 Users
3.1 Users List
3.2 Site Notices
@@ -301,7 +302,77 @@
content: "";
}
+/*
+ * 2.4 Tooltips
+ */
+.bp-tooltip {
+ position: relative;
+}
+.bp-tooltip:after {
+ background: #fff;
+ border: 1px solid #aaa;
+ border-collapse: separate;
+ border-radius: 1px;
+ box-shadow: 1px 1px 0 1px rgba(132, 132, 132, 0.3);
+ color: #000;
+ content: attr(data-bp-tooltip);
+ display: none;
+ font-family: sans-serif;
+ font-size: 11px;
+ font-weight: 400;
+ letter-spacing: normal;
+ line-height: 1.5;
+ margin-top: 10px;
+ max-width: 240px;
+ opacity: 0;
+ padding: 3px 6px;
+ position: absolute;
+ right: 50%;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: none;
+ text-transform: none;
+ top: 100%;
+ -webkit-transform: translateX(50%);
+ -ms-transform: translateX(50%);
+ transform: translateX(50%);
+ -webkit-transition: opacity 2s ease-out;
+ -ms-transition: opacity 2s ease-out;
+ transition: opacity 2s ease-out;
+ white-space: pre;
+ word-wrap: break-word;
+ z-index: 998;
+}
+
+.bp-hello-close .bp-tooltip:after {
+ right: 0;
+ text-align: right;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+}
+
+.bp-hello-social .bp-tooltip:after {
+ bottom: 120%;
+ margin-bottom: 20px;
+ margin-top: 0;
+ top: auto;
+ -webkit-transform: translateX(15%);
+ -ms-transform: translateX(15%);
+ transform: translateX(15%);
+}
+
+.bp-tooltip:hover:after,
+.bp-tooltip:active:after,
+.bp-tooltip:focus:after {
+ display: inline-block;
+ opacity: 1;
+ overflow: visible;
+ text-decoration: none;
+ z-index: 999;
+}
+
/*------------------------------------------------------------------------------
* 3.0 Users
*----------------------------------------------------------------------------*/
Index: src/bp-core/admin/css/hello-rtl.css
===================================================================
--- src/bp-core/admin/css/hello-rtl.css (revision 12088)
+++ src/bp-core/admin/css/hello-rtl.css (working copy)
@@ -37,6 +37,8 @@
}
#bp-hello-container a: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: black;
}
@@ -54,16 +56,15 @@
/*------------------------------------------------------------------------------
* 2.0 - Dashicons
*----------------------------------------------------------------------------*/
-.bp-hello-close a:hover:before {
- transition: all 0.1s ease-in-out;
- color: var(--bp-hello-color-primary);
+.bp-hello-close .button {
+ padding: 5px !important;
}
-.bp-hello-close a.close-modal:before {
+.bp-hello-close .close-modal:before {
content: "\f158";
color: #23282d;
/* wp toolbar */
- font: 400 35px/1 dashicons;
+ font: 400 1.5em/1 dashicons;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -70,6 +71,13 @@
background-image: none !important;
}
+.bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal: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 li a:before {
color: #23282d;
/* wp toolbar */
@@ -81,6 +89,8 @@
}
.bp-hello-social li a: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);
}
@@ -124,7 +134,10 @@
* 3.2 - Modal footer
*/
.bp-hello-footer {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
+ -ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 58px;
max-height: 58px;
@@ -132,6 +145,7 @@
.bp-hello-social-cta,
.bp-hello-social-links {
+ -ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
@@ -177,6 +191,8 @@
*/
#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;
}
@@ -236,10 +252,6 @@
text-align: left;
}
-.bp-hello-close a {
- text-decoration: none;
-}
-
/*
* 4.4 - Content content
*/
@@ -285,7 +297,7 @@
.bp-hello-close {
left: 30px;
}
- .bp-hello-close a.close-modal:before {
+ .bp-hello-close .close-modal:before {
line-height: 0.7;
}
.bp-hello-footer {
Index: src/bp-core/admin/css/hello.css
===================================================================
--- src/bp-core/admin/css/hello.css (revision 12088)
+++ src/bp-core/admin/css/hello.css (working copy)
@@ -37,6 +37,8 @@
}
#bp-hello-container a: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: black;
}
@@ -54,16 +56,15 @@
/*------------------------------------------------------------------------------
* 2.0 - Dashicons
*----------------------------------------------------------------------------*/
-.bp-hello-close a:hover:before {
- transition: all 0.1s ease-in-out;
- color: var(--bp-hello-color-primary);
+.bp-hello-close .button {
+ padding: 5px !important;
}
-.bp-hello-close a.close-modal:before {
+.bp-hello-close .close-modal:before {
content: "\f158";
color: #23282d;
/* wp toolbar */
- font: 400 35px/1 dashicons;
+ font: 400 1.5em/1 dashicons;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -70,6 +71,13 @@
background-image: none !important;
}
+.bp-hello-close .close-modal:focus:before, .bp-hello-close .close-modal: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 li a:before {
color: #23282d;
/* wp toolbar */
@@ -81,6 +89,8 @@
}
.bp-hello-social li a: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);
}
@@ -124,7 +134,10 @@
* 3.2 - Modal footer
*/
.bp-hello-footer {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
+ -ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 58px;
max-height: 58px;
@@ -132,6 +145,7 @@
.bp-hello-social-cta,
.bp-hello-social-links {
+ -ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
@@ -177,6 +191,8 @@
*/
#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;
}
@@ -236,10 +252,6 @@
text-align: right;
}
-.bp-hello-close a {
- text-decoration: none;
-}
-
/*
* 4.4 - Content content
*/
@@ -285,7 +297,7 @@
.bp-hello-close {
right: 30px;
}
- .bp-hello-close a.close-modal:before {
+ .bp-hello-close .close-modal:before {
line-height: 0.7;
}
.bp-hello-footer {
Index: src/bp-core/admin/js/hello.js
===================================================================
--- src/bp-core/admin/js/hello.js (revision 12088)
+++ src/bp-core/admin/js/hello.js (working copy)
@@ -4,40 +4,83 @@
* @since 3.0.0
*/
(function() {
+
+ var bp_element_triggering_modal;
+ var bp_hello_modal = document.getElementById( 'bp-hello-container' );
+ var bp_hello_backdrop = document.getElementById( 'bp-hello-backdrop' );
+
/**
* Open the BuddyPress Hello modal.
*/
var bp_hello_open_modal = function() {
+ // Save focus of element that opened the modal.
+ bp_element_triggering_modal = document.activeElement;
+
document.body.classList.add( 'bp-disable-scroll' );
- // Show.
- document.getElementById( 'bp-hello-backdrop' ).style.display = '';
- document.getElementById( 'bp-hello-container' ).style.display = '';
- };
+ // Manage keyboard focus in modal.
+ bp_hello_modal.addEventListener('keydown', bp_manage_keyboard_focus );
- /**
- * Close the BuddyPress Hello modal.
- */
- var bp_hello_close_modal = function() {
- var backdrop = document.getElementById( 'bp-hello-backdrop' ),
- modal = document.getElementById( 'bp-hello-container' );
+ // Show modal.
+ bp_hello_backdrop.style.display = '';
+ bp_hello_modal.style.display = '';
- document.body.classList.remove( 'bp-disable-scroll' );
+ // Focus elements in bp_hello_modal only.
+ var bp_focus_elements = 'a[href], button';
+ var bp_focus_elements_show = bp_hello_modal.querySelectorAll( bp_focus_elements );
- // Hide.
- modal.parentNode.removeChild( modal );
- backdrop.parentNode.removeChild( backdrop );
+ // Convert NodeList to Array.
+ bp_focus_elements_show = Array.prototype.slice.call( bp_focus_elements_show );
+
+ var bp_modal_first_tab_stop = bp_focus_elements_show[0];
+ var bp_modal_last_tab_stop = bp_focus_elements_show[bp_focus_elements_show.length - 1];
+
+ bp_modal_first_tab_stop.focus();
+
+ function bp_manage_keyboard_focus(e) {
+
+ // Check for TAB key press.
+ if ( e.keyCode === 9 ) {
+
+ // When SHIFT+TAB on first tab stop, go to last tab stop in modal.
+ if ( e.shiftKey ) {
+ if ( document.activeElement === bp_modal_first_tab_stop ) {
+ e.preventDefault();
+ bp_modal_last_tab_stop.focus();
+ }
+ // When TAB reaches last tab stop, go to first tab stop in modal.
+ } else {
+ if ( document.activeElement === bp_modal_last_tab_stop ) {
+ e.preventDefault();
+ bp_modal_first_tab_stop.focus();
+ }
+ }
+
+ }
+
+ // Check for ESCAPE key press.
+ if ( e.keyCode === 27 ) {
+ bp_hello_close_modal();
+ }
+ }
+
+
+ // Hide other panels while modal is open.
+ document.querySelectorAll( '#adminmenumain, #wpcontent, #wpfooter' ).setAttribute( 'aria-hidden', true );
+
+ // Listen for events to close modal.
+ bp_hello_backdrop.addEventListener( 'click', bp_hello_close_modal );
+
};
// Close modal if "X" or background is touched.
document.addEventListener( 'click', function( event ) {
- var backdrop = document.getElementById( 'bp-hello-backdrop' );
- if ( ! backdrop || ! document.getElementById( 'bp-hello-container' ) ) {
+ if ( ! bp_hello_backdrop || ! bp_hello_modal ) {
return;
}
- var backdrop_click = backdrop.contains( event.target ),
+ var backdrop_click = bp_hello_backdrop.contains( event.target ),
modal_close_click = event.target.classList.contains( 'close-modal' );
if ( ! modal_close_click && ! backdrop_click ) {
@@ -45,19 +88,24 @@
}
bp_hello_close_modal();
+
}, false );
- // Close modal if escape key is presssed.
- document.addEventListener( 'keyup', function( event ) {
- if ( event.keyCode === 27 ) {
- if ( ! document.getElementById( 'bp-hello-backdrop' ) || ! document.getElementById( 'bp-hello-container' ) ) {
- return;
- }
+ /**
+ * Close the BuddyPress Hello modal.
+ */
+ var bp_hello_close_modal = function() {
- bp_hello_close_modal();
- }
- }, false );
+ document.body.classList.remove( 'bp-disable-scroll' );
+ // Hide modal and overlay.
+ bp_hello_backdrop.style.display = 'none';
+ bp_hello_modal.style.display = 'none';
+
+ document.querySelectorAll( '#adminmenumain, #wpcontent, #wpfooter' ).setAttribute('aria-hidden', false);
+
+ };
+
// Init modal after the screen's loaded.
if ( document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading' ) {
bp_hello_open_modal();
Index: src/bp-core/admin/sass/hello.scss
===================================================================
--- src/bp-core/admin/sass/hello.scss (revision 12088)
+++ src/bp-core/admin/sass/hello.scss (working copy)
@@ -39,6 +39,8 @@
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);
}
@@ -66,22 +68,29 @@
*----------------------------------------------------------------------------*/
.bp-hello-close {
- a {
+ .button {
+ padding: 5px !important;
+ }
- &:hover:before {
- transition: all 0.1s ease-in-out;
- color: var(--bp-hello-color-primary);
- }
+ .close-modal {
- &.close-modal:before {
+ &:before {
content: "\f158";
color: #23282d; /* wp toolbar */
- font: 400 35px/1 dashicons;
+ 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);
+ }
}
}
@@ -99,6 +108,8 @@
}
&: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);
}
@@ -126,7 +137,7 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 9998; // >= 9990 for main menu
+ z-index: 9998; // > 99999 of wp-adminbar
display: none;
}
@@ -135,7 +146,7 @@
position: fixed;
top: 0;
bottom: 80px;
- z-index: 99999; // >= 99998 for toolbar
+ z-index: 99999; //> 1000003 for BP modal
}
.bp-disable-scroll {
@@ -146,7 +157,10 @@
* 3.2 - Modal footer
*/
.bp-hello-footer {
+ display: -webkit-box;
+ display: -ms-flexbox;
display: flex;
+ -ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 58px;
@@ -155,6 +169,7 @@
.bp-hello-social-cta,
.bp-hello-social-links {
+ -ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
@@ -209,6 +224,8 @@
*/
#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;
}
@@ -275,10 +292,6 @@
top: 20px;
right: 25px;
text-align: right;
-
- a {
- text-decoration: none;
- }
}
/*
@@ -333,7 +346,6 @@
.bp-hello-header {
height: auto;
max-height: inherit;
-
padding: 6px 30px;
}
@@ -340,11 +352,8 @@
.bp-hello-close {
right: 30px;
- a {
-
- &.close-modal:before {
- line-height: 0.7;
- }
+ .close-modal:before {
+ line-height: 0.7;
}
}
Index: src/bp-core/classes/class-bp-admin.php
===================================================================
--- src/bp-core/classes/class-bp-admin.php (revision 12088)
+++ src/bp-core/classes/class-bp-admin.php (working copy)
@@ -557,14 +557,16 @@
-
-
+