From 3d22a934923ec083cbe47e804782ffc634da7869 Mon Sep 17 00:00:00 2001 From: annrra Date: Mon, 27 Jan 2025 19:54:47 +0200 Subject: [PATCH] [PRJ-59] Invites form validation + skeleton loader template --- .../bp-nouveau/readylaunch/css/main.css | 102 ++++++++++- .../readylaunch/css/sass/elements/_forms.scss | 4 + .../readylaunch/css/sass/elements/_modal.scss | 13 +- .../css/sass/elements/_pagination.scss | 9 +- .../readylaunch/css/sass/layout/_common.scss | 107 +++++++++++ .../readylaunch/css/sass/layout/_widgets.scss | 7 +- .../readylaunch/js/bb-readylaunch-members.js | 45 +++++ .../readylaunch/js/buddypress-nouveau.js | 169 ------------------ .../bp-nouveau/readylaunch/members/index.php | 19 +- 9 files changed, 289 insertions(+), 186 deletions(-) diff --git a/src/bp-templates/bp-nouveau/readylaunch/css/main.css b/src/bp-templates/bp-nouveau/readylaunch/css/main.css index f1a43cd2f2..17587df563 100644 --- a/src/bp-templates/bp-nouveau/readylaunch/css/main.css +++ b/src/bp-templates/bp-nouveau/readylaunch/css/main.css @@ -1291,6 +1291,10 @@ button[data-balloon] { padding-right: var(--bb-rl-space-500); } +.bb-rl-form-field-wrapper .bb-rl-input-field.bb-rl-input-field--error { + border: 1px solid var(--bb-rl-border-danger-secondary-color); +} + .bb-rl-form-field-wrapper .bb-rl-textarea-field { border: 1px solid var(--bb-rl-border-tertiary-color); border-radius: 6px; @@ -1345,6 +1349,7 @@ button[data-balloon] { .bb-rl-modal-header .bb-rl-modal-close-button { margin-left: auto; line-height: 1; + color: var(--bb-rl-icon-primary-color); } .bb-rl-modal-content { @@ -1484,11 +1489,10 @@ button[data-balloon] { .bb-rl-container-inner .bp-pagination > .bp-pagination-links .prev::after, .bb-rl-container-inner .bp-pagination > .bp-pagination-links .next::after { - font-size: var(--font-size-sm); + font-size: var(--font-size-base); content: ""; font-weight: 400; font-family: bb-icons-rl; - font-size: 16px; font-style: normal; line-height: 1; position: relative; @@ -2441,6 +2445,100 @@ body.admin-bar .bb-rl-left-panel { width: 100%; } +.bb-rl-skeleton-grid { + display: flex; + flex-flow: row wrap; + gap: var(--bb-rl-space-200); +} + +.has-sidebar .bb-rl-skeleton-grid.grid .bb-rl-skeleton-grid-block { + flex: 0 0 calc(33.33% - (var(--bb-rl-space-200) * 2 / 3)); + max-width: calc(33.33% - (var(--bb-rl-space-200) * 2 / 3)); +} + +.bb-rl-skeleton-grid.grid .bb-rl-skeleton-grid-block { + flex: 0 0 calc(25% - (var(--bb-rl-space-200) * 3 / 4)); + max-width: calc(25% - (var(--bb-rl-space-200) * 3 / 4)); +} + +.bb-rl-skeleton-grid:not(.grid) .bb-rl-skeleton-grid-block { + flex: 0 0 100%; + max-width: 100%; +} + +.bb-rl-skeleton-grid-block { + height: 100%; + border-radius: var(--bb-rl-radius-lg); + background-color: var(--bb-rl-background-color); + border: 1px solid var(--bb-rl-border-secondary-color); + padding: var(--bb-rl-space-400) var(--bb-rl-space-300); + display: flex; + align-items: center; + gap: var(--bb-rl-space-200); +} + +.bb-rl-skeleton-avatar { + display: inline-block; + width: 104px; + height: 104px; + border-radius: 50%; + background-color: var(--bb-rl-background-secondary-hover-color); +} + +.bb-rl-skeleton-data-bit { + display: block; + background-color: var(--bb-rl-background-secondary-hover-color); + border-radius: var(--bb-rl-radius-sm); + height: var(--bb-rl-space-200); +} + +.bb-rl-skeleton-data { + flex: 1; +} + +.bb-rl-skeleton-data .bb-rl-skeleton-data-bit { + margin: 6px 0; +} + +.bb-rl-skeleton-data .bb-rl-skeleton-data-bit:nth-of-type(1) { + width: 30%; + max-width: 92px; +} + +.bb-rl-skeleton-data .bb-rl-skeleton-data-bit:nth-of-type(2) { + width: 45%; + max-width: 186px; +} + +.bb-rl-skeleton-data .bb-rl-skeleton-data-bit:nth-of-type(3) { + width: 80%; + max-width: 186px; + display: none; +} + +.bb-rl-skeleton-footer { + display: flex; + align-items: center; + flex: 0 0 33.33%; + gap: var(--bb-rl-space-200); + justify-content: flex-end; +} + +.bb-rl-skeleton-footer .bb-rl-skeleton-data-bit:nth-of-type(1) { + width: 50%; + max-width: 72px; +} + +.bb-rl-skeleton-footer .bb-rl-skeleton-data-bit:nth-of-type(2) { + width: 20%; + max-width: 24px; +} + +.bb-rl-skeleton-footer .bb-rl-skeleton-data-bit:nth-of-type(3) { + width: 20%; + max-width: 24px; +} + .bb-rl-widget-sidebar .widget { background-color: var(--bb-rl-background-color); border: 1px solid var(--bb-rl-border-secondary-color); diff --git a/src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_forms.scss b/src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_forms.scss index 0953919892..50ed3c81f1 100644 --- a/src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_forms.scss +++ b/src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_forms.scss @@ -136,6 +136,10 @@ background-repeat: no-repeat; padding-right: var(--bb-rl-space-500); } + + &.bb-rl-input-field--error { + border: 1px solid var(--bb-rl-border-danger-secondary-color); + } } .bb-rl-textarea-field { diff --git a/src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_modal.scss b/src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_modal.scss index add48f3f85..3d0237a047 100644 --- a/src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_modal.scss +++ b/src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_modal.scss @@ -44,6 +44,7 @@ .bb-rl-modal-close-button { margin-left: auto; line-height: 1; + color: var(--bb-rl-icon-primary-color); } } @@ -70,7 +71,7 @@ } .bb-readylaunch-template { - + .modal-mask { position: fixed; z-index: 999991; @@ -107,13 +108,13 @@ align-items: center; border-bottom: 1px solid var(--bb-rl-border-secondary-color); padding: var(--bb-rl-space-200) var(--bb-rl-space-300); - + h4 { margin: 0; - + @include bb-rl-base-heading-bolder; } - + .mfp-close { margin-left: auto; line-height: 1; @@ -132,12 +133,12 @@ > p { margin-bottom: var(--bb-rl-space-100); } - + > div, > ul { color: var(--bb-rl-text-secondary-color); } - + > ul { padding-left: var(--bb-rl-space-300); margin-bottom: var(--bb-rl-space-200); diff --git a/src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_pagination.scss b/src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_pagination.scss index af577e6def..858512d17d 100644 --- a/src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_pagination.scss +++ b/src/bp-templates/bp-nouveau/readylaunch/css/sass/elements/_pagination.scss @@ -38,13 +38,12 @@ font-size: var(--font-size-sm); content: attr(data-bb-rl-label); } - + &::after { - font-size: var(--font-size-sm); + font-size: var(--font-size-base); content: ""; font-weight: 400; font-family: bb-icons-rl; - font-size: 16px; font-style: normal; line-height: 1; position: relative; @@ -55,7 +54,7 @@ .prev { flex-direction: row-reverse; margin-right: var(--bb-rl-space-500); - + &::after { content: "\e138"; } @@ -63,7 +62,7 @@ .next { margin-left: var(--bb-rl-space-500); - + &::after { content: "\e13a"; } diff --git a/src/bp-templates/bp-nouveau/readylaunch/css/sass/layout/_common.scss b/src/bp-templates/bp-nouveau/readylaunch/css/sass/layout/_common.scss index e41f703757..5b134acea2 100644 --- a/src/bp-templates/bp-nouveau/readylaunch/css/sass/layout/_common.scss +++ b/src/bp-templates/bp-nouveau/readylaunch/css/sass/layout/_common.scss @@ -100,3 +100,110 @@ } } } + +.bb-rl-skeleton-grid { + display: flex; + flex-flow: row wrap; + gap: var(--bb-rl-space-200); + + &.grid { + + .has-sidebar & { + + .bb-rl-skeleton-grid-block { + flex: 0 0 calc(33.33% - (var(--bb-rl-space-200) * 2 / 3)); + max-width: calc(33.33% - (var(--bb-rl-space-200) * 2 / 3)); + } + } + + .bb-rl-skeleton-grid-block { + flex: 0 0 calc(25% - (var(--bb-rl-space-200) * 3 / 4)); + max-width: calc(25% - (var(--bb-rl-space-200) * 3 / 4)); + } + } + + &:not(.grid) { + + .bb-rl-skeleton-grid-block { + flex: 0 0 100%; + max-width: 100%; + } + } +} + +.bb-rl-skeleton-grid-block { + height: 100%; + border-radius: var(--bb-rl-radius-lg); + background-color: var(--bb-rl-background-color); + border: 1px solid var(--bb-rl-border-secondary-color); + padding: var(--bb-rl-space-400) var(--bb-rl-space-300); + display: flex; + align-items: center; + gap: var(--bb-rl-space-200); +} + +.bb-rl-skeleton-avatar { + display: inline-block; + width: 104px; + height: 104px; + border-radius: 50%; + background-color: var(--bb-rl-background-secondary-hover-color); +} + + +.bb-rl-skeleton-data-bit { + display: block; + background-color: var(--bb-rl-background-secondary-hover-color); + border-radius: var(--bb-rl-radius-sm); + height: var(--bb-rl-space-200); +} + +.bb-rl-skeleton-data { + flex: 1; + + .bb-rl-skeleton-data-bit { + margin: 6px 0; + + &:nth-of-type(1) { + width: 30%; + max-width: 92px; + } + + &:nth-of-type(2) { + width: 45%; + max-width: 186px; + } + + &:nth-of-type(3) { + width: 80%; + max-width: 186px; + display: none; + } + } +} + +.bb-rl-skeleton-footer { + display: flex; + align-items: center; + flex: 0 0 33.33%; + gap: var(--bb-rl-space-200); + justify-content: flex-end; + + .bb-rl-skeleton-data-bit { + + &:nth-of-type(1) { + width: 50%; + max-width: 72px; + } + + &:nth-of-type(2) { + width: 20%; + max-width: 24px; + } + + &:nth-of-type(3) { + width: 20%; + max-width: 24px; + } + } +} diff --git a/src/bp-templates/bp-nouveau/readylaunch/css/sass/layout/_widgets.scss b/src/bp-templates/bp-nouveau/readylaunch/css/sass/layout/_widgets.scss index 13154b5df1..982d8cc648 100644 --- a/src/bp-templates/bp-nouveau/readylaunch/css/sass/layout/_widgets.scss +++ b/src/bp-templates/bp-nouveau/readylaunch/css/sass/layout/_widgets.scss @@ -21,6 +21,7 @@ } .bb-rl-see-all a { + @include bb-rl-label-heading-bolder; color: var(--bb-rl-text-color); } @@ -60,14 +61,14 @@ content: "("; font-size: inherit; } - + &::after { content: ")"; font-size: inherit; } - + &:empty { - + &::before, &::after { display: none; diff --git a/src/bp-templates/bp-nouveau/readylaunch/js/bb-readylaunch-members.js b/src/bp-templates/bp-nouveau/readylaunch/js/bb-readylaunch-members.js index 4e8c49264a..7b58a65c9b 100644 --- a/src/bp-templates/bp-nouveau/readylaunch/js/bb-readylaunch-members.js +++ b/src/bp-templates/bp-nouveau/readylaunch/js/bb-readylaunch-members.js @@ -18,6 +18,7 @@ window.bp = window.bp || {}; */ start: function () { this.inviteMember(); + this.sentInvitesFormValidate(); }, /** @@ -47,6 +48,50 @@ window.bp = window.bp || {}; } } ); }, + + sentInvitesFormValidate: function () { + + if ( $( '#bb-rl-invite-form' ).length ) { + + $( '#bb-rl-invite-form' ).submit( + function ( e ) { + + e.preventDefault(); + + var isValid = true; + var $form = $( this ); + + // Reset error classes + $form.removeClass( 'bb-rl-form-error' ); + $form.find( '.bb-rl-input-field' ).removeClass( 'bb-rl-input-field--error' ); + + // Validate Name + var $nameField = $( '#bb-rl-invite-name' ); + if ( $nameField.val().trim() === '' ) { + $nameField.addClass( 'bb-rl-input-field--error' ); + isValid = false; + } + + // Validate Email + const $emailField = $( '#bb-rl-invite-email' ); + const emailValue = $emailField.val().trim(); + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + + if ( !emailRegex.test( emailValue ) ) { + $emailField.addClass( 'bb-rl-input-field--error' ); + isValid = false; + } + + if ( ! isValid) { + $form.addClass( 'bb-rl-form-error' ); + } else { + $form.off( 'submit' ).submit(); + } + + } + ); + } + }, }; // Launch members. diff --git a/src/bp-templates/bp-nouveau/readylaunch/js/buddypress-nouveau.js b/src/bp-templates/bp-nouveau/readylaunch/js/buddypress-nouveau.js index 09037f213c..18f98c1b40 100644 --- a/src/bp-templates/bp-nouveau/readylaunch/js/buddypress-nouveau.js +++ b/src/bp-templates/bp-nouveau/readylaunch/js/buddypress-nouveau.js @@ -48,8 +48,6 @@ window.bp = window.bp || {}; // Email Invites popup revoke access. this.sendInvitesRevokeAccess(); - this.sentInvitesFormValidate(); - // Privacy Policy & Terms Popup on Register page. this.registerPopUp(); @@ -1383,173 +1381,6 @@ window.bp = window.bp || {}; ); }, - sentInvitesFormValidate: function () { - - if ( $( 'body.send-invites #send-invite-form #member-invites-table' ).length ) { - - $( 'body.send-invites #send-invite-form' ).submit( - function () { - - var prevent = false; - var title = ''; - var id = ''; - var email = ''; - var id_lists = []; - var all_lists = []; - var alert_message = ''; - var inviteMessage = 0; - var inviteSubject = 0; - var subject = ''; - var subjectErrorMessage = ''; - var message = ''; - var messageErrorMessage = ''; - var emailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; - var emptyName = $( 'body.send-invites #send-invite-form #error-message-empty-name-field' ).val(); - var invalidEmail = $( 'body.send-invites #send-invite-form #error-message-invalid-email-address-field' ).val(); - - alert_message = $( 'body.send-invites #send-invite-form #error-message-required-field' ).val(); - inviteSubject = $( 'body.send-invites #send-invite-form #error-message-empty-subject-field' ).length; - inviteMessage = $( 'body.send-invites #send-invite-form #error-message-empty-body-field' ).length; - - if ( 1 === inviteSubject ) { - subject = $( 'body.send-invites #send-invite-form #bp-member-invites-custom-subject' ).val(); - subjectErrorMessage = $( 'body.send-invites #send-invite-form #error-message-empty-subject-field' ).val(); - } - - if ( 1 === inviteMessage ) { - // message = $('body.send-invites #send-invite-form #bp-member-invites-custom-content').val(); - /* jshint ignore:start */ - message = tinyMCE.get( 'bp-member-invites-custom-content' ).getContent(); - /* jshint ignore:end */ - messageErrorMessage = $( 'body.send-invites #send-invite-form #error-message-empty-body-field' ).val(); - } - - if ( 1 === inviteSubject && 1 === inviteMessage ) { - - var bothFieldsErrorMessage = $( 'body.send-invites #send-invite-form #error-message-empty-subject-body-field' ).val(); - - if ( '' === subject && '' === message ) { - if ( ! confirm( bothFieldsErrorMessage ) ) { - return false; - } - } else if ( '' !== subject && '' === message ) { - if ( ! confirm( messageErrorMessage ) ) { - return false; - } - } else if ( '' === subject && '' !== message ) { - if ( ! confirm( subjectErrorMessage ) ) { - return false; - } - } - - } else if ( 0 === inviteSubject && 1 === inviteMessage ) { - if ( '' === message ) { - if ( ! confirm( messageErrorMessage ) ) { - return false; - } - } - } else if ( 1 === inviteSubject && 0 === inviteMessage ) { - if ( '' === subject ) { - if ( ! confirm( subjectErrorMessage ) ) { - return false; - } - } - } - - $( 'body.send-invites #send-invite-form #member-invites-table > tbody > tr' ).each( - function () { - $( this ).find( 'input[type="text"]' ).removeAttr( 'style' ); - $( this ).find( 'input[type="email"]' ).removeAttr( 'style' ); - } - ); - - $( 'body.send-invites #send-invite-form #member-invites-table > tbody > tr' ).each( - function () { - - title = $.trim( $( this ).find( 'input[type="text"]' ).val() ); - id = $( this ).find( 'input' ).attr( 'id' ); - email = $.trim( $( this ).find( 'input[type="email"]' ).val() ); - - if ( '' === title && '' === email ) { - prevent = false; - } else if ( '' !== title && '' === email ) { - id = $( this ).find( 'input[type="email"]' ).attr( 'id' ); - prevent = true; - id_lists.push( id ); - } else if ( '' === title && '' !== email ) { - id = $( this ).find( 'input[type="text"]' ).attr( 'id' ); - prevent = true; - id_lists.push( id ); - } else { - if ( ! emailRegex.test( email ) ) { - id = $( this ).find( 'input[type="email"]' ).attr( 'id' ); - prevent = true; - id_lists.push( id ); - } else { - prevent = false; - all_lists.push( 1 ); - } - } - } - ); - - $( '.span_error' ).remove(); - - if ( id_lists.length === 0 ) { - - } else { - id_lists.forEach( - function ( item ) { - $( '#' + item ).attr( 'style', 'border:1px solid #ef3e46' ); - if ( item.indexOf( 'email_' ) !== -1 ) { - $( '#' + item ).after( '' + invalidEmail + '' ); - } else { - $( '#' + item ).after( '' + emptyName + '' ); - } - } - ); - $( 'html, body' ).animate( - { - scrollTop: $( '#item-body' ).offset().top - }, - 2000 - ); - alert( alert_message ); - return false; - } - - if ( $( '#email_0_email_error' ).length ) { - $( '#email_0_email_error' ).remove(); - } - - if ( all_lists.length === 0 ) { - var name = $( '#invitee_0_title' ).val(); - var emailField = $( '#email_0_email' ).val(); - if ( '' === name && '' === emailField ) { - $( '#invitee_0_title' ).attr( 'style', 'border:1px solid #ef3e46' ); - $( '#invitee_0_title' ).focus(); - $( '#email_0_email' ).attr( 'style', 'border:1px solid #ef3e46' ); - return false; - } else if ( '' !== name && '' === emailField ) { - $( '#email_0_email' ).attr( 'style', 'border:1px solid #ef3e46' ); - $( '#email_0_email' ).focus(); - return false; - } - if ( ! emailRegex.test( emailField ) ) { - $( '#email_0_email' ).attr( 'style', 'border:1px solid #ef3e46' ); - $( '#email_0_email' ).focus(); - $( '#email_0_email_error' ).remove(); - $( '#email_0_email' ).after( '' + invalidEmail + '' ); - } - alert( alert_message ); - return false; - } - - } - ); - } - }, - sendInvitesRevokeAccess: function () { if ( $( 'body.sent-invites #member-invites-table' ).length ) { diff --git a/src/bp-templates/bp-nouveau/readylaunch/members/index.php b/src/bp-templates/bp-nouveau/readylaunch/members/index.php index bac7bcd28f..a56af91b3f 100644 --- a/src/bp-templates/bp-nouveau/readylaunch/members/index.php +++ b/src/bp-templates/bp-nouveau/readylaunch/members/index.php @@ -65,7 +65,24 @@ '; - bp_nouveau_user_feedback( 'directory-members-loading' ); + ?> +
+
+
+
+ + + +
+
+ + + +
+
+
+ '; } else { bp_get_template_part( 'members/members-loop' );