Make clearer that Course navigation is draggable

[skip-crystalball]
closes OUT-6542
flag=none

Test Plan

Disable via button
- Click on the 3 dots on the right of a section and click 'Disable'
- Ensure that the section moves to the bottom of the disabled section
- Ensure that disabled message appears under the section name
- Make sure that the menu now says 'Enable' instead of 'Disable'

Disable via drag
- Drag a section from enabled to disabled
- Ensure that disabled message appears under the section name
- Note: The menu won't be updated to 'Enable'

Reorder via move button
- Try all options (top, before, after, bottom) and ensure it works
  as expected.
- Note: This woll not work with the disabled section

Reorder via drag
- should work as expected

Enable via button
- Click on the 3 dots on the right of a section and click 'Enable'
- Ensure that the section moves to the bottom of the enabled section
- Ensure that disabled message disappears under the section name
- Make sure that the menu now says 'Disable' instead of 'Enable'

Enable via drag
- Drag a section from disabled to enabled
- Ensure that disabled message disappears under the section name
- Note: The menu won't be updated to 'Disable'

Reorder via drag
- should work as expected

Change-Id: I7c3bfea61a65790afd004a8b02427748effb688f
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/353778
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Wilmer Corrales <wilmer.corrales@instructure.com>
QA-Review: Wilmer Corrales <wilmer.corrales@instructure.com>
Product-Review: Sam Garza <sam.garza@instructure.com>

app/stylesheets/pages/course_settings/_course_settings.scss

@@ -220,9 +220,11 @@ ul.user_list div.enrollment_type.pending {
   li.navitem {
     color: $section_tabs_color;
     cursor: pointer;
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     @include fontSize($ic-font-size--small);
-    padding: direction-sides(4px 0 4px 25px);
+    padding: direction-sides(4px 0 4px 10px);
     border: solid $section_tabs_border_bottom_color;
     border-width: 0 1px 1px;
     &:hover {
@@ -234,6 +236,18 @@ ul.user_list div.enrollment_type.pending {
         display: none;
       }
     }
+    .draggable_handle {
+      display: inline-block;
+      padding: 10px 0px;
+      margin-right: 10px;
+      width: 25px;
+      min-width: 25px;
+    }
+    .navitem_content {
+      display: inline-block;
+      padding: 10px 0px;
+      flex-grow: 1
+    }
     .disabled_message {
       display: none;
     }
@@ -250,7 +264,7 @@ ul.user_list div.enrollment_type.pending {
     .disabled_message {
       display: block;
       font-size: 0.8em;
-      padding-#{direction(left)}: 10px;
+      padding-#{direction(left)}: 0px;
       line-height: 0.7em;
       font-style: italic;
     }

app/views/courses/settings.html.erb

@@ -877,7 +877,17 @@
           <li aria-label="<%= tab[:label] %>" class="navitem <%= 'enabled' if @context.tab_enabled?(tab) %>"
               id="nav_edit_tab_id_<%= tab[:id] %>"
           >
-            <%= tab[:label] %>
+            <div class="draggable_handle">
+              <% if @context.tab_enabled?(tab) %>
+                  <i class="icon-drag-handle"></i>
+              <% else %>
+                &nbsp;
+              <% end %>
+            </div>
+            <div class="navitem_content">
+              <%= tab[:label] %>
+              <span class="disabled_message"><%= tab[:disabled_message] %></span>
+            </div>
             <% if @context.tab_enabled?(tab) %>
               <div class="admin-links">
                 <a class="al-trigger al-trigger-gray" role="button" href="#">
@@ -895,7 +905,6 @@
                   </li>
                 </ul>
               </div>
-              <span class="disabled_message"><%= tab[:disabled_message] %></span>
             <% end %>
           </li>
         <% end %>
@@ -916,7 +925,13 @@
               class="navitem enabled"
               id="nav_edit_tab_id_<%= tab[:id] %>"
           >
-            <%= tab[:label] %>
+            <div class="draggable_handle">
+              <i class="icon-drag-handle"></i>
+            </div>
+            <div class="navitem_content">
+              <%= tab[:label] %>
+              <span class="disabled_message"><%= tab[:disabled_message] %></span>
+            </div>
             <div class="admin-links">
                 <a class="al-trigger al-trigger-gray" role="button" href="#">
                   <i class="icon-more" aria-hidden="true"></i>
@@ -933,8 +948,6 @@
                   </li>
                 </ul>
               </div>
-              <span class="disabled_message"><%= tab[:disabled_message] %></span>
-
           </li>
         <% end %>
       </ul>