From 1b5f0400212cbd7f1d975cd4da3c523685395aad Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Tue, 12 Mar 2013 21:57:40 -0400 Subject: [PATCH 01/30] studio - checklists: roughed out initial static design, HTML, and most CSS for checklists v0 UI --- cms/djangoapps/contentstore/views.py | 3 + cms/static/sass/_base.scss | 10 +- cms/static/sass/_variables.scss | 3 + cms/static/sass/base-style.scss | 1 + cms/templates/checklists.html | 43 +++++ cms/templates/ux-checklists.html | 246 +++++++++++++++++++++++++++ cms/templates/widgets/header.html | 1 + cms/urls.py | 1 + 8 files changed, 305 insertions(+), 3 deletions(-) create mode 100644 cms/templates/checklists.html create mode 100644 cms/templates/ux-checklists.html diff --git a/cms/djangoapps/contentstore/views.py b/cms/djangoapps/contentstore/views.py index c2c80106fa..7394edb4f7 100644 --- a/cms/djangoapps/contentstore/views.py +++ b/cms/djangoapps/contentstore/views.py @@ -113,6 +113,9 @@ def howitworks(request): else: return render_to_response('howitworks.html', {}) +def ux_checklists(request): + return render_to_response('ux-checklists.html', {}) + # ==== Views for any logged-in user ================================== diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 5d4bc7c773..23ff2b93e8 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -214,7 +214,7 @@ h1 { color: $gray-l2; } - .title, .title-1 { + .title-1 { @include font-size(32); margin: 0; padding: 0; @@ -283,8 +283,8 @@ h1 { .title-3 { @include font-size(16); - margin: 0 0 ($baseline/4) 0; - font-weight: 500; + margin: 0 0 ($baseline/2) 0; + font-weight: 600; } .title-4 { @@ -772,6 +772,10 @@ hr.divide { word-wrap: break-word; } +hr.divider { + @extend .sr; +} + // ==================== // js dependant diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 4d8e26b2f9..e94ebcb7bc 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -77,6 +77,9 @@ $shadow: rgba(0,0,0,0.2); $shadow-l1: rgba(0,0,0,0.1); $shadow-d1: rgba(0,0,0,0.4); +// misc. +$elem-height-imaginary: 1000000px; + // colors - inherited $baseFontColor: #3c3c3c; $offBlack: #3c3c3c; diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss index dceac4233d..e37ea22aad 100644 --- a/cms/static/sass/base-style.scss +++ b/cms/static/sass/base-style.scss @@ -31,6 +31,7 @@ @import "login"; @import "account"; @import "index"; +@import "checklists"; @import 'jquery-ui-calendar'; @import 'content-types'; diff --git a/cms/templates/checklists.html b/cms/templates/checklists.html new file mode 100644 index 0000000000..21f5c5007d --- /dev/null +++ b/cms/templates/checklists.html @@ -0,0 +1,43 @@ +<%inherit file="base.html" /> +<%block name="title">Course Checklists +<%block name="bodyclass">is-signedin course checklists + +<%block name="jsextra"> + + + +<%block name="content"> +
+
+
+ UX Design +

Alerts & Notifications

+
+
+
+ +
+
+
+
+
+

Alerts

+ persistant, static messages to the user +
+ +

In Studio, alerts are 1) general warnings/notes (e.g. drafts, published content, next steps) about the current view a user is interacting with or 2) notes about the status (e.g. saved confirmations, errors, next system steps) of any previous state that need to communicated to the user when arriving at the current view.

+
+
+
+
+ + +<%block name="view_alerts"> + + \ No newline at end of file diff --git a/cms/templates/ux-checklists.html b/cms/templates/ux-checklists.html new file mode 100644 index 0000000000..ef63561ce2 --- /dev/null +++ b/cms/templates/ux-checklists.html @@ -0,0 +1,246 @@ +<%inherit file="base.html" /> +<%block name="title">Course Checklists +<%block name="bodyclass">is-signedin course uxdesign checklists + +<%block name="content"> +
+
+
+ Tools +

Course Tasks & Checklists

+
+
+
+ +
+
+
+
+

Current Checklists

+ +
+
+

Getting Started with Studio

+ Tasks Completed: 2/5 +
+ +
    +
  • +
    +
    + + +
    +

    Grant your collaborators permission to edit your course so you can work together.

    +
    + + +
    • +
  • +
    +
    + + +
    +

    Establish a course start and end date, course enrollment start and end dates, content release and due dates, and other important dates.

    +
    + + +
    • +
  • +
    +
    + + +
    +

    Grant your collaborators permission to edit your course so you can work together.

    +
    + + +
    • +
  • +
    +
    + + +
    +

    Establish a course start and end date, course enrollment start and end dates, content release and due dates, and other important dates.

    +
    + + +
    • +
  • +
    +
    + + +
    +

    Grant your collaborators permission to edit your course so you can work together.

    +
    + + +
    • +
  • +
    +
    + + +
    +

    Establish a course start and end date, course enrollment start and end dates, content release and due dates, and other important dates.

    +
    + + +
    • +
+ + +
+ +
+ +

Completed Checklists

+ +
+
+

Getting Started with Studio

+ ✓ Tasks Completed: 5/5 +
+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ + +
+ +
+
+
+ + +
+
+ + +<%block name="view_alerts"> + +
+
+ ✓ + +
+

Your policy changes have been saved.

+

Please note that validation of your policy key and value pairs is not currently in place yet. If you are having difficulties, please review your policy pairs.

+
+ + + ␡ + close alert + +
+
+ + +<%block name="jsextra"> + + \ No newline at end of file diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index a063e4b526..7648f8b6f2 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -58,6 +58,7 @@ diff --git a/cms/urls.py b/cms/urls.py index d43b9bc44c..cba19310fe 100644 --- a/cms/urls.py +++ b/cms/urls.py @@ -83,6 +83,7 @@ urlpatterns = ('', # User creation and updating views urlpatterns += ( + url(r'^ux-checklists$', 'contentstore.views.ux_checklists', name='checklists'), url(r'^howitworks$', 'contentstore.views.howitworks', name='howitworks'), url(r'^signup$', 'contentstore.views.signup', name='signup'), From 66a8735a58908b3ce1e72f5fca0e90cdc12327f9 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 13 Mar 2013 10:50:34 -0400 Subject: [PATCH 02/30] studio - Checklists: initial design and front end proofing/firming up - WIP --- cms/static/sass/_base.scss | 3 +- cms/static/sass/_checklists.scss | 273 ++++++++++++++++++++++++++++ cms/static/sass/_variables.scss | 1 + cms/templates/ux-checklists.html | 303 ++++++++++++++++++++++--------- 4 files changed, 497 insertions(+), 83 deletions(-) create mode 100644 cms/static/sass/_checklists.scss diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 23ff2b93e8..995a0bbe9f 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -327,7 +327,8 @@ h1 { } } - .nav-related { + // navigation + .nav-related, .nav-page { .nav-item { margin-bottom: ($baseline/4); diff --git a/cms/static/sass/_checklists.scss b/cms/static/sass/_checklists.scss new file mode 100644 index 0000000000..66601fcf2a --- /dev/null +++ b/cms/static/sass/_checklists.scss @@ -0,0 +1,273 @@ +// Studio - Course Settings +// ==================== +body.course.checklists { + + .content-primary, .content-supplementary { + @include box-sizing(border-box); + float: left; + } + + .content-primary { + width: flex-grid(9, 12); + margin-right: flex-gutter(); + } + + // checklists - general + .course-checklist { + @extend .window; + margin: 0 0 ($baseline*2) 0; + + &:last-child { + margin-bottom: 0; + } + + header { + @include clearfix(); + margin-bottom: 0; + padding: $baseline ($baseline*1.5); + + .checklist-title { + @include transition(color .15s .25s ease-in-out); + width: flex-grid(7, 9); + margin: 0 flex-gutter() 0 0; + float: left; + + &.is-selectable { + cursor: pointer; + + &:hover { + color: $blue; + } + } + } + + .checklist-status { + @include font-size(13); + width: flex-grid(2, 9); + float: right; + margin-top: ($baseline/2); + text-align: right; + color: $gray-l2; + + .status-count { + @include font-size(16); + margin-left: ($baseline/4); + margin-right: ($baseline/4); + color: $gray-d3; + font-weight: 600; + } + + .status-amount { + @include font-size(16); + margin-left: ($baseline/4); + color: $gray-d3; + font-weight: 600; + } + } + } + + // checklist actions + .course-checklist-actions { + @include clearfix(); + @include box-shadow(inset 0 1px 1px $shadow-l1); + @include transition(border .15s ease-in-out .25s); + border-top: 1px solid $gray-l2; + padding: $baseline ($baseline*1.5); + background: $gray-l4; + + .action-primary { + @include green-button(); + float: left; + + .icon-add { + @include font-size(12); + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/4); + } + } + + .action-secondary { + @include font-size(14); + @include grey-button(); + font-weight: 400; + float: right; + + .icon-delete { + @include font-size(12); + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/4); + } + } + } + + // state - collapsed + &.is-collapsed { + + .list-tasks { + height: 0; + } + } + + // state - completed + &.is-completed { + + header { + + .checklist-title { + color: $gray-l1; + } + + .checklist-status { + + .status-count, .status-amount, .icon-confirm { + color: $green; + } + } + + .checklist-status .icon-confirm { + @include font-size(12); + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/4); + } + } + } + + // state - not available + .is-not-available { + + } + } + + // list of tasks + .list-tasks { + height: auto; + overflow: hidden; + + .task { + @include transition(background .15s ease-in-out .25s, border .15s ease-in-out .25s); + @include clearfix(); + position: relative; + border-top: 1px solid $white; + border-bottom: 1px solid $gray-l5; + padding: $baseline ($baseline*1.5); + background: $white; + opacity: 1.0; + + + &:last-child { + margin-bottom: 0; + border-bottom: none; + } + + label { + float: left; + width: flex-grid(7,9); + font-weight: 500; + + .task-input { + display: inline-block; + vertical-align: middle; + margin-right: flex-gutter(); + } + + .task-details { + display: inline-block; + vertical-align: middle; + width: flex-grid(6,7); + + .task-name { + @include transition(color .15s .25s ease-in-out); + vertical-align: baseline; + cursor: pointer; + margin-bottom: 0; + } + + .task-description { + @include transition(color .15s .25s ease-in-out); + @include font-size(14); + color: $gray-l2; + } + + .task-support { + @include transition(opacity .15s .25s ease-in-out); + @include font-size(12); + opacity: 0; + pointer-events: none; + } + } + } + + .task-actions { + @include transition(opacity .15s .25s ease-in-out); + @include clearfix(); + display: inline-block; + vertical-align: middle; + float: left; + width: flex-grid(2,9); + margin: ($baseline/2) 0 0 flex-gutter(); + opacity: 0; + pointer-events: none; + text-align: right; + + .action-primary { + @include blue-button; + @include transition(all .15s); + @include font-size(12); + font-weight: 600; + text-align: center; + } + + .action-secondary { + @include font-size(13); + margin-top: ($baseline/2); + } + } + + // state - hover + &:hover { + background: $blue-l5; + border-bottom-color: $blue-l4; + border-top-color: $blue-l4; + opacity: 1.0; + + .task-details { + .task-support { + opacity: 1.0; + pointer-events: auto; + } + } + + .task-actions { + opacity: 1.0; + pointer-events: auto; + } + } + + + // state - completed + &.is-completed { + background: $gray-l6; + border-top-color: $gray-l5; + border-bottom-color: $gray-l5; + + .task-details { + opacity: 0.50; + } + + &:hover { + + .task-details { + opacity: 1.0; + } + } + } + } + } + + .content-supplementary { + width: flex-grid(3, 12); + } +} \ No newline at end of file diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index e94ebcb7bc..9e383af99d 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -24,6 +24,7 @@ $gray-l2: tint($gray,40%); $gray-l3: tint($gray,60%); $gray-l4: tint($gray,80%); $gray-l5: tint($gray,90%); +$gray-l6: tint($gray,95%); $gray-d1: shade($gray,20%); $gray-d2: shade($gray,40%); $gray-d3: shade($gray,60%); diff --git a/cms/templates/ux-checklists.html b/cms/templates/ux-checklists.html index ef63561ce2..d0a5ab8fa4 100644 --- a/cms/templates/ux-checklists.html +++ b/cms/templates/ux-checklists.html @@ -26,13 +26,14 @@ + + + + +
+
+

Getting Started with Studio

+ Tasks Completed: 2/5 +
+ +
    +
  • + + + +
    • + +
  • + + + +
    • + +
  • + + + +
    • + +
  • + + +
    • @@ -138,29 +206,68 @@ ✓ Tasks Completed: 5/5 -
      -
    • - -
      • +
      • + + +
        • -
      • +
      • + + + +
        • + +
      • + + +
      - +
    • + + Add a Task to This Checklist +
      • +
    • + Delete This Checklist +
      • +
@@ -233,12 +340,44 @@ From 16f6744aefcb53f8b1b59cdc82251288020540c6 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 13 Mar 2013 19:13:26 -0400 Subject: [PATCH 04/30] studio - checklists: revised task completion styles, added in checklist visual progress UI and demo/PoC JS and cleaned up some content/status states --- cms/static/sass/_checklists.scss | 49 ++++++++++++++++++++++++++++++-- cms/templates/ux-checklists.html | 25 ++++++++++++++-- 2 files changed, 68 insertions(+), 6 deletions(-) diff --git a/cms/static/sass/_checklists.scss b/cms/static/sass/_checklists.scss index ca5424967e..7a55e07101 100644 --- a/cms/static/sass/_checklists.scss +++ b/cms/static/sass/_checklists.scss @@ -21,6 +21,32 @@ body.course.checklists { margin-bottom: 0; } + // visual status + .viz-checklist-status { + @include text-hide(); + @include size(100%,($baseline/4)); + position: relative; + display: block; + margin: 0; + background: $gray-l4; + + .viz-checklist-status-value { + @include transition(width 2s ease-in-out .25s); + position: absolute; + top: 0; + left: 0; + width: 50%; + height: ($baseline/4); + background: $green; + + .int { + @include text-sr(); + } + } + } + // 0% of checklist completed + + // header/title header { @include clearfix(); @include box-shadow(inset 0 -1px 1px $shadow-l1); @@ -127,6 +153,13 @@ body.course.checklists { // state - completed &.is-completed { + .viz-checklist-status { + + .viz-checklist-status-value { + width: 100%; + } + } + header { .checklist-title, .icon-confirm { @@ -273,10 +306,20 @@ body.course.checklists { color: $gray-l2; } + .task-actions { + + .action-primary { + @include grey-button; + @include font-size(12); + font-weight: 600; + text-align: center; + } + } + &:hover { - background: $blue-l5; - border-bottom-color: $blue-l4; - border-top-color: $blue-l4; + background: $gray-l5; + border-bottom-color: $gray-l4; + border-top-color: $gray-l4; .task-details { opacity:1.0; diff --git a/cms/templates/ux-checklists.html b/cms/templates/ux-checklists.html index 3f7a947111..833bbe000f 100644 --- a/cms/templates/ux-checklists.html +++ b/cms/templates/ux-checklists.html @@ -14,11 +14,17 @@
+
+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.Test Checklist Progress Visualization

+
+

Current Checklists

+ 0% of checklist completed +

✓ Getting Started with Studio

Tasks Completed: 0/4 @@ -100,6 +106,8 @@
+ 0% of checklist completed +

✓ Draft a Rough Course Outline

Tasks Completed: 0/7 @@ -238,6 +246,8 @@
+ 0% of checklist completed +

✓ Explore edX's Support Tools

Tasks Completed: 0/4 @@ -319,9 +329,10 @@
+ 0% of checklist completed +

✓ Draft your Course Introduction

- Tasks Completed: 0/4
    @@ -330,7 +341,7 @@
    -

    Drafting a Course Description/h4> +

    Drafting a Course Description

    Courses on edX each have their own introduction page, including a course video, description, and more. Draft the introduction students will read before deciding to enroll in your course.

    @@ -342,7 +353,7 @@
-
  • +
    • + + +
    <%block name="view_alerts"> - + +
    +
    + ✓ + +
    +

    Your policy changes have been saved.

    +

    Please note that validation of your policy key and value pairs is not currently in place yet. If you are having difficulties, please review your policy pairs.

    +
    + + + ␡ + close alert + +
    +
    + + +<%block name="jsextra"> + \ No newline at end of file diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index 7648f8b6f2..45ff66df85 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -58,7 +58,7 @@ diff --git a/cms/urls.py b/cms/urls.py index cba19310fe..18da7c7b71 100644 --- a/cms/urls.py +++ b/cms/urls.py @@ -83,7 +83,8 @@ urlpatterns = ('', # User creation and updating views urlpatterns += ( - url(r'^ux-checklists$', 'contentstore.views.ux_checklists', name='checklists'), + url(r'^(?P[^/]+)/(?P[^/]+)/checklists/(?P[^/]+)$', 'contentstore.views.get_checklists', name='checklists'), +# url(r'^ux-checklists$', 'contentstore.views.ux_checklists', name='checklists'), url(r'^howitworks$', 'contentstore.views.howitworks', name='howitworks'), url(r'^signup$', 'contentstore.views.signup', name='signup'), diff --git a/common/lib/xmodule/xmodule/templates/course/empty.yaml b/common/lib/xmodule/xmodule/templates/course/empty.yaml index cb2f3bcec6..61cc204254 100644 --- a/common/lib/xmodule/xmodule/templates/course/empty.yaml +++ b/common/lib/xmodule/xmodule/templates/course/empty.yaml @@ -2,5 +2,31 @@ metadata: display_name: Empty start: 2020-10-10T10:00 + checklists: [ + {"short_description" : "Getting Started With Studio", + "items" : [{"short_description": "Add Course Team Members", + "long_description": "Grant your collaborators permission to edit your course so you can work together.", + "is_checked": false, + "action_url": "/manage_users/", + "action_text": "Edit Course Team"}, + {"short_description": "Drink Whiskey", + "long_description": "Team-building activity.", + "is_checked": false, + "action_url": "/drink_alcohol", + "action_text": "Drink"}], + "completed" : false}, + {"short_description" : "Launching Your Course", + "items" : [{"short_description": "Add Content", + "long_description": "Create videos and problems.", + "is_checked": false, + "action_url": "", + "action_text": ""}, + {"short_description": "View Course as a Student", + "long_description": "Create a student account and view your course.", + "is_checked": false, + "action_url": "", + "action_text": ""}], + "completed" : false} + ] data: { 'textbooks' : [ ], 'wiki_slug' : null } children: [] From 065e85044923c2b14c46246aa92d83e4696396cc Mon Sep 17 00:00:00 2001 From: cahrens Date: Thu, 14 Mar 2013 09:32:54 -0400 Subject: [PATCH 07/30] Merge with Brian's changes. --- cms/templates/checklists.html | 28 +- cms/templates/ux-checklists.html | 618 ------------------------------- 2 files changed, 24 insertions(+), 622 deletions(-) delete mode 100644 cms/templates/ux-checklists.html diff --git a/cms/templates/checklists.html b/cms/templates/checklists.html index 109ac36df5..455dbe6b04 100644 --- a/cms/templates/checklists.html +++ b/cms/templates/checklists.html @@ -14,6 +14,10 @@
    +
    +

    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.Test Checklist Progress Visualization

    +
    +

    Current Checklists

    @@ -21,6 +25,7 @@ % for checklist in checklists:
    + 0% of checklist completed

    ✓${checklist['short_description']}

    Tasks Completed: 0/4 @@ -53,6 +58,8 @@ % endfor
    + 0% of checklist completed +

    ✓ Getting Started with Studio

    Tasks Completed: 0/4 @@ -134,6 +141,8 @@
    + 0% of checklist completed +

    ✓ Draft a Rough Course Outline

    Tasks Completed: 0/7 @@ -272,6 +281,8 @@
    + 0% of checklist completed +

    ✓ Explore edX's Support Tools

    Tasks Completed: 0/4 @@ -353,9 +364,10 @@
    + 0% of checklist completed +

    ✓ Draft your Course Introduction

    - Tasks Completed: 0/4
      @@ -364,8 +376,8 @@
      -

      Drafting a Course Description/h4> -

      Courses on edX each have their own introduction page, including a course video, description, and more. Draft the introduction students will read before deciding to enroll in your course.

      +

      Drafting a Course Description

      +

      Courses on edX each have their own introduction page, including a course video, description, and more. Draft the introduction students will read before deciding to enroll in your course.

      @@ -376,7 +388,7 @@
    -
  • +
    • <%block name="view_alerts">
    -
    - ✓ +
    + ✓ -
    -

    Your policy changes have been saved.

    -

    Please note that validation of your policy key and value pairs is not currently in place yet. If you are having difficulties, please review your policy pairs.

    -
    - - - ␡ - close alert - +
    +

    Your policy changes have been saved.

    +

    Please note that validation of your policy key and value pairs is not currently in place yet. If you are having difficulties, please review your policy pairs.

    + + + ␡ + close alert + +
    @@ -598,56 +113,55 @@ // checklists - prototype/basic js $(document).ready(function() { - $('.course-checklist .checklist-title').each(function(e){ - $(this).addClass('is-selectable').attr('title','Collapse/Expand this Checklist').bind('click', toggleChecklist); - }); + $('.course-checklist .checklist-title').each(function(e){ + $(this).addClass('is-selectable').bind('click', toggleChecklist); + }); - $('.course-checklist .task label').each(function(e){ - $(this).bind('click', toggleTask); - }); + $('.course-checklist .task label').each(function(e){ + $(this).bind('click', toggleTask); + }); - // demo/proof of concept for visual progress - $('.demo-checklistviz').click(function(e){ - (e).preventDefault(); - $('#course-checklist1 .viz-checklist-status .viz-checklist-status-value').css('width','25%'); - }); + // demo/proof of concept for visual progress + $('.demo-checklistviz').click(function(e){ + (e).preventDefault(); + $('#course-checklist1 .viz-checklist-status .viz-checklist-status-value').css('width','25%'); + }); - function toggleChecklist(e) { - (e).preventDefault(); - $(this).closest('.course-checklist').toggleClass('is-collapsed'); - } + function toggleChecklist(e) { + (e).preventDefault(); + $(this).closest('.course-checklist').toggleClass('is-collapsed'); + } - function toggleTask(e) { - (e).preventDefault(); + function toggleTask(e) { + (e).preventDefault(); - var $taskInput = $(this).find('.task-input'); + var $taskInput = $(this).find('.task-input'); - if ($taskInput.attr('checked')) { - $taskInput.removeAttr('checked'); - console.log('removing check'); - } - else { - $taskInput.attr('checked', 'checked'); - console.log('adding check'); - } + if ($taskInput.attr('checked')) { + $taskInput.removeAttr('checked'); + console.log('removing check'); + } + else { + $taskInput.attr('checked', 'checked'); + console.log('adding check'); + } - $(this).closest('.task').toggleClass('is-completed'); - } + $(this).closest('.task').toggleClass('is-completed'); + } - // in-progress update checklist progress (based on checkbox check/uncheck events) - function updateChecklistProgress() { - var $statusCount = $(this).closest('.course-checklist').find('.status-count'); - var $statusAmount = $(this).closest('.course-checklist').find('.status-amount'); + // in-progress update checklist progress (based on checkbox check/uncheck events) + function updateChecklistProgress() { + var $statusCount = $(this).closest('.course-checklist').find('.status-count'); + var $statusAmount = $(this).closest('.course-checklist').find('.status-amount'); - if ($(this).attr('checked')) { - console.log('adding'); - } - - else { - console.log('subtracting'); - } - } + if ($(this).attr('checked')) { + console.log('adding'); + } + else { + console.log('subtracting'); + } + } }); \ No newline at end of file diff --git a/common/lib/xmodule/xmodule/templates/course/empty.yaml b/common/lib/xmodule/xmodule/templates/course/empty.yaml index 61cc204254..153d7859ee 100644 --- a/common/lib/xmodule/xmodule/templates/course/empty.yaml +++ b/common/lib/xmodule/xmodule/templates/course/empty.yaml @@ -3,30 +3,104 @@ metadata: display_name: Empty start: 2020-10-10T10:00 checklists: [ - {"short_description" : "Getting Started With Studio", - "items" : [{"short_description": "Add Course Team Members", - "long_description": "Grant your collaborators permission to edit your course so you can work together.", - "is_checked": false, - "action_url": "/manage_users/", - "action_text": "Edit Course Team"}, - {"short_description": "Drink Whiskey", - "long_description": "Team-building activity.", - "is_checked": false, - "action_url": "/drink_alcohol", - "action_text": "Drink"}], - "completed" : false}, - {"short_description" : "Launching Your Course", - "items" : [{"short_description": "Add Content", - "long_description": "Create videos and problems.", - "is_checked": false, - "action_url": "", - "action_text": ""}, - {"short_description": "View Course as a Student", - "long_description": "Create a student account and view your course.", - "is_checked": false, - "action_url": "", - "action_text": ""}], - "completed" : false} + {"short_description" : "Getting Started With Studio", + "items" : [{"short_description": "Add Course Team Members", + "long_description": "Grant your collaborators permission to edit your course so you can work together.", + "is_checked": false, + "action_url": "/manage_users/", + "action_text": "Edit Course Team"}, + {"short_description": "Set Important Dates for Your Course", + "long_description": "Establish your course's student enrollment and launch dates on the Schedule and Details Settings page.", + "is_checked": false, + "action_url": "/settings-details/", + "action_text": "Edit Course Details & Schedule"}, + {"short_description": "Draft Your Course's Grading Policy", + "long_description": "Regardless of whether you have all your course assignments written, you can immediately get started setting up assignment types and a grade computation scheme.", + "is_checked": false, + "action_url": "/settings-grading/", + "action_text": "Edit Grading Settings"}, + {"short_description": "Explore the other Studio Checklists", + "long_description": "They'll help you learn the other course authoring tools available to you, and will also help you find help when you need it.", + "is_checked": false, + "action_url": "", + "action_text": ""}], + "completed" : false}, + {"short_description" : "Draft a Rough Course Outline", + "items" : [{"short_description": "Create your first Section and Subsection", + "long_description": "Walk through the mechanics of building your course's first section and subsection through your course outline to start.", + "is_checked": false, + "action_url": "/course/", + "action_text": "Edit in Course Outline"}, + {"short_description": "Set your first Section's Release Date", + "long_description": "Sections are released sequentially to students, and you have complete control over they are released to students.", + "is_checked": false, + "action_url": "/course/", + "action_text": "Edit in Course Outline"}, + {"short_description": "Designate a Subsection as Graded", + "long_description": "Assignment types are defined in your grading settings but can be quickly associated with sections using your course outline.", + "is_checked": false, + "action_url": "/course/", + "action_text": "Edit in Course Outline"}, + {"short_description": "Reordering Course Content", + "long_description": "From the Course Outline, you can easily reorder your course content based on the progression you'd like students to walk through.", + "is_checked": false, + "action_url": "/course/", + "action_text": "Edit in Course Outline"}, + {"short_description": "Renaming Course Sections", + "long_description": "Learn how to rename Sections by clicking on its name from the Course Outline; this should open the editing mode.", + "is_checked": false, + "action_url": "/course/", + "action_text": "Edit in Course Outline"}, + {"short_description": "Deleting Course Content", + "long_description": "Try out deleting on a section, subsection, or unit you don't need anymore. Be careful though, anything inside the course content you delete is also removed.", + "is_checked": false, + "action_url": "/course/", + "action_text": "Edit in Course Outline"}, + {"short_description": "Add an Instructor-Only Section to Your Outline", + "long_description": "Some course authors find creating a section for unsorted, in-progress work useful. To do this, create a section and set the release date to the distant future.", + "is_checked": false, + "action_url": "/course/", + "action_text": "Edit in Course Outline"}], + "completed" : false}, + {"short_description" : "Explore edX's Support Tools", + "items" : [{"short_description": "Explore the Studio Help Forum", + "long_description": "Access the Studio Help forum from the menu that appears when you click your user name in the top right corner of Studio.", + "is_checked": false, + "action_url": "http://help.edge.edx.org/", + "action_text": "Visit Studio Help"}, + {"short_description": "Enroll in edX101", + "long_description": "Register for edX101, edX's primer for course creation.", + "is_checked": false, + "action_url": "/", + "action_text": "Register for edX 101"}, + {"short_description": "Download the Studio Documentation", + "long_description": "View the searchable Studio documentation to find answers to your questions or information about how to do specific tasks. Once you download the PDF, you can view it offline.", + "is_checked": false, + "action_url": "/", + "action_text": "Download Documentation"}], + "completed" : false}, + {"short_description" : "Draft your Course Introduction", + "items" : [{"short_description": "Drafting a Course Description", + "long_description": "Courses on edX each have their own introduction page, including a course video, description, and more. Draft the introduction students will read before deciding to enroll in your course.", + "is_checked": false, + "action_url": "/settings-details/", + "action_text": "Edit Course Details & Schedule"}, + {"short_description": "Adding Staff Bios", + "long_description": "Showing prospective students who will be their instructor is helpful, so we recommend including staff bios in the Course introduction page.", + "is_checked": false, + "action_url": "/settings-details/", + "action_text": "Edit Course Details & Schedule"}, + {"short_description": "Add Course FAQs", + "long_description": "Students often have questions about courses, and including a short list of frequently asked questions up front often reduces the number of students who are confused.", + "is_checked": false, + "action_url": "/settings-details/", + "action_text": "Edit Course Details & Schedule"}, + {"short_description": "Add Course Prerequisites", + "long_description": "Before a student jumps into a course without the necessary preparation, we'd like them to understand the prerequisites that will make them more likely to succeed.", + "is_checked": false, + "action_url": "/settings-details/", + "action_text": "Edit Course Details & Schedule"}], + "completed" : false} ] data: { 'textbooks' : [ ], 'wiki_slug' : null } children: [] From 017fd06bfc1ff28635bb54f427c5256ac64d89ba Mon Sep 17 00:00:00 2001 From: cahrens Date: Thu, 14 Mar 2013 13:37:22 -0400 Subject: [PATCH 10/30] Pre-merge. --- cms/static/js/models/checklists.js | 1 + cms/static/js/views/checklists_view.js | 57 ++++++++++--- cms/templates/checklists.html | 113 ++++++------------------- 3 files changed, 70 insertions(+), 101 deletions(-) create mode 100644 cms/static/js/models/checklists.js diff --git a/cms/static/js/models/checklists.js b/cms/static/js/models/checklists.js new file mode 100644 index 0000000000..368db944ed --- /dev/null +++ b/cms/static/js/models/checklists.js @@ -0,0 +1 @@ +if (!CMS.Models['Checklists']) CMS.Models.Checklists = new Object(); \ No newline at end of file diff --git a/cms/static/js/views/checklists_view.js b/cms/static/js/views/checklists_view.js index b33a5d66f4..0905b392e4 100644 --- a/cms/static/js/views/checklists_view.js +++ b/cms/static/js/views/checklists_view.js @@ -1,18 +1,49 @@ +if (!CMS.Views['Checklists']) CMS.Views.Checklists = {}; + CMS.Views.Checklists = Backbone.View.extend({ - // takes CMS.Models.CourseInfo as model - tagName: 'div', + // takes CMS.Models.Checklists as model - render: function() { - // instantiate the ClassInfoUpdateView and delegate the proper dom to it - new CMS.Views.ClassInfoUpdateView({ - el: $('body.updates'), - collection: this.model.get('updates') - }); + events : { + 'click .course-checklist .checklist-title' : "toggleChecklist", + 'click .course-checklist .task label' : "toggleTask", + 'click .demo-checklistviz' : "demoUpdateProgress" + }, - new CMS.Views.ClassInfoHandoutsView({ - el: this.$('#course-handouts-view'), - model: this.model.get('handouts') - }); - return this; + initialize : function() { + // adding class and title needs to happen in HTML +// $('.course-checklist .checklist-title').each(function(e){ +// $(this).addClass('is-selectable').attr('title','Collapse/Expand this Checklist').bind('click', this.toggleChecklist); +// }); + }, + + toggleChecklist : function(e) { + (e).preventDefault(); + $(e.target).closest('.course-checklist').toggleClass('is-collapsed'); + }, + + toggleTask : function (e) { + (e).preventDefault(); + $(e.target).closest('.task').toggleClass('is-completed'); + }, + + // TODO: remove + demoUpdateProgress : function(e) { + (e).preventDefault(); + $('#course-checklist0 .viz-checklist-status .viz-checklist-status-value').css('width','25%'); + }, + + // TODO: not used. In-progress update checklist progress (based on checkbox check/uncheck events) + updateChecklistProgress : function(e) { + var $statusCount = this.$el.closest('.course-checklist').find('.status-count'); + var $statusAmount = this.$el.closest('.course-checklist').find('.status-amount'); + + if (this.$el.attr('checked')) { + console.log('adding'); + } + + else { + console.log('subtracting'); + } } + }); \ No newline at end of file diff --git a/cms/templates/checklists.html b/cms/templates/checklists.html index 455dbe6b04..a9d7255d55 100644 --- a/cms/templates/checklists.html +++ b/cms/templates/checklists.html @@ -2,6 +2,27 @@ <%block name="title">Course Checklists <%block name="bodyclass">is-signedin course uxdesign checklists +<%namespace name='static' file='static_content.html'/> +<%block name="jsextra"> + + + + + + + <%block name="content">
    @@ -542,18 +563,11 @@
    @@ -564,7 +578,7 @@ @@ -574,80 +588,3 @@
    -<%block name="view_alerts"> - -
    -
    - ✓ - -
    -

    Your policy changes have been saved.

    -

    Please note that validation of your policy key and value pairs is not currently in place yet. If you are having difficulties, please review your policy pairs.

    -
    - - - ␡ - close alert - -
    -
    - - -<%block name="jsextra"> - - \ No newline at end of file From ac25b02ce6842babfc1ed1107f49778e8d876f6b Mon Sep 17 00:00:00 2001 From: cahrens Date: Thu, 14 Mar 2013 13:48:17 -0400 Subject: [PATCH 11/30] Minor updates. --- cms/djangoapps/contentstore/views.py | 5 ++++- cms/static/js/views/checklists_view.js | 1 - 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/cms/djangoapps/contentstore/views.py b/cms/djangoapps/contentstore/views.py index 62c8f8da97..89360c1d42 100644 --- a/cms/djangoapps/contentstore/views.py +++ b/cms/djangoapps/contentstore/views.py @@ -1322,7 +1322,10 @@ def get_checklists(request, org, course, name): return render_to_response('checklists.html', - {'checklists' : course_module.metadata[key]}) + { + 'context_course': course_module, + 'checklists' : course_module.metadata[key] + }) @login_required diff --git a/cms/static/js/views/checklists_view.js b/cms/static/js/views/checklists_view.js index 0905b392e4..1ed79c8fac 100644 --- a/cms/static/js/views/checklists_view.js +++ b/cms/static/js/views/checklists_view.js @@ -22,7 +22,6 @@ CMS.Views.Checklists = Backbone.View.extend({ }, toggleTask : function (e) { - (e).preventDefault(); $(e.target).closest('.task').toggleClass('is-completed'); }, From 13c38fa173cd988b44bc5a2a32f9abda3102a1a4 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Thu, 14 Mar 2013 16:17:47 -0400 Subject: [PATCH 12/30] studio - checklists: revised input/label HTML and adjusted styling for each --- cms/static/sass/_checklists.scss | 87 ++++++++++++++------------------ cms/templates/checklists.html | 26 +++++----- 2 files changed, 51 insertions(+), 62 deletions(-) diff --git a/cms/static/sass/_checklists.scss b/cms/static/sass/_checklists.scss index 7a5b5213ea..b49c75f9e6 100644 --- a/cms/static/sass/_checklists.scss +++ b/cms/static/sass/_checklists.scss @@ -56,7 +56,7 @@ body.course.checklists { .checklist-title { @include transition(color .15s .25s ease-in-out); - width: flex-grid(7, 9); + width: flex-grid(6, 9); margin: 0 flex-gutter() 0 0; float: left; @@ -64,14 +64,6 @@ body.course.checklists { @include font-size(14); display: inline-block; vertical-align: middle; - margin-right: $baseline; - color: $gray-l4; - } - - .icon-confirm { - @include font-size(20); - display: inline-block; - vertical-align: middle; margin-right: ($baseline/2); color: $gray-l4; } @@ -91,11 +83,20 @@ body.course.checklists { .checklist-status { @include font-size(13); - width: flex-grid(2, 9); + width: flex-grid(3, 9); float: right; margin-top: ($baseline/2); text-align: right; color: $gray-l2; + + + .icon-confirm { + @include font-size(20); + display: inline-block; + vertical-align: middle; + margin-left: ($baseline/2); + color: $gray-l4; + } .status-count { @include font-size(16); @@ -192,13 +193,6 @@ body.course.checklists { color: $green; } } - - .checklist-status .icon-confirm { - @include font-size(12); - display: inline-block; - vertical-align: middle; - margin-right: ($baseline/4); - } } } @@ -230,41 +224,38 @@ body.course.checklists { border-bottom: none; } - label { + .task-input { + display: inline-block; + vertical-align: text-top; float: left; - width: flex-grid(7,9); + margin: ($baseline/2) flex-gutter() 0 0; + } + + .task-details { + display: inline-block; + vertical-align: text-top; + float: left; + width: flex-grid(6,9); font-weight: 500; - .task-input { - display: inline-block; - vertical-align: text-top; - margin: ($baseline/2) flex-gutter() 0 0; + .task-name { + @include transition(color .15s .25s ease-in-out); + vertical-align: baseline; + cursor: pointer; + margin-bottom: 0; + } + + .task-description { + @include transition(color .15s .25s ease-in-out); + @include font-size(14); + color: $gray-l2; } - .task-details { - display: inline-block; - vertical-align: text-top; - width: flex-grid(6,7); - - .task-name { - @include transition(color .15s .25s ease-in-out); - vertical-align: baseline; - cursor: pointer; - margin-bottom: 0; - } - - .task-description { - @include transition(color .15s .25s ease-in-out); - @include font-size(14); - color: $gray-l2; - } - - .task-support { - @include transition(opacity .15s .25s ease-in-out); - @include font-size(12); - opacity: 0; - pointer-events: none; - } + .task-support { + @include transition(opacity .15s .25s ease-in-out); + @include font-size(12); + opacity: 0; + pointer-events: none; } } @@ -273,7 +264,7 @@ body.course.checklists { @include clearfix(); display: inline-block; vertical-align: middle; - float: left; + float: right; width: flex-grid(2,9); margin: ($baseline/2) 0 0 flex-gutter(); opacity: 0; diff --git a/cms/templates/checklists.html b/cms/templates/checklists.html index 0e9be39fed..8415338466 100644 --- a/cms/templates/checklists.html +++ b/cms/templates/checklists.html @@ -48,27 +48,25 @@
    0% of checklist completed
    -

    +

    ▾ - - ✓${checklist['short_description']}

    - - Tasks Completed: 0/4 + ${checklist['short_description']} + + Tasks Completed: 0/4 + ✓ +
      % for item in checklist['items']:
    • -