Commit f10ae467 authored by Damyon Wiese's avatar Damyon Wiese
Browse files

MDL-56193 enrol: Modernise the enrol users popup

This just injects bootstrap classes into the old yui2 thing. It needs
rewriting.
parent b09db258
......@@ -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-header h2 {
margin: 3px 1em 0.5em 1em;
font-size: 1em;
.user-enroller-panel .uep-search-results .user .count {
display: none;
}
.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 {
......
......@@ -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);
......
......@@ -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;
}
}
}
}
}
......@@ -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 {
......
......@@ -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,
......
......@@ -113,15 +113,3 @@ button {
}
}
.user-enroller-panel {
.uep-search-results {
.user,
.cohort {
.options {
.enrol {
.btn-mini
}
}
}
}
}
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment