From a3ef52a0405cbfc144e6f02dfde7dccc158182b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 23 Feb 2021 09:24:32 +0100
Subject: [PATCH] MOBILE-3636 assign: Add styles on rubrics

---
 .../components/submission/submission.scss     | 259 +-----------------
 .../components/submission/submission.ts       |   1 +
 src/core/directives/fa-icon.ts                |   1 +
 src/theme/components/rubrics.scss             | 241 ++++++++++++++++
 src/theme/theme.base.scss                     |   4 +
 src/theme/theme.scss                          |   1 +
 6 files changed, 261 insertions(+), 246 deletions(-)
 create mode 100644 src/theme/components/rubrics.scss

diff --git a/src/addons/mod/assign/components/submission/submission.scss b/src/addons/mod/assign/components/submission/submission.scss
index dee6a5037..3c8a199a0 100644
--- a/src/addons/mod/assign/components/submission/submission.scss
+++ b/src/addons/mod/assign/components/submission/submission.scss
@@ -1,18 +1,21 @@
-:host {
+:host ::ng-deep {
     div.latesubmission,
     div.overdue {
-        // @extend .core-danger-item;
+        border-bottom: 3px solid var(--danger) !important;
+        ion-icon {
+            color: var(--danger);
+        }
     }
 
     div.earlysubmission {
-        // @extend .core-success-item;
+        border-bottom: 3px solid var(--success) !important;
+        ion-icon {
+            color: var(--success);
+        }
     }
 
     div.submissioneditable p {
-        color: $red;
-        @include darkmode() {
-            color: $red-light;
-        }
+        color: var(--red);
     }
 
     .core-grading-summary .advancedgrade {
@@ -20,244 +23,8 @@
     }
 }
 
-core-format-text {
-
-    .gradingform_rubric_editform .status {
-        font-weight: normal;
-        text-transform: uppercase;
-        font-size: 60%;
-        padding: 0.25em;
-        border: 1px solid $gray-light;
-    }
-
-    .gradingform_rubric_editform .status.ready {
-        background-color: $green-light;
-        border-color: $green;
-    }
-
-    .gradingform_rubric_editform .status.draft {
-        background-color: $yellow-light;
-        border-color: $yellow;
-    }
-
-    .gradingform_rubric {
-        overflow: auto;
-        padding-bottom: 1.5em;
-        max-width: 720px;
-        position: relative;
-        margin: 0 auto;
-        tbody {
-            background: $white;
-            color: $text-color;
-        }
-    }
-
-    // Do not display remark column.
-    .gradingform_rubric .criterion .remark {
-        display: none;
-    }
-
-    .gradingform_rubric.editor .criterion .controls,
-    .gradingform_rubric .criterion .description,
-    .gradingform_rubric .criterion .levels,
-    .gradingform_rubric.editor .criterion .addlevel,
-    .gradingform_rubric .criterion .remark,
-    .gradingform_rubric .criterion .levels .level {
-        vertical-align: top;
-    }
-
-    .gradingform_rubric.editor .criterion .controls,
-    .gradingform_rubric .criterion .description,
-    .gradingform_rubric.editor .criterion .addlevel,
-    .gradingform_rubric .criterion .remark,
-    .gradingform_rubric .criterion .levels .level {
-        padding: 3px;
-    }
-
-    .gradingform_rubric .criteria {
-        height: 100%;
-    }
-
-    .gradingform_rubric .criterion {
-        border: 1px solid $gray;
-        overflow: hidden;
-    }
-
-    .gradingform_rubric .criterion.even {
-        background: $gray-lighter;
-    }
-
-    .gradingform_rubric .criterion .description {
-        width: 150px;
-        font-weight: bold;
-    }
-
-    .gradingform_rubric .criterion .levels table {
-        width: 100%;
-        height: 100%;
-    }
-
-    .gradingform_rubric .criterion .levels,
-    .gradingform_rubric .criterion .levels table,
-    .gradingform_rubric .criterion .levels table tbody {
-        padding: 0;
-        margin: 0;
-    }
-
-    .gradingform_rubric .criterion .levels .level {
-        border-left: 1px solid $gray;
-        max-width: 150px;
-    }
-
-    .gradingform_rubric .criterion .levels .level .level-wrapper {
-        position: relative;
-    }
-
-    .gradingform_rubric .criterion .levels .level.last {
-        border-right: 1px solid $gray;
-    }
-
-    .gradingform_rubric .plainvalue.empty {
-        font-style: italic;
-        color: $gray-dark;
-    }
-
-    .gradingform_rubric.editor .criterion .levels .level .delete {
-        position: absolute;
-        right: 0;
-    }
-
-    .gradingform_rubric .criterion .levels .level .score {
-        font-style: italic;
-        color: $green;
-        font-weight: bold;
-        margin-top: 5px;
-        white-space: nowrap;
-    }
-
-    .gradingform_rubric .criterion .levels .level .score .scorevalue {
-        padding-right: 5px;
-    }
-
-    /* Make invisible the buttons 'Move up' for the first criterion and
-       'Move down' for the last, because those buttons will make no change */
-    .gradingform_rubric.editor .criterion.first .controls .moveup input,
-    .gradingform_rubric.editor .criterion.last .controls .movedown input {
-        display: none;
-    }
-
-    /* evaluation */
-    .gradingform_rubric .criterion .levels .level.currentchecked {
-        background: #fff0f0;
-    }
-
-    .gradingform_rubric .criterion .levels .level.checked {
-        background: $green-light;
-        border: 1px solid $gray-darker;
-    }
-
-    .gradingform_rubric .options .optionsheading {
-        font-weight: bold;
-        font-size: 1.1em;
-        padding-bottom: 5px;
-    }
-
-    .gradingform_rubric .options .option {
-        padding-bottom: 2px;
-    }
-
-    .gradingform_rubric .options .option label {
-        margin-left: 5px;
-    }
-
-    .gradingform_rubric .options .option .value {
-        margin-left: 5px;
-        font-weight: bold;
-    }
-
-    .gradingform_rubric .criterion .levels.error {
-        border: 1px solid $red;
-    }
-
-    .gradingform_rubric .criterion .description.error,
-    .gradingform_rubric .criterion .levels .level .definition.error,
-    .gradingform_rubric .criterion .levels .level .score.error {
-        background: $gray-lighter;
-    }
-
-    .gradingform_rubric-regrade {
-        padding: 10px;
-        background: $gray-lighter;
-        border: 1px solid $red-light;
-        margin-bottom: 10px;
-    }
-
-    .gradingform_rubric-restored {
-        padding: 10px;
-        background: $yellow-light;
-        border: 1px solid $yellow;
-        margin-bottom: 10px;
-    }
-
-    .gradingform_rubric-error {
-        color: $red;
-        font-weight: bold;
-    }
-
-    /* special classes for elements created by rubriceditor.js */
-    .gradingform_rubric.editor .hiddenelement {
-        display: none;
-    }
-
-    .gradingform_rubric.editor .pseudotablink {
-        background-color: transparent;
-        border: 0 solid;
-        height: 1px;
-        width: 1px;
-        color: transparent;
-        padding: 0;
-        margin: 0;
-        position: relative;
-        float: right;
-    }
-
-    .gradingform_rubric {
-        padding-bottom: 0;
-        max-width: none;
-    }
-
-    .gradingform_rubric .criterion .description {
-        font-weight: 500;
-        min-width: 150px;
-    }
-
-    .gradingform_rubric .criterion .levels {
-        background-color: $white;
-    }
-
-    .gradingform_rubric .criterion,
-    .gradingform_rubric .criterion.even {
-        background-color: transparent;
-    }
-
-    .gradingform_rubric.evaluate .criterion .levels .level:hover {
-        background-color: $green-light;
-    }
-
-    .gradingform_rubric .criterion .levels .level.checked {
-        background-color: $green-light;
-        border: none;
-        border-left: 1px solid $gray;
-    }
-
-    .gradingform_rubric .criterion .levels .level .score {
-        color: $green;
-        font-weight: 500;
-        font-style: normal;
-        margin-top: 20px;
-    }
-
-    .gradingform_rubric .criterion .remark textarea {
-        margin-bottom: 0;
+:host-context(body.dark) ::ng-deep {
+    div.submissioneditable p {
+        color: var(--red-light);
     }
 }
diff --git a/src/addons/mod/assign/components/submission/submission.ts b/src/addons/mod/assign/components/submission/submission.ts
index 962bb5e05..3a2c906c6 100644
--- a/src/addons/mod/assign/components/submission/submission.ts
+++ b/src/addons/mod/assign/components/submission/submission.ts
@@ -63,6 +63,7 @@ import { AddonModAssignModuleHandlerService } from '../../services/handlers/modu
 @Component({
     selector: 'addon-mod-assign-submission',
     templateUrl: 'addon-mod-assign-submission.html',
+    styleUrls: ['submission.scss'],
 })
 export class AddonModAssignSubmissionComponent implements OnInit, OnDestroy {
 
diff --git a/src/core/directives/fa-icon.ts b/src/core/directives/fa-icon.ts
index 29b3f5eee..381b36aab 100644
--- a/src/core/directives/fa-icon.ts
+++ b/src/core/directives/fa-icon.ts
@@ -71,6 +71,7 @@ export class CoreFaIconDirective implements OnChanges {
         if (library != 'ionic') {
             const src = `assets/fonts/font-awesome/${library}/${iconName}.svg`;
             this.element.setAttribute('src', src);
+            this.element.classList.add('faicon');
 
             if (CoreConstants.BUILD.isDevelopment || CoreConstants.BUILD.isTesting) {
                 try {
diff --git a/src/theme/components/rubrics.scss b/src/theme/components/rubrics.scss
new file mode 100644
index 000000000..329ef82d9
--- /dev/null
+++ b/src/theme/components/rubrics.scss
@@ -0,0 +1,241 @@
+core-format-text {
+
+    .gradingform_rubric_editform .status {
+        font-weight: normal;
+        text-transform: uppercase;
+        font-size: 60%;
+        padding: 0.25em;
+        border: 1px solid var(--gray-light);
+    }
+
+    .gradingform_rubric_editform .status.ready {
+        background-color: var(--green-light);
+        border-color: var(--green);
+    }
+
+    .gradingform_rubric_editform .status.draft {
+        background-color: var(--yellow-light);
+        border-color: var(--yellow);
+    }
+
+    .gradingform_rubric {
+        overflow: auto;
+        padding-bottom: 1.5em;
+        max-width: 720px;
+        position: relative;
+        margin: 0 auto;
+        tbody {
+            background-color: var(--white);
+            color: var(--text-color);
+        }
+    }
+
+    // Do not display remark column.
+    .gradingform_rubric .criterion .remark {
+        display: none;
+    }
+
+    .gradingform_rubric.editor .criterion .controls,
+    .gradingform_rubric .criterion .description,
+    .gradingform_rubric .criterion .levels,
+    .gradingform_rubric.editor .criterion .addlevel,
+    .gradingform_rubric .criterion .remark,
+    .gradingform_rubric .criterion .levels .level {
+        vertical-align: top;
+    }
+
+    .gradingform_rubric.editor .criterion .controls,
+    .gradingform_rubric .criterion .description,
+    .gradingform_rubric.editor .criterion .addlevel,
+    .gradingform_rubric .criterion .remark,
+    .gradingform_rubric .criterion .levels .level {
+        padding: 3px;
+    }
+
+    .gradingform_rubric .criteria {
+        height: 100%;
+    }
+
+    .gradingform_rubric .criterion {
+        border: 1px solid var(--gray);
+        overflow: hidden;
+    }
+
+    .gradingform_rubric .criterion.even {
+        background-color: var(--gray-lighter);
+    }
+
+    .gradingform_rubric .criterion .description {
+        width: 150px;
+        font-weight: bold;
+    }
+
+    .gradingform_rubric .criterion .levels table {
+        width: 100%;
+        height: 100%;
+    }
+
+    .gradingform_rubric .criterion .levels,
+    .gradingform_rubric .criterion .levels table,
+    .gradingform_rubric .criterion .levels table tbody {
+        padding: 0;
+        margin: 0;
+    }
+
+    .gradingform_rubric .criterion .levels .level {
+        border-left: 1px solid var(--gray);
+        max-width: 150px;
+    }
+
+    .gradingform_rubric .criterion .levels .level .level-wrapper {
+        position: relative;
+    }
+
+    .gradingform_rubric .criterion .levels .level.last {
+        border-right: 1px solid var(--gray);
+    }
+
+    .gradingform_rubric .plainvalue.empty {
+        font-style: italic;
+        color: var(--gray-dark);
+    }
+
+    .gradingform_rubric.editor .criterion .levels .level .delete {
+        position: absolute;
+        right: 0;
+    }
+
+    .gradingform_rubric .criterion .levels .level .score {
+        font-style: italic;
+        color: var(--green);
+        font-weight: bold;
+        margin-top: 5px;
+        white-space: nowrap;
+    }
+
+    .gradingform_rubric .criterion .levels .level .score .scorevalue {
+        padding-right: 5px;
+    }
+
+    /* Make invisible the buttons 'Move up' for the first criterion and
+       'Move down' for the last, because those buttons will make no change */
+    .gradingform_rubric.editor .criterion.first .controls .moveup input,
+    .gradingform_rubric.editor .criterion.last .controls .movedown input {
+        display: none;
+    }
+
+    /* evaluation */
+    .gradingform_rubric .criterion .levels .level.currentchecked {
+        background-color: #fff0f0;
+    }
+
+    .gradingform_rubric .criterion .levels .level.checked {
+        background-color: var(--green-light);
+        border: 1px solid var(--gray-darker);
+    }
+
+    .gradingform_rubric .options .optionsheading {
+        font-weight: bold;
+        font-size: 1.1em;
+        padding-bottom: 5px;
+    }
+
+    .gradingform_rubric .options .option {
+        padding-bottom: 2px;
+    }
+
+    .gradingform_rubric .options .option label {
+        margin-left: 5px;
+    }
+
+    .gradingform_rubric .options .option .value {
+        margin-left: 5px;
+        font-weight: bold;
+    }
+
+    .gradingform_rubric .criterion .levels.error {
+        border: 1px solid var(--red);
+    }
+
+    .gradingform_rubric .criterion .description.error,
+    .gradingform_rubric .criterion .levels .level .definition.error,
+    .gradingform_rubric .criterion .levels .level .score.error {
+        background-color: var(--gray-lighter);
+    }
+
+    .gradingform_rubric-regrade {
+        padding: 10px;
+        background-color: var(--gray-lighter);
+        border: 1px solid var(--red-light);
+        margin-bottom: 10px;
+    }
+
+    .gradingform_rubric-restored {
+        padding: 10px;
+        background-color: var(--yellow-light);
+        border: 1px solid var(--yellow);
+        margin-bottom: 10px;
+    }
+
+    .gradingform_rubric-error {
+        color: var(--red);
+        font-weight: bold;
+    }
+
+    /* special classes for elements created by rubriceditor.js */
+    .gradingform_rubric.editor .hiddenelement {
+        display: none;
+    }
+
+    .gradingform_rubric.editor .pseudotablink {
+        background-color: transparent;
+        border: 0 solid;
+        height: 1px;
+        width: 1px;
+        color: transparent;
+        padding: 0;
+        margin: 0;
+        position: relative;
+        float: right;
+    }
+
+    .gradingform_rubric {
+        padding-bottom: 0;
+        max-width: none;
+    }
+
+    .gradingform_rubric .criterion .description {
+        font-weight: 500;
+        min-width: 150px;
+    }
+
+    .gradingform_rubric .criterion .levels {
+        background-color: var(--white);
+    }
+
+    .gradingform_rubric .criterion,
+    .gradingform_rubric .criterion.even {
+        background-color: transparent;
+    }
+
+    .gradingform_rubric.evaluate .criterion .levels .level:hover {
+        background-color: var(--green-light);
+    }
+
+    .gradingform_rubric .criterion .levels .level.checked {
+        background-color: var(--green-light);
+        border: none;
+        border-left: 1px solid var(--gray);
+    }
+
+    .gradingform_rubric .criterion .levels .level .score {
+        color: var(--green);
+        font-weight: 500;
+        font-style: normal;
+        margin-top: 20px;
+    }
+
+    .gradingform_rubric .criterion .remark textarea {
+        margin-bottom: 0;
+    }
+}
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 36065c7ea..90d132f77 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -81,6 +81,10 @@ ion-icon {
     }
 }
 
+ion-button.button-small ion-icon.faicon[slot] {
+    font-size: 1.5em !important;
+}
+
 [dir=rtl] ion-icon.icon-flip-rtl {
     transform: scaleX(-1);
 }
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
index bccad48f6..9b82fd2d8 100644
--- a/src/theme/theme.scss
+++ b/src/theme/theme.scss
@@ -20,6 +20,7 @@
 
 /* Components */
 @import "./components/format-text.scss";
+@import "./components/rubrics.scss";
 
 /* Core CSS required for Ionic components to work properly */
 @import "~@ionic/angular/css/core.css";