diff --git a/assets/core/scss/components/_modal.scss b/assets/core/scss/components/_modal.scss index b846f459eb..b9d3994981 100644 --- a/assets/core/scss/components/_modal.scss +++ b/assets/core/scss/components/_modal.scss @@ -47,8 +47,8 @@ max-width: 500px; max-height: 90vh; background-color: $tutor-surface-l1; - border-radius: $tutor-radius-3xl; - box-shadow: $tutor-shadow-modal; + border-radius: $tutor-modal-radius; + box-shadow: $tutor-modal-shadow; overflow-y: auto; // Transitions diff --git a/assets/core/scss/components/_popover.scss b/assets/core/scss/components/_popover.scss index 48c70ecef1..8a25550d68 100644 --- a/assets/core/scss/components/_popover.scss +++ b/assets/core/scss/components/_popover.scss @@ -9,11 +9,10 @@ z-index: $tutor-z-dropdown; max-width: 276px; background-color: $tutor-surface-l1; - border: 1px solid $tutor-border-idle; - border-radius: $tutor-radius-lg; - box-shadow: - 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -2px rgba(0, 0, 0, 0.05); + border: $tutor-popover-border; + border-radius: $tutor-popover-radius; + box-shadow: $tutor-popover-shadow; + overflow: hidden; &-header { padding: $tutor-spacing-4 $tutor-spacing-4 0; diff --git a/assets/core/scss/components/_select.scss b/assets/core/scss/components/_select.scss index 32f2b11365..1048bb7159 100644 --- a/assets/core/scss/components/_select.scss +++ b/assets/core/scss/components/_select.scss @@ -163,9 +163,9 @@ @include right(0); z-index: $tutor-z-dropdown; background: $tutor-surface-l1; - border: 1px solid $tutor-border-idle; - border-radius: $tutor-radius-md; - box-shadow: $tutor-shadow-lg; + border: $tutor-popover-border; + border-radius: $tutor-popover-radius; + box-shadow: $tutor-popover-shadow; overflow: hidden; display: flex; flex-direction: column; diff --git a/assets/core/scss/tokens/_index.scss b/assets/core/scss/tokens/_index.scss index 03706edc6b..89c4672a1f 100644 --- a/assets/core/scss/tokens/_index.scss +++ b/assets/core/scss/tokens/_index.scss @@ -12,3 +12,5 @@ @forward "text-colors"; @forward "typography"; @forward "zIndex"; +@forward "popover"; +@forward "modal"; diff --git a/assets/core/scss/tokens/_modal.scss b/assets/core/scss/tokens/_modal.scss new file mode 100644 index 0000000000..bea56ee5da --- /dev/null +++ b/assets/core/scss/tokens/_modal.scss @@ -0,0 +1,10 @@ +@use './borders' as *; +@use './shadows' as *; + +$tutor-modal-shadow: var(--tutor-modal-shadow, #{$tutor-shadow-modal}); +$tutor-modal-radius: var(--tutor-modal-radius, #{$tutor-radius-3xl}); + +$tutor-modal: ( + shadow: $tutor-modal-shadow, + radius: $tutor-modal-radius, +); diff --git a/assets/core/scss/tokens/_popover.scss b/assets/core/scss/tokens/_popover.scss new file mode 100644 index 0000000000..db16201f26 --- /dev/null +++ b/assets/core/scss/tokens/_popover.scss @@ -0,0 +1,12 @@ +@use './borders' as *; +@use './shadows' as *; + +$tutor-popover-shadow: var(--tutor-popover-shadow, #{$tutor-shadow-lg}); +$tutor-popover-border: var(--tutor-popover-border, 1px solid #{$tutor-border-idle}); +$tutor-popover-radius: var(--tutor-popover-radius, #{$tutor-radius-2xl}); + +$tutor-popover: ( + shadow: $tutor-popover-shadow, + border: $tutor-popover-border, + radius: $tutor-popover-radius, +) \ No newline at end of file diff --git a/assets/core/scss/tokens/_shadows.scss b/assets/core/scss/tokens/_shadows.scss index ff3c54151b..6ab3dbe795 100644 --- a/assets/core/scss/tokens/_shadows.scss +++ b/assets/core/scss/tokens/_shadows.scss @@ -2,7 +2,7 @@ // Shadows // ========================================================================== -$tutor-shadow-modal: 0px 4px 104.9px 0px #00000040; +$tutor-shadow-modal: 0px 8px 8px -4px #10182808, 0px 20px 24px -4px #10182814; $tutor-shadow-xs: 0px 1px 2px 0px #1018280D; $tutor-shadow-sm: 0px 1px 2px 0px #1018280F, 0px 1px 3px 0px #1018281A; $tutor-shadow-md: 0px 2px 4px -2px #1018280F, 0px 4px 8px -2px #1018281A; diff --git a/assets/icons/kids/read.svg b/assets/icons/kids/read.svg new file mode 100644 index 0000000000..72ec205848 --- /dev/null +++ b/assets/icons/kids/read.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/kids/unread.svg b/assets/icons/kids/unread.svg new file mode 100644 index 0000000000..f32f75a0a0 --- /dev/null +++ b/assets/icons/kids/unread.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/unread.svg b/assets/icons/unread.svg new file mode 100644 index 0000000000..bdbc242aef --- /dev/null +++ b/assets/icons/unread.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/src/js/v3/shared/icons/types.ts b/assets/src/js/v3/shared/icons/types.ts index 81a3834a26..dbbfea5331 100644 --- a/assets/src/js/v3/shared/icons/types.ts +++ b/assets/src/js/v3/shared/icons/types.ts @@ -375,6 +375,7 @@ export const icons = [ 'tryAgain', 'txt', 'undo', + 'unread', 'update', 'upload', 'upload2', diff --git a/assets/src/scss/frontend/components/_quiz-attempt-details.scss b/assets/src/scss/frontend/components/_quiz-attempt-details.scss index d0702339f7..38e43b2400 100644 --- a/assets/src/scss/frontend/components/_quiz-attempt-details.scss +++ b/assets/src/scss/frontend/components/_quiz-attempt-details.scss @@ -9,7 +9,7 @@ ); body:has(#wpadminbar) & { - --tutor-quiz-summary-header-top: 46px; + --tutor-quiz-summary-header-top: 0px; } @include tutor-breakpoint-up(sm) { @@ -303,7 +303,7 @@ .tutor-quiz-review-feedback-wrapper { max-width: 1220px; - padding-block: $tutor-spacing-13; + padding: $tutor-spacing-13 $tutor-spacing-6; margin-inline: auto; display: grid; grid-template-columns: 300px 1fr; diff --git a/assets/src/scss/frontend/dashboard/_reviews.scss b/assets/src/scss/frontend/dashboard/_reviews.scss index e71fbca692..69ae32b6c5 100644 --- a/assets/src/scss/frontend/dashboard/_reviews.scss +++ b/assets/src/scss/frontend/dashboard/_reviews.scss @@ -55,10 +55,9 @@ } &-actions { - @include tutor-flex(row); gap: $tutor-spacing-4; - @include tutor-transition(opacity); opacity: 0; + @include tutor-transition(opacity); } &-text { diff --git a/assets/src/scss/frontend/kids/_dashboard.scss b/assets/src/scss/frontend/kids/_dashboard.scss index 5052531644..a83fb7943e 100644 --- a/assets/src/scss/frontend/kids/_dashboard.scss +++ b/assets/src/scss/frontend/kids/_dashboard.scss @@ -27,6 +27,10 @@ border-radius: $tutor-radius-3xl; } + .tutor-dashboard-header-user-popover-profile { + border-radius: $tutor-radius-3xl; + } + // home .tutor-student-dashboard-courses { .tutor-card.tutor-progress-card:not(:first-child) { @@ -107,10 +111,6 @@ } } - .tutor-dashboard-header-user-popover { - @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-2xl); - } - .tutor-dashboard-header-user-popover-menu li a { border-radius: $tutor-radius-2xl; } diff --git a/assets/src/scss/frontend/kids/_modal.scss b/assets/src/scss/frontend/kids/_modal.scss new file mode 100644 index 0000000000..aeff9f975f --- /dev/null +++ b/assets/src/scss/frontend/kids/_modal.scss @@ -0,0 +1,6 @@ +@use '@Core/scss/tokens' as *; + +[data-tutor-ui='kids'] { + --tutor-modal-shadow: 0 0 0 1px #{$tutor-border-idle}, 0 3px 0 0 #{$tutor-border-idle}, #{$tutor-shadow-modal}; + --tutor-modal-radius: #{$tutor-radius-5xl}; +} diff --git a/assets/src/scss/frontend/kids/_popover.scss b/assets/src/scss/frontend/kids/_popover.scss new file mode 100644 index 0000000000..ba9a917387 --- /dev/null +++ b/assets/src/scss/frontend/kids/_popover.scss @@ -0,0 +1,7 @@ +@use '@Core/scss/tokens' as *; + +[data-tutor-ui='kids'] { + --tutor-popover-shadow: 0 0 0 1px #{$tutor-border-idle}, 0 3px 0 0 #{$tutor-border-idle}, #{$tutor-shadow-lg}; + --tutor-popover-border: none; + --tutor-popover-radius: #{$tutor-radius-5xl}; +} diff --git a/assets/src/scss/frontend/kids/index.scss b/assets/src/scss/frontend/kids/index.scss index 49da9180ac..6374380438 100644 --- a/assets/src/scss/frontend/kids/index.scss +++ b/assets/src/scss/frontend/kids/index.scss @@ -4,5 +4,7 @@ @forward './nav'; @forward './tabs'; @forward './sidebar'; +@forward './popover'; +@forward './modal'; @forward './dashboard'; @forward './learning-area'; diff --git a/classes/Icon.php b/classes/Icon.php index 06e4f22e81..aa6a3ba058 100644 --- a/classes/Icon.php +++ b/classes/Icon.php @@ -391,6 +391,7 @@ final class Icon { const TRY_AGAIN = 'try-again'; const TXT = 'txt'; const UNDO = 'undo'; + const UNREAD = 'unread'; const UPDATE = 'update'; const UPLOAD = 'upload'; const UPLOAD_2 = 'upload-2'; diff --git a/components/StarRating.php b/components/StarRating.php index fd19ce2320..12ce38333b 100644 --- a/components/StarRating.php +++ b/components/StarRating.php @@ -134,9 +134,9 @@ public function get(): string { $rating = $this->rating; $icon_size = $this->icon_size; - $star_fill = SvgIcon::make()->name( Icon::STAR_FILL )->size( $icon_size )->get(); - $star_half = SvgIcon::make()->name( Icon::STAR_HALF )->size( $icon_size )->get(); - $star = SvgIcon::make()->name( Icon::STAR_LINE )->size( $icon_size )->get(); + $star_fill = SvgIcon::make()->name( Icon::STAR_FILL )->size( $icon_size )->ignore_kids()->get(); + $star_half = SvgIcon::make()->name( Icon::STAR_HALF )->size( $icon_size )->ignore_kids()->get(); + $star = SvgIcon::make()->name( Icon::STAR_LINE )->size( $icon_size )->ignore_kids()->get(); ob_start(); ?> diff --git a/components/StarRatingInput.php b/components/StarRatingInput.php index 4e80ed137b..5fd9678ca2 100644 --- a/components/StarRatingInput.php +++ b/components/StarRatingInput.php @@ -180,9 +180,9 @@ public function get(): string { 5 => __( 'Amazing', 'tutor' ), ); - $star_fill = SvgIcon::make()->name( Icon::STAR_FILL )->size( $is_emoji ? Size::SIZE_32 : Size::SIZE_24 )->get(); - $star_half = SvgIcon::make()->name( Icon::STAR_HALF )->size( $is_emoji ? Size::SIZE_32 : Size::SIZE_24 )->get(); - $star = SvgIcon::make()->name( Icon::STAR_LINE )->size( $is_emoji ? Size::SIZE_32 : Size::SIZE_24 )->get(); + $star_fill = SvgIcon::make()->name( Icon::STAR_FILL )->size( $is_emoji ? Size::SIZE_32 : Size::SIZE_24 )->ignore_kids()->get(); + $star_half = SvgIcon::make()->name( Icon::STAR_HALF )->size( $is_emoji ? Size::SIZE_32 : Size::SIZE_24 )->ignore_kids()->get(); + $star = SvgIcon::make()->name( Icon::STAR_LINE )->size( $is_emoji ? Size::SIZE_32 : Size::SIZE_24 )->ignore_kids()->get(); ob_start(); ?> diff --git a/templates/dashboard/discussions/comment-card.php b/templates/dashboard/discussions/comment-card.php index 5fb70ea6ef..d8e7b37a68 100644 --- a/templates/dashboard/discussions/comment-card.php +++ b/templates/dashboard/discussions/comment-card.php @@ -96,7 +96,7 @@ ?> user_id ) : ?>
-
diff --git a/templates/dashboard/discussions/qna-card.php b/templates/dashboard/discussions/qna-card.php index a752807f2b..4a47f94396 100644 --- a/templates/dashboard/discussions/qna-card.php +++ b/templates/dashboard/discussions/qna-card.php @@ -281,7 +281,14 @@ class="tutor-popover-menu-item tutor-gap-5" name( Icon::SPINNER )->size( 20 )->color( Color::SECONDARY )->attr( 'class', 'tutor-animate-spin' )->render(); ?> @@ -341,4 +348,3 @@ class="tutor-popover-menu-item tutor-gap-5 tutor-sm-border-t"
- diff --git a/templates/dashboard/instructor/home.php b/templates/dashboard/instructor/home.php index 3fe95677c0..8d64d13fbc 100644 --- a/templates/dashboard/instructor/home.php +++ b/templates/dashboard/instructor/home.php @@ -343,6 +343,7 @@ class="tutor-btn tutor-btn-outline tutor-btn-small tutor-btn-icon" x-ref="content" x-show="open" x-cloak + x-transition.origin.top.right @click.outside="handleClickOutside()" class="tutor-popover tutor-popover-bottom" > diff --git a/templates/dashboard/quiz-attempts/quiz-attempts-feedback.php b/templates/dashboard/quiz-attempts/quiz-attempts-feedback.php index 8255b821d3..90db02e7b6 100644 --- a/templates/dashboard/quiz-attempts/quiz-attempts-feedback.php +++ b/templates/dashboard/quiz-attempts/quiz-attempts-feedback.php @@ -45,7 +45,6 @@ ) ) ->attr( 'x-bind', "register('feedback')" ) - ->wrapper_attr( 'class', 'tutor-mb-16' ) ->render(); ?>
diff --git a/templates/dashboard/reviews/review-card.php b/templates/dashboard/reviews/review-card.php index 934004a3e9..5100933a7d 100644 --- a/templates/dashboard/reviews/review-card.php +++ b/templates/dashboard/reviews/review-card.php @@ -16,9 +16,12 @@ use Tutor\Components\Button; use Tutor\Components\Badge; use Tutor\Components\InputField; +use Tutor\Components\Popover; use Tutor\Components\StarRating; use Tutor\Components\StarRatingInput; use Tutor\Components\Constants\Size; +use Tutor\Components\Constants\Color; +use Tutor\Components\Constants\Positions; use Tutor\Components\Constants\Variant; use Tutor\Helpers\DateTimeHelper; @@ -103,7 +106,7 @@ -
+
label( __( 'Edit Review', 'tutor' ) ) @@ -125,6 +128,46 @@ ->render(); ?>
+
+ placement( Positions::BOTTOM_END ) + ->menu_min_width( '104px' ) + ->menu_item( + array( + 'tag' => 'button', + 'icon' => SvgIcon::make()->name( Icon::EDIT_2 )->size( 20 )->get(), + 'content' => __( 'Edit', 'tutor' ), + 'attr' => array( + '@click' => '$refs.edit.click(); hide()', + ), + ) + ) + ->menu_item( + array( + 'tag' => 'button', + 'icon' => SvgIcon::make()->name( Icon::DELETE_2 )->size( 20 )->get(), + 'content' => __( 'Delete', 'tutor' ), + 'attr' => array( + '@click' => "hide(); TutorCore.modal.showModal('{$delete_modal_id}', { id: " . (int) $review['comment_ID'] . ' })', + ), + ) + ) + ->trigger( + Button::make() + ->label( __( 'Review Actions', 'tutor' ) ) + ->variant( Variant::GHOST ) + ->size( Size::X_SMALL ) + ->icon( SvgIcon::make()->name( Icon::ELLIPSES )->size( 16 )->color( Color::SECONDARY )->get() ) + ->icon_only() + ->attr( 'x-ref', 'trigger' ) + ->attr( '@click', 'toggle()' ) + ->attr( 'type', 'button' ) + ->get() + ) + ->render(); + ?> +