Merge 'result' js and css into 'application' (#7265)

Changelog.md

@@ -27,6 +27,8 @@
 - Move model validation error messages to respective localization files (#7229)
 - Replace time-warp gem with newer, maintained timecop gem (#7234)
 - Update pre-commit-hooks to v5.0 and add checks `check-illegal-windows-names`, `check-json`, and `check-merge-conflict` (#7259)
+- Merge result.js and result_main.css build files into application.js/application.css (#7260)
+- Simplify pdf.js configuration (#7260)
 - Improve descriptions of the Group and Grouping models (#7262)
 
 ## [v2.5.2]

app/assets/javascripts/Components/Helpers/tag_modal.jsx

@@ -11,7 +11,7 @@ export default class TagModal extends React.Component {
   render() {
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.isOpen}
         onRequestClose={this.props.onRequestClose}
         id="tag_modal"

app/assets/javascripts/Components/Modals/collect_submissions_modal.jsx

@@ -55,7 +55,7 @@ class CollectSubmissionsModal extends React.Component {
   render() {
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.isOpen}
         onRequestClose={this.props.onRequestClose}
       >

app/assets/javascripts/Components/Modals/create_modify_annotation_panel_modal.jsx

@@ -191,7 +191,7 @@ class CreateModifyAnnotationPanel extends React.Component {
 
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.show}
         onAfterOpen={this.onModalOpen}
         onRequestClose={this.props.onRequestClose}

app/assets/javascripts/Components/Modals/download_test_results_modal.jsx

@@ -9,7 +9,7 @@ class DownloadTestResultsModal extends React.Component {
   render() {
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.isOpen}
         onRequestClose={this.props.onRequestClose}
       >

app/assets/javascripts/Components/Modals/extension_modal.jsx

@@ -127,7 +127,7 @@ class ExtensionModal extends React.Component {
   render() {
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.isOpen}
         onRequestClose={this.props.onRequestClose}
       >

app/assets/javascripts/Components/Modals/filter_modal.jsx

@@ -199,7 +199,7 @@ export class FilterModal extends React.Component {
     }
     return (
       <Modal
-        className="react-modal dialog filter-modal"
+        className="react-modal markus-dialog filter-modal"
         isOpen={this.props.isOpen}
         onRequestClose={() => {
           this.props.onRequestClose();

app/assets/javascripts/Components/Modals/graders_distribution_modal.jsx

@@ -45,7 +45,7 @@ export class GraderDistributionModal extends React.Component {
   render() {
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.isOpen}
         onRequestClose={this.props.onRequestClose}
       >

app/assets/javascripts/Components/Modals/roster_sync_modal.jsx

@@ -47,7 +47,7 @@ class LtiRosterModal extends React.Component {
     return (
       <div>
         <Modal
-          className="react-modal dialog"
+          className="react-modal markus-dialog"
           isOpen={this.props.isOpen}
           onRequestClose={this.props.onRequestClose}
         >

app/assets/javascripts/Components/Modals/section_distribution_modal.js

@@ -53,7 +53,7 @@ export class SectionDistributionModal extends React.Component {
   render() {
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.isOpen}
         onRequestClose={this.props.onRequestClose}
       >

app/assets/javascripts/Components/Modals/send_lti_grades_modal.jsx

@@ -49,7 +49,7 @@ class LtiGradeModal extends React.Component {
   render() {
     return (
       <Modal
-        className="react-modal dialog"
+        className="react-modal markus-dialog"
         isOpen={this.props.isOpen}
         onRequestClose={this.props.onRequestClose}
       >

app/assets/javascripts/Components/Result/feedback_file_panel.jsx

@@ -80,7 +80,11 @@ export class FeedbackFilePanel extends React.Component {
           {feedbackSelector}
           {download_feedback_file}
         </div>
-        <div id="feedback_file_content" key={"feedback-file-view"}>
+        <div
+          id="feedback_file_content"
+          className="text-viewer-container"
+          key={"feedback-file-view"}
+        >
           <FileViewer
             assignment_id={this.props.assignment_id}
             submission_id={this.props.submission_id}

app/assets/javascripts/Components/Result/submission_file_panel.jsx

@@ -180,7 +180,7 @@ export class SubmissionFilePanel extends React.Component {
             />
           )}
         </div>
-        <div key="codeviewer" id="codeviewer">
+        <div key="codeviewer" className="text-viewer-container" id="codeviewer">
           <FileViewer
             ref={this.submissionFileViewer}
             handleFileTypeUpdate={this.handleFileTypeUpdate}

app/assets/javascripts/Components/Result/summary_panel.jsx

@@ -299,7 +299,7 @@ export class SummaryPanel extends React.Component {
             {I18n.t("results.marks_chart")}
           </button>
         </p>
-        <aside className="dialog data-chart-container" id={"marks_chart"} style={style}>
+        <aside className="markus-dialog data-chart-container" id={"marks_chart"} style={style}>
           <DataChart
             labels={this.state.labels}
             datasets={this.state.datasets}

app/assets/javascripts/Components/submission_file_manager.jsx

@@ -265,7 +265,7 @@ class SubmissionFileManager extends React.Component {
         document.getElementById("content").getBoundingClientRect().width - 150 + "px";
       heading = this.state.viewFile;
       content = (
-        <div id="codeviewer" style={{maxWidth: withinSize}}>
+        <div id="codeviewer" className="text-viewer-container" style={{maxWidth: withinSize}}>
           <FileViewer
             assignment_id={this.props.assignment_id}
             grouping_id={this.props.grouping_id}

app/assets/javascripts/modals.js

@@ -44,7 +44,7 @@ export class ModalMarkus {
 
 (function () {
   const domContentLoadedCB = () => {
-    $(".dialog").each((_, dialog) => {
+    $(".markus-dialog").each((_, dialog) => {
       let open_link = dialog.getAttribute("data-open-link") || undefined;
       new ModalMarkus("#" + dialog.id, open_link);
       $("#" + dialog.id + "-close").click(function () {

app/assets/stylesheets/common/_markus.scss

@@ -874,7 +874,7 @@ ul.tags {
   z-index: 100;
 }
 
-.dialog {
+.markus-dialog {
   background: $background-main;
   border-radius: $radius;
   box-shadow: 0 0 10px $primary-two;

app/assets/stylesheets/common/_react_tabs.scss

@@ -1,9 +1,13 @@
 @import 'constants';
 
-.react-tabs__tab--disabled {
+.react-tabs__tab.react-tabs__tab--disabled {
   display: none;
 }
 
+.react-tabs__tab:focus::after {
+  display: none; // Hide default react-tabs style
+}
+
 .react-tabs {
   display: flex;
   flex-direction: column;
@@ -26,12 +30,12 @@
   }
 }
 
-.react-tabs__tab--selected {
+.react-tabs__tab.react-tabs__tab--selected {
   background-color: $background-support;
   color: $sharp-line;
 }
 
-.react-tabs__tab-panel--selected {
+.react-tabs__tab-panel.react-tabs__tab-panel--selected {
   display: flex;
   flex-direction: column;
 }

app/assets/stylesheets/common/codeviewer.scss

@@ -1,15 +1,14 @@
 @import 'mixins';
 @import 'constants';
 
-/* codeviewer */
-#codeviewer {
+.text-viewer-container {
   .toolbar {
     background: $primary-two;
     margin: 0 0 10px;
     padding: 2px;
   }
 
-  .tools {
+  .toolbar-actions {
     background-color: $background-main;
     font: 0.825em $fonts;
     padding: 5px 0;

app/assets/stylesheets/entrypoints/application.scss

@@ -4,6 +4,11 @@
 @use 'common/pdfjs_custom';
 @use 'common/core';
 
+// Stylesheets used in grading views
+@use 'grader';
+@use 'context_menu';
+@use 'common/codeviewer';
+
 @use 'flatpickr/dist/flatpickr.min';
 @use 'react-table/react-table';
 @use 'react-tabs/style/react-tabs';

app/assets/stylesheets/grader.scss

@@ -41,36 +41,6 @@
   width: 100%;
 }
 
-/* codeviewer toolbar */
-#codeviewer {
-  .toolbar {
-    background: $primary-two;
-    margin: 0 0 10px;
-    padding: 2px;
-  }
-
-  .toolbar-actions {
-    background-color: $background-main;
-    font: 0.825em $fonts;
-    padding: 5px 0;
-    text-align: right;
-
-    a {
-      background-color: inherit;
-      color: $link;
-      font-size: 1.1em;
-      margin-right: 10px;
-      text-decoration: none;
-    }
-
-    a:hover {
-      background-color: inherit;
-      color: $darker-orange;
-      text-decoration: none;
-    }
-  }
-}
-
 /* Marks pane */
 
 .marks-list {

app/javascript/application_webpack.js

@@ -59,6 +59,16 @@ window.flatpickr = flatpickr;
 // prism
 window.Prism = window.Prism || {};
 window.Prism.manual = true;
+import "prismjs/plugins/line-numbers/prism-line-numbers.css";
+
+// pdf.js
+import * as pdfjs from "pdfjs-dist";
+import * as pdfjsViewer from "pdfjs-dist/web/pdf_viewer.mjs";
+
+window.pdfjs = pdfjs;
+window.pdfjsViewer = pdfjsViewer;
+
+import "pdfjs-dist/web/pdf_viewer.css";
 
 window.Routes = require("./routes");
 
@@ -153,3 +163,5 @@ import {makeSubmitViewTokenModal} from "javascripts/Components/Modals/submit_vie
 window.makeSubmitViewTokenModal = makeSubmitViewTokenModal;
 import {makeLtiSettings} from "javascripts/Components/lti_settings";
 window.makeLtiSettings = makeLtiSettings;
+import {makeResult} from "javascripts/Components/Result/result";
+window.makeResult = makeResult;

app/views/assignments/show.html.erb

@@ -223,7 +223,7 @@
 
 <% # HTML for the invite dialog
    if !@grouping.nil? && @grouping.inviter == @current_role && @assignment.student_form_groups %>
-  <aside class='dialog' id='invite_dialog'>
+  <aside class='markus-dialog' id='invite_dialog'>
     <%= form_tag(invite_member_course_assignment_groups_path(course_id: @current_course.id, assignment_id: @assignment.id, grouping_id: @grouping.id),
                  { id: 'invite-student-form' }) do %>
       <h2><%= t('groups.members.invite') %></h2>

app/views/automated_tests/student_interface.html.erb

@@ -1,7 +1,4 @@
 <% content_for :title, t('automated_tests.title') %>
-<%= stylesheet_link_tag 'result_main' %>
-<%= stylesheet_link_tag 'result' %>
-<%= javascript_include_tag 'result', nonce: true %>
 <%= javascript_include_tag 'Results/main', nonce: true %>
 
 <% if @assignment.enable_student_tests && [email protected]? %>

app/views/exam_templates/_event_listeners.js.erb

@@ -1,5 +1,5 @@
 // Reload dialog event listeners
-$(".dialog").each((_, dialog) => {
+$(".markus-dialog").each((_, dialog) => {
   let open_link = dialog.getAttribute("data-open-link") || undefined;
   new ModalMarkus("#" + dialog.id, open_link);
   $("#" + dialog.id + "-close").click(function () {

app/views/exam_templates/assign_errors.html.erb

@@ -1,13 +1,3 @@
-<% content_for :head do %>
-  <%= stylesheet_link_tag 'result_main' %>
-  <%= stylesheet_link_tag 'result' %>
-
-  <%= javascript_include_tag 'result', nonce: true %>
-  <%= javascript_tag nonce: true do -%>
-    pdfjs.GlobalWorkerOptions.workerSrc = '<%= asset_path('pdf.worker.js') %>';
-  <% end -%>
-<% end %>
-
 <%= javascript_tag nonce: true do %>
 <%= render partial: 'exam_templates/assign_errors',
            formats: [:js],

app/views/groups/assign_scans.html.erb

@@ -1,11 +1,4 @@
-<% content_for :head do %>
-  <%= stylesheet_link_tag 'result_main' %>
-  <%= stylesheet_link_tag 'result' %>
-  <%= javascript_include_tag 'result', nonce: true %>
-<% end %>
-
 <%= javascript_tag nonce: true do %>
-  pdfjs.GlobalWorkerOptions.workerSrc = '<%= asset_path('pdf.worker.js') %>';
   (function(){
     const domContentLoadedCB = function() {
       $("#names").autocomplete({

app/views/groups/index.html.erb

@@ -70,4 +70,4 @@
 <%= render partial: 'assignment_group_use_modal', layout: 'layouts/modal_dialog'  %>
 <%= render partial: 'create_group_modal', layout: 'layouts/modal_dialog'  %>
 <%= render partial: 'rename_group_modal', layout: 'layouts/modal_dialog'  %>
-<aside class='dialog' id='notes_dialog'></aside>
+<aside class='markus-dialog' id='notes_dialog'></aside>

app/views/layouts/_about.html.erb

@@ -1 +1 @@
-<aside class='dialog no-display' id='about_dialog'></aside>
+<aside class='markus-dialog no-display' id='about_dialog'></aside>

app/views/layouts/_head.html.erb

@@ -5,6 +5,7 @@
 <%= csrf_meta_tags %>
 <%= csp_meta_tag %>
 <%= stylesheet_link_tag 'application' %>
+<%= stylesheet_link_tag 'application_webpack' %>
 <% if @current_user&.theme == 'dark' %>
   <%= stylesheet_link_tag 'dark_theme' %>
   <%= favicon_link_tag 'favicon_dark.svg' %>

app/views/layouts/_modal_dialog.html.erb

@@ -1,4 +1,4 @@
-<aside class='dialog no-display' id=<%= yield_content! :modal_id %>
+<aside class='markus-dialog no-display' id=<%= yield_content! :modal_id %>
        data-open-link='<%= yield_content! :modal_open_link %>'>
   <% if content_for? :modal_title %>
     <h2>

app/views/layouts/_pdfjs_config.html.erb

@@ -0,0 +1,3 @@
+<%= javascript_tag nonce: true do %>
+  pdfjs.GlobalWorkerOptions.workerSrc = '<%= asset_path('pdf.worker.js') %>';
+<% end %>

app/views/layouts/_role_switch.html.erb

@@ -1 +1 @@
-<aside class='dialog' id='role_switch_dialog'></aside>
+<aside class='markus-dialog' id='role_switch_dialog'></aside>

app/views/layouts/assignment_content.html.erb

@@ -10,6 +10,7 @@
   <% end %>
   <%= render partial: 'layouts/jsroutes_config' %>
   <%= render partial: 'layouts/i18n_config' %>
+  <%= render partial: 'layouts/pdfjs_config' %>
   <%= yield :head %>
 </head>
 <body>

app/views/layouts/content.html.erb

@@ -10,6 +10,7 @@
   <% end %>
   <%= render partial: 'layouts/jsroutes_config' %>
   <%= render partial: 'layouts/i18n_config' %>
+  <%= render partial: 'layouts/pdfjs_config' %>
   <%= yield :head %>
 </head>
 <body>