ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

modify rubrics pages for desktop - ICE 

modify the desktop view for the rubrics pages as part of the ICE
initiative. The rubrics pages consist of the create rubric and
edit/delete pages in the teacher view

closes EVAL-3765
flag=instui_nav

test plan:
- tests pass
- Acceptance Criteria
    - 36px from the header to the content
    - Edit Rubric and Delete Rubric buttons are no longer on the right
      pane, but are now inline with the title. There is also 12px margin
      between the two buttons
    - Add Rubric button is no longer on the right pane, but is now
      inline with the title
    - Add Rubric button is changed to primary color
    - title is changed to h1 tag and font weight of 700
    - button functionality for Add, Delete, and Edit rubrics work as
      before

Change-Id: Iba02e5acef6415af2199b64cf8e0046aa8d90ac0
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/333788
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Derek Williams <derek.williams@instructure.com>
QA-Review: Melissa Kruger <melissa.kruger@instructure.com>
Product-Review: Melissa Kruger <melissa.kruger@instructure.com>
This commit is contained in:
Samuel Lee 2023-11-27 10:49:12 -06:00
parent 5df235929f
commit 2db3eac161
6 changed files with 95 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/stylesheets/pages/_rubrics.scss
View File

@ -42,3 +42,30 @@
font-size: 0.7em;
margin-#{direction(left)}: 20px;
}
.rubric-header {
flex-wrap: wrap;
display: flex;
gap: 12px;
margin-bottom: $ic-sp * 3;
@include breakpoint(desktop) {
flex-wrap: nowrap;
gap: 36px;
}
}
.rubric-header-left {
flex: 1;
}
.rubric-header-right{
font-size: 0;
flex-basis: 100%;
@include breakpoint(desktop) {
flex-basis: auto
}
}
.rubric-title {
margin: 0;
font-weight: 700;
line-height: 1.05;
font-size: 2.375rem;
word-break: break-word
}

30
app/views/rubrics/index.html.erb
View File

@ -18,14 +18,6 @@
<% provide :page_title, t(:page_title, "Rubrics") %>
<% add_crumb t('#crumbs.rubrics', "Rubrics") %>
<% if !!js_env.dig(:PERMISSIONS, :manage_rubrics)%>
<% provide :right_side do %>
<a href="<%= context_url(@context, :context_rubrics_url) %>" role="button" class="btn button-sidebar-wide add_rubric_link">
<i class="icon-add"></i>
<%= t('buttons.add_rubric', 'Add Rubric') %>
</a>
<% end %>
<% end %>
<% js_bundle :edit_rubric %>
<% css_bundle :learning_outcomes %>
@ -41,6 +33,28 @@
</style>
<% js_bundle 'rubrics_index' %>
<% if @context.root_account.feature_enabled?(:instui_nav)%>
<div class="rubric-header">
<div class="rubric-header-left">
<h1 class="rubric-title"><%= t('#crumbs.rubrics', "Rubrics") %></h1>
</div>
<% if !!js_env.dig(:PERMISSIONS, :manage_rubrics)%>
<a href="<%= context_url(@context, :context_rubrics_url) %>" role="button" class="Button Button--primary add_rubric_link">
<i class="icon-add" style="margin-right: 7px;"></i>
<%= t('buttons.add_rubric', 'Add Rubric') %>
</a>
<% end %>
</div>
<% else %>
<% if !!js_env.dig(:PERMISSIONS, :manage_rubrics)%>
<% provide :right_side do %>
<a href="<%= context_url(@context, :context_rubrics_url) %>" role="button" class="btn button-sidebar-wide add_rubric_link">
<i class="icon-add"></i>
<%= t('buttons.add_rubric', 'Add Rubric') %>
</a>
<% end %>
<% end %>
<% end %>
<h1 class="screenreader-only">
<% case @context.class.to_s %>
<% when 'Course' %>

51
app/views/rubrics/show.html.erb
View File

@ -20,20 +20,6 @@
<% add_crumb t('#crumbs.rubrics', 'Rubrics'), context_url(@context, :context_rubrics_url) %>
<% add_crumb @actual_rubric.title %>
<% provide :right_side do %>
<% if !!js_env.dig(:PERMISSIONS, :manage_rubrics)%>
<% if can_do(@actual_rubric, @current_user, :update) %>
<a href="#" class="edit_rubric_link Button button-sidebar-wide"><i class="icon-edit" aria-hidden="true"></i> <%= t('titles.edit_rubric', 'Edit Rubric') %></a>
<% else %>
<%= t('rubric_can_not_modify', 'Rubrics cannot be modified once they have been used in more than one place.') %>
<% end %>
<% if can_do(@actual_rubric, @current_user, :delete) %>
<a href="#" class="delete_rubric_link Button button-sidebar-wide"><i class="icon-trash" aria-hidden="true"></i> <%= t('buttons.delete', 'Delete Rubric') %></a>
<% end %>
<% end %>
<a href="<%= context_url(@context, :context_rubrics_url) %>" class="rubrics_url" style="display: none;">&nbsp;</a>
<% end %>
<% js_bundle :edit_rubric %>
<% css_bundle :learning_outcomes %>
@ -50,7 +36,42 @@
</style>
<% js_bundle 'rubrics_show' %>
<h1><%= @actual_rubric.title %></h1>
<% if @context.root_account.feature_enabled?(:instui_nav) %>
<div class="rubric-header">
<div class="rubric-header-left">
<h1 class="rubric-title"><%= @actual_rubric.title %></h1>
</div>
<div class="rubric-header-right" id="rubric-action-buttons">
<% if !!js_env.dig(:PERMISSIONS, :manage_rubrics)%>
<% if can_do(@actual_rubric, @current_user, :update) %>
<a href="#" class="edit_rubric_link Button button-sidebar-wide"><i class="icon-edit" aria-hidden="true" style="margin-right: 7px;"></i> <%= t('titles.edit_rubric', 'Edit Rubric') %></a>
<% else %>
<%= t('rubric_can_not_modify', 'Rubrics cannot be modified once they have been used in more than one place.') %>
<% end %>
<% if can_do(@actual_rubric, @current_user, :delete) %>
<a href="#" style="margin-left: 12px" class="delete_rubric_link Button button-sidebar-wide"><i class="icon-trash" aria-hidden="true" style="margin-right: 7px;"></i> <%= t('buttons.delete', 'Delete Rubric') %></a>
<% end %>
<% end %>
<a href="<%= context_url(@context, :context_rubrics_url) %>" class="rubrics_url" style="display: none;">&nbsp;</a>
</div>
</div>
<% else %>
<% provide :right_side do %>
<div id="rubric-action-buttons">
<% if !!js_env.dig(:PERMISSIONS, :manage_rubrics)%>
<% if can_do(@actual_rubric, @current_user, :update) %>
<a href="#" class="edit_rubric_link Button button-sidebar-wide"><i class="icon-edit" aria-hidden="true"></i> <%= t('titles.edit_rubric', 'Edit Rubric') %></a>
<% else %>
<%= t('rubric_can_not_modify', 'Rubrics cannot be modified once they have been used in more than one place.') %>
<% end %>
<% if can_do(@actual_rubric, @current_user, :delete) %>
<a href="#" class="delete_rubric_link Button button-sidebar-wide"><i class="icon-trash" aria-hidden="true"></i> <%= t('buttons.delete', 'Delete Rubric') %></a>
<% end %>
<% end %>
<a href="<%= context_url(@context, :context_rubrics_url) %>" class="rubrics_url" style="display: none;">&nbsp;</a>
</div>
<% end %>
<% end %>
<div id="rubrics" class="raw_listing">
<% [@actual_rubric].each do |rubric| %>
<%= render :partial => "shared/rubric", :object => rubric, :locals => {:association => @account, :editable => can_do(rubric, @current_user, :update), :edit_view => true, :for_context => true} %>

10
spec/selenium/grades/rubric/rubrics_teacher_spec.rb
View File

@ -73,7 +73,7 @@ describe "course rubrics" do
get "/courses/#{@course.id}/rubrics/#{@rubric.id}"
expect(f(".rubric_total")).to include_text "5"
f("#right-side .edit_rubric_link").click
f("#rubric-action-buttons .edit_rubric_link").click
criterion_points = fj(".criterion_points:visible")
replace_content(criterion_points, "10")
criterion_points.send_keys(:return)
@ -90,7 +90,7 @@ describe "course rubrics" do
assignment_with_editable_rubric(10)
get "/courses/#{@course.id}/rubrics/#{@rubric.id}"
f("#right-side .edit_rubric_link").click
f("#rubric-action-buttons .edit_rubric_link").click
replace_content(fj(".criterion_points:visible"), "50")
fj(".criterion_points:visible").send_keys(:return)
expect(ff(".points").map(&:text).reject!(&:empty?)).to eq %w[50 15 0]
@ -108,7 +108,7 @@ describe "course rubrics" do
it "does not show an error when adjusting from 0 points" do
assignment_with_editable_rubric(0)
get "/courses/#{@course.id}/rubrics/#{@rubric.id}"
f("#right-side .edit_rubric_link").click
f("#rubric-action-buttons .edit_rubric_link").click
replace_content(fj(".criterion_points:visible"), "10")
fj(".criterion_points:visible").send_keys(:return)
submit_form("#edit_rubric_form")
@ -120,7 +120,7 @@ describe "course rubrics" do
get "/courses/#{@course.id}/rubrics/#{@rubric.id}"
2.times { f("#right-side .edit_rubric_link").click }
2.times { f("#rubric-action-buttons .edit_rubric_link").click }
expect(ff(".rubric .ic-Action-header").length).to eq 1
end
@ -155,7 +155,7 @@ describe "course rubrics" do
wait_for_ajaximations
import_outcome
f("#right-side .edit_rubric_link").click
f("#rubric-action-buttons .edit_rubric_link").click
wait_for_ajaximations
links = ffj("#rubric_#{rubric.id}.editing .ratings:first .edit_rating_link")

4
spec/selenium/helpers/rubrics_common.rb
View File

@ -23,7 +23,7 @@ module RubricsCommon
def create_rubric_with_criterion_points(points)
get rubric_url
f("#right-side-wrapper .add_rubric_link").click
f(".add_rubric_link").click
check_element_has_focus(fj("#rubric_new :text:first"))
criterion_points = f("#criterion_1 .criterion_points")
set_value(criterion_points, points.to_s)
@ -143,7 +143,7 @@ module RubricsCommon
end
def import_outcome
f("#right-side .edit_rubric_link").click
f("#rubric-action-buttons .edit_rubric_link").click
wait_for_ajaximations
f(".rubric.editing tr.criterion .delete_criterion_link").click
wait_for_ajaximations

6
ui/features/rubrics_show/index.js
View File

@ -21,12 +21,12 @@ import confirmationMessage from '@canvas/rubrics/jquery/rubric_delete_confirmati
import '@canvas/jquery/jquery.instructure_misc_plugins'
$(document).ready(() => {
$('#right-side .edit_rubric_link').click(event => {
$('#rubric-action-buttons .edit_rubric_link').click(event => {
event.preventDefault()
$('.rubric:visible:first .edit_rubric_link').click()
})
$('#right-side .delete_rubric_link').click(event => {
$('#rubric-action-buttons .delete_rubric_link').click(event => {
event.preventDefault()
const callback = () => (window.location.href = $('.rubrics_url').attr('href'))
@ -37,7 +37,7 @@ $(document).ready(() => {
$(document).fragmentChange((event, hash) => {
if (hash === '#edit') {
$('#right-side .edit_rubric_link').click()
$('#rubric-action-buttons .edit_rubric_link').click()
}
})
})