MDL-55508 theme_noname: Fix styling of the assignment grading interface
authorFrederic Massart <fred@moodle.com>
Tue, 9 Aug 2016 07:48:11 +0000 (15:48 +0800)
committerDan Poltawski <dan@moodle.com>
Fri, 23 Sep 2016 09:53:31 +0000 (10:53 +0100)
Part of MDL-55071

theme/noname/scss/moodle/core.scss
theme/noname/scss/moodle/modules.scss
theme/noname/templates/core/form_autocomplete_input.mustache
theme/noname/templates/core_form/element-template-inline.mustache
theme/noname/templates/core_form/element-template.mustache
theme/noname/templates/embedded.mustache
theme/noname/templates/mod_assign/grading_actions.mustache [new file with mode: 0644]
theme/noname/templates/mod_assign/grading_navigation.mustache [new file with mode: 0644]
theme/noname/templates/mod_assign/grading_navigation_user_selector.mustache [new file with mode: 0644]

index 222fc3d..b317927 100644 (file)
@@ -1112,6 +1112,10 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     height: 16px;
     background-size: 100%;
 }
+.moodle-dialogue-base .moodle-dialogue-wrap {
+    background-color: #fff;
+    border: 1px solid #ccc;
+}
 .moodle-dialogue-base .moodle-dialogue-wrap.moodle-dialogue-content {
     @extend .modal-content;
 }
index 371e8bd..d71951a 100644 (file)
@@ -582,3 +582,51 @@ div#dock {
         background-color: $gray-light;
     }
 }
+
+/**
+ * Assign.
+ */
+.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
+    top: auto;
+}
+.path-mod-assign [data-region="grade-panel"] h3 {
+    margin: 10px 0;
+    line-height: 40px;
+}
+.path-mod-assign [data-region="grading-navigation"] {
+    padding: 6px;
+}
+.path-mod-assign [data-region="grade-actions"] {
+    padding: 10px;
+}
+.path-mod-assign [data-region="user-info"] .img-rounded {
+    margin-top: 0;
+}
+.path-mod-assign [data-region="grading-navigation-panel"] {
+    height: 85px;
+}
+.path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
+    width: auto;
+    display: inline-block;
+}
+
+/**
+ * Assign feedback.
+ */
+.assignfeedback_editpdf_widget * {
+    box-sizing: content-box;
+}
+.assignfeedback_editpdf_widget button {
+    box-sizing: border-box;
+}
+.assignfeedback_editpdf_widget .commentcolourbutton img {
+    border-width: 0;
+}
+.assignfeedback_editpdf_widget .label {
+    @extend .tag;
+    @extend .tag-info;
+}
+
+.assignfeedback_editpdf_menu {
+    padding: 0;
+}
index 89bb1a4..f8d9293 100644 (file)
@@ -36,7 +36,7 @@
     { "inputID": 1, "suggestionsId": 2, "selectionId": 3, "downArrowId": 4, "placeholder": "Select something" }
 }}
 {{#showSuggestions}}
-<input type="text" id="{{inputId}}" class="form-control col-md-4" list="{{suggestionsId}}" placeholder="{{placeholder}}" role="combobox" aria-expanded="false" autocomplete="off" autocorrect="off" autocapitalize="off" aria-autocomplete="list" aria-owns="{{suggestionsId}} {{selectionId}}"/><span class="form-autocomplete-downarrow" id="{{downArrowId}}">&#x25BC;</span>
+<input type="text" id="{{inputId}}" class="form-control" list="{{suggestionsId}}" placeholder="{{placeholder}}" role="combobox" aria-expanded="false" autocomplete="off" autocorrect="off" autocapitalize="off" aria-autocomplete="list" aria-owns="{{suggestionsId}} {{selectionId}}"/><span class="form-autocomplete-downarrow" id="{{downArrowId}}">&#x25BC;</span>
 {{/showSuggestions}}
 {{^showSuggestions}}
 <input type="text" id="{{inputId}}" placeholder="{{placeholder}}" role="textbox" aria-owns="{{selectionId}}"/>
index a9ac4d0..08751af 100644 (file)
@@ -1,4 +1,4 @@
-<div class="form-group {{#error}}has-danger{{/error}}">
+<div class="form-group {{#error}}has-danger{{/error}} fitem">
     <label class="col-form-label {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">
         {{{label}}} {{{helpbutton}}}
     </label>
@@ -13,4 +13,4 @@
 require(['theme_noname/form-display-errors'], function(module) {
     module.enhance({{#quote}}{{element.id}}{{/quote}});
 });
-{{/js}}
\ No newline at end of file
+{{/js}}
index 17dbab2..a03a596 100644 (file)
@@ -1,4 +1,4 @@
-<div class="form-group row {{#error}}has-danger{{/error}}">
+<div class="form-group row {{#error}}has-danger{{/error}} fitem">
     <label class="col-md-3 col-form-label {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">
         {{{label}}} {{{helpbutton}}}
     </label>
@@ -15,4 +15,4 @@
 require(['theme_noname/form-display-errors'], function(module) {
     module.enhance({{#quote}}{{element.id}}{{/quote}});
 });
-{{/js}}
\ No newline at end of file
+{{/js}}
index a2e6648..4d5198b 100644 (file)
 <body {{{ output.body_attributes }}}>
 
 {{{ output.standard_top_of_body_html }}}
-<section id="region-main">
-    {{{ output.course_content_header }}}
-    {{{ output.main_content }}}
-    {{{ output.course_content_footer }}}
-</section>
+<div id="page">
+    <div id="page-content">
+        {{{ output.main_content }}}
+    </div>
+</div>
 {{{ output.standard_end_of_body_html }}}
 </body>
 </html>
diff --git a/theme/noname/templates/mod_assign/grading_actions.mustache b/theme/noname/templates/mod_assign/grading_actions.mustache
new file mode 100644 (file)
index 0000000..203ba17
--- /dev/null
@@ -0,0 +1,55 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template mod_assign/grading_actions
+
+    Actions panel at the bottom of the assignment grading UI.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * data-region
+
+    Context variables required for this template:
+    * see mod/assign/classes/output/grading_app.php
+
+    Example context (json):
+    This template is initially hidden, and is only displayed after the current user info has been loaded.
+}}
+{{#showreview}}
+<div class="btn-toolbar collapse-buttons">
+    <div class="btn-group">
+        <button type="button" class="btn btn-secondary collapse-review-panel">{{#pix}} layout-expand-right, mod_assign, {{#str}} collapsereviewpanel, mod_assign {{/str}} {{/pix}}</button>
+        <button type="button" class="btn btn-secondary collapse-none active">{{#pix}} layout-default, mod_assign, {{#str}} defaultlayout, mod_assign {{/str}} {{/pix}}</button>
+        <button type="button" class="btn btn-secondary collapse-grade-panel">{{#pix}} layout-expand-left, mod_assign, {{#str}} collapsegradepanel, mod_assign {{/str}} {{/pix}}</button>
+    </div>
+</div>
+{{/showreview}}
+<form data-region="grading-actions-form" class="hide">
+    <label>{{#str}}sendstudentnotifications, mod_assign{{/str}}
+           <input type="checkbox" name="sendstudentnotifications"
+                  {{#defaultsendnotifications}}checked="checked"{{/defaultsendnotifications}} />
+    </label>
+    <button type="submit" class="btn btn-primary" name="savechanges">{{#str}}savechanges{{/str}}</button>
+    <button type="submit" class="btn btn-secondary" name="resetbutton">{{#str}}reset{{/str}}</button>
+</form>
+{{#js}}
+require(['mod_assign/grading_actions'], function(GradingActions) {
+    new GradingActions('[data-region="grade-actions"]');
+});
+{{/js}}
diff --git a/theme/noname/templates/mod_assign/grading_navigation.mustache b/theme/noname/templates/mod_assign/grading_navigation.mustache
new file mode 100644 (file)
index 0000000..23d1aa7
--- /dev/null
@@ -0,0 +1,75 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template mod_assign/grading_navigation
+
+    Actions panel at the bottom of the assignment grading UI.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * data-region, data-assignmentid, data-groupid
+
+    Context variables required for this template:
+    * see mod/assign/classes/output/grading_app.php
+
+    Example context (json):
+    This template includes ajax functionality, so it cannot be shown in the template library.
+}}
+<div class="container-fluid">
+<div data-region="grading-navigation" class="row">
+<div data-region="assignment-info" class="col-md-4">
+<a href="{{config.wwwroot}}/course/view.php?id={{courseid}}">{{{coursename}}}</a><br/>
+<a href="{{config.wwwroot}}/mod/assign/view.php?id={{cmid}}">{{name}}</a>
+{{#caneditsettings}}
+<a href="{{config.wwwroot}}/course/modedit.php?update={{cmid}}&return=1">{{#pix}}t/edit, core,{{#str}}editsettings{{/str}}{{/pix}}</a>
+{{/caneditsettings}}
+<div role="tooltip" id="tooltip-{{uniqid}}" class="accesshide">
+{{#duedate}}
+{{#str}}duedatecolon, mod_assign, {{duedatestr}}{{/str}}
+{{/duedate}}
+
+{{#cutoffdate}}
+<br>{{cutoffdatestr}}
+{{/cutoffdate}}
+
+{{#duedate}}
+<br>{{timeremainingstr}}
+{{/duedate}}
+</div>
+{{#duedate}}
+<br/><small data-region="assignment-tooltip" aria-describedby="tooltip-{{uniqid}}">{{#str}}duedatecolon, mod_assign, {{duedatestr}}{{/str}}</small>
+{{/duedate}}
+</span>
+</div>
+<div data-region="user-info" class="col-md-4" data-assignmentid="{{assignmentid}}" data-groupid="{{groupid}}">
+    {{> mod_assign/grading_navigation_user_info }}
+</div>
+<div data-region="user-selector" class="col-md-4">
+    <div class="alignment">
+        {{> mod_assign/grading_navigation_user_selector }}
+    </div>
+</div>
+</div>
+</div>
+{{#js}}
+require(['mod_assign/grading_navigation', 'core/tooltip'], function(GradingNavigation, ToolTip) {
+    var nav = new GradingNavigation('[data-region="user-selector"]');
+    var tooltip = new ToolTip('[data-region="assignment-tooltip"]');
+});
+{{/js}}
\ No newline at end of file
diff --git a/theme/noname/templates/mod_assign/grading_navigation_user_selector.mustache b/theme/noname/templates/mod_assign/grading_navigation_user_selector.mustache
new file mode 100644 (file)
index 0000000..6b3c59e
--- /dev/null
@@ -0,0 +1,66 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template mod_assign/grading_navigation_user_selector
+
+    The template HTML for the user selector in the top right corner.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * data-action, data-assignmentid, data-groupid, data-region
+
+    Context variables required for this template:
+    * see mod/assign/classes/output/grading_app.php
+
+    Example context (json):
+    This template uses ajax functionality, so it cannot be shown in the template library.
+}}
+<a href="#previous" data-action="previous-user">{{{larrow}}}</a>
+    <span data-region="input-field">
+        <select data-action="change-user" data-assignmentid="{{assignmentid}}" data-groupid="{{groupid}}"></select>
+    </span>
+<a href="#next" data-action="next-user">{{{rarrow}}}</a>
+
+<br>
+
+<span data-region="user-count">
+    <small>
+        <span data-region="user-count-summary">{{#str}}xofy, mod_assign, { "x": "{{index}}", "y": "{{count}}" }{{/str}}</span>
+    </small>
+</span>
+
+<span data-region="configure-filters" id="filter-configuration-{{uniqid}}" class="card card-small">
+    <form>
+        <label><input type="checkbox" name="filter_submitted">{{#str}}filtersubmitted, mod_assign{{/str}}</label>
+        <label><input type="checkbox" name="filter_notsubmitted">{{#str}}filternotsubmitted, mod_assign{{/str}}</label>
+        <label><input type="checkbox" name="filter_requiregrading">{{#str}}filterrequiregrading, mod_assign{{/str}}</label>
+    </form>
+</span>
+
+<a href="#" data-region="user-filters" title="{{#str}}changefilters, mod_assign{{/str}}" aria-expanded="false" aria-controls="filter-configuration-{{uniqid}}">
+    <span class="accesshide">
+        {{#filters}}
+            {{filtername}}
+        {{/filters}}
+        {{^filters}}
+            {{#str}}nofilters, mod_assign{{/str}}
+        {{/filters}}
+    </span>
+    {{#pix}}i/filter{{/pix}}
+</a>