mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-03-14 12:40:01 +01:00
Code Issues Projects Releases Wiki Activity

MDL-69453 core_form: improve form UI icons and alignment

Browse Source
This commit is contained in:
Bas Brands 2020-10-27 13:44:02 +01:00
parent d330035f11
commit 4d181cafa5
13 changed files with 71 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
lib/form/templates/element-advcheckbox.mustache
View File

@ -7,7 +7,7 @@
{{/text}}
</div>
<div class="col-md-9 checkbox">
<div class="form-check">
<div class="form-check d-flex">
<label>
{{^element.hardfrozen}}
{{^element.frozen}}
@ -38,8 +38,12 @@
{{{label}}}
{{/text}}
</label>
<span class="text-nowrap">
{{#advanced}}<abbr class="initialism text-info" title="{{#str}}advanced{{/str}}">!</abbr>{{/advanced}}
<span class="ml-2 d-flex align-items-center align-self-start">
{{#required}}
<div class="text-danger" title="{{#str}}required{{/str}}">
{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
</div>
{{/required}}
{{{helpbutton}}}
</span>
</div>

14
lib/form/templates/element-checkbox.mustache
View File

@ -1,8 +1,5 @@
<div class="form-group row {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}">
<div class="col-md-3">
<span class="float-sm-right text-nowrap">
{{#required}}<abbr class="initialism text-danger" title="{{#str}}required{{/str}}">{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}</abbr>{{/required}}
</span>
{{#text}}
<label for="{{element.id}}">
{{{label}}}
@ -10,7 +7,7 @@
{{/text}}
</div>
<div class="col-md-9 checkbox">
<div class="form-check">
<div class="form-check d-flex">
<label>
{{^element.hardfrozen}}
{{#element.frozen}}
@ -41,8 +38,12 @@
{{{label}}}
{{/text}}
</label>
<span class="text-nowrap">
{{#advanced}}<abbr class="initialism text-info" title="{{#str}}advanced{{/str}}">!</abbr>{{/advanced}}
<span class="ml-2 d-flex align-items-center align-self-start">
{{#required}}
<div class="text-danger" title="{{#str}}required{{/str}}">
{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
</div>
{{/required}}
{{{helpbutton}}}
</span>
</div>
@ -52,6 +53,7 @@
</div>
</div>
{{^element.frozen}}
{{#js}}
require(['theme_boost/form-display-errors'], function(module) {
module.enhance({{#quote}}{{element.id}}{{/quote}});

2
lib/form/templates/element-date_selector.mustache
View File

@ -2,7 +2,7 @@
{{$element}}
<fieldset class="m-0 p-0 border-0" id="{{element.id}}">
<legend class="sr-only">{{label}}</legend>
<span class="fdate_selector d-flex">
<span class="fdate_selector d-flex align-items-center">
{{#element.elements}}
{{{separator}}}
{{{html}}}

2
lib/form/templates/element-filemanager.mustache
View File

@ -1,7 +1,7 @@
{{< core_form/element-template }}
{{$label}}
{{^element.hiddenlabel}}
<p id="{{element.id}}_label" class="col-form-label d-inline" aria-hidden="true">
<p id="{{element.id}}_label" class="mb-0 d-inline" aria-hidden="true">
{{{label}}}
</p>
{{/element.hiddenlabel}}

2
lib/form/templates/element-filepicker.mustache
View File

@ -1,7 +1,7 @@
{{< core_form/element-template }}
{{$label}}
{{^element.hiddenlabel}}
<p id="{{element.id}}_label" class="col-form-label d-inline" aria-hidden="true">
<p id="{{element.id}}_label" class="mb-0 d-inline" aria-hidden="true">
{{{label}}}
</p>
{{/element.hiddenlabel}}

2
lib/form/templates/element-group.mustache
View File

@ -1,7 +1,7 @@
{{< core_form/element-template }}
{{$label}}
{{^element.hiddenlabel}}
<p id="{{element.id}}_label" class="col-form-label d-inline" aria-hidden="true">
<p id="{{element.id}}_label" class="mb-0 word-break" aria-hidden="true">
{{{label}}}
</p>
{{/element.hiddenlabel}}

2
lib/form/templates/element-passwordunmask.mustache
View File

@ -63,7 +63,7 @@
>
</span>
{{^ element.frozen }}
<a href="#" data-passwordunmask="edit" title="{{ edithint }}">
<a href="#" class="form-control" data-passwordunmask="edit" title="{{ edithint }}">
{{/ element.frozen }}
<span data-passwordunmask="displayvalue">{{> core_form/element-passwordunmask-fill }}</span>
{{^ element.frozen }}

51
lib/form/templates/element-radio.mustache
View File

@ -19,30 +19,33 @@
{{/text}}
</div>
<div class="col-md-9 checkbox">
<div class="form-check">
<span>
<label class="form-check-label">
{{^element.hardfrozen}}{{#element.frozen}}{{#element.checked}}
<input type="hidden" name="{{element.name}}" value="{{element.value}}">
{{/element.checked}}{{/element.frozen}}{{/element.hardfrozen}}
<input type="radio" class="form-check-input" {{^element.frozen}}name="{{element.name}}"{{/element.frozen}}
id="{{element.id}}" value="{{element.value}}"
{{#element.checked}}checked{{/element.checked}}
{{#element.frozen}}disabled{{/element.frozen}}
{{#error}}
autofocus aria-describedby="{{element.iderror}}"
{{/error}} {{{element.attributes}}} >
{{#text}}
{{{.}}}
{{/text}}
{{^text}}
{{{label}}}
{{/text}}
</label>
{{#required}}<abbr class="initialism text-danger" title="{{#str}}required{{/str}}">{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}</abbr>{{/required}}
{{#advanced}}<abbr class="initialism text-info" title="{{#str}}advanced{{/str}}">!</abbr>{{/advanced}}
{{{helpbutton}}}
</span>
<div class="form-check d-flex">
<label class="form-check-label">
{{^element.hardfrozen}}{{#element.frozen}}{{#element.checked}}
<input type="hidden" name="{{element.name}}" value="{{element.value}}">
{{/element.checked}}{{/element.frozen}}{{/element.hardfrozen}}
<input type="radio" class="form-check-input" {{^element.frozen}}name="{{element.name}}"{{/element.frozen}}
id="{{element.id}}" value="{{element.value}}"
{{#element.checked}}checked{{/element.checked}}
{{#element.frozen}}disabled{{/element.frozen}}
{{#error}}
autofocus aria-describedby="{{element.iderror}}"
{{/error}} {{{element.attributes}}} >
{{#text}}
{{{.}}}
{{/text}}
{{^text}}
{{{label}}}
{{/text}}
</label>
<span class="ml-2 d-flex align-items-center align-self-start">
{{#required}}
<div class="text-danger" title="{{#str}}required{{/str}}">
{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
</div>
{{/required}}
{{{helpbutton}}}
</span>
</div>
<div class="form-control-feedback invalid-feedback" id="{{element.iderror}}" {{#error}} style="display: block;"{{/error}}>
{{{error}}}

5
lib/form/templates/element-template-inline.mustache
View File

@ -4,11 +4,6 @@
{{{label}}}
</label>
{{/label}}
<span>
{{{helpbutton}}}
{{#required}}<abbr class="initialism text-danger" title="{{#str}}required{{/str}}">{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}</abbr>{{/required}}
{{#advanced}}<abbr class="initialism text-info" title="{{#str}}advanced{{/str}}">!</abbr>{{/advanced}}
</span>
<span data-fieldtype="{{element.type}}">
{{$ element }}
<!-- Element goes here -->

21
lib/form/templates/element-template.mustache
View File

@ -43,26 +43,29 @@
}
}}
<div id="{{element.wrapperid}}" class="form-group row {{#error}}has-danger{{/error}} fitem {{#element.emptylabel}}femptylabel{{/element.emptylabel}} {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}" {{#element.groupname}}data-groupname="{{.}}"{{/element.groupname}}>
<div class="col-md-3">
<span class="float-sm-right text-nowrap">
{{#required}}<abbr class="initialism text-danger" title="{{#str}}required{{/str}}">{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}</abbr>{{/required}}
{{#advanced}}<abbr class="initialism text-info" title="{{#str}}advanced{{/str}}">!</abbr>{{/advanced}}
{{{helpbutton}}}
</span>
<div class="col-md-3 col-form-label d-flex pb-0 pr-md-0">
{{# label}}{{$ label }}
{{^element.staticlabel}}
<label class="col-form-label d-inline {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">
<label class="d-inline word-break {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">
{{{label}}}
</label>
{{/element.staticlabel}}
{{#element.staticlabel}}
<span class="col-form-label d-inline-block {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}">
<span class="d-inline-block {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}">
{{{label}}}
</span>
{{/element.staticlabel}}
{{/ label }}{{/ label}}
<span class="ml-1 ml-md-auto d-flex align-items-center align-self-start">
{{#required}}
<div class="text-danger" title="{{#str}}required{{/str}}">
{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
</div>
{{/required}}
{{{helpbutton}}}
</span>
</div>
<div class="col-md-9 form-inline felement" data-fieldtype="{{element.type}}">
<div class="col-md-9 form-inline align-items-start felement" data-fieldtype="{{element.type}}">
{{$ element }}
<!-- Element goes here -->
{{/ element }}

4
theme/boost/scss/moodle/core.scss
View File

@ -2486,6 +2486,10 @@ body.h5p-embed {
overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
}
.word-break {
word-break: break-word !important; /* stylelint-disable-line declaration-no-important */
}
.z-index-0 {
z-index: 0 !important; /* stylelint-disable-line declaration-no-important */
}

4
theme/boost/style/moodle.css
View File

@ -11661,6 +11661,10 @@ body.h5p-embed .h5pmessages {
overflow-wrap: break-word !important;
/* stylelint-disable-line declaration-no-important */ }
.word-break {
word-break: break-word !important;
/* stylelint-disable-line declaration-no-important */ }
.z-index-0 {
z-index: 0 !important;
/* stylelint-disable-line declaration-no-important */ }

4
theme/classic/style/moodle.css
View File

@ -11871,6 +11871,10 @@ body.h5p-embed .h5pmessages {
overflow-wrap: break-word !important;
/* stylelint-disable-line declaration-no-important */ }
.word-break {
word-break: break-word !important;
/* stylelint-disable-line declaration-no-important */ }
.z-index-0 {
z-index: 0 !important;
/* stylelint-disable-line declaration-no-important */ }