Course builder UI/UX updates (#2614)

* Hiding lesson icons when not active to clean up the UI.

* Removing Section X: and Lesson X: prefixes.

* Add a section and three lessons if no sections exist.

* Hiding assignments and quiz icons if there are none.

* Expand first 100 sections by default.

* Adding beautifully styled New Lesson button to sections.

* Hide the new lesson button if the section is collapsed.

* Removing delay on tooltip.

* Reducing time between save changes checks. Need to see if there's a performance impact to a shorter 1s interval.

* Only reduce interval with auto save turned off.

* Adjusting wording, icon placement, and interactivity of course builder.

* Finalizing course builder UI updates and accessibility and responsive pass

* Styling the expand all / collapse all buttons; tightening up sidebar

* Reverting destructive actions to <a> / links. Needs JS adjustments to use a button

* Make click to the headline open the lesson editor.

* Making lesson title uneditable inline. Styling.

* Updating default auto-save status to no.

* Updating default auto save display in the user profile.

* Change trash and detach to buttons.

* Removing console log.

* Switch section trash to button.

* Restrict setting dropdown options to a max length of 100 characters before truncating.

* Adding translation for the Close button.

* Adding translation for the Close button.

* Add New Section Button at the bottom of the course outline.

* Removing duplicate HTML element IDs.

* Removing the explainer video and updating as a link from help text.

* Adding link to help text for course builder tutorial.

* More places to remove the video explainer

* Allow clicking on the section header to expand/collapse.

* More spacing for section and lesson expand/collapse/move interactivity, adding back quiz and assigment in syllabus view

* Fixing tips that needed double quotes to not need them so the strings can be built in the .pot file - fixes #1464

* Fixing tips to sentence case for consistency throughout builder

* Fixing tips to sentence case; moving lesson ID position

* Responsive fix to builder; now the unsaved changes button is brand orange

* Adding changelog.

* Updating package lock.

* Removing failing builder tests.

---------

Co-authored-by: Kim Coleman <kim@strangerstudios.com>
Co-authored-by: Jason Coleman <33220397+ideadude@users.noreply.github.com>

.changelogs/feature_course-builder-ui-ux-updates.yml

@@ -0,0 +1,3 @@
+significance: minor
+type: changed
+entry: Improved the Course Builder UI.

assets/js/builder/Controllers/Sync.js

@@ -13,7 +13,7 @@ define( [], function() {
 		var self              = this,
 			autosave          = ( 'yes' === window.llms_builder.autosave ),
 			check_interval    = null,
-			check_interval_ms = settings.check_interval_ms || 10000,
+			check_interval_ms = settings.check_interval_ms || ( ( 'yes' === window.llms_builder.autosave ) ? 10000 : 1000 ),
 			detached          = new Backbone.Collection(),
 			trashed           = new Backbone.Collection();
 

assets/js/builder/Models/Section.js

@@ -38,7 +38,8 @@ define( [ 'Collections/Lessons', 'Models/_Relationships' ], function( Lessons, R
 				title: LLMS.l10n.translate( 'New Section' ),
 				type: 'section',
 
-				_expanded: false,
+				// Expand the first 100 sections by default to avoid timeout issues.
+				_expanded: ! this.collection || this.collection.length <= 100 ? true : false,
 				_selected: false,
 			};
 		},

assets/js/builder/Schemas/Lesson.js

@@ -36,14 +36,14 @@ define( [], function() {
 						attribute: 'free_lesson',
 						id: 'free-lesson',
 						label: LLMS.l10n.translate( 'Free Lesson' ),
-						tip: LLMS.l10n.translate( "Free lessons can be accessed without enrollment." ),
+						tip: LLMS.l10n.translate( 'Free lessons can be accessed without enrollment.' ),
 						type: 'switch',
 			},
 					{
 						attribute: 'require_passing_grade',
 						id: 'require-passing-grade',
 						label: LLMS.l10n.translate( 'Require Passing Grade on Quiz' ),
-						tip: LLMS.l10n.translate( "When enabled, students must pass this lesson's quiz before the lesson can be completed." ),
+						tip: LLMS.l10n.translate( 'When enabled, students must pass this quiz before the lesson can be completed.' ),
 						type: 'switch',
 						condition: function() {
 							return ( 'yes' === this.get( 'quiz_enabled' ) );
@@ -53,7 +53,7 @@ define( [], function() {
 						attribute: 'require_assignment_passing_grade',
 						id: 'require-assignment-passing-grade',
 						label: LLMS.l10n.translate( 'Require Passing Grade on Assignment' ),
-						tip: LLMS.l10n.translate( "When enabled, students must pass this lesson's assignment before the lesson can be completed." ),
+						tip: LLMS.l10n.translate( 'When enabled, students must pass this assignment before the lesson can be completed.' ),
 						type: 'switch',
 						condition: function() {
 							return ( 'undefined' !== window.llms_builder.assignments && 'yes' === this.get( 'assignment_enabled' ) );

assets/js/builder/Views/Assignment.js

@@ -327,6 +327,8 @@ define( [
 						// placement: 'left',
 						width: 380,
 						title: LLMS.l10n.translate( 'Unlock LifterLMS Assignments' ),
+						// This is here for translation but not actually used by the popover.
+						closeLabel: LLMS.l10n.translate( 'Close' ),
 						content: '<h3>' + h3 + '</h3><p>' + p + '</p><br><p><a class="llms-button-primary" href="' + url + '" target="_blank">' + btn + '</a></p>'
 					}
 				} );

assets/js/builder/Views/Course.js

@@ -4,7 +4,19 @@
  * @since    3.13.0
  * @version  3.16.0
  */
-define( [ 'Views/SectionList', 'Views/_Editable' ], function( SectionListView, Editable ) {
+define( [
+	'Views/SectionList',
+	'Views/_Detachable',
+	'Views/_Editable',
+	'Views/_Shiftable',
+	'Views/_Trashable'
+], function(
+	  SectionListView,
+	  Detachable,
+	  Editable,
+	  Shiftable,
+	  Trashable
+) {
 
 	return Backbone.View.extend( _.defaults( {
 
@@ -71,12 +83,23 @@ define( [ 'Views/SectionList', 'Views/_Editable' ], function( SectionListView, E
 
 			Backbone.pubSub.on( 'section-toggle', this.on_section_toggle, this );
 
+			Backbone.pubSub.on( 'section-select', this.on_section_select, this );
+
 			Backbone.pubSub.on( 'expand-section', this.expand_section, this );
 
 			Backbone.pubSub.on( 'lesson-selected', this.active_lesson_change, this );
 
 		},
 
+		/**
+		 * Events
+		 * @type  {Object}
+		 * @version  [version]
+		 */
+		events: _.defaults( {
+			'click .new-section': 'add_new_section',
+		}, Detachable.events, Editable.events, Trashable.events ),
+
 		/**
 		 * Compiles the template and renders the view
 		 *
@@ -147,7 +170,29 @@ define( [ 'Views/SectionList', 'Views/_Editable' ], function( SectionListView, E
 			var selected = model.get( '_expanded' ) ? [ model ] : [];
 			this.sectionListView.setSelectedModels( selected );
 
-		}
+		},
+
+
+		/**
+		 * When doing things like adding a lesson, seelct the section.
+		 *
+		 * @param    obj   model  toggled section
+		 * @return   void
+		 * @since    [version]
+		 * @version  [version]
+		 */
+		on_section_select: function( model ) {
+
+			this.sectionListView.setSelectedModel( model );
+
+		},
+
+		add_new_section: function( event ) {
+
+			event.preventDefault();
+			Backbone.pubSub.trigger( 'add-new-section' );
+		},
+
 
 	}, Editable ) );
 

assets/js/builder/Views/Elements.js

@@ -64,7 +64,7 @@ define( [ 'Models/Section', 'Views/Section', 'Models/Lesson', 'Views/Lesson', 'V
 
 			this.$el.html( this.template() );
 			this.draggable();
-			this.maybe_disable_buttons();
+			this.maybe_add_initial_section();
 
 			return this;
 		},
@@ -161,12 +161,15 @@ define( [ 'Models/Section', 'Views/Section', 'Models/Lesson', 'Views/Lesson', 'V
 		 * @since    3.16.0
 		 * @version  3.16.0
 		 */
-		maybe_disable_buttons: function() {
+		maybe_add_initial_section: function() {
 
 			var $els = $( '#llms-new-lesson, #llms-existing-lesson' );
 
 			if ( ! this.SidebarView.CourseView.model.get( 'sections' ).length ) {
-				$els.attr( 'disabled', 'disabled' );
+				Backbone.pubSub.trigger( 'add-new-section' );
+				Backbone.pubSub.trigger( 'add-new-lesson' );
+				Backbone.pubSub.trigger( 'add-new-lesson' );
+				Backbone.pubSub.trigger( 'add-new-lesson' );
 			} else {
 				$els.removeAttr( 'disabled' );
 			}

assets/js/builder/Views/Lesson.js

@@ -44,6 +44,7 @@ define( [
 		 */
 		events: _.defaults( {
 			'click .edit-lesson': 'open_lesson_editor',
+			'click .llms-headline': 'open_lesson_editor',
 			'click .edit-quiz': 'open_quiz_editor',
 			'click .edit-assignment': 'open_assignment_editor',
 			'click .section-prev': 'section_prev',

assets/js/builder/Views/Section.js

@@ -48,7 +48,8 @@ define( [
 			'click .collapse': 'collapse',
 			'click .shift-up--section': 'shift_up',
 			'click .shift-down--section': 'shift_down',
-
+			'click .new-lesson': 'add_new_lesson',
+			'click .llms-builder-header': 'toggle',
 			'mouseenter .llms-lessons': 'on_mouseenter',
 
 		}, Editable.events, Trashable.events ),
@@ -125,6 +126,15 @@ define( [
 
 		},
 
+		add_new_lesson: function( event ) {
+
+			event.preventDefault();
+
+			Backbone.pubSub.trigger( 'section-select', this.model );
+			Backbone.pubSub.trigger( 'add-new-lesson' );
+
+		},
+
 		active_lesson_change: function( current, previous ) {
 
 			Backbone.pubSub.trigger( 'active-lesson-change', {
@@ -134,6 +144,21 @@ define( [
 
 		},
 
+		toggle: function( event, update ) {
+
+			// We only want to expand/collapse when the actual header div is clicked, not an element inside it.
+			if ( 'llms-builder-header' !== event.target.className ) {
+				return;
+			}
+
+			if ( this.model.get( '_expanded' ) ) {
+				this.collapse( event, update );
+			} else {
+				this.expand( event, update );
+			}
+
+		},
+
 		/**
 		 * Collapse lessons within the section
 		 * @param    obj   event    js event object

assets/js/builder/Views/SettingsFields.js

@@ -254,7 +254,7 @@ define( [], function() {
 
 			function option_html( label, val ) {
 
-				return '<option value="' + val + '"' + _.selected( val, selected ) + '>' + label + '</option>';
+				return '<option value="' + val + '"' + _.selected( val, selected ) + '>' + label.substring( 0, 100 ) + ( label.length > 100 ? '...' : '' ) + '</option>';
 
 			}
 

assets/js/builder/Views/Sidebar.js

@@ -8,13 +8,11 @@ define( [
 	'Views/Editor',
 	'Views/Elements',
 	'Views/Utilities',
-	'Views/VideoExplainer',
 	'Views/_Subview'
 ], function(
 	Editor,
 	Elements,
 	Utilities,
-	VideoExplainer,
 	Subview
 ) {
 
@@ -41,11 +39,6 @@ define( [
 				instance: null,
 				state: 'builder',
 			},
-			video_explainer: {
-				class: VideoExplainer,
-				instance: null,
-				state: 'builder',
-			},
 			editor: {
 				class: Editor,
 				instance: null,

assets/js/builder/Views/_Detachable.js

@@ -20,6 +20,7 @@ define( [], function() {
 		 */
 		events: {
 			'click a[href="#llms-detach-model"]': 'detach_model',
+			'click button.llms-detach-model': 'detach_model',
 		},
 
 		/**

assets/js/builder/Views/_Trashable.js

@@ -18,6 +18,7 @@ define( [], function() {
 		 */
 		events: {
 			'click a[href="#llms-trash-model"]': 'trash_model',
+			'click button.llms-trash-model': 'trash_model',
 		},
 
 		/**

assets/scss/_includes/_tooltip.scss

@@ -114,7 +114,7 @@
 		&:hover:before,
 		&:hover:after {
 			opacity: 1;
-			transition: all 0.2s 0.6s ease;
+			transition: all 0 0.1s ease;
 			visibility: visible;
 			z-index: 99999999;
 		}