Merge pull request #477 from edx/grady/unify-expand-collapse

Unified our expand collapse to be in line with Studio's

openassessment/templates/openassessmentblock/oa_edit.html

@@ -25,9 +25,11 @@
             </div>
 
             <ul id="openassessment_criterion_list" >
-                <li class="openassessment_criterion" id="openassessment_criterion_1">
-                    <div class="openassessment_criterion_header" id="openassessment_criterion_header_1">
-                        <input class="openassessment_display_criterion>" id="openassessment_display_criterion_1" type="checkbox" checked="1">
+                <li class="openassessment_criterion is-collapsible" id="openassessment_criterion_1">
+                    <div class="openassessment_criterion_header view-outline" id="openassessment_criterion_header_1">
+                        <a class="action expand-collapse collapse">
+                            <i class="icon-caret-down ui-toggle-expansion"></i>
+                        </a>
                         <h6 class="openassessment_criterion_header_title">
                             {% trans "Criterion C-C-C"%}
                         </h6>

openassessment/xblock/static/css/openassessment.css

@@ -2251,17 +2251,10 @@ hr.divider,
       padding: 5px;
       border-bottom: 1px solid #414243;
       overflow: auto; }
-      #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_header input[type="checkbox"] {
-        display: none; }
-      #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_header input[type="checkbox"] + h6:before {
-        font-family: "FontAwesome";
-        display: inline-block;
-        margin-right: 10px;
-        width: auto;
-        height: auto;
-        content: "\f054"; }
-      #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_header input[type="checkbox"]:checked + label:before {
-        content: "\f078"; }
+      #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_header .action.expand-collapse {
+        float: left; }
+        #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_header .action.expand-collapse .ui-toggle-expansion .icon-caret-down:before {
+          color: #414243; }
       #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_header .openassessment_criterion_header_title {
         text-transform: uppercase;
         width: 50%;
@@ -2307,6 +2300,23 @@ hr.divider,
         content: "\f067"; }
     #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_feedback_wrapper .openassessment_criterion_feedback_direction label {
       margin-left: 15px; }
+  #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion.collapsed .openassessment_criterion_body {
+    display: none; }
+  #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion.collapsed .openassessment_criterion_header .action.expand-collapse {
+    float: left; }
+    #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion.collapsed .openassessment_criterion_header .action.expand-collapse .ui-toggle-expansion {
+      -webkit-transform: rotate(-90deg);
+      -moz-transform: rotate(-90deg);
+      -ms-transform: rotate(-90deg);
+      -o-transform: rotate(-90deg);
+      transform: rotate(-90deg);
+      -webkit-transform-origin: 50% 50%;
+      -moz-transform-origin: 50% 50%;
+      -ms-transform-origin: 50% 50%;
+      -o-transform-origin: 50% 50%;
+      transform-origin: 50% 50%; }
+      #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion.collapsed .openassessment_criterion_header .action.expand-collapse .ui-toggle-expansion .icon-caret-down:before {
+        color: #414243; }
   #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion_option {
     padding: 5px; }
     #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion_option .openassessment_option_header {

openassessment/xblock/static/sass/oa/utilities/_developer.scss

@@ -354,21 +354,13 @@
         border-bottom: 1px solid $edx-gray-d3;
         overflow: auto;
 
-        input[type="checkbox"] {
-          display: none;
+        .action.expand-collapse {
+          float: left;
+          .ui-toggle-expansion {
+            .icon-caret-down:before{
+              color: $edx-gray-d3;
             }
-
-        input[type="checkbox"] + h6:before {
-          font-family: "FontAwesome";
-          display: inline-block;
-          margin-right: ($baseline-h/4);
-          width: auto;
-          height: auto;
-          content: "\f054";
           }
-
-        input[type="checkbox"]:checked + label:before {
-          content: "\f078";
         }
 
         .openassessment_criterion_header_title {
@@ -451,6 +443,24 @@
       }
     }
 
+    .openassessment_criterion.collapsed {
+      .openassessment_criterion_body{
+        display: none;
+      }
+      .openassessment_criterion_header{
+        .action.expand-collapse {
+          float: left;
+          .ui-toggle-expansion {
+            @include transform(rotate(-90deg));
+            @include transform-origin(50% 50%);
+            .icon-caret-down:before{
+              color: $edx-gray-d3;
+            }
+          }
+        }
+      }
+    }
+
     .openassessment_criterion_option{
       padding: 5px;