MDL-66893 mod_forum: update navigation bar in grader UI
[moodle.git] / mod / forum / templates / local / grades / local / grader / navigation.mustache
index e4c4330..8313ee7 100644 (file)
         "moduleName": "Chef the Forum"
     }
 }}
-<div class="grader-grading_navigation col-sm-12">
-    <div class="row">
-        <div class="col-sm-12 col-md-8 py-3">
-            <div class="d-block">
-                <h6 class="d-inline btn px-0 font-weight-bold text-muted mb-0">{{moduleName}}</h6>
-                <h6 class="d-inline btn px-0 font-weight-bold text-muted mb-0"> > </h6>
-                <h6 class="d-inline btn px-0 font-weight-bold mb-0">{{#str}}grading, forum{{/str}}</h6>
-            </div>
-        </div>
-
-        <div class="col-sm-12 col-md-4 py-3">
-
-            <a href="#" class="btn fa fa-arrows-alt float-right" aria-label="Toggle fullscreen" data-action="togglefullscreen"></a>
-
-            <a href="#" class="btn btn-secondary float-right" aria-label="Close grade interface" data-action="closegrader">Close</a>
-
-            <a href="#" role="button" class="btn btn-primary float-right" aria-label="Save and quit" data-action="savegrade">Save</a>
-
-            <!--TODO Manipulate grader panel see also Grading panel-->
-            <a href="#" role="button" class="btn fa fa-check-circle float-right" aria-label="Open or close grader panel" data-action="expandgrader"></a>
+<nav id="nav-container-{{uniqid}}" class="grader-grading_navigation navbar">
+    <div class="d-none d-sm-flex align-items-center">
+        <a href="{{{courseUrl}}}" class="btn btn-link px-2 colour-inherit">
+            <h5 class="d-inline px-0 mb-0">{{courseName}}</h5>
+        </a>
+        <span class="text-muted icon-no-margin">{{#pix}} i/breadcrumbdivider, core {{/pix}}</span>
+        <button class="btn btn-link px-2 colour-inherit" data-action="closegrader">
+            <h5 class="d-inline px-0 mb-0">{{moduleName}}</h5>
+        </button>
+        <span class="text-muted icon-no-margin">{{#pix}} i/breadcrumbdivider, core {{/pix}}</span>
+        <h5 class="d-inline px-2 mb-0 font-weight-bold">{{#str}}grading, forum{{/str}}</h5>
+    </div>
 
+    <div class="ml-auto">
+        <button
+            class="btn btn-icon icon-no-margin drawer-button mr-1 active"
+            data-action="expand-grading-drawer"
+            aria-controls="grading-drawer"
+            aria-expanded="true"
+            type="button"
+            title="{{#str}} showgraderpanel, mod_forum {{/str}}"
+        >
+            <span class="dir-ltr-hide" aria-hidden="true">{{#pix}} show-grader-panel-rtl, mod_forum, {{#str}} showgraderpanel, mod_forum {{/str}} {{/pix}}</span>
+            <span class="dir-rtl-hide" aria-hidden="true">{{#pix}} show-grader-panel, mod_forum, {{#str}} showgraderpanel, mod_forum {{/str}} {{/pix}}</span>
+        </button>
+        <button
+            class="btn btn-icon icon-no-margin drawer-button mr-1"
+            aria-label="Open or close grader panel"
+            data-action="collapse-grading-drawer"
+            aria-controls="grading-drawer"
+            aria-expanded="true"
+            type="button"
+            title="{{#str}} hidegraderpanel, mod_forum {{/str}}"
+        >
+            <span aria-hidden="true">{{#pix}} hide-grader-panel, mod_forum, {{#str}} hidegraderpanel, mod_forum {{/str}} {{/pix}}</span>
+        </button>
+        <button
+            class="btn btn-primary font-weight-bold ml-2 px-4"
+            data-action="savegrade"
+        >
+            {{#str}} save {{/str}}
+        </button>
+        <button
+            class="btn btn-secondary font-weight-bold ml-2 px-4"
+            aria-label="{{#str}} closegrader, mod_forum {{/str}}"
+            data-action="closegrader"
+            type="button"
+        >
+            {{#str}} close, mod_forum {{/str}}
+        </button>
+        <div class="btn-group">
+        <button
+                class="btn btn-icon text-muted icon-no-margin icon-size-3 ml-2"
+                type="button"
+                id="grader-actions-menu-{{uniqid}}"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+                aria-label="{{#str}} actionsforgraderinterface, mod_forum {{/str}}"
+            >
+                {{#pix}} i/menu, core {{/pix}}
+            </button>
+            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="grader-actions-menu-{{uniqid}}">
+                <button
+                    class="dropdown-item"
+                    type="button"
+                    data-action="togglefullscreen"
+                    type="button"
+                >
+                    {{#str}} togglefullscreen, mod_forum {{/str}}
+                </button>
+            </div>
         </div>
     </div>
-</div>
+</nav>