From 2e1c739a28befeaf54ed7f5a95abbd1ad40e963a Mon Sep 17 00:00:00 2001
From: Simey Lameze <simey@moodle.com>
Date: Mon, 31 Oct 2016 12:23:15 +0800
Subject: [PATCH] MDL-56652 core_roles: Add BS4 styling to define roles form

---
 admin/roles/allow.php                         |  3 +-
 .../classes/define_role_table_advanced.php    | 49 +++++++++++++------
 .../roles/classes/define_role_table_basic.php |  3 +-
 admin/roles/define.php                        |  2 +-
 admin/roles/module.js                         |  8 +--
 theme/bootstrapbase/less/moodle/admin.less    |  4 ++
 theme/bootstrapbase/style/moodle.css          |  3 ++
 7 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/admin/roles/allow.php b/admin/roles/allow.php
index 383455e0d27..45f8b885660 100644
--- a/admin/roles/allow.php
+++ b/admin/roles/allow.php
@@ -80,7 +80,8 @@ echo $OUTPUT->box($controller->get_intro_text());
 echo '<form action="' . $baseurl . '" method="post">';
 echo '<input type="hidden" name="sesskey" value="' . sesskey() . '" />';
 echo html_writer::table($table);
-echo '<div class="buttons"><input type="submit" name="submit" value="'.get_string('savechanges').'"/>';
+echo '<div class="submitbuttons">';
+echo '<input type="submit" class="btn btn-primary" name="submit" value="' . get_string('savechanges') . '"/>';
 echo '</div></form>';
 
 echo $OUTPUT->footer();
diff --git a/admin/roles/classes/define_role_table_advanced.php b/admin/roles/classes/define_role_table_advanced.php
index eb46c76be9e..303855bb107 100644
--- a/admin/roles/classes/define_role_table_advanced.php
+++ b/admin/roles/classes/define_role_table_advanced.php
@@ -471,15 +471,17 @@ class core_role_define_role_table_advanced extends core_role_capability_table_wi
     }
 
     protected function get_name_field($id) {
-        return '<input type="text" id="' . $id . '" name="' . $id . '" maxlength="254" value="' . s($this->role->name) . '" />';
+        return '<input type="text" class="form-control" id="' . $id . '" name="' . $id . '" size="30"
+            value="' . s($this->role->name) . '" />';
     }
 
     protected function get_shortname_field($id) {
-        return '<input type="text" id="' . $id . '" name="' . $id . '" maxlength="254" value="' . s($this->role->shortname) . '" />';
+        return '<input type="text" class="form-control" id="' . $id . '" name="' . $id . '" size="30"
+            value="' . s($this->role->shortname) . '" />';
     }
 
     protected function get_description_field($id) {
-        return '<textarea class="form-textarea" id="'. s($id) .'" name="description" rows="10" cols="50">' .
+        return '<textarea class="form-textarea form-control" id="'. s($id) .'" name="description" rows="10" cols="50">' .
             htmlspecialchars($this->role->description) .
             '</textarea>';
     }
@@ -490,7 +492,8 @@ class core_role_define_role_table_advanced extends core_role_capability_table_wi
         foreach (get_role_archetypes() as $type) {
             $options[$type] = get_string('archetype'.$type, 'role');
         }
-        return html_writer::select($options, 'archetype', $this->role->archetype, false);
+        return html_writer::select($options, 'archetype', $this->role->archetype, false,
+            array('class' => 'custom-select'));
     }
 
     protected function get_assignable_levels_control() {
@@ -563,7 +566,8 @@ class core_role_define_role_table_advanced extends core_role_capability_table_wi
         if ($this->roleid == 0) {
             $options[-1] = get_string('thisnewrole', 'core_role');
         }
-        return html_writer::select($options, 'allow'.$type.'[]', $selected, false, array('multiple'=>'multiple', 'size'=>10));
+        return html_writer::select($options, 'allow'.$type.'[]', $selected, false, array('multiple' => 'multiple',
+            'size' => 10, 'class' => 'form-control'));
     }
 
     /**
@@ -575,11 +579,19 @@ class core_role_define_role_table_advanced extends core_role_capability_table_wi
         return '';
     }
 
-    protected function print_field($name, $caption, $field) {
+    /**
+     * Print labels, fields and help icon on role administration page.
+     *
+     * @param string $name The field name.
+     * @param string $caption The field caption.
+     * @param string $field The field type.
+     * @param null|string $helpicon The help icon content.
+     */
+    protected function print_field($name, $caption, $field, $helpicon = null) {
         global $OUTPUT;
         // Attempt to generate HTML like formslib.
-        echo '<div class="fitem">';
-        echo '<div class="fitemtitle">';
+        echo '<div class="fitem row form-group">';
+        echo '<div class="fitemtitle col-md-3">';
         if ($name) {
             echo '<label for="' . $name . '">';
         }
@@ -587,13 +599,16 @@ class core_role_define_role_table_advanced extends core_role_capability_table_wi
         if ($name) {
             echo "</label>\n";
         }
+        if ($helpicon) {
+            echo '<span class="pull-xs-right text-nowrap">'.$helpicon.'</span>';
+        }
         echo '</div>';
         if (isset($this->errors[$name])) {
             $extraclass = ' error';
         } else {
             $extraclass = '';
         }
-        echo '<div class="felement' . $extraclass . '">';
+        echo '<div class="felement col-md-9 form-inline' . $extraclass . '">';
         echo $field;
         if (isset($this->errors[$name])) {
             echo $OUTPUT->error_text($this->errors[$name]);
@@ -605,7 +620,8 @@ class core_role_define_role_table_advanced extends core_role_capability_table_wi
     protected function print_show_hide_advanced_button() {
         echo '<p class="definenotice">' . get_string('highlightedcellsshowdefault', 'core_role') . ' </p>';
         echo '<div class="advancedbutton">';
-        echo '<input type="submit" name="toggleadvanced" value="' . get_string('hideadvanced', 'form') . '" />';
+        echo '<input type="submit" class="btn btn-secondary" name="toggleadvanced" value="' .
+            get_string('hideadvanced', 'form') . '" />';
         echo '</div>';
     }
 
@@ -613,11 +629,14 @@ class core_role_define_role_table_advanced extends core_role_capability_table_wi
         global $OUTPUT;
         // Extra fields at the top of the page.
         echo '<div class="topfields clearfix">';
-        $this->print_field('shortname', get_string('roleshortname', 'core_role').'&nbsp;'.$OUTPUT->help_icon('roleshortname', 'core_role'), $this->get_shortname_field('shortname'));
-        $this->print_field('name', get_string('customrolename', 'core_role').'&nbsp;'.$OUTPUT->help_icon('customrolename', 'core_role'), $this->get_name_field('name'));
-        $this->print_field('edit-description', get_string('customroledescription', 'core_role').'&nbsp;'.$OUTPUT->help_icon('customroledescription', 'core_role'),
-            $this->get_description_field('description'));
-        $this->print_field('menuarchetype', get_string('archetype', 'core_role').'&nbsp;'.$OUTPUT->help_icon('archetype', 'core_role'), $this->get_archetype_field('archetype'));
+        $this->print_field('shortname', get_string('roleshortname', 'core_role'),
+            $this->get_shortname_field('shortname'), $OUTPUT->help_icon('roleshortname', 'core_role'));
+        $this->print_field('name', get_string('customrolename', 'core_role'), $this->get_name_field('name'),
+            $OUTPUT->help_icon('customrolename', 'core_role'));
+        $this->print_field('edit-description', get_string('customroledescription', 'core_role'),
+            $this->get_description_field('description'), $OUTPUT->help_icon('customroledescription', 'core_role'));
+        $this->print_field('menuarchetype', get_string('archetype', 'core_role'), $this->get_archetype_field('archetype'),
+            $OUTPUT->help_icon('archetype', 'core_role'));
         $this->print_field('', get_string('maybeassignedin', 'core_role'), $this->get_assignable_levels_control());
         $this->print_field('menuallowassign', get_string('allowassign', 'core_role'), $this->get_allow_role_control('assign'));
         $this->print_field('menuallowoverride', get_string('allowoverride', 'core_role'), $this->get_allow_role_control('override'));
diff --git a/admin/roles/classes/define_role_table_basic.php b/admin/roles/classes/define_role_table_basic.php
index 0c3d692d9b7..334937739a9 100644
--- a/admin/roles/classes/define_role_table_basic.php
+++ b/admin/roles/classes/define_role_table_basic.php
@@ -37,7 +37,8 @@ class core_role_define_role_table_basic extends core_role_define_role_table_adva
 
     protected function print_show_hide_advanced_button() {
         echo '<div class="advancedbutton">';
-        echo '<input type="submit" name="toggleadvanced" value="' . get_string('showadvanced', 'form') . '" />';
+        echo '<input type="submit" class="btn btn-secondary" name="toggleadvanced"
+            value="' . get_string('showadvanced', 'form') . '" />';
         echo '</div>';
     }
 
diff --git a/admin/roles/define.php b/admin/roles/define.php
index 093c6933d5a..d670bae45d8 100644
--- a/admin/roles/define.php
+++ b/admin/roles/define.php
@@ -252,7 +252,7 @@ if ($action === 'view') {
     echo '<div class="mform">';
 } else {
     ?>
-<form id="rolesform" class="mform" action="<?php p($baseurl->out(false)); ?>" method="post"><div>
+<form id="rolesform" class="mform fcontainer" action="<?php p($baseurl->out(false)); ?>" method="post"><div>
 <input type="hidden" name="sesskey" value="<?php p(sesskey()) ?>" />
 <input type="hidden" name="return" value="<?php p($return); ?>" />
 <input type="hidden" name="resettype" value="none" />
diff --git a/admin/roles/module.js b/admin/roles/module.js
index 9c331f10985..bbfe602dd50 100644
--- a/admin/roles/module.js
+++ b/admin/roles/module.js
@@ -45,17 +45,19 @@ M.core_role.init_cap_table_filter = function(Y, tableid, contextid) {
             this.table = Y.one('#'+this.tableid);
 
             // Create a div to hold the search UI.
-            this.div = Y.Node.create('<div class="capabilitysearchui"></div>').setStyles({
+            this.div = Y.Node.create('<div class="capabilitysearchui form-inline"></div>').setStyles({
                 width : this.table.get('offsetWidth'),
                 marginLeft : 'auto',
                 marginRight : 'auto'
             });
             // Create the capability search input.
-            this.input = Y.Node.create('<input type="text" id="'+this.table.get('id')+'capabilitysearch" value="'+Y.Escape.html(filtervalue)+'" />');
+            this.input = Y.Node.create('<input class="form-control m-x-1" type="text"' +
+                ' id="'+this.table.get('id')+'capabilitysearch" value="'+Y.Escape.html(filtervalue)+'" />');
             // Create a label for the search input.
             this.label = Y.Node.create('<label for="'+this.input.get('id')+'">'+M.util.get_string('filter', 'moodle')+' </label>');
             // Create a clear button to clear the input.
-            this.button = Y.Node.create('<input type="button" value="'+M.util.get_string('clear', 'moodle')+'" />').set('disabled', filtervalue=='');
+            this.button = Y.Node.create('<input type="button" class="btn btn-primary"' +
+                ' value="'+M.util.get_string('clear', 'moodle')+'" />').set('disabled', filtervalue=='');
 
             // Tie it all together
             this.div.append(this.label).append(this.input).append(this.button);
diff --git a/theme/bootstrapbase/less/moodle/admin.less b/theme/bootstrapbase/less/moodle/admin.less
index 192d2cb253f..d0c2ed3a6b9 100644
--- a/theme/bootstrapbase/less/moodle/admin.less
+++ b/theme/bootstrapbase/less/moodle/admin.less
@@ -156,6 +156,10 @@ img.iconsmall {
     margin-right: auto;
 }
 
+.path-admin-roles .capabilitysearchui input[type="button"] {
+    margin-bottom: 0;
+}
+
 #page-admin-roles-define .topfields {
     margin: 1em 0 2em;
 }
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 5f90d483847..b78ed2aba76 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -2751,6 +2751,9 @@ img.iconsmall {
   margin-left: auto;
   margin-right: auto;
 }
+.path-admin-roles .capabilitysearchui input[type="button"] {
+  margin-bottom: 0;
+}
 #page-admin-roles-define .topfields {
   margin: 1em 0 2em;
 }