Authoring Tool menu

[ecureuill]

:warning: Wire-frames and live-demos are just for example purpose. They don't meet entirely this requirement.

:pencil2: Pencil icon marks specs that are waiting for definition

---

This requirement is about the redesign of Authoring Tool menu.

Index

1. Redesign
   1. Button Style
2. Feedback
3. Bottom Menu
   1. Step navigation buttons
   2. Course creation buttons
   3. Feedback container
4. Responsive Design
   1. Option A
      1. Medium screen
      2. small screen
   2. Option B
      1. Medium screen
      2. small screen

         ---

Currently version

Redesign

• [x] Top menu hosts*
  • Stepper Menu
  • Step Status
• [x] Bottom Menu hosts*
  • Step Navigation Buttons
  • Course Creation Buttons
  • Feedback Container
• [x] Responsive Design

Note: There is alternative options of redesign, check the wireframes and the live-demo

Play with the live demo to check the Resposive Design proposals and the Stepper feature. https://tsz10.csb.app/ The source is here

Buttons style

• [x] Buttons follows material design #49
  • Primary Color for main actions
  • Secondary Color for side actions
  • Button variants for emphasis

Feedback

Success Feedback

• [x] role=status in the in the Feedback container
• [x] Success on saving

Suggestions and warnings Feedback

• [x] role=alert in the Feedback container
• [x] Failure on saving
• [x] Failure on publish
• [x] Warning about modifications not saved

Process progress Feedback

• [x] role="log" in the Step status

Error Prevention

If user tries to navigate away (click to go to Home, close browser tab or enter a URL on browser) AND there is unsaved work

• [ ] Use a alertdialog #51
• [ ] button options:
  • Cancel
  • Leave without saving
  • Save before leave (emphasis)
• [x] title: Exiting
• [x] message:

  You are trying to leave the course creation, but there is unsaved work. Leave without saving the progress will result in permanently lost the modifications.

  What would you like to do?

If user select to Close AND there is unsaved work

• [ ] Use a alertdialog #51
• [ ] button options:
  • Close without save
  • Keep working (emphasis)
• [ ] title: Closing
• [ ] message:

  You request to Close the course creation, but there is unsaved work. Close without saving the progress will result in permanently lost the modifications.

  What would you like to do?

If user select to Publish

• [x] Use a alertdialog #51
• [ ] button options:
  • Cancel
  • Publish (emphasis)
• [x] title: Publishing
• [ ] message:

  You request to Publish your course. All unsaved progress will be saved and the course will be made available in SELI's catalogue. No modifications is allowed in published courses, but you can at any moment unpublish the course.

  What would you like to do?

Step navigation buttons

• [x] Jump disabled steps
• Previous button: navigate backwards
  • [x] It's not enabled on first step
  • [x] label: "Previous step"
• Next button: navigate forwards
  • [x] It's not enabled on last step
  • [x] label: "Next step"

Course creation buttons.

• Close button: exit authoring tool
  • [ ] label: Close
• Publish button
  • [x] label: Publish
  • [x] Enabled only when all required steps are completed (checks #45 )
• Save button
  • [x] label: Save as Draft
  • [x] Enabled when information step is completed
  • [x] Do not close on Save

Stepper

The current version of the system has a stepper implemented. This proposal uses the same component, Material-UI Stepper

• the steps are defined in #73

Step Status

• [x] Step [x] of [TOTAL]: [STEP DESCRIPTION] Alternatives for smaller screens
• [x] Step [x] of [TOTAL]: [STEP LABEL]
• [x] Step [x] of [TOTAL]

[STEP LABEL], [STEP DESCRIPTION] and [TOTAL] are defined in #73

States

• [x] The stepper has four states

state	icon	color	label	triggered
Initial	STEP ICON	blue	n/a	default
Completed	check icon	green	Completed	All mandatory fields have been filled
Incomplete	warn icon	red	Required Step	Not all mandatory fields have been filled
Disabled	theme-specific	gray	n/a	n/a

[STEP ICON] is defined in #73

• [x] Active (current) step is presented with an underline.
• [x] "Optional" could be added as caption to step that no form fields are mandatory

Responsive Design

NOTE: This wire-frames are just for example purpose. They are no meet entirely this requirement, for instance: Cancel button nos is Close

Option A

• stepper
• vertical stepper
• stepper navigation buttons

Large screen

Medium screen

vertical stepper

Small screen

smaller status text

Option B

• stepper
• navigation stepper buttons

  Large Screen

  

Medium screen (stepper hidden)

Small

smaller status text

Smaller

Option C

• stepper
• stepper navigation buttons

  Large screen

  

Medium screen

Small

smaller step status text

Smaller

---

RESOURCES

• Material design

Material design

• Primary x Secondary colors
• Button emphases and hierarchy

[github-actions[bot]]

This Feature is ready to be implemented.

[ecureuill]

@juantenesaca this specification is ready, the pencil on the top is just a legend, but as you see its not in use on the body of the specification, thus no pending here

[juantenesaca]

@ecureuill I was talking about the #74, this one we are going to finish when we will get something stable from the others, because we need to pass some props to modify the state of the step, e.g (Complete, Incomplete, etc)

[caroltaus]

• [x] It is necessary to show on the menu bar which steps are completed and which still need information

---

• [x] When user chooses Free Course Plan, the stepper counter doesn’t update and still shows a total of 7 steps, instead of 5

[caroltaus]

• [x] When user edits a previously saved course and tries to leave the page with unsaved changes the system is not showing a modal (alertdialog https://github.com/solex2006/SELIProject/issues/51) alerting the user to save them, as it should

---

(moved to #73) - [ ] When in Free Mode the steps are numbered incorrectly

5th step is shown as 6 of 7

7th step is shown as 8 of 7

[ecureuill]

Responsive design issue

Tested in a 13.3" screen (16:9 - 1366x768)

• [x] Break points must be adjusted considering the font in use. The break points from demo does not fit well because font name, font size and font weight are not the same
• "Create Course" text overlapping
• Arrows connecting steps is missing (breakpoints should be settled before the arrows get hidden)

---

• [x] Form area is overlapping top menu

---

• [x] Bottom menu is missing feedback container

---

• [x] When first moving to a step, it should be presented as initial state, instead it is presented as incomplete step (error). The incomplete state should be used when user try to save/publish or to move out a step without all required fields filled. Check demo

---

• [x] Dialog button is not following material design style The main button must be outlined, check button style #49 and #51 dialog

[ecureuill]

Please, move to CODED only when this feature is fully implemented: bugs reported in comments and requirements in OP If you want that we test some partial solution, add a comment here with our @

[github-actions[bot]]

This feature have been implemented and is ready for Funcional Test. Please, test the feature.

[github-actions[bot]]

Functional Test failed! Please, review your solution.

---

There are some tasks still to be implemented

---

Hi! We noticed that in the requirement there were supposed to be three course creation buttons (Close, save and publish course). But, in the current platform there are "Save", "Publish" and "Cancel".

Requirement:

Current website:

While the close button was to exit the authoring tool, the cancel one is not doing that. Because of that, the user can't leave the page.

Was this change on purpose? Because we think a close button is good for the website usability.

[CAndresH]

Hello @rebeccamello and @caroltaus , I remember that some time ago, @juantenesaca talked to Camila about this button and it was considered to change it to the cancel button, this button was eliminated since it was not very functional, to exit a course you can do it using the platform menu

[github-actions[bot]]

This feature have been implemented and is ready for Funcional Test. Please, test the feature.

[github-actions[bot]]

Functional Test failed! Please, review your solution.

---

There are still tasks in the requirement to be done and in comment https://github.com/solex2006/SELIProject/issues/72#issuecomment-673642652

---

• [x] It is impossible to select "Yes" in Save Course modal after leaving course creation/editing

Steps to reproduce the error:

• Create a course
• Without saving or publishing, click on "Published Courses" on sidenav
• The Save Course modal appears but you can't click on "Yes", the only way the close it is clicking on "No", losing your course

[github-actions[bot]]

This feature have been implemented and is ready for Funcional Test. Please, test the feature.

[github-actions[bot]]

Functional Test failed! Please, review your solution.

---

The requirement for these situations is still missing