✨ Add brand logo and page elements settings

assets/src/js/admin-dashboard/segments/options.js

@@ -82,6 +82,53 @@ document.addEventListener('DOMContentLoaded', function () {
 		};
 	}
 
+	const allowedBrandLogoMimeTypes = ['image/jpeg', 'image/png'];
+
+	$(document).on('click', '.tutor-brand-logo-upload-select', function (event) {
+		event.preventDefault();
+
+		const $upload = $(this).closest('.tutor-brand-logo-upload');
+		const $input = $upload.find('.tutor-brand-logo-upload-input');
+		const $preview = $upload.find('.tutor-brand-logo-upload-preview');
+		const $image = $preview.find('img');
+		const $remove = $upload.find('.tutor-brand-logo-upload-remove');
+		const frame = wp.media({
+			title: __('Select a brand logo', 'tutor'),
+			button: { text: __('Use this logo', 'tutor') },
+			library: { type: 'image' },
+			multiple: false,
+		});
+
+		frame.on('select', function () {
+			const attachment = frame.state().get('selection').first().toJSON();
+			if (!allowedBrandLogoMimeTypes.includes(attachment.mime)) {
+				tutor_toast(__('Error!', 'tutor'), __('Please select a JPG, JPEG, or PNG image.', 'tutor'), 'error');
+				return;
+			}
+
+			$input.val(attachment.id).trigger('change');
+			$image.attr('src', attachment.url).prop('hidden', false);
+			$preview.addClass('has-image');
+			$upload.addClass('has-image');
+			$remove.prop('hidden', false);
+			$('#save_tutor_option').prop('disabled', false);
+		});
+
+		frame.open();
+	});
+
+	$(document).on('click', '.tutor-brand-logo-upload-remove', function (event) {
+		event.preventDefault();
+
+		const $upload = $(this).closest('.tutor-brand-logo-upload');
+		$upload.find('.tutor-brand-logo-upload-input').val('').trigger('change');
+		$upload.find('.tutor-brand-logo-upload-preview img').attr('src', '').prop('hidden', true);
+		$upload.find('.tutor-brand-logo-upload-preview').removeClass('has-image');
+		$upload.removeClass('has-image');
+		$(this).prop('hidden', true);
+		$('#save_tutor_option').prop('disabled', false);
+	});
+
 	const validateEmail = (email) => {
 		const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 		return re.test(String(email).toLowerCase());

assets/src/js/v3/shared/icons/types.ts

@@ -123,6 +123,7 @@ export const icons = [
   'css',
   'csv',
   'currency',
+  'dark',
   'dbf',
   'delete',
   'delete2',
@@ -180,6 +181,7 @@ export const icons = [
   'fireDisabled',
   'fla',
   'font',
+  'footer',
   'freeShippingType',
   'gift',
   'giftCard',

assets/src/scss/admin-dashboard/_tutor-admin.scss

@@ -291,6 +291,228 @@ body.tutor-backend-tutor_settings #wpbody-content {
   border-bottom: none;
 }
 
+.tutor-brand-logo-field {
+  .tutor-brand-logo-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-top: 15px;
+    padding: 12px;
+    border: 1px solid var(--tutor-border-color);
+    border-radius: 8px;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .tutor-brand-logo-upload {
+    display: grid;
+    grid-template-columns: minmax(160px, 1fr) minmax(240px, 320px);
+    gap: 16px;
+    min-height: 40px;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+
+    > *:last-child {
+      justify-self: end;
+    }
+
+    @include breakpoint-max(782) {
+      grid-template-columns: 1fr;
+      gap: 10px;
+    }
+  }
+
+  .tutor-brand-logo-upload-control {
+    position: relative;
+    max-width: 141px;
+    width: 100%;
+  }
+
+  .tutor-brand-logo-upload-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-height: 40px;
+    height: 100%;
+    padding: 12px;
+    background: #f7f8fa;
+    border-radius: 6px;
+    overflow: hidden;
+
+    img {
+      max-width: 100%;
+      max-height: 40px;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    &:not(.has-image) {
+      display: none;
+    }
+  }
+
+  .tutor-brand-logo-upload-actions {
+    display: none;
+    position: absolute;
+    inset: 0;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background: rgba(34, 37, 43, 0.72);
+    border-radius: 6px;
+
+    .tutor-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 6px;
+      border: 0;
+      border-radius: 4px;
+      background: #f3f5fa;
+      color: var(--tutor-color-primary);
+      font-size: 20px;
+    }
+
+    .tutor-brand-logo-upload-remove {
+      background: #e53935;
+      color: #fff;
+    }
+  }
+
+  .tutor-brand-logo-upload-preview.has-image:hover .tutor-brand-logo-upload-actions,
+  .tutor-brand-logo-upload-preview.has-image:focus-within .tutor-brand-logo-upload-actions {
+    display: flex;
+  }
+
+  .tutor-brand-logo-upload.has-image .tutor-brand-logo-upload-empty {
+    display: none;
+  }
+
+  .tutor-brand-logo-upload-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+    height: 100%;
+    max-height: 40px;
+    padding: 12px;
+    border: 1px dashed #d3d4d9;
+    border-radius: 6px;
+    background: #f7f8fa;
+    color: #69738a;
+    font-size: 13px;
+
+    svg {
+      color: var(--tutor-color-primary);
+    }
+  }
+
+  .tutor-brand-logo-upload[data-brand-logo-theme='dark'] {
+    .tutor-brand-logo-upload-preview,
+    .tutor-brand-logo-upload-empty {
+      background: #25272d;
+    }
+
+    .tutor-brand-logo-upload-empty {
+      border-color: #69738a;
+      color: #b8bdc8;
+    }
+  }
+
+  @media (hover: none) {
+    .tutor-brand-logo-upload-preview.has-image .tutor-brand-logo-upload-actions {
+      display: flex;
+    }
+  }
+
+  @include breakpoint-max(782) {
+    .tutor-brand-logo-list {
+      padding: 0 16px;
+    }
+
+    .tutor-brand-logo-upload {
+      grid-template-columns: 1fr;
+      gap: 10px;
+      padding: 16px 0;
+    }
+  }
+}
+
+.tutor-page-elements-field {
+  .tutor-page-elements-matrix {
+    margin-top: 24px;
+    border: 1px solid var(--tutor-border-color);
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  .tutor-page-elements-matrix-head,
+  .tutor-page-elements-matrix-row {
+    display: grid;
+    grid-template-columns: minmax(180px, 1fr) 180px 180px;
+    align-items: center;
+    gap: 16px;
+    padding: 8px 12px;
+  }
+
+  .tutor-page-elements-matrix-row {
+    padding: 12px;
+  }
+
+  .tutor-page-elements-matrix-head {
+    background: #fff;
+    border-bottom: 1px solid var(--tutor-border-color);
+    font-size: 16px;
+    font-weight: 500;
+
+    .tutor-page-elements-head-icon {
+      padding: 4px;
+      background-color: rgba(244, 246, 249, 1);
+      border-radius: 50%;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      svg {
+        color: var(--tutor-color-primary);
+      }
+
+      [data-header-icon='true'] {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .tutor-page-elements-matrix-column {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  .tutor-page-elements-toggle {
+    justify-self: center;
+  }
+
+  @include breakpoint-max(782) {
+    .tutor-page-elements-matrix-head,
+    .tutor-page-elements-matrix-row {
+      grid-template-columns: minmax(140px, 1fr) 1fr 1fr;
+      gap: 8px;
+      padding: 16px;
+    }
+
+    .tutor-page-elements-matrix-row {
+      font-size: 16px;
+    }
+  }
+}
+
 .tutor-option-field-row input[type='text'],
 .tutor-option-field-row input[type='email'],
 .tutor-option-field-row input[type='number'],

assets/src/scss/frontend/components/_brand-logo.scss

@@ -0,0 +1,15 @@
+// Theme-aware Tutor branding shared by the dashboard and learning area.
+
+.tutor-brand-logo-dark {
+  display: none;
+}
+
+[data-tutor-theme='dark'] {
+  .tutor-brand-logo-light {
+    display: none;
+  }
+
+  .tutor-brand-logo-dark {
+    display: inline;
+  }
+}

assets/src/scss/frontend/components/_index.scss

@@ -11,3 +11,4 @@
 @forward 'quiz-summary';
 @forward 'player';
 @forward 'tour';
+@forward 'brand-logo';

assets/src/scss/frontend/dashboard/layout/_sidebar.scss

@@ -29,6 +29,12 @@
     border-bottom: 1px solid $tutor-border-idle;
     overflow: hidden;
 
+
+    .tutor-brand-logo {
+      display: block;
+      max-width: 120px;
+    }
+
     img {
       display: block;
       max-width: 120px;
@@ -43,7 +49,6 @@
       }
     }
   }
-
   .tutor-dashboard-sidebar-nav {
     padding: $tutor-spacing-8 $tutor-spacing-6;
 

assets/src/scss/frontend/learning-area/layout/_header.scss

@@ -27,6 +27,21 @@
     position: sticky;
   }
 
+  .tutor-has-site-header & {
+    position: sticky;
+    top: 0;
+  }
+
+  .tutor-has-site-header.tutor-has-admin-bar & {
+    @include tutor-breakpoint-up(md) {
+      top: 32px;
+    }
+
+    @include tutor-breakpoint-between(md, sm) {
+      top: 46px;
+    }
+  }
+
   &-inner {
     @include tutor-flex(row, center);
 

classes/Icon.php

@@ -139,6 +139,7 @@ final class Icon {
 	const CSS                        = 'css';
 	const CSV                        = 'csv';
 	const CURRENCY                   = 'currency';
+	const DARK                       = 'dark';
 	const DBF                        = 'dbf';
 	const DELETE                     = 'delete';
 	const DELETE_2                   = 'delete-2';
@@ -196,6 +197,7 @@ final class Icon {
 	const FIRE_DISABLED              = 'fire-disabled';
 	const FLA                        = 'fla';
 	const FONT                       = 'font';
+	const FOOTER                     = 'footer';
 	const FREE_SHIPPING_TYPE         = 'free-shipping-type';
 	const GIFT                       = 'gift';
 	const GIFT_CARD                  = 'gift-card';