L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'MDL-78955-master-v03' of https://github.com/ilyatregubov/moodle

Browse Source
This commit is contained in:
Ilya Tregubov
2023-09-18 10:42:34 +08:00
parent ecddfa6ccd 4dcac269be
commit c2d59f626e
8 changed files with 127 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/classes/output/choicelist.php
+1 -1
View File
@@ -169,7 +169,7 @@ class choicelist implements renderable, named_templatable {
$options = [];
foreach ($this->options as $option) {
if (!empty($option['icon'])) {
$option['icon'] = $option['icon']->export_for_template($output);
$option['icon'] = $option['icon']->export_for_pix($output);
}
$option['hasicon'] = !empty($option['icon']);
lib/templates/local/choicelist.mustache
+2 -47
View File
@@ -78,53 +78,8 @@
]
}
}}
<div class="d-flex flex-column choicelist" role="listbox">
<div class="d-flex flex-column choicelist p-1" role="listbox">
{{#options}}
<div
class="d-flex flex-row align-items-start p-2 position-relative rounded {{!
}} {{#disabled}} dimmed_text {{/disabled}} {{!
}} {{#selected}} bg-light selected {{/selected}}"
data-optionnumber="{{optionnumber}}"
data-selected="{{selected}}"
>
{{#icon}}
<div class="option-icon">
{{>core/pix_icon}}
</div>
{{/icon}}
<div class="option-select-indicator">
{{#selected}}
{{#pix}} i/checkedcircle, core, {{#str}} selected, form {{/str}} {{/pix}}
{{/selected}}
{{^selected}}
{{#pix}} i/uncheckedcircle{{/pix}}
{{/selected}}
</div>
<div class="option-name">
<a
class="stretched-link text-wrap {{!
}} {{#disabled}} disabled {{/disabled}} {{!
}} {{#selected}} selected disabled {{/selected}}"
role="option"
{{#selected}} aria-selected="true" {{/selected}}
{{#description}} aria-describedby="{{optionuniqid}}" {{/description}}
data-value="{{value}}"
{{#hasurl}} href="{{{url}}}" {{/hasurl}}
{{! If there is no url, supose JS will handle it somehow. }}
{{^hasurl}} href="#" {{/hasurl}}
{{#disabled}} tabindex="-1" {{/disabled}}
{{#extras}}
{{attribute}}="{{value}}"
{{/extras}}
>
{{name}}
</a>
{{#description}}
<div id="{{optionuniqid}}" class="option-description small text-muted text-wrap">
{{{description}}}
</div>
{{/description}}
</div>
</div>
{{> core/local/choicelist/option}}
{{/options}}
</div>
lib/templates/local/choicelist/option.mustache
+100
View File
@@ -0,0 +1,100 @@
{{!
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/local/choicelist/option
Default template for a choicelist option.
Any mustache can user this template to render options in a custom choicelist wrapper.
Classes required for JS:
* none
Context variables required for this template:
* optionuniqid String - unique option id.
* value String - option value.
* name String - options name.
* optionnumber Number - option number.
Example context (json):
{
"value": "value2",
"name": "Second option",
"description": "Second option description",
"icon": {
"extraclasses": "iconhelp",
"attributes": [
{"name": "src", "value": "../../../pix/help.svg"},
{"name": "alt", "value": "Help icon"}
]
},
"hasicon": true,
"optionnumber": 2,
"optionuniqid": "option2uniqid",
"selected": true
}
}}
<div
class="d-flex flex-row align-items-start p-2 mb-1 {{!
}} position-relative rounded dropdown-item-outline {{!
}} {{#disabled}} dimmed_text {{/disabled}} {{!
}} {{#selected}} border bg-primary-light selected {{/selected}}"
data-optionnumber="{{optionnumber}}"
data-selected="{{selected}}"
>
<div class="option-select-indicator">
<span class="{{^selected}} d-none {{/selected}}" data-for="checkedIcon">
{{#pix}} i/checkedcircle, core, {{#str}} selected, form {{/str}} {{/pix}}
</span>
<span class="{{#selected}} d-none {{/selected}}" data-for="uncheckedIcon">
{{#pix}} i/uncheckedcircle{{/pix}}
</span>
</div>
{{#icon}}
<div class="option-icon">
{{#pix}}{{key}}, {{component}}, {{title}}{{/pix}}
</div>
{{/icon}}
<div class="option-name">
<a
class="stretched-link text-wrap font-weight-bold {{!
}} {{^disabled}} text-dark {{/disabled}} {{!
}} {{#disabled}} disabled {{/disabled}} {{!
}} {{#selected}} selected {{/selected}}"
role="option"
{{#selected}} aria-selected="true" {{/selected}}
{{#description}} aria-describedby="{{optionuniqid}}" {{/description}}
data-value="{{value}}"
{{#hasurl}} href="{{{url}}}" {{/hasurl}}
{{! If there is no url, supose JS will handle it somehow. }}
{{^hasurl}} href="#" {{/hasurl}}
{{#disabled}} tabindex="-1" {{/disabled}}
{{#extras}}
{{attribute}}="{{value}}"
{{/extras}}
>
{{name}}
</a>
{{#description}}
<div
id="{{optionuniqid}}"
class="option-description small text-muted text-wrap">
{{{description}}}
</div>
{{/description}}
</div>
</div>
lib/templates/local/dropdown/status.mustache
+1 -54
View File
@@ -95,60 +95,7 @@
<div class="pb-2 border-bottom">{{{dialogcontent}}}</div>
{{/dialogcontent}}
{{#choices}}
<div class="d-flex flex-column" role="listbox">
{{#options}}
<div
class="d-flex flex-row align-items-start p-2 mb-1 {{!
}} position-relative rounded dropdown-item-outline {{!
}} {{#disabled}} dimmed_text {{/disabled}} {{!
}} {{#selected}} bg-light selected {{/selected}}"
data-optionnumber="{{optionnumber}}"
data-selected="{{selected}}"
>
{{#icon}}
<div class="option-icon">
{{>core/pix_icon}}
</div>
{{/icon}}
<div class="option-select-indicator">
<span class="{{^selected}} d-none {{/selected}}" data-for="checkedIcon">
{{#pix}} i/checkedcircle, core, {{#str}} selected, form {{/str}} {{/pix}}
</span>
<span class="{{#selected}} d-none {{/selected}}" data-for="uncheckedIcon">
{{#pix}} i/uncheckedcircle{{/pix}}
</span>
</div>
<div class="option-name">
<a
class="stretched-link {{!
}} {{#disabled}} disabled {{/disabled}} {{!
}} {{#selected}} selected disabled {{/selected}}"
role="option"
{{#selected}} aria-selected="true" {{/selected}}
{{#description}} aria-describedby="{{optionuniqid}}" {{/description}}
data-value="{{value}}"
{{#hasurl}} href="{{{url}}}" {{/hasurl}}
{{! If there is no url, supose JS will handle it somehow. }}
{{^hasurl}} href="#" {{/hasurl}}
{{#disabled}} tabindex="-1" {{/disabled}}
{{#disabled}} aria-disabled="true" {{/disabled}}
{{$extras}}
{{#extras}}
{{attribute}}="{{value}}"
{{/extras}}
{{/extras}}
>
{{name}}
</a>
{{#description}}
<div id="{{optionuniqid}}" class="small text-muted">
{{{description}}}
</div>
{{/description}}
</div>
</div>
{{/options}}
</div>
{{> core/local/choicelist }}
{{/choices}}
{{/ dialogcontent }}
{{/ core/local/dropdown/dialog }}
theme/boost/scss/moodle/action-menu.scss
-4
View File
@@ -30,10 +30,6 @@
.dropdown-subpanel-content {
max-width: $modal-sm;
box-shadow: 0 0 1rem rgba($black, .15);
a:focus {
outline: solid $primary;
}
}
.dropdown-subpanel-content.show {
theme/boost/scss/moodle/core.scss
+9 -12
View File
@@ -257,6 +257,10 @@ button.close,
color: map-get($theme-colors, 'info');
}
.bg-primary-light {
background-color: $primary-light-background;
}
.fitem.advanced .text-info {
font-weight: bold;
}
@@ -3178,18 +3182,11 @@ blockquote {
/* Choice list component. */
.choicelist {
min-width: $modal-sm;
}
// Choicelist is designed to fit inside a small modal.
min-width: calc(#{$modal-sm} - 25px);
[data-region="fixed-drawer"] {
.choicelist {
min-width: calc(#{$modal-sm} - 25px);
}
}
@include media-breakpoint-down(xs) {
// Modal small are larger than xs breakpoint.
.choicelist {
min-width: calc(#{$modal-sm} - 25px);
// Align the font based icons.
i.icon {
vertical-align: middle;
}
}
theme/boost/style/moodle.css
+7 -12
View File
@@ -23138,6 +23138,10 @@ button.close:focus:hover,
color: #008196;
}
.bg-primary-light {
background-color: #f5f9fc;
}
.fitem.advanced .text-info {
font-weight: bold;
}
@@ -25985,18 +25989,12 @@ blockquote {
/* Choice list component. */
.choicelist {
min-width: 300px;
}
[data-region=fixed-drawer] .choicelist {
min-width: calc(300px - 25px);
}
@media (max-width: 575.98px) {
.choicelist {
min-width: calc(300px - 25px);
}
.choicelist i.icon {
vertical-align: middle;
}
.action-menu .dropdown-toggle {
text-decoration: none;
display: inline-block;
@@ -26023,9 +26021,6 @@ blockquote {
max-width: 300px;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
}
.action-menu .dropdown-subpanel-content a:focus {
outline: solid #0f6cbf;
}
.action-menu .dropdown-subpanel-content.show {
animation: 0.15s animate-pop;
}
theme/classic/style/moodle.css
+7 -12
View File
@@ -23138,6 +23138,10 @@ button.close:focus:hover,
color: #008196;
}
.bg-primary-light {
background-color: #f5f9fc;
}
.fitem.advanced .text-info {
font-weight: bold;
}
@@ -25985,18 +25989,12 @@ blockquote {
/* Choice list component. */
.choicelist {
min-width: 300px;
}
[data-region=fixed-drawer] .choicelist {
min-width: calc(300px - 25px);
}
@media (max-width: 575.98px) {
.choicelist {
min-width: calc(300px - 25px);
}
.choicelist i.icon {
vertical-align: middle;
}
.action-menu .dropdown-toggle {
text-decoration: none;
display: inline-block;
@@ -26023,9 +26021,6 @@ blockquote {
max-width: 300px;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
}
.action-menu .dropdown-subpanel-content a:focus {
outline: solid #0f6cbf;
}
.action-menu .dropdown-subpanel-content.show {
animation: 0.15s animate-pop;
}