Polish easy student view controls

After feedback, slightly modify how the easy student view buttons
are shown:
1. Include 'Student View' text in button and remove the tooltip
2. Remove old student view button from course settings
3. Add student view icon to mobile navigation

closes LS-1725
flag=easy_student_view

Test plan:
 - Expect button to have text 'Student View' instead of just icon
 - Expect student view toggle to be gone from course settings
   sidebar
 - Adjust screen width to something small - expect to see and be
   able to use student view button on mobile nav

Change-Id: Ic5b499a1cd1132866b2030d81289d4441157a357
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/257318
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Jeff Largent <jeff.largent@instructure.com>
QA-Review: Jeff Largent <jeff.largent@instructure.com>
Product-Review: Jackson Howe <jackson.howe@instructure.com>

app/jsx/navigation_header/MobileNavigation.js

@@ -49,7 +49,7 @@ export default class MobileNavigation extends React.Component {
 
     const arrowIcon = document.getElementById('mobileHeaderArrowIcon')
     const mobileContextNavContainer = document.getElementById('mobileContextNavContainer')
-    $('.mobile-header-title.expandable').on(
+    $('.mobile-header-title.expandable, .mobile-header-arrow').on(
       'touchstart click',
       preventDefault(() => {
         this.setState(state => {

app/stylesheets/base/_ic_app_header.scss

@@ -396,6 +396,8 @@ body.primary-nav-expanded {
 }
 
 #mobile-header {
+  display: flex;
+  align-items: center;
   z-index: 100;
   background-color: var(--ic-brand-global-nav-bgd);
   * {
@@ -420,17 +422,24 @@ body.primary-nav-expanded {
     display: none;
   }
 }
-.mobile-header-hamburger {
-  float: direction(left);
-}
 .mobile-header-title {
   text-align: center;
   display: block;
+  flex-grow: 1;
 }
 .mobile-header-hamburger,
-.mobile-header-title {
+.mobile-header-student-view,
+.mobile-header-arrow,
+.mobile-header-title,
+.mobile-header-space{
   padding: $ic-sp * 1.3;
 }
+.mobile-header-student-view {
+  padding-#{direction('right')}: $ic-sp * 0.65;
+}
+.mobile-header-arrow {
+  padding-#{direction('left')}: $ic-sp * 0.65;
+}
 .ic-brand-mobile-global-nav-logo {
   height: 48px;
   display: block;

app/views/courses/_settings_sidebar.html.erb

@@ -34,7 +34,7 @@
 <% end %>
 <div>
   <%= external_tools_menu_items(@course_settings_sub_navigation_tools, {link_class: "Button Button--link Button--link--has-divider Button--course-settings course-settings-sub-navigation-lti", settings_key: :course_settings_sub_navigation}) %>
-  <% if can_do(@context, @current_user, :use_student_view) %>
+  <% if can_do(@context, @current_user, :use_student_view) && !@context.feature_enabled?(:easy_student_view) %>
     <%= link_to course_student_view_path(@context), :method => :post, :class => 'Button Button--link Button--link--has-divider Button--course-settings student_view_button' do %>
       <i class="icon-student-view"></i><%= t('links.student_view', 'Student View') %>
     <% end %>

app/views/layouts/application.html.erb

@@ -114,8 +114,8 @@
           <div class="TutorialToggleHolder"></div>
         <% end %>
         <% if show_student_view_button? %>
-          <%= link_to course_student_view_path(course_id: @context, redirect_to_referer: 1), :class => "btn", :id => "easy_student_view", :"data-tooltip" => "", :title => t('Student View'), :"aria-label" => t('Student View'), :method => :post do %>
-            <i class="icon-student-view"></i>
+          <%= link_to course_student_view_path(course_id: @context, redirect_to_referer: 1), :class => "btn", :id => "easy_student_view", :method => :post do %>
+            <i class="icon-student-view"></i> <%= t('Student View') %>
           <% end %>
         <% end %>
       </div>

app/views/shared/_new_nav_header.html.erb

@@ -24,24 +24,38 @@
 
   <% if use_responsive_layout? %>
     <header id="mobile-header" class="no-print">
-      <button type="button" class="Button Button--icon-action-rev Button--large  mobile-header-hamburger">
+      <button type="button" class="Button Button--icon-action-rev Button--large mobile-header-hamburger">
         <i class="icon-solid icon-hamburger"></i>
         <span id="mobileHeaderInboxUnreadBadge" class="menu-item__badge" style="min-width: 0; top: 12px; height: 12px; right: 6px; display:none;"></span>
         <span class="screenreader-only"><%= t 'links.dashboard', "Dashboard" %></span>
       </button>
+      <div class="mobile-header-space"></div>
       <% context_crumb = crumbs.length > 1 && crumbs[1] %>
       <% if context_crumb %>
-        <a class="mobile-header-title <%= 'expandable' if context_crumb %>" href="<%= context_crumb[1] %>" role="button" aria-controls="mobileContextNavContainer">
-          <i style="float: right; margin-top: 2px; padding-right: inherit" id="mobileHeaderArrowIcon" class="icon-arrow-open-down"></i>
+        <a class="mobile-header-title expandable" href="<%= context_crumb[1] %>" role="button" aria-controls="mobileContextNavContainer">
           <div><%= context_crumb[0] %></div>
-        <% if crumbs.length > 2 %>
-          <% sub_context_crumb = crumbs.last %>
-          <div style="padding-right: 30px"><%= sub_context_crumb[0] %></div>
-        <% end %>
+          <% if crumbs.length > 2 %>
+            <% sub_context_crumb = crumbs.last %>
+            <div><%= sub_context_crumb[0] %></div>
+          <% end %>
         </a>
       <% else %>
         <span class="mobile-header-title"><%= (yield :page_title).presence || @page_title || t('default_page_title', "Canvas LMS") %></span>
       <% end %>
+      <% if show_student_view_button? %>
+        <%= link_to course_student_view_path(course_id: @context, redirect_to_referer: 1), :class => "Button Button--icon-action-rev Button--large mobile-header-student-view", :id => "mobile-student-view", :"aria-label" => t('Student View'), :role => "button", :method => :post do %>
+          <i class="icon-student-view"></i>
+        <% end %>
+      <% else %>
+        <div class="mobile-header-space"></div>
+    <% end %>
+      <% if context_crumb %>
+        <button type="button" class="Button Button--icon-action-rev Button--large mobile-header-arrow" aria-label="<%= t "Navigation Menu" %>">
+          <i class="icon-arrow-open-down" id="mobileHeaderArrowIcon"></i>
+        </button>
+      <% else %>
+        <div class="mobile-header-space"></div>
+      <% end %>
     </header>
     <nav id="mobileContextNavContainer"></nav>
   <% end %>

spec/selenium/student_view_toggle_spec.rb

@@ -40,10 +40,10 @@ describe "student view toggle" do
     f("a#easy_student_view")
   end
 
-  it "should be visible from course home with a title" do
+  it "should be visible from course home with text in button" do
     get "/courses/#{@course.id}"
     expect(student_view_toggle).to be_displayed
-    expect(student_view_toggle).to have_attribute("title", "Student View")
+    expect(student_view_toggle).to include_text("Student View")
   end
 
   it "should redirect to student view on click from assignments index" do
@@ -80,4 +80,11 @@ describe "student view toggle" do
     fj("#bulkEditRoot button:contains('Cancel')").click
     expect(student_view_toggle).to be_displayed
   end
+
+  it "should be visible in the new mobile nav view" do
+    @course.root_account.enable_feature!(:responsive_layout)
+    driver.manage.window.resize_to(450, 800)
+    get "/courses/#{@course.id}"
+    expect(f("#mobile-header")).to contain_css("#mobile-student-view")
+  end
 end