SAK-43270 Added submitters image to Sakai Grader (sakaiproject#7933)

https://jira.sakaiproject.org/browse/SAK-43270 (cherry picked from commit ae0b5fa)
K-Class · Feb 26, 2020 · e7ab655 · e7ab655
1 parent eb790d5
commit e7ab655
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 19 deletions.
diff --git a/library/src/morpheus-master/sass/modules/grader/_base.scss b/library/src/morpheus-master/sass/modules/grader/_base.scss
@@ -9,7 +9,13 @@ sakai-grader {
     padding: 5px;
     margin-bottom: 5px;
 
-    .left-block { flex: 0 0 auto; }
+    .left-block {
+      flex: 0 0 auto;
+      #grader-settings-wrapper {
+        display: inline-block;
+        margin-left: 20px;
+      }
+    }
     .assessment-info { display: inline-block; font-weight: bold; }
     .assessment-title { font-size: larger; }
 
@@ -38,18 +44,26 @@ sakai-grader {
       flex: 1 1 auto;
       font-weight: bold;
       text-align: center;
+      div { display: inline-block; }
     }
+
     .grader-navigator {
       flex: 0 0 auto;
       text-align: center;
       text-decoration: none;
+      select {
+        display: inline-block;
+        margin: 0px 0px 0px 8px;
+        &:focus { outline: 0;}
+      }
+      .grader-navigator a { text-decoration: none; font-weight: bold; }
+      .profile-image {
+        margin-right: 6px;
+        img {
+          height: 26px;
+        }
+      }
     }
-    .grader-navigator select {
-      display: inline-block;
-      margin: 0px 20px 0px 20px;
-      &:focus { outline: 0;}
-    }
-    .grader-navigator a { text-decoration: none; font-weight: bold; }
   }
 
   .grader-container {
@@ -95,6 +109,11 @@ sakai-grader {
       color: green;
     }
 
+    .profile-image {
+      margin-right: 6px;
+      img { width: 64px; }
+    }
+
     .active-indicator {
       display: inline-block;
       background: green;
@@ -188,6 +207,7 @@ sakai-grader {
 
   .attachments-header {
     margin-top: 7px;
+    font-weight: bold;
   }
 
   .attachment-link {

diff --git a/webcomponents/bundle/src/main/bundle/grader.properties b/webcomponents/bundle/src/main/bundle/grader.properties
@@ -63,3 +63,4 @@ number_grade_label=Numeric grade input field
 checkgrade_label=Checkmark grade input box
 comment_present=There is a comment on this submission
 notes_present=There are private notes on this submission
+profile_image='s profile image
diff --git a/webcomponents/tool/src/main/frontend/grader/sakai-grader.js b/webcomponents/tool/src/main/frontend/grader/sakai-grader.js
@@ -99,7 +99,7 @@ class SakaiGrader extends gradableDataMixin(SakaiElement) {
           <div class="course-title">${portal.siteTitle}</div>
           <div class="assessment-title">${this.gradableTitle}</div>
         </div>
-        <div style="display: inline-block; margin-left: 20px;">
+        <div id="grader-settings-wrapper">
           <a id="settings-link" href="javascript;" @click=${this.toggleSettings} title="${this.i18n["settings"]}">
             <fa-icon size="1.3em" i-class="fas cogs" path-prefix="/webcomponents/assets" />
           </a>
@@ -117,7 +117,7 @@ class SakaiGrader extends gradableDataMixin(SakaiElement) {
         </div>
       </div>
       <div class="total-block">
-        <div style="display: inline-block;">
+        <div>
           <div class="total-label">${this.i18n["graded"]}</div>
           <div class="total-graded">${this.totalGraded} / ${this.submissions.length}</div>
         </div>
@@ -132,6 +132,7 @@ class SakaiGrader extends gradableDataMixin(SakaiElement) {
             <select aria-label="${this.i18n["student_selector_label"]}" @change=${this.studentSelected}>
               ${this.submissions.map(s => html`<option value="${s.id}" .selected=${this.submission.id === s.id}>${s.groupId ? s.groupTitle : s.firstSubmitterName}</option>`)}
             </select>
+            <span class="profile-image"><img src="/direct/profile/${this.submission.firstSubmitterId}/image/official?siteId=${portal.siteId}" alt="${this.submission.firstSubmitterName}${this.i18n["profile_image"]}"/></span>
           `}
           <a href="javascript:;" @click=${this.fireNext}><fa-icon size="2em" i-class="fas arrow-circle-right" path-prefix="/webcomponents/assets" style="vertical-align: middle;" /></a>
         </div>
@@ -172,19 +173,22 @@ class SakaiGrader extends gradableDataMixin(SakaiElement) {
       ${this.submission.id !== "dummy" ? html`
       <div class="grader ${this.graderOnLeft ? "on-left" : ""}">
         <div class="submitted-block">
-          <div class="submitted-time">
-            ${this.submission.submittedTime ? html`
-              <span>${this.i18n["submitted_by"]} </span><span class="submitter-name">${this.renderSubmitter()}</span><span> ${this.i18n["on"]} </span>
-              <span class="submitted-time">${this.submission.submittedTime}</span>
-              ${this.submission.late ? html`<span class="grader-late">${this.i18n["late"]}</span>` : ""}
-              ${this.submission.returned ? html`<span class="grader-returned fa fa-eye" title="${this.i18n["returned_tooltip"]}" />` : ""}
-            ` : html`
-              <span>${this.i18n["no_submission_for"]} ${this.renderSubmitter()}</span>
-            `}
+          <div style="display: flex;">
+            <div class="profile-image" style="flex: 1;"><img src="/direct/profile/${this.submission.firstSubmitterId}/image/official?siteId=${portal.siteId}" alt="${this.submission.firstSubmitterName}${this.i18n["profile_image"]}" /></div>
+            <div class="submitted-time" style="flex: 4;">
+              ${this.submission.submittedTime ? html`
+                <span class="submitter-name">${this.renderSubmitter()}</span><span> ${this.i18n["on"]}</span>
+                <span class="submitted-time">${this.submission.submittedTime}</span>
+                ${this.submission.late ? html`<span class="grader-late">${this.i18n["late"]}</span>` : ""}
+                ${this.submission.returned ? html`<span class="grader-returned fa fa-eye" title="${this.i18n["returned_tooltip"]}" />` : ""}
+                ${this.submission.submittedText && this.submission.submittedTime ? html`<div class="attachments-header"><a href="javascript;" @click=${this.displaySubmittedText}>${this.i18n["submitted_text"]}</a></div>` : ""}
+              ` : html`
+                <span>${this.i18n["no_submission_for"]} ${this.renderSubmitter()}</span>
+              `}
+            </div>
           </div>
           ${this.submission.groupId && this.submission.submittedTime ?  html`<div class="grader-group-members">${this.submission.groupMembers}</div>` : ""}
           <div class="attachments">
-            ${this.submission.submittedText && this.submission.submittedTime ?html`<div><a href="javascript;" @click=${this.displaySubmittedText}>${this.i18n["submitted_text"]}</a></div>` : ""}
             ${this.submission.submittedAttachments.length > 0 ? html`
               <div class="attachments-header">${this.i18n["submitted_attachments"]}:</div>
               ${Object.keys(this.submission.submittedAttachments).map(k => html`