From f10ae4676d69a4f4c9520c73734b37f803a5fbdd Mon Sep 17 00:00:00 2001
From: Damyon Wiese <damyon@moodle.com>
Date: Mon, 14 Nov 2016 14:36:40 +0800
Subject: [PATCH] MDL-56193 enrol: Modernise the enrol users popup

This just injects bootstrap classes into the old yui2 thing. It needs
rewriting.
---
 .../assets/skins/sam/quickenrolment.css       | 140 ++----------------
 .../yui/quickenrolment/quickenrolment.js      |  44 +++---
 theme/boost/scss/moodle/buttons.scss          |  12 --
 theme/boost/scss/moodle/core.scss             |   8 -
 theme/boost/scss/moodle/expendable.scss       |   2 -
 theme/bootstrapbase/less/moodle/buttons.less  |  12 --
 theme/bootstrapbase/style/moodle.css          |  14 --
 7 files changed, 36 insertions(+), 196 deletions(-)

diff --git a/enrol/manual/yui/quickenrolment/assets/skins/sam/quickenrolment.css b/enrol/manual/yui/quickenrolment/assets/skins/sam/quickenrolment.css
index 20076cc89f8..34e12c5b5b3 100644
--- a/enrol/manual/yui/quickenrolment/assets/skins/sam/quickenrolment.css
+++ b/enrol/manual/yui/quickenrolment/assets/skins/sam/quickenrolment.css
@@ -37,12 +37,7 @@ Structure of the user enroller panel
 
 .user-enroller-panel {
     width: 400px;
-    background-color: #666;
     position: absolute;
-    top: 10%;
-    left: 10%;
-    border: 1px solid #666;
-    border-width: 0 5px 5px 0;
 }
 
 .user-enroller-panel.hidden {
@@ -50,57 +45,22 @@ Structure of the user enroller panel
 }
 
 .user-enroller-panel .uep-wrap {
-    margin-top: -5px;
-    margin-left: -5px;
-    background-color: #fff;
-    border: 1px solid #999;
     height: inherit;
 }
 
-.user-enroller-panel .uep-header {
-    background-color: #eee;
-    padding: 1px;
+.user-enroller-panel .uep-search-results .user .count {
+    display: none;
 }
 
-.user-enroller-panel .uep-header h2 {
-    margin: 3px 1em 0.5em 1em;
-    font-size: 1em;
-}
-
-.user-enroller-panel .uep-header .close {
-    width: 25px;
-    height: 15px;
-    position: absolute;
-    top: 2px;
-    right: 1em;
-    cursor: pointer;
-    background: url("sprite.png") no-repeat scroll 0 0 transparent;
+.user-enroller-panel .uep-search-results .cohort .count {
+    display: none;
 }
 
 .user-enroller-panel .uep-content {
-    text-align: center;
     position: relative;
     width: 100%;
-    border-top: 1px solid #999;
-    border-bottom: 1px solid #999;
-}
-
-.user-enroller-panel .uep-content .uep-controls {
-    margin: 0;
-    padding: 3px;
-    background-color: #ddd;
-    text-align: left;
-    border-bottom: 1px solid #bbb;
-}
-
-.user-enroller-panel .uep-content .uep-controls label {
-    display: inline;
-    padding-right: 5px;
-}
-
-.user-enroller-panel .uep-content .uep-controls .uep-enrolment-option input {
-    vertical-align: middle;
-    margin-left: 1em;
+    box-sizing: border-box;
+    max-height: 1000px;
 }
 
 .user-enroller-panel .uep-ajax-content {
@@ -108,39 +68,6 @@ Structure of the user enroller panel
     overflow: auto;
 }
 
-.user-enroller-panel .uep-search-results .totalusers {
-    background-color: #eee;
-    padding: 5px;
-    border-bottom: 1px solid #bbb;
-    font-size: 7pt;
-    font-weight: bold;
-}
-
-.user-enroller-panel .uep-search-results .user {
-    width: 100%;
-    text-align: left;
-    font-size: 9pt;
-    border-bottom: 1px solid #ddd;
-    border-top: 1px solid #eee;
-}
-
-.user-enroller-panel .uep-search-results .user.odd {
-    border-bottom: 1px solid #ddd;
-    border-top: 1px solid #eee;
-    background-color: #f9f9f9;
-}
-
-.user-enroller-panel .uep-search-results .user .count {
-    width: 20px;
-    float: left;
-    font-size: 7pt;
-    line-height: 41px;
-    border-right: 1px solid #ddd;
-    background-color: #eee;
-    text-align: right;
-    padding: 2px;
-}
-
 .user-enroller-panel .uep-search-results .user .picture {
     width: 45px;
     float: left;
@@ -148,14 +75,13 @@ Structure of the user enroller panel
 }
 
 .user-enroller-panel .uep-search-results .user .details {
-    width: 250px;
+    width: 180px;
     float: left;
     margin: 3px;
 }
 
 .user-enroller-panel .uep-search-results .user .options {
     padding-right: 7px;
-    font-size: 8pt;
     margin: 3px;
 }
 
@@ -165,56 +91,21 @@ Structure of the user enroller panel
     cursor: pointer;
 }
 
-.user-enroller-panel .uep-search-results .user.enrolled .count {
-    width: 40px;
-    color: #eee;
-}
-
-.user-enroller-panel .uep-search-results .uep-more-results {
-    background-color: #eee;
-    padding: 5px;
-    border-top: 1px solid #bbb;
-}
-
-.user-enroller-panel .uep-search-results .totalcohorts {
-    background-color: #eee;
-    padding: 5px;
-    border-bottom: 1px solid #bbb;
-    font-size: 7pt;
-    font-weight: bold;
-}
-
 .user-enroller-panel .uep-search-results .cohort {
     width: 100%;
     text-align: left;
-    font-size: 9pt;
-    border-bottom: 1px solid #ddd;
-    border-top: 1px solid #eee;
 }
 
 .user-enroller-panel .uep-search-results .cohort .count {
-    width: 20px;
-    float: left;
-    font-size: 7pt;
-    line-height: 27px;
-    border-right: 1px solid #ddd;
-    background-color: #eee;
-    text-align: right;
-    padding: 2px;
+    display: none;
 }
 
 .user-enroller-panel .uep-search-results .cohort .details {
-    width: 250px;
+    width: 180px;
     float: left;
     margin: 5px;
 }
 
-.user-enroller-panel .uep-search-results .cohort .options {
-    padding-right: 7px;
-    font-size: 8pt;
-    margin: 3px;
-}
-
 .user-enroller-panel .uep-search-results .cohort .options .enrol {
     margin: 3px;
     float: right;
@@ -223,16 +114,15 @@ Structure of the user enroller panel
 
 .user-enroller-panel .uep-search-results .cohort.enrolled .count {
     width: 40px;
-    color: #eee;
 }
 
 .user-enroller-panel .uep-loading-lightbox {
     position: absolute;
     width: 100%;
     height: 100%;
+    background-color: #ddd;
     top: 0;
     left: 0;
-    background-color: #fff;
     min-width: 50px;
     min-height: 50px;
 }
@@ -245,12 +135,11 @@ Structure of the user enroller panel
     margin: auto;
     vertical-align: middle;
     margin-top: 125px;
+    display: block;
 }
 
 .user-enroller-panel .uep-footer {
-    padding: 3px;
-    background-color: #ddd;
-    text-align: center;
+    text-align: right;
 }
 
 .user-enroller-panel .uep-search {
@@ -263,7 +152,6 @@ Structure of the user enroller panel
 
 .user-enroller-panel .uep-search input {
     width: 50%;
-    margin: 0 0 10px 5px;
 }
 
 .user-enroller-panel .uep-search input.uep-search-btn {
@@ -285,8 +173,8 @@ Structure of the user enroller panel
 }
 
 .user-enroller-panel .collapsiblearea {
-    border: 1px solid #bbb;
-    background-color: #f6f6f6;
+    border: 1px solid #ddd;
+    padding: 0.5rem;
 }
 
 .user-enroller-panel .collapsiblearea.hidden {
diff --git a/enrol/manual/yui/quickenrolment/quickenrolment.js b/enrol/manual/yui/quickenrolment/quickenrolment.js
index 012cafb0415..8f235cc1f26 100644
--- a/enrol/manual/yui/quickenrolment/quickenrolment.js
+++ b/enrol/manual/yui/quickenrolment/quickenrolment.js
@@ -32,7 +32,7 @@ YUI.add('moodle-enrol_manual-quickenrolment', function(Y) {
     /** CSS classes for nodes in structure **/
     var CSS = {
         PANEL : 'user-enroller-panel',
-        WRAP : 'uep-wrap',
+        WRAP : 'uep-wrap modal-dialog',
         HEADER : 'uep-header',
         CONTENT : 'uep-content',
         AJAXCONTENT : 'uep-ajax-content',
@@ -90,33 +90,33 @@ YUI.add('moodle-enrol_manual-quickenrolment', function(Y) {
             if (this.get(UEP.DISABLEGRADEHISTORY) != true) {
                 recovergrades = create('<div class="'+CSS.ENROLMENTOPTION+' '+CSS.RECOVERGRADES+'"></div>')
                     .append(create('<label class="'+CSS.RECOVERGRADESTITLE+'" for="'+CSS.RECOVERGRADES+'">'+M.util.get_string('recovergrades', 'enrol')+'</label>'))
-                    .append(create('<input type="checkbox" id="'+CSS.RECOVERGRADES+'" name="'+CSS.RECOVERGRADES+'"'+ this.get(UEP.RECOVERGRADESDEFAULT) +' />'))
+                    .append(create('<input type="checkbox" class="m-x-1" id="'+CSS.RECOVERGRADES+'" name="'+CSS.RECOVERGRADES+'"'+ this.get(UEP.RECOVERGRADESDEFAULT) +' />'))
             }
 
             this.set(UEP.BASE, create('<div class="'+CSS.PANEL+' '+CSS.HIDDEN+'"></div>')
-                .append(create('<div class="'+CSS.WRAP+'"></div>')
-                    .append(create('<div class="'+CSS.HEADER+' header"></div>')
-                        .append(create('<div class="'+CSS.CLOSE+'"></div>'))
-                        .append(create('<h2>'+M.util.get_string('enrolusers', 'enrol')+'</h2>')))
-                    .append(create('<div class="'+CSS.CONTENT+'"></div>')
-                        .append(create('<div class="'+CSS.SEARCHCONTROLS+'"></div>')
+                .append(create('<div class="'+CSS.WRAP+' modal show modal-dialog modal-content"></div>')
+                    .append(create('<div class="'+CSS.HEADER+' header modal-header"></div>')
+                        .append(create('<div class="'+CSS.CLOSE+'">&times;</div>'))
+                        .append(create('<h2 class="modal-title">'+M.util.get_string('enrolusers', 'enrol')+'</h2>')))
+                    .append(create('<div class="'+CSS.CONTENT+' modal-body"></div>')
+                        .append(create('<div class="'+CSS.SEARCHCONTROLS+' form-inline"></div>')
                             .append(create('<div class="'+CSS.ENROLMENTOPTION+' '+CSS.ROLE+'"><label for="id_enrol_manual_assignable_roles">'+M.util.get_string('assignroles', 'role')+'</label></div>')
-                                    .append(create('<select id="id_enrol_manual_assignable_roles"><option value="">'+M.util.get_string('none', 'enrol')+'</option></select>'))
+                                    .append(create('<select id="id_enrol_manual_assignable_roles" class="custom-select"><option value="">'+M.util.get_string('none', 'enrol')+'</option></select>'))
                             )
-                            .append(create('<div class="'+CSS.ENTITYSELECTOR+'"></div>'))
+                            .append(create('<div class="'+CSS.ENTITYSELECTOR+' m-y-1"></div>'))
                             .append(create('<div class="'+CSS.SEARCHOPTIONS+'"></div>')
                                 .append(create('<div class="'+CSS.COLLAPSIBLEHEADING+'"><img alt="" />'+M.util.get_string('enrolmentoptions', 'enrol')+'</div>'))
                                 .append(create('<div class="'+CSS.COLLAPSIBLEAREA+' '+CSS.HIDDEN+'"></div>')
                                     .append(recovergrades)
                                     .append(create('<div class="'+CSS.ENROLMENTOPTION+' '+CSS.STARTDATE+'">'+M.util.get_string('startingfrom', 'moodle')+'</div>')
-                                        .append(create('<select></select>')))
+                                        .append(create('<select class="custom-select"></select>')))
                                     .append(create('<div class="'+CSS.ENROLMENTOPTION+' '+CSS.DURATION+'">'+M.util.get_string('enrolperiod', 'enrol')+'</div>')
-                                        .append(create('<select><option value="0" selected="selected">'+M.util.get_string('unlimitedduration', 'enrol')+'</option></select>')))
+                                        .append(create('<select class="custom-select"><option value="0" selected="selected">'+M.util.get_string('unlimitedduration', 'enrol')+'</option></select>')))
                                 )
                             )
                             .append(create('<div class="'+CSS.SEARCH+'"><label for="enrolusersearch" class="accesshide">'+M.util.get_string('usersearch', 'enrol')+'</label></div>')
-                                .append(create('<input type="text" id="enrolusersearch" value="" />'))
-                                .append(create('<input type="button" id="searchbtn" class="'+CSS.SEARCHBTN+'" value="'+M.util.get_string('usersearch', 'enrol')+'" />'))
+                                .append(create('<input class="form-control" type="text" id="enrolusersearch" value="" />'))
+                                .append(create('<input type="button" id="searchbtn" class="'+CSS.SEARCHBTN+' btn btn-secondary m-l-1" value="'+M.util.get_string('usersearch', 'enrol')+'" />'))
                             )
                         )
                         .append(create('<div class="'+CSS.AJAXCONTENT+'"></div>'))
@@ -124,9 +124,9 @@ YUI.add('moodle-enrol_manual-quickenrolment', function(Y) {
                             .append(create('<img alt="loading" class="'+CSS.LOADINGICON+'" />')
                                 .setAttribute('src', M.util.image_url('i/loading', 'moodle')))
                             .setStyle('opacity', 0.5)))
-                    .append(create('<div class="'+CSS.FOOTER+'"></div>')
+                    .append(create('<div class="'+CSS.FOOTER+' modal-footer"></div>')
                         .append(create('<div class="'+CSS.CLOSEBTN+'"></div>')
-                            .append(create('<input type="button" value="'+M.util.get_string('finishenrollingusers', 'enrol')+'" />'))
+                            .append(create('<input type="button" class="btn btn-primary" value="'+M.util.get_string('finishenrollingusers', 'enrol')+'" />'))
                         )
                     )
                 )
@@ -151,9 +151,9 @@ YUI.add('moodle-enrol_manual-quickenrolment', function(Y) {
 
             if (this.get(UEP.COHORTSAVAILABLE)) {
                 this.get(UEP.BASE).one('.'+CSS.ENTITYSELECTOR)
-                    .append(create('<input type="radio" id="id_enrol_manual_entity_users" name="enrol_manual_entity" value="users" checked="checked"/>'))
+                    .append(create('<input type="radio" id="id_enrol_manual_entity_users" name="enrol_manual_entity" value="users" class="m-r-1" checked="checked"/>'))
                     .append(create('<label for="id_enrol_manual_entity_users">'+ M.util.get_string('browseusers', 'enrol_manual')+'</label>'))
-                    .append(create('<input type="radio" id="id_enrol_manual_entity_cohorts" name="enrol_manual_entity" value="cohorts"/>'))
+                    .append(create('<input type="radio" id="id_enrol_manual_entity_cohorts" name="enrol_manual_entity" class="m-x-1" value="cohorts"/>'))
                     .append(create('<label for="id_enrol_manual_entity_cohorts">'+M.util.get_string('browsecohorts', 'enrol_manual')+'</label>'));
                 this.get(UEP.BASE).one('#id_enrol_manual_entity_cohorts').on('change', this.search, this);
                 this.get(UEP.BASE).one('#id_enrol_manual_entity_users').on('change', this.search, this);
@@ -397,7 +397,7 @@ YUI.add('moodle-enrol_manual-quickenrolment', function(Y) {
             }
             var users;
             if (!args.append) {
-                users = create('<div class="'+CSS.USERS+'"></div>');
+                users = create('<div class="'+CSS.USERS+' list-group"></div>');
             } else {
                 users = this.get(UEP.BASE).one('.'+CSS.SEARCHRESULTS+' .'+CSS.USERS);
             }
@@ -405,7 +405,7 @@ YUI.add('moodle-enrol_manual-quickenrolment', function(Y) {
             for (var i in result.response.users) {
                 count++;
                 var user = result.response.users[i];
-                users.append(create('<div class="'+CSS.USER+' clearfix" rel="'+user.id+'"></div>')
+                users.append(create('<div class="'+CSS.USER+' clearfix list-group-item list-group-item-action" rel="'+user.id+'"></div>')
                     .addClass((count%2)?CSS.ODD:CSS.EVEN)
                     .append(create('<div class="'+CSS.COUNT+'">'+count+'</div>'))
                     .append(create('<div class="'+CSS.PICTURE+'"></div>')
@@ -414,7 +414,7 @@ YUI.add('moodle-enrol_manual-quickenrolment', function(Y) {
                         .append(create('<div class="'+CSS.FULLNAME+'">'+user.fullname+'</div>'))
                         .append(create('<div class="'+CSS.EXTRAFIELDS+'">'+user.extrafields+'</div>')))
                     .append(create('<div class="'+CSS.OPTIONS+'"></div>')
-                        .append(create('<input type="button" class="'+CSS.ENROL+'" value="'+M.util.get_string('enrol', 'enrol')+'" />')))
+                        .append(create('<input type="button" class="'+CSS.ENROL+' btn btn-secondary" value="'+M.util.get_string('enrol', 'enrol')+'" />')))
                 );
             }
             this.set(UEP.USERCOUNT, count);
@@ -464,7 +464,7 @@ YUI.add('moodle-enrol_manual-quickenrolment', function(Y) {
                     .append(create('<div class="'+CSS.DETAILS+'"></div>')
                         .append(create('<div class="'+CSS.COHORTNAME+'">'+cohort.name+'</div>')))
                     .append(create('<div class="'+CSS.OPTIONS+'"></div>')
-                        .append(create('<input type="button" class="' + CSS.ENROL + '" value="' + M.util.get_string('enrolxusers', 'enrol', cohort.cnt) + '" />')))
+                        .append(create('<input type="button" class="' + CSS.ENROL + ' btn btn-secondary" value="' + M.util.get_string('enrolxusers', 'enrol', cohort.cnt) + '" />')))
                 );
             }
             this.set(UEP.COHORTCOUNT, count);
diff --git a/theme/boost/scss/moodle/buttons.scss b/theme/boost/scss/moodle/buttons.scss
index cb33500824b..9f7c1a85692 100644
--- a/theme/boost/scss/moodle/buttons.scss
+++ b/theme/boost/scss/moodle/buttons.scss
@@ -46,15 +46,3 @@ p.arrow_button {
     margin: 0 0 10px 5px;
 }
 
-.user-enroller-panel {
-    .uep-search-results {
-        .user,
-        .cohort {
-            .options {
-                .enrol {
-                    @extend .btn-sm;
-                }
-            }
-        }
-    }
-}
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 18a504e4ccd..bfe738f1ca8 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -1086,14 +1086,6 @@ tr.flagged-tag a {
         @extend .card;
         @extend .card-block;
     }
-
-    .user-enroller-panel .uep-search-results .user .details {
-        width: 237px;
-    }
-
-    .user-enroller-panel .uep-search-results .cohort .details {
-        width: 237px;
-    }
 }
 
 #page-enrol-users .enrol-users-page-action input {
diff --git a/theme/boost/scss/moodle/expendable.scss b/theme/boost/scss/moodle/expendable.scss
index fc97402f585..bcf54517408 100644
--- a/theme/boost/scss/moodle/expendable.scss
+++ b/theme/boost/scss/moodle/expendable.scss
@@ -32,8 +32,6 @@ table#listdirectories {
     @extend .table-sm;
 }
 
-.user-enroller-panel .uep-search-results .users,
-.user-enroller-panel .uep-search-results .cohorts,
 table.grading-report,
 .forumheaderlist,
 .generaltable,
diff --git a/theme/bootstrapbase/less/moodle/buttons.less b/theme/bootstrapbase/less/moodle/buttons.less
index de9d52a7397..326f4177095 100644
--- a/theme/bootstrapbase/less/moodle/buttons.less
+++ b/theme/bootstrapbase/less/moodle/buttons.less
@@ -113,15 +113,3 @@ button {
     }
 }
 
-.user-enroller-panel {
-    .uep-search-results {
-        .user,
-        .cohort {
-            .options {
-                .enrol {
-                    .btn-mini
-                }
-            }
-        }
-    }
-}
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 47fdf0b04a4..7c091d0a004 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -15878,20 +15878,6 @@ button.yui3-button.closebutton {
 button.yui3-button.closebutton:hover {
   background-position: 0 0;
 }
-.user-enroller-panel .uep-search-results .user .options .enrol,
-.user-enroller-panel .uep-search-results .cohort .options .enrol {
-  padding: 0 6px;
-  font-size: 10.5px;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-.user-enroller-panel .uep-search-results .user .options .enrol .label,
-.user-enroller-panel .uep-search-results .cohort .options .enrol .label,
-.user-enroller-panel .uep-search-results .user .options .enrol .badge,
-.user-enroller-panel .uep-search-results .cohort .options .enrol .badge {
-  top: 0;
-}
 .gradetreebox h4 {
   font-size: 14px;
 }