first commit

admin/templates/themeselector/theme_card.mustache

@@ -0,0 +1,101 @@
+{{!
+    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 core_admin/themeselector/theme_card
+
+    This template renders the singular card for a theme.
+
+    Example context (json):
+    {
+        "name": "Boost",
+        "choose": "boost",
+        "image": "http://moodlesite/theme/image.php?theme=boost&image=screenshot&component=theme",
+        "current": true,
+        "actionurl": "http://moodlesite/admin/themeselector.php",
+        "sesskey": "123XYZ",
+        "settingsurl": "http://moodlesite/admin/settings.php?section=themesettingboost",
+        "reporturl": "http://moodlesite/report/themeusage/index.php?themechoice=boost"
+    }
+}}
+<div class="card theme-card" role="listitem" id="theme-card-{{choose}}" aria-labelledby="theme-name-{{choose}} {{#current}}current-theme-{{choose}}{{/current}}">
+    <div class="card-img card-img-top" style='background-image: url("{{image}}");'></div>
+    <div class="card-body p-3">
+        <div class="d-flex">
+            <div class="flex-grow-1">
+                <h3 class="h5" id="theme-name-{{choose}}">{{name}}</h3>
+            </div>
+            <div>
+                <button
+                    type="button"
+                    id="theme-preview-{{choose}}"
+                    class="btn btn-link p-0"
+                    title="{{#str}}previewthemename, moodle, {{name}}{{/str}}"
+                    data-action="preview"
+                    data-name="{{name}}"
+                    data-image="{{image}}"
+                    data-current="{{current}}"
+                    data-actionurl="{{actionurl}}"
+                    data-choose="{{choose}}"
+                    data-sesskey="{{sesskey}}">
+                    <i class="icon fa fa-info-circle m-0" aria-hidden="true"></i>
+                    <span class="sr-only">{{#str}}previewthemename, moodle, {{name}}{{/str}}</span>
+                </button>
+                {{#reporturl}}
+                    <a
+                        href="{{reporturl}}"
+                        id="theme-usage-report-{{choose}}"
+                        class="btn btn-link p-0 ml-2"
+                        title="{{#str}}themeusagereportname, admin, {{name}}{{/str}}">
+                        <i class="icon fa fa-area-chart m-0" aria-hidden="true"></i>
+                        <span class="sr-only">{{#str}}themeusagereportname, admin, {{name}}{{/str}}</span>
+                    </a>
+                {{/reporturl}}
+                {{#settingsurl}}
+                    <a
+                        href="{{settingsurl}}"
+                        id="theme-settings-{{choose}}"
+                        class="btn btn-link p-0 ml-2"
+                        title="{{#str}}themeeditsettingsname, admin, {{name}}{{/str}}">
+                        <i class="icon fa fa-cog m-0" aria-hidden="true"></i>
+                        <span class="sr-only">{{#str}}themeeditsettingsname, admin, {{name}}{{/str}}</span>
+                    </a>
+                {{/settingsurl}}
+            </div>
+        </div>
+    </div>
+    <div class="d-flex align-items-end flex-column p-3">
+        {{#current}}
+            <strong><span class="text-success" id="current-theme-{{choose}}">{{#str}}currenttheme, moodle{{/str}}</span></strong>
+            {{#definedinconfig}}
+                <div class="alert alert-info p-1">{{#str}}configoverride, admin{{/str}}</div>
+            {{/definedinconfig}}
+        {{/current}}
+        {{^current}}
+            {{#actionurl}}
+                <form method="post" action="{{actionurl}}" id="theme-select-form-{{choose}}">
+                    <input type="hidden" name="sesskey" value="{{sesskey}}">
+                    <input type="hidden" name="choose" value="{{choose}}">
+                    <button type="submit" class="btn btn-primary">
+                        <span aria-hidden="true">{{#str}}selecttheme, moodle{{/str}}</span>
+                        <span class="sr-only">{{#str}}selectthemename, moodle, {{name}}{{/str}}</span>
+                    </button>
+                </form>
+            {{/actionurl}}
+        {{/current}}
+    </div>
+</div>
+

admin/templates/themeselector/theme_preview_modal.mustache

@@ -0,0 +1,58 @@
+{{!
+    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 core_admin/themeselector/theme_preview_modal
+
+    This template renders the modal for the selected theme.
+
+    Example context (json):
+    {
+        "name": "Boost",
+        "choose": "boost",
+        "image": "http://moodlesite/theme/image.php?theme=boost&image=screenshot&component=theme",
+        "description": "Boost is a modern highly-customisable theme...",
+        "current": true,
+        "actionurl": "http://moodlesite/admin/themeselector.php",
+        "sesskey": "123XYZ"
+    }
+}}
+<div>
+    <div>
+        <img
+            src="{{image}}"
+            alt=""
+            id="modal-theme-preview-{{choose}}"
+            class="w-100 mb-3">
+    </div>
+    <div class="d-flex">
+        <div class="flex-grow-1">
+            <p><strong>{{#str}}themepreviewdescription, moodle, {{name}}{{/str}}</strong></p>
+        </div>
+        <div class="d-flex align-items-end flex-column">
+        {{#current}}
+            <strong><span class="text-success">{{#str}}currenttheme, moodle{{/str}}</span></strong>
+            {{#definedinconfig}}
+                <div class="alert alert-info p-1">{{#str}}configoverride, admin{{/str}}</div>
+            {{/definedinconfig}}
+        {{/current}}
+        </div>
+    </div>
+    <p>{{description}}</p>
+    {{#actionurl}}
+        <form method="post" action="{{actionurl}}" id="modal-theme-select-form-{{choose}}">
+            <input type="hidden" name="sesskey" value="{{sesskey}}">
+            <input type="hidden" name="choose" value="{{choose}}">
+        </form>
+    {{/actionurl}}
+</div>

admin/templates/themeselector/theme_selector.mustache

@@ -0,0 +1,77 @@
+{{!
+    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 core_admin/themeselector/theme_selector
+
+    This template renders the cards view for choosing a theme.
+
+    Example context (json):
+    {
+        "themes": [
+            {
+                "name": "Boost",
+                "choose": "boost",
+                "image": "http://moodlesite/theme/image.php?theme=boost&image=screenshot&component=theme",
+                "current": true,
+                "actionurl": "http://moodlesite/admin/themeselector.php",
+                "sesskey": "123XYZ"
+            },
+            {
+                "name": "Classic",
+                "choose": "classic",
+                "image": "http://moodlesite/theme/image.php?theme=classic&image=screenshot&component=theme",
+                "actionurl": "http://moodlesite/admin/themeselector.php",
+                "sesskey": "123XYZ"
+            }
+        ],
+        "resetbutton": {
+            "id": "single_button123",
+            "method": "post",
+            "url": "index.php",
+            "label": "Clear theme caches",
+            "params": [
+                {
+                    "name": "sesskey",
+                    "value": "123XYZ"
+                },
+                {
+                    "name": "reset",
+                    "value": "1"
+                }
+            ]
+        }
+    }
+}}
+<h2>{{#str}}themeselector, admin{{/str}}</h2>
+{{#resetbutton}}
+    <div class="mb-3">
+        {{>core/single_button}}
+    </div>
+{{/resetbutton}}
+<div class="card-grid row row-cols-1 row-cols-md-3 mx-0" id="themelist" data-region="card-deck" role="list" data-definedinconfig="{{definedinconfig}}">
+    {{#themes}}
+        <div class="col d-flex px-1 mb-2">
+            {{>core_admin/themeselector/theme_card}}
+        </div>
+    {{/themes}}
+</div>
+
+{{#js}}
+require(['core_admin/themeselector/preview_modal'], function(Modal) {
+    Modal.init();
+});
+{{/js}}