From 4d181cafa5d80d77500883d88f774128c99d5b4d Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Tue, 27 Oct 2020 13:44:02 +0100
Subject: [PATCH] MDL-69453 core_form: improve form UI icons and alignment

---
 .../templates/element-advcheckbox.mustache    | 10 ++--
 lib/form/templates/element-checkbox.mustache  | 14 ++---
 .../templates/element-date_selector.mustache  |  2 +-
 .../templates/element-filemanager.mustache    |  2 +-
 .../templates/element-filepicker.mustache     |  2 +-
 lib/form/templates/element-group.mustache     |  2 +-
 .../templates/element-passwordunmask.mustache |  2 +-
 lib/form/templates/element-radio.mustache     | 51 ++++++++++---------
 .../element-template-inline.mustache          |  5 --
 lib/form/templates/element-template.mustache  | 21 ++++----
 theme/boost/scss/moodle/core.scss             |  4 ++
 theme/boost/style/moodle.css                  |  4 ++
 theme/classic/style/moodle.css                |  4 ++
 13 files changed, 71 insertions(+), 52 deletions(-)

diff --git a/lib/form/templates/element-advcheckbox.mustache b/lib/form/templates/element-advcheckbox.mustache
index e775939fb55..d64ad69daf5 100644
--- a/lib/form/templates/element-advcheckbox.mustache
+++ b/lib/form/templates/element-advcheckbox.mustache
@@ -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>
diff --git a/lib/form/templates/element-checkbox.mustache b/lib/form/templates/element-checkbox.mustache
index 0e5e186a12a..4aacd4fa263 100644
--- a/lib/form/templates/element-checkbox.mustache
+++ b/lib/form/templates/element-checkbox.mustache
@@ -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}});
diff --git a/lib/form/templates/element-date_selector.mustache b/lib/form/templates/element-date_selector.mustache
index 1f3897d7ea9..a7176b14d55 100644
--- a/lib/form/templates/element-date_selector.mustache
+++ b/lib/form/templates/element-date_selector.mustache
@@ -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}}}
diff --git a/lib/form/templates/element-filemanager.mustache b/lib/form/templates/element-filemanager.mustache
index f2607ebb8a6..23dd2717d4a 100644
--- a/lib/form/templates/element-filemanager.mustache
+++ b/lib/form/templates/element-filemanager.mustache
@@ -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}}
diff --git a/lib/form/templates/element-filepicker.mustache b/lib/form/templates/element-filepicker.mustache
index 579cf20e707..9d6ff8b817b 100644
--- a/lib/form/templates/element-filepicker.mustache
+++ b/lib/form/templates/element-filepicker.mustache
@@ -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}}
diff --git a/lib/form/templates/element-group.mustache b/lib/form/templates/element-group.mustache
index d5cca77a707..af36dc0018c 100644
--- a/lib/form/templates/element-group.mustache
+++ b/lib/form/templates/element-group.mustache
@@ -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}}
diff --git a/lib/form/templates/element-passwordunmask.mustache b/lib/form/templates/element-passwordunmask.mustache
index 999ee728d61..918f7a4ff21 100644
--- a/lib/form/templates/element-passwordunmask.mustache
+++ b/lib/form/templates/element-passwordunmask.mustache
@@ -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 }}
diff --git a/lib/form/templates/element-radio.mustache b/lib/form/templates/element-radio.mustache
index b0d5d730630..17e557e9809 100644
--- a/lib/form/templates/element-radio.mustache
+++ b/lib/form/templates/element-radio.mustache
@@ -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}}}
diff --git a/lib/form/templates/element-template-inline.mustache b/lib/form/templates/element-template-inline.mustache
index b8f3c481f69..b7b61a09273 100644
--- a/lib/form/templates/element-template-inline.mustache
+++ b/lib/form/templates/element-template-inline.mustache
@@ -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 -->
diff --git a/lib/form/templates/element-template.mustache b/lib/form/templates/element-template.mustache
index d9528fabd0e..afa6576b9f7 100644
--- a/lib/form/templates/element-template.mustache
+++ b/lib/form/templates/element-template.mustache
@@ -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 }}
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index bf6f07a6198..ca671178d1c 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -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 */
 }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 59f212a7711..7d3042910b8 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -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 */ }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index cf7cc900ff4..69a3252e19f 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -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 */ }
-- 
2.17.1