Edit section and subsection at course outline page. #4425

auraz · 2014-07-15T10:47:56Z

As a course author, I want to view and change the release date and time for subsections/sections and the due date and time and grading type for subsections from the course outline page.

https://openedx.atlassian.net/browse/STUD-1881

Test instance: http://studio.auraz.m.sandbox.edx.org/course/edX/Open_DemoX/edx_demo_course

VIEWING:

From the course outline, release date for sections and subsections should be viewable as per UX visual design.
From the course outline, due date for graded subsections and grade type should be viewable as per UX visual design.

EDITING:

For sections and subsections: from the course outline page, clicking the gear icon for a subsection should open a popup with fields to edit the release date and time.
- This action should change the release date of the current subsection and all children units.
- If the release date and time is removed, the release date and time should be updated to inherit from the parent section (replaces the current “sync” option if due dates for children differ from parent).
For subsections only: From the course outline page, clicking the gear icon for a subsection should open a popup with fields to edit the due date and time and the grading type (not graded, homework, lab, midterm exam, final exam, etc.)
- If the due date/time is removed, the subsection should not have any due date/time. (No inheritance.)
You cannot delete the section release date.

NOTES:

current implementation does not follow mockups visually but uses existing modal window design.
staff only (overrided release date) checkbox present in mockups is not implemented (outside of the scope of the task)
modal window does not look good when browser window is resized to less then 1116px

@cahrens @andy-armstrong @frrrances @explorerleslie @mhoeber please review.

talbs · 2014-07-16T17:24:38Z

cms/templates/course_outline.html

Having a separate asset call for this specific page is less than ideal (especially with us using this vendor datepicker UI on other Studio pages, e.g. Course Settings). Its fine for now, but a follow-up story might be worthwhile to better bundle our vendor assets together with our styling for optimization.

^ @andy-armstrong, do you agree here?

@talbs you're right, it makes sense.

talbs · 2014-07-17T01:15:17Z

@auraz, just a heads up - when opening the settings modal on a Section, the title of the modal says "Subsection Settings". This should be changed to "Section Settings". Here's a screengrab to help understand the issue:

talbs · 2014-07-23T12:27:25Z

@frrrances, can you review my UI and FED work here once more for final UX sign off?

frrrances · 2014-07-23T18:28:36Z

cms/static/sass/elements/_modal-window.scss

Since this is already in the "specific modal overrides" section, do you want to make this header describe this particular modal type, like "section settings modal"?

frrrances · 2014-07-23T18:43:57Z

@talbs Nice work! I had a couple small questions on the code above. My only other comment is that the spacing is pretty big in the modal; I would tighten it up, but if you are happy as-is, I'm cool with that. 👍

talbs · 2014-07-23T19:15:10Z

Thanks, @frrrances. I've refactored the UI for the outline item editor modal and new content-based modal styles into the general modal Sass partial. I've also tried to reduce the visual space around elements in the modal. Thanks for the recommendations.

cahrens · 2014-07-24T16:58:46Z

Could the dialogs have the name of the Section or Subsection in them so that you can be sure you are editing for the correct thing? @talbs, what do you think?

cahrens · 2014-07-24T17:11:58Z

I am seeing a bug where setting the grading type on a subsection causes the subsection to collapse (hide all the units).

Repro steps-

Expand subsection to view units
Change grading type
Subsection collapses

This happens to me for setting dates as well, and changes on the section as well as the subsection.

cahrens · 2014-07-24T17:35:24Z

cms/djangoapps/contentstore/views/tests/test_item.py

Can more of the fields you added (start, due_date, graded, due, format) be tested?

Fixed: "Can more of the fields you added (start, due_date, graded, due, format) be tested?"

cahrens · 2014-07-24T17:56:00Z

Why can't you clear the Section release date to go back to the default?

cahrens · 2014-07-24T18:03:29Z

cms/static/js/spec/views/pages/course_outline_spec.js

Reset grading type to Not Graded.

I think test had wrong description, as It makes no sense to test html select. UI does not have special button ("remove icon") to clear grading types. Possibility to change values of grading format is tested in other jasmine tests and in bok_choy tests. Fixed test description.

cahrens · 2014-07-24T18:31:59Z

@explorerleslie it looks like we will need another story to sync up the styling of how the release date, due date, and grading type are displayed on the course outline page.

cahrens · 2014-07-24T18:53:45Z

cms/static/js/views/utils/xblock_utils.js

Correct comment.

Fixed: "Correct comment."

talbs · 2014-07-24T23:11:33Z

@cahrens, thanks for the UX/UI heads ups. Adding specific Section/Subsection names to the modal titles sounds great and I agree it should be added.

auraz · 2014-07-29T10:25:04Z

@frrrances Please clarify .modal-editor issue:

I've removed .modal-editor from basic-modal.underscore
Another place where it is user it is tabs-edit.html of video player. If we want to remove it from there, I think it should be done in separate PR, in order to ensure that video player is not broken. Do we need to remove it from there?
Should I need to clean up scss (_modal-window.scss) from .modal-editor classes or not?
So there are 2 files left where where modal-editor class is used.

Regarding defaults:
In cms/static/js/views/modals/base_modal.js we use two classes : "modal-window'" and "modal-content". What do you mean by "we should have one place to put all the various classes we want on a modal rather than having each one named with defaults".
I'm ready to talk about it.

auraz · 2014-07-29T10:28:45Z

@cahrens Do we need changelog for this kind of PRs, which go into bulk-publishing?

auraz · 2014-07-29T14:57:16Z

@frrrances your comment is addressed, please check.

auraz · 2014-07-29T14:58:46Z

@cahrens all comments are addressed, please continue review

auraz · 2014-07-29T15:01:07Z

Screenshots of modal windows:

frrrances · 2014-07-29T15:41:36Z

@auraz Looks good! 👍

cahrens · 2014-07-29T16:36:10Z

cms/static/js/spec/models/xblock_info_spec.js

Can you rename isEditable to something like "isEditableOnCourseOutline"? It's confusing because verticals certainly are editable-- on the container page. The current name of the method implies a much more generic definition of editability.

Fixed: "Can you rename isEditable to something like "isEditableOnCourseOutline"

cahrens · 2014-07-29T17:10:14Z

Done with re-review-- looking good!

I personally think the modal dialog is much too wide. I have pinged @frrrances about that.

auraz · 2014-07-30T18:37:48Z

@cahrens all your comments were addressed. It looks bulk-publishing was rebased. So I will squash commits and rebase on it again.

auraz · 2014-07-30T18:42:24Z

That were merge conflicts. Rebased.

cahrens · 2014-07-30T18:45:37Z

Setting the release date is causing a collapsed section to expand. The root cause is probably the same as for https://openedx.atlassian.net/browse/STUD-2038.

cahrens · 2014-07-30T18:46:28Z

OK, @talbs I might opt to go back to the "large" dialog. The dialog is wrapping on me, even when browser is maximized.

auraz · 2014-07-30T18:47:51Z

Not quite, in this PR issue for subsections was fixed. But for sections not.
However even fix for subsections shows expanding and collapsing of subsections on slow machines. So this should be fixed more systematically in 2038

Aelxander Kryklia
Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Wednesday, July 30, 2014 at 9:45 PM, Christina Roberts wrote:

Setting the release date is causing a collapsed section to expand. The root cause is probably the same as for https://openedx.atlassian.net/browse/STUD-2038.

—
Reply to this email directly or view it on GitHub (https://github.com/edx/edx-platform/pull/4425#issuecomment-50661268).

talbs · 2014-07-30T19:13:53Z

@cahrens, modal size has been reverted again to large.

@auraz, you'll need to squash my "lil designer commit" into your mega commit again.

auraz · 2014-07-30T19:29:22Z

@talbs OK, thanks

cahrens · 2014-07-31T14:26:41Z

👍

auraz · 2014-07-31T15:30:24Z

Failing tests:
acceptance.tests.video.test_video_handout.VideoHandoutTest.test_handout_download_works_with_save
acceptance.tests.video.test_video_handout.VideoHandoutTest.test_handout_replace_w_save
acceptance.tests.video.test_video_times.VideoTimesTest.test_video_start_time
acceptance.tests.video.test_video_handout.VideoHandoutTest.test_handout_replace_wo_save
acceptance.tests.video.test_video_handout.VideoHandoutTest.test_handout_upload_and_clear_works
acceptance.tests.video.test_video_module.YouTubeVideoTest.test_multiple_videos_in_sequentials_load_and_work

@cahrens do you think I can merge?

Fix bok_choy test by changing course separator. Change format of the modal title to '[Subsection/Section Name] Settings'. Improve bok_choy test stability. Studio: correcting modal window size name for outline settings editor Specify full date in bok_choy tests. Refactor bok_choy tests. Remove .modal-editor from basic-modal.underscore Set classes in modal window dynamically. Studio: revising outline edit modal tip content and overall size Rename isEditable to isEditableOnCourseOutline. Interpolate display name. Use graded instead of format as flag. Studio: revising outline settings edit modal size Fix selectors in bok_choy tests.

talbs reviewed Jul 16, 2014
View reviewed changes

talbs mentioned this pull request Jul 17, 2014

Studio: Styling Support for Section/Subsection Settings Modal UI #4455

Merged

frrrances reviewed Jul 23, 2014
View reviewed changes

cahrens reviewed Jul 24, 2014
View reviewed changes

cahrens reviewed Jul 29, 2014
View reviewed changes

cahrens merged this pull request into bulk-publishing Jul 31, 2014

cahrens deleted the alex/edit_course_outline branch July 31, 2014 17:25

tymofij mentioned this pull request Jul 31, 2014

Compute graders performance optimization #4632

Merged

Edit section and subsection at course outline page. #4425

Edit section and subsection at course outline page. #4425

Uh oh!

Conversation

auraz commented Jul 15, 2014

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

talbs commented Jul 17, 2014

Uh oh!

talbs commented Jul 23, 2014

Uh oh!

Choose a reason for hiding this comment

Uh oh!

frrrances commented Jul 23, 2014

Uh oh!

talbs commented Jul 23, 2014

Uh oh!

cahrens commented Jul 24, 2014

Uh oh!

cahrens commented Jul 24, 2014

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cahrens commented Jul 24, 2014

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cahrens commented Jul 24, 2014

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

talbs commented Jul 24, 2014

Uh oh!

auraz commented Jul 29, 2014

Uh oh!

auraz commented Jul 29, 2014

Uh oh!

auraz commented Jul 29, 2014

Uh oh!

auraz commented Jul 29, 2014

Uh oh!

auraz commented Jul 29, 2014

Uh oh!

frrrances commented Jul 29, 2014

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cahrens commented Jul 29, 2014

Uh oh!

auraz commented Jul 30, 2014

Uh oh!

auraz commented Jul 30, 2014

Uh oh!

cahrens commented Jul 30, 2014

Uh oh!

cahrens commented Jul 30, 2014

Uh oh!

auraz commented Jul 30, 2014

Uh oh!

talbs commented Jul 30, 2014

Uh oh!

auraz commented Jul 30, 2014

Uh oh!

cahrens commented Jul 31, 2014

Uh oh!

auraz commented Jul 31, 2014

Uh oh!