From 3b5d4c78188fe9e81c055c444022dfc816b0692f Mon Sep 17 00:00:00 2001 From: Ilya Tregubov Date: Thu, 12 Aug 2021 16:24:15 +0200 Subject: [PATCH] MDL-71689 course: add activity button design changes. --- .../local/content/addsection.mustache | 2 +- course/renderer.php | 22 +++-------- .../templates/activitychooserbutton.mustache | 38 +++++++++++++++++++ theme/boost/scss/moodle/course.scss | 22 +++++++++++ theme/boost/style/moodle.css | 18 +++++++++ theme/classic/style/moodle.css | 19 ++++++++++ 6 files changed, 103 insertions(+), 18 deletions(-) create mode 100644 course/templates/activitychooserbutton.mustache diff --git a/course/format/templates/local/content/addsection.mustache b/course/format/templates/local/content/addsection.mustache index 00e2c6e21cb..7fcaecff643 100644 --- a/course/format/templates/local/content/addsection.mustache +++ b/course/format/templates/local/content/addsection.mustache @@ -36,7 +36,7 @@ } }} {{#showaddsection}} -
+
{{#increase}} {{#pix}}t/switch_plus, moodle, {{#str}} increasesections, moodle {{/str}}{{/pix}} diff --git a/course/renderer.php b/course/renderer.php index 6ad2d8cc12e..baded6fb91f 100644 --- a/course/renderer.php +++ b/course/renderer.php @@ -287,23 +287,11 @@ class core_course_renderer extends plugin_renderer_base { return ''; } - $straddeither = get_string('addresourceoractivity'); - - $ajaxcontrol = html_writer::start_tag('div', array('class' => 'mdl-right')); - $ajaxcontrol .= html_writer::start_tag('div', array('class' => 'section-modchooser')); - - $icon = $this->output->pix_icon('t/add', ''); - $span = html_writer::tag('span', $straddeither, array('class' => 'section-modchooser-text')); - - $ajaxcontrol .= html_writer::tag('button', $icon . $span, [ - 'class' => 'section-modchooser-link btn btn-link', - 'data-action' => 'open-chooser', - 'data-sectionid' => $section, - 'data-sectionreturnid' => $sectionreturn, - ]); - - $ajaxcontrol .= html_writer::end_tag('div'); - $ajaxcontrol .= html_writer::end_tag('div'); + $data = [ + 'sectionid' => $section, + 'sectionreturn' => $sectionreturn + ]; + $ajaxcontrol = $this->render_from_template('course/activitychooserbutton', $data); // Load the JS for the modal. $this->course_activitychooser($course->id); diff --git a/course/templates/activitychooserbutton.mustache b/course/templates/activitychooserbutton.mustache new file mode 100644 index 00000000000..a3a93bed639 --- /dev/null +++ b/course/templates/activitychooserbutton.mustache @@ -0,0 +1,38 @@ +{{! + 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 . +}} +{{! + @template core_course/activitychooserbutton + + Displays a add activity or resource button. + + Context variables required for this template: + * sectionid - Relative section number (field course_sections.section). + * sectionreturn - The section to link back to. + + Example context (json): + { + "sectionid": 1, + "sectionreturn": 0 + } +}} + diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss index 721b1e1310e..16867438b3a 100644 --- a/theme/boost/scss/moodle/course.scss +++ b/theme/boost/scss/moodle/course.scss @@ -1253,3 +1253,25 @@ span.editinstructions { font-size: 100%; } } + +$activity-item-background: theme-color-level('primary', -12) !default; +$activity-item-border: theme-color-level('primary', -2) !default; +$activity-item-color: $body-color; +$activity-item-hover: theme-color-level('primary', -10) !default; +.activity-add { + @if $enable-rounded { + @include border-radius($card-border-radius); + } + @include alert-variant($activity-item-background, $activity-item-border, $activity-item-border); + border-width: $border-width; + border-style: dashed; + .pluscontainer { + border: $border-width solid $activity-item-border; + } + &:hover { + cursor: pointer; + background-color: $activity-item-hover; + } + width: 100%; + border-radius: 4px; +} diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index cb8b4df8d78..1e9da5624d6 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -14453,6 +14453,24 @@ span.editinstructions { .automatic-completion-conditions .badge { font-size: 100%; } +.activity-add { + color: #3586ce; + background-color: #f5f9fd; + border-color: #3586ce; + border-width: 1px; + border-style: dashed; + width: 100%; + border-radius: 4px; } + .activity-add hr { + border-top-color: #2e79bc; } + .activity-add .alert-link { + color: #296ca7; } + .activity-add .pluscontainer { + border: 1px solid #3586ce; } + .activity-add:hover { + cursor: pointer; + background-color: #cfe2f3; } + /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */ :target { scroll-margin-top: 70px; } diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index d99ffa7de6c..5f24f6617fe 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -14453,6 +14453,25 @@ span.editinstructions { .automatic-completion-conditions .badge { font-size: 100%; } +.activity-add { + border-radius: 0.25rem; + color: #3586ce; + background-color: #f5f9fd; + border-color: #3586ce; + border-width: 1px; + border-style: dashed; + width: 100%; + border-radius: 4px; } + .activity-add hr { + border-top-color: #2e79bc; } + .activity-add .alert-link { + color: #296ca7; } + .activity-add .pluscontainer { + border: 1px solid #3586ce; } + .activity-add:hover { + cursor: pointer; + background-color: #cfe2f3; } + /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */ :target { scroll-margin-top: 60px; }